はてなブログを始めた当初、ブログのデザインをカスタマイズする時に、画像を使いたくなったことないですか？ヘッダーやナビゲーションメニュー等、例えばこんな感じで。
はてなブログのデザインをカスタマイズする時、こんな感じに画像を使いたいのに、どこに画像をアップロードしたらいいのかサッパリ分からなかったので、早速探してみることに。だ、け、ど、そもそも はてなのブログカスタマイズで画像を使っている人がほとんど、というか全くいない！中々見つからなかったけど、やっと方法を発見したのでシェアします。
※このやり方で、画像をもう1つのブログのナビゲーションメニューに使用しています。デモとして貼っておきますね。念のため、デザインテーマはMinimalismです。
はてなブログ カスタマイズでの画像の使い方
1．はてなフォトライフにアクセス
まずは、はてなのウェブアルバムサービスである、はてなフォトライフにアクセスします。
2．画像をアップロードする
画面右上の方にある”アップロード”をクリック。クリックしたら、使用したい画像ファイルを選択するか、枠の中に画像ファイルをドラッグして、画像をアップロードします。
3．アップロードした画像のimg srcを取得
アップロードした画像が左下の方に出てくるので、その画像をクリックしてから画面右上にある”リンク”をクリックすると、HTMLタグが出てきます。その中にある、<img src="○○○○○">の部分をコピーしておいてください。
※img srcの” ”の中の部分だけ使用します
4．デザインCSSで画像を指定する
ここからは、はてなブログを使います。はてなブログのヘッダーからダッシュボード＞デザイン＞カスタマイズ＞デザインCSSへ。画像を使いたい箇所に、先ほどコピーした画像を指定します。今回は、ドロップダウンメニュー(#dropmenu)に指定したので、デザインCSSには下記のように記載しました。
#dropmenu {
background-image: url(○○○○○);
}
※○○○○○の部分には、3でコピーしたimg srcの” ”の中のみを記載します。
ヘッダーに画像を指定したい場合は、#dropmenuの部分をheaderに、サイドバーのタイトルに設定したい場合は、#dropmenuの部分を.hatena-module-titleに変更してください。
5．保存を忘れずに！
最後に”変更を保存する”ボタンを押すのを忘れずに！これで画像がセットされました。
はてなブログのカスタマイズで画像を使いたい場合は、あらゆる場所で使える方法なので、誰かの参考になりますように。
