超初心者のはてなブログカスタマイズ ～見出しの頭に画像をつけてみる～

最近更新している記事を読んで下さった方はお気づきかもしれませんが、地味にカスタマイズしてました。

←コレ　見出しの頭に画像をつけよう

記事を書く時の「大見出し」を選択した場合に適用される設定にしていきます。

①まず、表示させたい画像を用意します。 

サイズは32（px）× 32（px）にしました。35×35だと上下が切れてしまったので、ちまちま1pxずつ調整しました（笑）。私の場合は32pxがちょうどよかったです。

②用意した画像を「はてなフォトライフ」にアップロードします。

「Myはてな」→「Hatena fotolife」に進みます。

からの、

Hatena fotolifeページの右上メニューから「アップロード」を選択、

「アップロード（複数選択可）」ボタンから先程準備した画像をアップします。

③アップロードした画像のURLを確認します。

Hatena fotolife右上メニューから「マイフォト」をクリック（１）、表示画像一覧から使いたい画像を選択すると（２）のような表示になります。この状態で右上メニューから「リンク」を選択（３）すると、（４）のURLが記載されたテキストボックスが開きます。

（４）の下の方のテキストボックスの中から、青で反転させている部分（http://～.jpgまで）を次の工程で使います。

④CSSを修正していきます。

ブログページの右上ID（１）から「デザイン」（２）→「カスタマイズ」（３）、

「デザインCSS」（４）へ進みます。

CSSを修正するテキストボックスに下記コードをコピペしてください。

（※テキストボックスの一番最後に付け足す形で問題ありません）

h3 {
background: url(Hatena fotolifeにアップした画像URL) no-repeat left center;
padding-left: 30px;
} 

コピペができたら、先程Hatena fotolifeで確認した画像のURL、http://～.jpgを上記コードのピンク文字になっているHatena fotolifeにアップした画像URLというところに入れてあげてください。

（※（　）内に入れてください。（　）は残します）

⑤変更を保存して完成です！

----------------------------------------------------------------------------------------------------

★今回参考にさせていただいたブログ様はこちら

はてなブログの見出しをオリジナル画像でカスタマイズしてみる - すけこむブログ

ありがとうございました！

----------------------------------------------------------------------------------------------------

使用する画像さえ準備できれば意外と簡単にできました。

ぜひ試してみてください！

スポンサーリンク