ブログのタイトルを画像にしてみました
ブログのタイトル下の Google Adsense広告を外してみて、改めてブログのタイトルがシンプルすぎると感じました。
以前のイメージは、こんな感じです。
そこで、ブログのタイトルに画像を使ってみようと思います。と言っても、デザインのセンスがあるわけではないので、個人的興味からですが。
取り敢えず、ネットで調べて設定してみたので、記録に残したいと思います。
画像の作成
使用するツール
画像の作成には、いろいろなツールを使用できると思うのですが、素人の私でも使えそうな Canva を使うことにしました。
Canva を以下のページで紹介されていたからです。
Canva に登録する時に、無料版にするか有料版(12,000円/年)にするか選択するのですが、今だと(?) 30日間有料版を無料で使えるとのことだったので、取り敢えず有料版を30日間無料で使ってみることにしました。無料期間終了の3日前までにキャンセルすれば費用は発生しないと、しつこいぐらいに表示されたので。
Canvaの使用
Canva 自体の詳しい使い方については、別の方の説明に譲りたいと思います。
(自分的に全くよくわかっておりません (^ ^;) )
でも、テンプレートを選んでなんかいろいろやったら、あっという間にこんなのが出来ました。
出来上がった画像を、ダウンロードしておきます。
パソコンのブログへの設定
画像さえできていれば、パソコンのブログへの設定は簡単でした。
ただ、画像を実際に張り付けてみてみるとバランスが悪いと感じたので、また画像の修正からし直すことになりましたが。
ダッシュボート > デザイン > カスタマイズ > ヘッダ を選択します。
「参照...」をクリックして、タイトル画像を指定します。
位置とかを調整できると出るのですが、そのまま「適用」をクリックします。
適用すると、タイトル画像を貼り付けた場合のプレビューが表示されます。
このままだと、画像とテキストが重なって表示されてしまうので、「画像だけ表示」にします。
「変更を保存する」と、パソコンのブログのタイトルは画像に変わりました。
以前のテキスト・オンリーよりは、良いと思います。(その分、気持ち表示が重くなったかもしれませんが)
スマートフォンのブログへの設定
スマートフォンでの課題
スマートフォンでブログを見てみると、タイトル画像が切れて表示されています。
これは、使っているテーマが Minimal Green で、レスポンシブデザイン対応になっているからです。
これに対応する為には、以下のページで紹介されている方法があります。
CSSを使う方法が一番良いかとも思いましたが、簡単にスマートフォン用画像を貼り付けることにしました。
何故なら、はてなブログのお知らせに以下の内容があり、スマートフォン用に別の画像を設定できると知ったからです。
改めて、パソコン用に作成したタイトル画像を Canva でリサイズして、スマートフォン用のタイトル画像を作成しました。
リサイズするサイズは、はてなブログのスマートフォン用推奨値(幅720px、高さ240px)を使いました。
スマートフォンのブログへの貼り付け
ダッシュボート > デザイン > スマートフォン > ヘッダ を選択します。
「スマートフォン用に画像を設定する」をチェックして、カスタマイズと同じようにスマートフォン用のタイトル画像をアップロードします。
この際、レスポンシブデザインのチェックが付いていると、スマートフォン用の画像が使われません。以下の、「詳細」のレスポンシブデザインのチェックを外します。
「変更を保存する」と、適用されたスマートフォンのブログがプレビュー表示されます。
実際に、スマートフォンで見てみるとタイトル画像は小さめですが、ちゃんと表示されています。
これで、一応タイトルの画像化は完了です。
2022/03/07 追記
スマートフォンのブログ画像を貼った時、レスポンシブデザインのチェックを外すことを記述するのを忘れていたので、その部分を追記しました。
また、グローバルメニューを設置したのを機に、レスポンシブデザインでもタイトル画像がスマホ画面で正常に表示されるようにしました。
以下のページを参考にさせてもらいました。
「はてなブログヘッダー画像サイズと余白消す【スマホレスポンシブ対応版】」
https://blog-support.jp/hatenablog-header-picture/
