虹の子育てblog

2人の女の子のパパです。子育ての事、お出かけのお役立ち情報など書いています。

ーおすすめ記事ー

はてなブログ、タイトル横に画像を入れられるようにしました。

はてなブログのブログタイトル横に、画像を入れられるようにしました。

 

どんなものかというと、こんな感じ↓

f:id:gharuto:20210618105431p:plain

 

スマホ画面↓

f:id:gharuto:20210618105450p:plain


プログラミングのJavaScriptで作ってみました。

 

ちまたには、「はてなブログにヘッダー画像を設定する方法」はあふれていますが、

こういう「ヘッダーの一部にだけ画像を入れる方法」は無いと思います(私は探したけど見つかりませんでした)。

 

なので作ってみました。

後でコードを貼っておくので、コピペして使って下さい。

タイトルの右側に表示させたり、画像の大きさを変える方法も説明します。

 

特に、テーマ「Haruni」におすすめ。

この方法は、特にテーマ「Haruni」におすすめです。

Haruniの特徴はきれいなグラデーション色です。

ヘッダー全体に画像を設定してしまうと、そのグラデーション色が活かせません。

しかしこの方法なら画像をヘッダーの一部分に入れるだけなので、グラデーション色をそのまま活かせます。

 

また、Haruniのスマホ画面ってタイトルが長いと、タイトルとメニューアイコンが重なってしまうんですよね↓

f:id:gharuto:20210618105534p:plain



しかし今回の方法を使うことで、画像がいい役割を果たして重なるのを防止できます。

 

もちろん、Haruni以外のテーマでも使えるので、

「わざわざヘッダー画像を作るのがめんどくさい」

という方にはおすすめです。

 

はてなブログのタイトル横に画像を入れるやり方を解説。

やり方を解説します。

 

まず、

「デザイン」→「カスタマイズ(工具のマーク)」→「ヘッダ」→「タイトル下」

に、以下のコードをコピペします↓


<!-- ブログタイトル横に画像を挿入 -->
<script>
document.getElementById('title').insertAdjacentHTML('beforebegin','<img id="adjacent-img" src="画像のURL">');
</script>

コード中の「画像のURL」の部分を、入れたい画像のURLに書き換えて下さい。

 

次に、

「デザイン」→「カスタマイズ(工具のマーク)」→「デザインCSS」

に、以下のコードをコピペします↓


/*ブログタイトルと画像を横並びに*/
#title{
  display:inline;
}


/*ブログタイトル横の画像の大きさ*/
#adjacent-img{
  width:70px;
  height:auto;
}


/*スマホ画面では、ブログタイトルと画像を縦並びに*/
@media (max-width:480px) {
  #title{
    display:block;
  }
}

とりあえずこれでOKです。これで表示はされます。

 

のちほどカスタマイズのやり方も解説します。

 

画像のURLの取得方法。

「画像のURLの取得方法がわからない」という方向けに取得方法を説明します。

 

まず「はてなフォトライフ」を開きます。

開き方は、はてなブログの記事編集画面で、ここをクリック↓

f:id:gharuto:20210618114120p:plain


はてなフォトライフが開くので、右側の「Hatena Blog」↓

f:id:gharuto:20210618114147p:plain


すると今までアップした画像がズラ~っと出てくるので、好きな画像をクリックし画像を大きく表示します。

その画像の上で右クリックし、「画像アドレスをコピー」で画像のURLがコピーできます↓

f:id:gharuto:20210618114218p:plain


あとは先程の「タイトル下」に貼ったコードの所に貼り付ければOKです。

 

(まだ画像をアップロードしていないという方は、とりあえず一回下書き記事にでも画像を貼り付ければアップロードされます。)

 

画像をブログタイトルの右側に表示させるには。

画像をタイトルの右側表示させるには、

「デザイン」→「カスタマイズ(工具のマーク)」→「ヘッダ」→「タイトル下」に貼り付けたコードの

「beforebegin」の部分を「afterend」に変えて下さい。

 

ただしこれだとスマホ画面で画像が下に来てしまいます。

上にすることはできないので、横並びに戻したいときは「デザイン」→「カスタマイズ(工具のマーク)」→「デザインCSS」にコピペしたコードの、この部分を削除してください↓

f:id:gharuto:20210618220136p:plain

 

そして、かわりにこのコードを同じところにコピペすると↓


@media (max-width: 767px){
  #blog-title{
    padding-top:60px !important;
  }
}

上に余白ができてメニューアイコンと重なりません。

 

画像の大きさを変えたい場合は。

画像の大きさを変えたい場合は、

「デザイン」→「カスタマイズ(工具のマーク)」→「デザインCSS」に貼り付けたコードの

「width:70px;」所の数字を、50や100などお好みに変えて下さい。

 

画像を丸くしたい場合は。

今回私が使っている画像は背景透過(縁取りしてある)画像なのでそのまま使ってもいい感じに表示されますが、

背景透過ではない画像の場合、画像を丸くしたい場合もありますよね↓

f:id:gharuto:20210618112523p:plain


その場合は、

「デザイン」→「カスタマイズ(工具のマーク)」→「デザインCSS」に以下のコードを追加で貼り付けてください↓


/* ブログタイトル横の画像を丸くしたい場合 */
#adjacent-img{
  border-radius: 50%;
}

これで画像が丸くなります。

SEOに影響はない?

「ブログタイトルの横に画像を入れちゃって、SEO(検索順位)に影響はないの?」

と思うかもしれませんが、影響はありません。

 

画像を入れてるのはブログタイトル(h1タグ)の外側です。

内側に入れてる訳ではないのでSEOには影響ありません。

 

それに、仮にタイトルの内側だったとしてもh1タグにimgタグを入れてもいいことになっているので影響はないでしょう。

 

かわいいイラスト画像の取り方。

かわいいイラスト画像を取るなら「イラストAC」がおすすめです。

アカウント登録(無料)する必要がありますが簡単にできるし、姉妹サイト「写真AC」も使えるようになるので登録しておいて損はないでしょう。

 

ダウンロードする際、JPEG形式かPNG形式か選べる場合は、PNG形式にすると背景が透過されます。

f:id:gharuto:20210618121114p:plain

 

既にある画像を背景透過させたい場合は、remove.bgサイトがおすすめです。

アカウント登録いらないし無料だし簡単に使えます。

 

まとめ。

いかがでしたか?

今回は、はてなブログのタイトル横に画像を入れる方法をご紹介しました。

テーマ「Harini」を使っている方や、「ヘッダーの一部にだけ画像を入れたい」という方におすすめです。

 

是非お試しください。