読者です 読者をやめる 読者になる 読者になる

画竜点睛を欠く

タイトルの如く不完全燃焼なアラフォーブログ 本と音楽と映画が主軸

はてなブログ カスタマイズ その2

ブログ ブログ-はてな

広告

はてなブログ カスタマイズ その2となります。

前回のその1でカスタマイズを加えていった時系列でとしていますが、加えたカスタマイズの問題が解決されていない部分がありますのでその箇所はとりあえず飛ばして説明することにしました。

今回のカスタマイズは本文中の見栄えや色彩をカラフルするためのカスタマイズです。

 

目次の追加

まずは目次からです。本文の一番上に表示されているのが目次です。文字の箇所をクリックすれば、その見出しまで飛んでくれる仕様になっています。

こちらのソースを使用させて頂いています。

※目次は現在使用しておりません。

サイトの説明にもあるように見た目は各自お好みで調節して下さい。背景を変更したければ、background を。文字の大きさは、font-sizeなどを変更すれば、OKです。

大見出しが一つだけの場合は目次は表示されませんのでご注意を。

 

見出しの追加

見出しとは ↑ ことです。(これは大見出しです)

はてなブログの構造はブログのタイトルがh1に、ブログの説明がh2になっており、本文の見出しはh3以降となっています。ですので今回は私が追加したh3(大見出し)とh4(中見出し)のカスタマイズについての説明になります。

大見出し

h3とh4を異なる方法でカスタマイズしてみました。

まずh3ですが、見出しジェネレーターを使用しました。

こちらで設定を行いソースの生成を行って下さい。

色見本はこちらなどを参考に。

生成出来ましたら、目次の追加と同様にCSSは
ダッシュボード → デザイン → カスタマイズ → {}デザインCSS
へソースコードを貼り付け。<変更を保存する>を忘れずにクリックしましょう。

大見出しの設定方法ですが、記事を書いている最中に左上の見出しの中から大見出しを選択して見出しを記述します。この時にジェネレータに表示されていたclass="sample2"をHTML編集(編集 見たままとプレビューの間)に切り替えて貼り付けてあげてください。こんな感じです。

見出しの追加

上記の見出しの追加の部分は自分で記述した見出しテーマとなります。これでプレビューを確認すると表示されているはずです。

中見出し

中見出しとは ↑ です。

大見出しの時と同様に {}デザインCSSへ下記のソースを貼り付けて下さい。

先ほどの大見出しのソースの下部で問題ありません。

article h4 {
border-left:5px solid #448AFF;
border-bottom:1px solid #448AFF;
padding:3px 15px 5px;
}

ソースの#448AFFは当ブログで使用している配色ですので、上記にあるような色見本のサイトでカラーコードを決めて変更してあげれば、お好きな色にカスタマイズ可能です。

見出しタグのSEO効果 

見出しの設定にはSEO効果があると言われています。劇的な効果ではありませんが、ジワジワと現れるという意見が多いので、設定する価値は十分にあるでしょう。ページは人だけが見るのではなく、検索エンジンのクローラーからも見られています。
ただ、誤った使用をしないように注意も必要です。

NG例

<h3>大見出し

 <p>文章</p>

<h5>小見出し

 <p>文章</p>

<h4>中見出し

 <p>文章</p>

 <h3>の大見出しの次に使える適切な見出しは<h4>ですので突然<h5>を使用するのは構造上不適切です。<h5>は<h4>以下で使用しましょう。

 

引用の追加 

今回最後のカスタマイズ事項になります。以下のサイトの引用枠の表示を変えるという箇所のソースを使用させて頂いています。

こちらもいままでと同様に{}デザインCSSへ貼り付けて下さい。

使用してみるとこんな感じになります。

Men willingly believe what they wish.

人は喜んで自己の望むものを信じるものだ。

Julius Caesar(ユリウス・カエサル)

引用符を両端に表示させることが出来ます。

 

まとめ

今回はブログ本文中の見栄えを良く出来るカスタマイズを紹介してみました。はてなブログのカスタマイズはまだまだ沢山紹介されていますので、自分のブログに合ったカスタマイズを探すと良いと思います。

ネットで紹介されている既存のソースコードに独自の味付けをしたり、一からコーディングしてより良いブログデザインを追及していきましょう。

HTLM&CSSの理解を深める為には、以下のサイトと本がオススメです。どちらも初心者向けです。私はこの3つで何とか凌いでいます。

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書

 

 参考にさせていただいた皆様ありがとうございました。

※15/8/2 追記 現在テーマを変更した為、見出しのカスタマイズは行っていません。

※16/3/20 追記 現在は見出し付きをテーマを使用しています。