はてなブログのブログタイトル横に、画像を入れられるようにしました。
どんなものかというと、こんな感じ↓
スマホ画面↓
プログラミングのJavaScriptで作ってみました。
ちまたには、「はてなブログにヘッダー画像を設定する方法」はあふれていますが、
こういう「ヘッダーの一部にだけ画像を入れる方法」は無いと思います(私は探したけど見つかりませんでした)。
なので作ってみました。
後でコードを貼っておくので、コピペして使って下さい。
タイトルの右側に表示させたり、画像の大きさを変える方法も説明します。
- 特に、テーマ「Haruni」におすすめ。
- はてなブログのタイトル横に画像を入れるやり方を解説。
- 画像をブログタイトルの右側に表示させるには。
- 画像の大きさを変えたい場合は。
- 画像を丸くしたい場合は。
- SEOに影響はない？
- かわいいイラスト画像の取り方。
- まとめ。
特に、テーマ「Haruni」におすすめ。
この方法は、特にテーマ「Haruni」におすすめです。
Haruniの特徴はきれいなグラデーション色です。
ヘッダー全体に画像を設定してしまうと、そのグラデーション色が活かせません。
しかしこの方法なら画像をヘッダーの一部分に入れるだけなので、グラデーション色をそのまま活かせます。
また、Haruniのスマホ画面ってタイトルが長いと、タイトルとメニューアイコンが重なってしまうんですよね↓
しかし今回の方法を使うことで、画像がいい役割を果たして重なるのを防止できます。
もちろん、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の取得方法がわからない」という方向けに取得方法を説明します。
まず「はてなフォトライフ」を開きます。
開き方は、はてなブログの記事編集画面で、ここをクリック↓
はてなフォトライフが開くので、右側の「Hatena Blog」↓
すると今までアップした画像がズラ～っと出てくるので、好きな画像をクリックし画像を大きく表示します。
その画像の上で右クリックし、「画像アドレスをコピー」で画像のURLがコピーできます↓
あとは先程の「タイトル下」に貼ったコードの所に貼り付ければOKです。
（まだ画像をアップロードしていないという方は、とりあえず一回下書き記事にでも画像を貼り付ければアップロードされます。）
画像をブログタイトルの右側に表示させるには。
画像をタイトルの右側表示させるには、
「デザイン」→「カスタマイズ(工具のマーク)」→「ヘッダ」→「タイトル下」に貼り付けたコードの
「beforebegin」の部分を「afterend」に変えて下さい。
ただしこれだとスマホ画面で画像が下に来てしまいます。
上にすることはできないので、横並びに戻したいときは「デザイン」→「カスタマイズ(工具のマーク)」→「デザインCSS」にコピペしたコードの、この部分を削除してください↓
そして、かわりにこのコードを同じところにコピペすると↓
@media (max-width: 767px){
#blog-title{
padding-top:60px !important;
}
}
上に余白ができてメニューアイコンと重なりません。
画像の大きさを変えたい場合は。
画像の大きさを変えたい場合は、
「デザイン」→「カスタマイズ(工具のマーク)」→「デザインCSS」に貼り付けたコードの
「width:70px;」所の数字を、50や100などお好みに変えて下さい。
画像を丸くしたい場合は。
今回私が使っている画像は背景透過（縁取りしてある）画像なのでそのまま使ってもいい感じに表示されますが、
背景透過ではない画像の場合、画像を丸くしたい場合もありますよね↓
その場合は、
「デザイン」→「カスタマイズ(工具のマーク)」→「デザインCSS」に以下のコードを追加で貼り付けてください↓
/* ブログタイトル横の画像を丸くしたい場合 */
#adjacent-img{
border-radius: 50%;
}
これで画像が丸くなります。
SEOに影響はない？
「ブログタイトルの横に画像を入れちゃって、SEO(検索順位)に影響はないの？」
と思うかもしれませんが、影響はありません。
画像を入れてるのはブログタイトル(h1タグ)の外側です。
内側に入れてる訳ではないのでSEOには影響ありません。
それに、仮にタイトルの内側だったとしてもh1タグにimgタグを入れてもいいことになっているので影響はないでしょう。
かわいいイラスト画像の取り方。
かわいいイラスト画像を取るなら「イラストAC」がおすすめです。
アカウント登録（無料）する必要がありますが簡単にできるし、姉妹サイト「写真AC」も使えるようになるので登録しておいて損はないでしょう。
ダウンロードする際、JPEG形式かPNG形式か選べる場合は、PNG形式にすると背景が透過されます。
既にある画像を背景透過させたい場合は、remove.bgサイトがおすすめです。
アカウント登録いらないし無料だし簡単に使えます。
まとめ。
いかがでしたか？
今回は、はてなブログのタイトル横に画像を入れる方法をご紹介しました。
テーマ「Harini」を使っている方や、「ヘッダーの一部にだけ画像を入れたい」という方におすすめです。
是非お試しください。
