feliz dia

毎日を少しでも楽しく過ごせるように目指している人のブログです

画像の説明
画像の説明
画像の説明
画像の説明
画像の説明
画像の説明

《はてなブログ》ブログ カスタマイズで画像を使いたい時にすること

f:id:feliz-dia:20200501232052j:plain

 

はてなブログを始めた当初、ブログのデザインをカスタマイズする時に、画像を使いたくなったことないですか?ヘッダーやナビゲーションメニュー等、例えばこんな感じで。

 

f:id:feliz-dia:20200509215449p:plain

 

はてなブログのデザインをカスタマイズする時、こんな感じに画像を使いたいのに、どこに画像をアップロードしたらいいのかサッパリ分からなかったので、早速探してみることに。だ、け、ど、そもそも はてなのブログカスタマイズで画像を使っている人がほとんど、というか全くいない!中々見つからなかったけど、やっと方法を発見したのでシェアします。

※このやり方で、画像をもう1つのブログのナビゲーションメニューに使用しています。デモとして貼っておきますね。念のため、デザインテーマはMinimalismです。

 

 

 

はてなブログ カスタマイズでの画像の使い方

1.はてなフォトライフにアクセス

まずは、はてなのウェブアルバムサービスである、はてなフォトライフにアクセスします。

 

2.画像をアップロードする

画面右上の方にある”アップロード”をクリック。クリックしたら、使用したい画像ファイルを選択するか、枠の中に画像ファイルをドラッグして、画像をアップロードします。

 

f:id:feliz-dia:20200509215427p:plain

 

3.アップロードした画像のimg srcを取得

f:id:feliz-dia:20200509215423p:plain

アップロードした画像が左下の方に出てくるので、その画像をクリックしてから画面右上にある”リンク”をクリックすると、HTMLタグが出てきます。その中にある、<img src="○○○○○">の部分をコピーしておいてください。

※img srcの” ”の中の部分だけ使用します

 

4.デザインCSSで画像を指定する

ここからは、はてなブログを使います。はてなブログのヘッダーからダッシュボード>デザイン>カスタマイズ>デザインCSSへ。画像を使いたい箇所に、先ほどコピーした画像を指定します。今回は、ドロップダウンメニュー(#dropmenu)に指定したので、デザインCSSには下記のように記載しました。

 

#dropmenu {
background-image: url(○○○○○);

}

 

※○○○○○の部分には、3でコピーしたimg srcの” ”の中のみを記載します。

ヘッダーに画像を指定したい場合は、#dropmenuの部分をheaderに、サイドバーのタイトルに設定したい場合は、#dropmenuの部分を.hatena-module-titleに変更してください。

 

5.保存を忘れずに!

最後に”変更を保存する”ボタンを押すのを忘れずに!これで画像がセットされました。

 

 

はてなブログのカスタマイズで画像を使いたい場合は、あらゆる場所で使える方法なので、誰かの参考になりますように。