はてなブログの記事の装飾カスタマイズはこれで十分(wordoressにも使える)

こんにちは

はてなブログのエディタでも、いろいろな記事装飾はできますが、
慣れてくると、やはり物足りなく感じてくるものです。

今回は、はてなエディタではできない、記事で使いたい簡単な文字装
飾方法について紹介してみます。

はてなブログに限らず、wrdpressにも使えますので、覚えておくと
便利です。

目次

文章に下線をひく。

「はてなブログ」のエディタにもアンダーラインは用意されていますが
黒色の実線(1.5pxくらい?)だけしかありません。

はてなの下線

これで十分だ、という方はいいのですがもう少しバリエーションを
増やしたいという方は、

htmlで

<span style="border-bottom: solid 3px #ff0000;">○○○○
</span>

と記述すると、○○○○の下に赤い実線がはいります。
例  ○○○○

・border-bottom:solid は実践           ○○○○
・border-bottom:dotted は点線            ○○○○
・border-bottom:dashed は破線           ○○○○
・border-bottom:double は二重線         ○○○○

3pxの数字部分は線の太さを表します。

ここで注意して欲しいのは、二重線を指定するときは文字の大きさを
2PX以上で指定しないと、二重にならないと言う事。
例えば、doubleで指定して3PX、2PX、1PXにしてみると、

3px    ○○○○
2px    ○○○○
1px    ○○○○

このようになります。

線の色は最後に#ff0000(赤色)のように指定します。
ちなみに私がウェブ上で色を探すのに参照しているのが
こちら(カラーコード一覧表)です。

でも下線でよく使う色は、#ff0000(赤色)、#000000(黒色)
#0000ff(青色)くらいかなぁ。

CSSで登録しよう

上記のhtmlコードをいちいち書き込むのは結構面倒ですよね。

そこで、CSSを使って登録しておけばもっと簡単に利用できます。

例えば、下線に黒の1PXの実線をCSSで記述すると、

.under1 {
border-bottom: solid 1px black;
}

黒の2PXの点線のCSSは

.under2 {
border-bottom: dotted 2px black;
}


このように書きます。

CSS記述の先頭の.under1とか.under2はクラス名と呼ばれる部分ですが、
自信が覚えやすい名前で自由に決められます。ただし、先頭の「.」ピリオド
だけは必ずつけるという決まりがあります。

このCSSをはてなブログの「デザイン」⇒「カスタマイズ」⇒「{}デザイン
CSS」に書き込みます。

上図のCSS書き込み部分をクリックすると、拡大表示画面になりますので

このように、空いている行に書き込めばOKです。

実際にはてなのエディタに書き込む際は、html編集タブを使って、

<span class="under2">点線の下線、黒、2PX</span> 

このように記述すると、

上図のように下線が引けます。

補足

htmlで「.under2」などのクラス名を指定する場合は、「span」の後には
「class」を使います。(例、<span class=””></span>)
また、CSS記述の際は、数字の「0」とローマ字の「o」、数字の「1」と
ローマ字の「l」の書き間違いや、半角スペース「▯」の入れ忘れなどに
注意してください。

昭平令
昭平令

私もしょっちゅう間違ってました。

冷静な嫁
冷静な嫁

慣れるまでは丁寧に入力してください。

htmlもCSSも記述を一文字でも間違えるとうまく表示されません。
はじめはゆっくりでも、丁寧に書いてください。

文章を枠で囲む

こちらもhtmlで

<div style="border-radius:10px;
border:1px solid #006400; 
margin-top: 15px; 
margin-bottom: 15px; 
padding:15px;">囲みたい文章</div>

と長たらしい記述ですが、基本コピペで大丈夫です。
コピペのあと、1px (線の太さ)solid(線の種類)
#006400(色)の部分をそれぞれ好みで変更してください。
(border-radiusは四隅の角を丸くする呪文です。)

*例 上記のままですと

囲みたい文章

↑このようになります。文字数が少ないと余白が目立って
バランスが悪いですが。

CSSでは、クラス名を例えば「.frame1」として登録する。

.frame1 {
border-radius:10px;
border:1px solid #006400; 
margin-top: 15px; 
margin-bottom: 15px; 
padding:15px;
}

そして、htmlで記述する際は、

<div class="frame1">囲みたい文章</div>

と書けば、先ほどの枠が表示されます。

基本的には、上記のCSSで枠線を引くことができます。後は、好み
で太さ色を変え、marginやpaddingの数値を変えてバランスを
とってみればいいかと思います。

文字のサイズと色を変える

「はてなブログ」のエディタでは

文字の色を変える場合↓

範囲を選択して矢印のボタンで変更

文字のサイズを変える場合は↓

矢印のボタンで変更

変更可能なサイズは、200%・150%・100%・80%の4つ
これでも十分ですが、さらに細かく変更したい場合はhtmlで
編集します。

文字の大きさを変えるhtml

<font size="5">フォントサイズ</font>

と簡単です。
数字部分を好みで変更してください。サイズは1~7まで指定
できます。

サイズの指定例です。↓

文字のサイズと色を同時に指定するhtmlは、

<font size="5" color="#ff0000">○○○○</font>

のように記述します。色の指定はカラーコード(ff0000など)でもいいで
すが、簡単にred,green,と英語で指定してもOKです。

(例)

・サイズ5色redで指定

<font size="5" color="red">色とサイズ</font>

色とサイズ

・サイズ6色greenで指定

<font size="6" color="green">色とサイズ</font>

色とサイズ

記事に最適な文字サイズ

