こんにちは
ブログ奮闘中のおじさん、昭 平令です。
ブログを始めて記事を書きだしたのはいいが、初めの頃は
カスタマイズに時間を取られてばかりでした。
カスタマイズは適当にスルーすればいいんですけど
おじさんの性分です、気になるととことんいじりたくなりました。



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



時間かけ過ぎです。



でも初めの頃は楽しいのだ。
そんな中でも今回は、「はてなブログ」での記事装飾
についてお話しします。
「はてなブログ」のエディタにもある程度記事の装飾機能
はありますが、やはり使っていると何かと不満がでてきます。
そこでいろいろネットで検索しました。
「はてなブログ」の良いところは、利用者が多く大抵の
ことは、調べれば詳しい方が解決してくれます。
文章に下線をひく。
「はてなブログ」のエディタにもアンダーラインは用意されていますが
黒色の実線(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(青色)くらいかなぁ。
区別や、数字の「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だとさすがにおじさんには読みにくい。
ちなみに、このブログはおじさん自身が読みやすいように18pxに
してます。
目に優しく読みやすい文字色は?
「はてなブログ」の文字色は標準でも少しグレーかかっていて読みやすいです。
真っ黒ですとチカチカして目に悪いし、長く見ていると疲れます。
そのままでも問題ないのですが、ここは個性を出して
文字の色を変更してみましょう。
やはりCSSをコピペします。「設定」→「デザイン」→「カスタマイズ」
→「デザインCSS」のところに次のCSSを追加します。
.entry-content { color: #222222; }
ここの#222222の部分を好みで変えればいいわけです。
だいたいグレー系がいいみたいで、代表的なカラーコードは、
「#333333」「#343434」「#353535」「#373737」
「#383838」「#393939」「#222222」あたりがおすすめです。
例
「#333333」
「#222222」
「#383838」
「#343434」
「#000000」
#000000以外はあまり区別がつきにくいですねぇ。
私は#222222を使ってますが、お使いのブログの背景色や
フォントの種類によって適切な色を選んでください。
さらに続く
ふう、疲れました。
無知なおじさんが年甲斐もなく、ブログなどに挑戦すると
こんな目に合います。しかもアフィリエイトですと?
いまでもまだまだ分からない事ばかりですが、
本当に初めの頃は、少し記事を書くにも大変でした。
アクセスは二桁ほど、当然収益なんか夢のまま「0」です。
次回もブログを書いていくにあたって、初期に苦労した
設定やらを書いてみます。
それでは。
コメント