シニアdeアフィリ③（はてなのエディタの使い方を学ぶ）

こんにちは

ブログ奮闘中のおじさん、昭　平令です。

ブログを始めて記事を書きだしたのはいいが、初めの頃は
カスタマイズに時間を取られてばかりでした。

カスタマイズは適当にスルーすればいいんですけど
おじさんの性分です、気になるととことんいじりたくなりました。

師匠

慣れないから余計時間がかかるのう。

冷静な嫁

時間かけ過ぎです。

昭平令

でも初めの頃は楽しいのだ。

そんな中でも今回は、「はてなブログ」での記事装飾
についてお話しします。

「はてなブログ」のエディタにもある程度記事の装飾機能
はありますが、やはり使っていると何かと不満がでてきます。

そこでいろいろネットで検索しました。
「はてなブログ」の良いところは、利用者が多く大抵の
ことは、調べれば詳しい方が解決してくれます。

文章に下線をひく。

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

はてなの下線

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

htmlで

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

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

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

3pxの数字部分は線の太さを表します。（注:二重線は3px以上を指定しないと、
二重になりません。）

例

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

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

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

昭平令

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

冷静な嫁

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

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

文章を枠で囲む

こちらもhtmlで

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

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

＊例　上記のままですと

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

文字のサイズと色を変える（目立たさせる。）

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

文字の色を変える場合↓

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

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

矢印のボタンで変更

変更可能なサイズは、２００％・１５０％・１００％・８０％の４つ
これでも十分ですが、さらに細かく変更したい場合はhtmlで
編集します。

文字の大きさを変えて目だたさせるようにするhtmlは

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

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

サイズの指定例です。↓

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

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

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

例

サイズ５色redで指定
色とサイズ

サイズ６色greenで指定
色とサイズ

記事に最適な文字サイズ

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にすればさらに大きくなります。

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

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

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

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

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

.entry-content {
    color: #222222;
}

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

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

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

さらに続く

ふう、疲れました。

無知なおじさんが年甲斐もなく、ブログなどに挑戦すると
こんな目に合います。しかもアフィリエイトですと？

いまでもまだまだ分からない事ばかりですが、
本当に初めの頃は、少し記事を書くにも大変でした。

次回もブログを書いていくにあたって、初期に苦労した
設定やらを書いてみます。

それでは。