googleの推奨する文字サイズは16px以上です。
googleには逆らえませんし、確かに16px,17pxあたりが
読みやすいです。ブログを読んでもらえる人に親切なサイズかなぁ。

「はてなブログ」の記事全体の文字サイズを変更するには?

「設定」→「デザイン」→「カスタマイズ」→「デザインCSS」の
ところに次のCSSを追加します。

.entry-content p {
font-size: 16px;
}

スマホ用に

@media screen and (max-width: 480px){
.entry-content p {
font-size: 16px;
}
}

をコピペすればOKです。
font size: 16pxを17pxにすればさらに大きくなります。

「はてなブログ」のテーマの中には、14pxというのもありますので
お使いのテーマによってサイズを適切に変えて下さい。
14pxだとさすがにおじさんには読みにくい。

ちなみに、このブログはおじさん自身が読みやすいように18pxに
してます。

目に優しく読みやすい文字色は?

「はてなブログ」の文字色は標準でも少しグレーかかっていて読みやすいです。
真っ黒ですとチカチカして目に悪いし、長く見ていると疲れます。

そのままでも問題ないのですが、ここは個性を出して
文字の色を変更してみましょう。

やはりCSSをコピペします。「設定」→「デザイン」→「カスタマイズ」
→「デザインCSS」のところに次のCSSを追加します。

.entry-content {
    color: #222222;
}

ここの#222222の部分を好みで変えればいいわけです。
だいたいグレー系がいいみたいで、代表的なカラーコードは、
「#333333」「#343434」「#353535」「#373737」
「#383838」「#393939」「#222222」あたりがおすすめです。


「#333333」
「#222222」
「#383838」
「#343434」
「#000000」

#000000以外はあまり区別がつきにくいですねぇ。
私は#222222を使ってますが、お使いのブログの背景色や
フォントの種類によって適切な色を選んでください。

文章にマーカーをいれる。

ブログでよく見る蛍光ペンのようなマーカー。

下線だけではものたりない、もう少し文章をオシャレに強調したい
という時に、黄色ピンクのマーカーが使えれば便利ですよね。

まずは「デザインCSS」に次のようなCSSコードを張り付けましょう。

.marker-pink {
background: linear-gradient(transparent 60%, #ffc0cb 60%);
}

.marker-yellow {
background: linear-gradient(transparent 60%, #ffff00 60%);
}

.mark_blue {
background: linear-gradient(transparent 60%, #00bfff 60%);
}

先頭の.marker-pinkクラス名です。ご自身で覚えやすい単語を自由に決めて
ください。(例:「.mark-p」、「.linepink」などなど)

初めの60%の部分がマーカーの太さです。数字が小さいほど太くなります。
その横(#00bfff)がカラーコードです。お好きな色を指定してください。

カラーコードの見本は↓

あわせて読みたい
HTML,CSS?@?J???[?R?[?h?ꗗ?¥?@?b?@?w?i?F?╶???F?̐ݒ? HTML,CSS?@500?F?̃J???[?R?[?h?ꗗ?¥?BW3C?w??16?F??Z?[?t?J???[216?F?ȂǁA?z?[???y?[?W?̃t?H???g?J???[??w?i?F?B?J???[?R?[?h?ꗗ?¥

そして、はてなの記事編集画面のhtml編集を使い、次のように記述します。

するとこのようになります。↓

アイコンフォントを使う

「はてなブログ」にはあらかじめ「blogicon」がセットされており、
118種類のアイコンが使えるようになってます。

(wordpressではFont Awesomeを使う事が多いんですけど、
多少設定が必要になります。)

文字の前にアイコンを付けるhtml↓

このように記述すると

こうなります。

htmlの書き方は、

<p><span class="blogicon-アイコン名">&nbsp;</span>任意の文字</p>

となります。

アイコン名は「Royal Naught」さんのページにある一覧から
選んでください。

&nbsp;は呪文の様なもの、はてなの場合これを入れないとアイコンが
うまく表示されません。

「Royal Naught」さんのページには念のためaria-hidden=”true”を
付け加えるようになってますが、記述数が多くなり面倒なので
省略しても問題なさそうです。

「Royal Naught」さんで勉強させてもらいました。↓

ROYAL NAUGHT
【118種一覧表】はてなブログのフリーフォントアイコンの使いかた/表示されない対策も - ROYAL NAUGHT ブログを簡単に装飾できるフォントアイコンというものがあります。 有名どころだとFont Awesome だと思いますが、はてなブログを使っているかたは、自動的にはてなブログ独...

こちらに、アイコンフォント名とCSSコード名の一覧表もありますので
ぜひご参照ください。

よく使うアイコンはCSSで登録

アイコンフォントの中でもよく使うものは、
CSSコードを「デザインCSS」に記述しておくと便利です。

例えば、

.icon1:before{
font-family: blogicon;
content: "\f017";
}
.icon2:before{ 
font-family: blogicon; 
content: "\f039";
}
.icon3:before{ 
font-family: blogicon; 
content: "\f037"; 
}

と「デザインCSS」に設定しておき
html

と記述するとそれぞれ

このようになります。

まとめ

今回は、はてなブログで記事の装飾方法について紹介しました。

記事装飾の目的は、あくまでも閲覧者に

読みやすい。読まれやすい。

と言う事を忘れないでください。

はるこ
はるこ

あまり装飾をし過ぎると、返って読みにくい記事にな
ってしまいます。

また、HTMLやCSSを書き込む際、見た目の確認が簡単にできる便利な
ウェブアプリもありますので紹介しておきます。

CodePenというサイトですが、コードのテストにはとても重宝します。↓

あわせて読みたい
CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applica...

今回は以上です。

それでは

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次