はてなブログのヘッダーにオリジナルのタイトル画像を使ってみよう
おすっ！つな（@tu_na_69）です(≧▽≦)
はてなブログのヘッダーをおしゃれにカスタマイズ！
オリジナルのタイトル画像を使ってみたいと思います。
なりゆきで変更した、シンプルでおしゃれなテーマ「Brooklyn」↓
勢いに乗って、ヘッダーをオリジナル画像にカスタマイズしたいと思います。
PC用オリジナル画像を作る
はてなブログのPCのヘッダー画像は「1000×200px」サイズがおすすめのようです。
今回はこんな感じの画像を作りました。
おいしいものが大好きなのでイメージに合う画像を探しました(*´▽｀*)
かわいいオリジナル画像ができて大満足です。
まずはお好みの画像を準備します。わたしは、windowsにはじめから入っているペイントというソフトを使っています。
①画像のサイズを「1000×200px」になるように調整します。
サイズ変更と画像カットしました。
②タイトル文字を入力します。
タイトルをテキスト表示する場合は、画像にタイトルを入力する必要はありません。
ヘッダーにタイトル画像を設定する
はてなブログでは、ヘッダー画像をタイトル画像といいます。
①ダッシュボードから「デザイン」→「カスタマイズ」→「ヘッダ」をクリックします。
②タイトル画像の「ファイルを選択」をクリックして、画像を選択します。
③ドラックで切り抜きたい部分を選び「適応」をクリック。
④「表示設定」を選択します。
わたしは画像にタイトルも入れたので、「画像だけ表示」を選択しました。
画像を背景にしてタイトルの文字も表示させたい時は、「画像とテキストを表示」を選んでください。
⑤「変更を保存する」をクリックして完了です。
ヘッダーがこんな風になりました。
ぴったりサイズを狙ったのですがまわりに空欄ができてしまいました。
でも、思っていたよりもこちらの方がかわいくできたので結果オーライということにします(*‘∀‘)
レスポンシブデザインを適応にしていると、同じタイトル画像をスマホサイズにカットしたものが適応されます。
こんな感じです。
かわいいのですが、少しタイトル文字が切れてますね(T_T)
スマホ用のタイトル画像を別に設定することもできます。次回やってみますね。
