Bloggerをはじめるための設定に苦労した話２｜見出しの記載方法

Bloggerをはじめるための設定でいちばん苦労したのは、見出しの記載方法でした。
Bloggerの標準機能ではなく「見出しの頭にイラストを表示する」というカスタマイズを行おうとしたため、Web制作の経験がない僕はとても苦労しました。HTMLとCSSの知識が多少あれば訳ない作業なのでしょうが、ド素人な僕はひたすらいろいろなWeb情報のサイトを見てまわり、なんとかイメージ通りの見出しを作れました。おかげで少しだけですが、HTMLとCSSの勉強もできたので良かったです！

今回は、Bloggerで見出しを格好良くするために僕がおこなったことをご紹介します。

1．Blogger標準の見出しの設定方法

Bloggerでは、標準で見出しを設定する機能があります。記事を書くページで簡単に設定できます。

見出しの種類によって3段階設定できます。ただですね...もうちょっと格好よく表示したいなとも思うのです。

他のブログのように、もっと「見出し！」という感じでPRさせたいなと思いました。ここから、奮闘がはじまります。

2．見出しを加工する

調べてみると、見出しの加工について紹介されている記事がたくさんヒットします。どうやら「CSSで加工する」必要があることがわかりました。

参考にしたのは以下の記事です。
・見出しデザインの参考にしたい CSSで作るhタグのサンプル集｜日刊ウェブログ式

2.1．見出しの頭にイラストを表示する

せっかく見出しの加工をするのであれば見出しの頭に好きなイラストを表示させたいと思い、これまたいろいろ調べてみました。ちゃんとわかりやすく記事を残している方々に感謝です。

以下の記事を参考にしました。
・見出しの先頭に背景画像を表示する：CSS小技｜ブログが作りたい！


見出しのHTMLの記載は以下のとおりです。

<h1 class="selector01">
ここに見出しのタイトルを記載
</h1>

CSSは以下のように記載しています。ピクセル数とフォントサイズは適当に、見栄えが良い数値を入れました。

.selector01{
 background: url(画像のURL) no-repeat left center;
 padding-left: 40px;
 font-size: 140%;
 height: 36px;
}

2.2．HTMLとCSSを記載する

コードの記載はとてもかんたんです。

HTMLは、記事の投稿画面で「記法をHTMLに設定」することで書くことができます。

CSSは、ブログ管理画面のメニューから「テンプレート＞カスタマイズ＞アドバンス」と選択。いちばん下にある「CSSを追加」という項目を選ぶと出てくるスペース（「カスタムCSSを追加」という欄）に、CSSのコードを貼り付けます。

これで見出しの頭にイラストを表示できました。

Blogger最後の設定は、ブログパーツの表記

ブログ全体のデザインと記事の表記で、Bloggerでブログをはじめる設定はほぼ完了しました。

最後に設定したのが、ブログパーツ（記事の右側の部分）です。ブログパーツについては、また改めてきちんと書き残しておこうと思います。


最後までお読みいただき、ありがとうございました！



ツイート