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

torinos 〔トリノス〕

雑談したり、手芸したり、ジャニーズ愛でたり。

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

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

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

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

f:id:to_torinos:20150311215807j:plain

 

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

http://img.f.hatena.ne.jp/images/fotolife/t/to_torinos/20150309/20150309111846.jpg

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

 

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

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

f:id:to_torinos:20150311211343j:plain

からの、

f:id:to_torinos:20150311211522j:plain

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

f:id:to_torinos:20150311212201j:plain

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

f:id:to_torinos:20150311212310j:plain

 

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

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

f:id:to_torinos:20150311213543j:plain

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

 

CSSを修正していきます。

ブログページの右上ID(1)から「デザイン」(2)→「カスタマイズ」(3)、

f:id:to_torinos:20150301141036j:plain

「デザインCSS」(4)へ進みます。

f:id:to_torinos:20150301141526j:plain

 

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

 

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

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

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

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

 

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

 

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

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


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

 

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

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

 

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

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

 

 

スポンサーリンク