はてなブログを10ヶ月経験したマロニーです。
初心者のはてなブロガーさんでも簡単にデザインカスタマイズができる方法をシリーズでお伝えしています。
今回はその２《ヘッダー画像編》です。
Webデザインど素人の私でもコピペだけでカスタマイズがある程度できましたので、初心者の方向けに私のカスタマイズを記事にしていきますね。
はじめに
この時使用していたブログテーマは『Minimalism』。
はてなブログpro（有料版）を使用してのご説明なので、無料版の場合、できない範囲があるかもしれません。
あらかじめご了承ください。
注意点
ネット上ではワードプレスでテーマ変更によるアクセス減少が起きたという記事もありますので、変更は慎重に。
必ず今のデザインcssをコピーしてテキストファイル等に保存しておくことを強くお勧めします。
また、はてなブログは追加料金なしで複数のブログを開設することができます。
無料版で3つ、有料版で10つまで。
テスト用ブログを開設して、練習をしたり色々試してから気に入ったものを決めてメインブログを変更していくといいでしょう。
詳しくは準備編をご覧ください↓
ヘッダー画像挿入
ヘッダー画像とは
ヘッダー画像とは、まさに頭の部分。
ブログの顔と言ってもいいでしょう。
私は今回テーマストア人気No.1の『Minimalism』に変更したのですが、何もカスタマイズしないと単調すぎますよね。
↓ノーマルだとこんな感じ。
(これ、タイトルがおかしいですがテストブログなのでご容赦ください）
そこで私はヘッダー画像を作成してみました。
ヘッダー画像作成
私は絵心もないし、デザイン力もないです。
絵がうまい人って本当にうらやましい。
美術は大の苦手科目でした。
だから自分で書くことはできないので、ネット上の素材に頼りました。
私は素材はpixabayやいらすとやを使用しています。
このヘッダー画像やアイキャッチの編集はCANVAを利用しています。
利用規約をよく読んで、著作権法に抵触しないように注意しましょう。
※はてなブログのヘッダー画像の推奨サイズは1000×200ピクセルです。
もう少し大きく表示したい気持ちがありますが、初心者の私はセオリー通りこのサイズで作りました。
ヘッダー画像挿入
①ダッシュボード
↓
②デザイン
↓
③スパナのマーク
↓
④ヘッダ
↓
⑤ファイルを選択→PCに保存したヘッダー画像を指定
↓
⑥『画像だけを表示』にポッチを入れる
↓
⑦画像が表示されたら左下の青い『適用』をクリック
これで自作のヘッダー画像が挿入されました。
ヘッダー画像の位置調整（余白、見切れ）
プレニュー画面を見てみると、PCで見ると余白が出てしまいます。
スマホは見切れている！余白も出ちゃう！
そこで参考にさせていただいたのはこちらのブログ。↓
このブログで紹介されているcssをPC、スマホ分それぞれコピーして貼り付けます。
①ダッシュボード
↓
②デザイン
↓
③スパナのマーク
↓
④一番下の『デザインCSS』
↓
⑤デザインCSSのをクリックすると難しいCSSが並んでますね。
ちんぷんかんぷんですが、ただ単に一番下の行にコピーしたPC、スマホ分のCSSをそれぞれ貼り付けるだけ！
↓
⑥変更を保存する
これでPCもスマホもいっぱいに見切れず表示されました！
くうかさん、ありがとうございます！
ただ、私はスマホのヘッダをもうちょっと大きく表示したいんですよね…。
でも色々やってもうまくいかないので初心者の私はとりあえずこれでよしとします。。。
どなたかいい情報あったら教えてください！
【初心者向け】はてなブログ デザインテーマカスタマイズ その２《ヘッダー画像編》はここまでとしますね。
その3は《フォントサイズ・ブログアイコン編》を予定しています。
まとめ
ヘッダー画像を設定するだけでブログの雰囲気がガラッと変わりますよね！
初めにヘッダーのデザインを決めることで、その後の細かいカスタマイズのデザインが決まってくると思います。
写真でもいいし、文字だけでもいいと思います。
背景が白で文字やイラストが特徴的なヘッダーもかっこいいですよね！
有料でイラストを作ってくれるサイトもありますので本格的なイラストを思いっ切って注文してもいいですね。
私は今まではピンクメインの女性らしいデザインだったので、新しいブログは男女問わずマロンのほっこり記事から仕事関連のシリアスな記事にもデザインが合うように緑を基調にしたシンプルで可愛さも残したデザインにしたいと思って作りました。
CANVAは無料で使えるツールとしては非常に優秀で、デザインも豊富です！
操作も簡単なので私のようなデザインセンスのない人でも簡単に素敵な画像編集ができちゃいます！
おススメですよ！
初心者はてなブロガーさんの参考になれば幸いです。