虹の子育てblog

2児の女の子のパパです。子育ての事、お出かけのことなど書いています。

はてなブログ、スマホ版ヘッダをタイトル入りの画像だけにしたい。

はてなブログスマホ版のヘッダを、タイトル入りの画像だけにするやり方について説明していきます。

 

例えば「富士山ブログ」というのがあったとします。

デフォルトだとこうですね↓


f:id:gharuto:20190817074303j:image

それをこんな風にしたい場合↓


f:id:gharuto:20190816220921j:image

 

の説明です。

 

実はこれ、私は結構苦労しました。

はてなブログスマホ版、ヘッダ、カスタマイズ」で検索しても、なんだか難しいやつばかり出て来てよくわかりません。

「結局どのコードを貼りつければいいの⁉」

となりました。

 

でも実はコードを貼りつける必要はなく、めっちゃ簡単にできるんですね。カスタマイズと呼ぶ程の事でもない。

わかった時は、なんだ、こんなことかと思いました。

 

それでは説明していきます。

 

まず使いたい画像に画像編集アプリで直接タイトルを書いちゃいます。

私は「LINEcamera」アプリを使ってます。

(他にも色々な、おしゃれな字が書けるアプリがあると思うので探してみて下さい。)


f:id:gharuto:20190816221215j:image

できた画像をはてなブログに設定していきます。

 

まず管理画面から、「デザイン」→「スマホのマーク」→「ヘッダ」


f:id:gharuto:20190816222133j:image

「画像をアップロードの所」の「ファイルを選択」


f:id:gharuto:20190816222201j:image

すると反映されます↓


f:id:gharuto:20190816222427j:image

 

で、ここがポイントなんですが、画像だけ表示に⚫します。


f:id:gharuto:20190816221959j:image

するとタイトルが消えて画像だけのヘッダになるのですが、

画像に直接タイトルが書いてあるので、これでタイトル入り画像のヘッダが出来上がりです。

 

ちなみに画像全体がリンクの範囲になっているので、画像のどこをタップしてもトップページに飛んでくれます。

 

このように知ってる人には超簡単なことですが、私のような初心者には見つけるまで苦労しました。

当たり前のこと過ぎてみんな書いてなかったので、私が書いてみました。