スポンサーリンク

シニアdeアフィリ③(おじさんのブログ奮闘記、はてなブログ編)

シニア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の記述で気をつけたいのが、数字の「0」とローマ字の「O」の
区別や、数字の「1」とローマ字の小文字「l」の区別と、
半角スペースの入れ忘れ。
昭平令
昭平令

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

冷静な嫁
冷静な嫁

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

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は四隅の角を丸くする呪文です。)

*例 上記のままですと

囲みたい文章

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

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

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

文字の色を変える場合↓

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

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

矢印のボタンで変更

変更可能なサイズは、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で指定
色とサイズ

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

「はてなブログ」のテーマの中には、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を使ってますが、お使いのブログの背景色や
フォントの種類によって適切な色を選んでください。

さらに続く

ふう、疲れました。

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

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

途中経過 この頃、5月の半ば時点で20記事ほど書き上げましたが、
アクセスは二桁ほど、当然収益なんか夢のまま「0」です。

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

それでは。

コメント

タイトルとURLをコピーしました