ブログ ブログ-カスタマイズ

【初心者向け】はてなブログ デザインテーマカスタマイズ その2《ヘッダー画像編》

ご訪問ありがとうございます。

マロニーです。

 

先日ブログのリニューアルをしました。

 

Webデザインど素人の私でもコピペだけでカスタマイズがある程度できましたので、初心者の方向けに私のカスタマイズを記事にしていきます。

今回はその2《ヘッダー画像編》です。

 

 

ブログのデザインテーマリニューアル

前回デザインを変更し皆さんに経緯を記事にしたら、「見やすい」とか「素敵」などのお褒めのコメントをたくさんいただきました。

ありがとうございます!

www.marondiary.com

ちょっとまだ納得がいってない部分もあるのですが、少しづつ調整中です。

 

今回はその2《ヘッダー画像編》をお伝えします。

 

※このブログははてなブログpro(有料版)を使用しています。

無料版の場合、できない範囲があるかもしれません。

あらかじめご了承ください。

 

注意点

ネット上ではワードプレスでテーマ変更によるアクセス減少が起きたという記事もありますので、変更は慎重に。

 

必ず今のデザインcssをコピーしてテキストファイル等に保存しておくことを強くお勧めします。

 

また、はてなブログは追加料金なしで複数のブログを開設することができます。

無料版で3つ、有料版で10つまで。

テスト用ブログを開設して、練習をしたり色々試してから気に入ったものを決めてメインブログを変更していくといいでしょう。

 

詳しくは準備編をご覧ください↓

www.marondiary.com

 

ヘッダー画像挿入

f:id:marondiary:20200609230451p:plain

ヘッダー画像とは

ヘッダー画像とは、まさに頭の部分。

ブログの顔と言ってもいいでしょう。

f:id:marondiary:20200608141703p:plain

 

私は今回テーマストア人気No.1の『Minimalism』に変更したのですが、何もカスタマイズしないと単調すぎますよね。

↓ノーマルだとこんな感じ。

f:id:marondiary:20200608142117p:plain

(これ、タイトルがおかしいですがテストブログなのでご容赦ください)

 

そこで私はヘッダー画像を作成してみました。

 

ヘッダー画像作成

私は絵心もないし、デザイン力もないです。

絵がうまい人って本当にうらやましい。

美術は大の苦手科目でした。

 

だから自分で書くことはできないので、ネット上の素材に頼りました。

 

私は素材はpixabayいらすとやを使用しています。

このヘッダー画像やアイキャッチの編集はCANVAを利用しています。

 

利用規約をよく読んで、著作権法に抵触しないように注意しましょう。

ja.wikipedia.org

 

※はてなブログのヘッダー画像の推奨サイズは1000×200ピクセルです。

もう少し大きく表示したい気持ちがありますが、初心者の私はセオリー通りこのサイズで作りました。

 

 

ヘッダー画像挿入

①ダッシュボード

②デザイン

③スパナのマーク

④ヘッダ

⑤ファイルを選択→PCに保存したヘッダー画像を指定

⑥『画像だけを表示』にポッチを入れる

⑦画像が表示されたら左下の青い『適用』をクリック

f:id:marondiary:20200608144906p:plain

これで自作のヘッダー画像が挿入されました。

 

ヘッダー画像の位置調整(余白、見切れ)

プレニュー画面を見てみると、PCで見ると余白が出てしまいます。

f:id:marondiary:20200608150643p:plain

スマホは見切れている!余白も出ちゃう!

f:id:marondiary:20200608150714p:plain

 

そこで参考にさせていただいたのはこちらのブログ。↓

www.kurasitotonoe.com

このブログで紹介されているcssをPC、スマホ分それぞれコピーして貼り付けます。

 

①ダッシュボード

②デザイン

③スパナのマーク

④一番下の『デザインCSS』

⑤デザインCSSのをクリックすると難しいCSSが並んでますね。

ちんぷんかんぷんですが、ただ単に一番下の行にコピーしたPC、スマホ分のCSSをそれぞれ貼り付けるだけ!

⑥変更を保存する

 

これでPCもスマホもいっぱいに見切れず表示されました!

くうかさん、ありがとうございます!

 

ただ、私はスマホのヘッダをもうちょっと大きく表示したいんですよね…。

でも色々やってもうまくいかないので初心者の私はとりあえずこれでよしとします。。。

どなたかいい情報あったら教えてください!

 

【初心者向け】はてなブログ デザインテーマカスタマイズ その2《ヘッダー画像編》はここまでとしますね。

 

その3は《フォントサイズ・ブログアイコン編》を予定しています。

 

 

まとめ

ヘッダー画像を設定するだけでブログの雰囲気がガラッと変わりますよね!

初めにヘッダーのデザインを決めることで、その後の細かいカスタマイズのデザインが決まってくると思います。

 

写真でもいいし、文字だけでもいいと思います。

背景が白で文字やイラストが特徴的なヘッダーもかっこいいですよね!

 

有料でイラストを作ってくれるサイトもありますので本格的なイラストを思いっ切って注文してもいいですね。

 

私は今まではピンクメインの女性らしいデザインだったので、新しいブログは男女問わずマロンのほっこり記事から仕事関連のシリアスな記事にもデザインが合うように緑を基調にしたシンプルで可愛さも残したデザインにしたいと思って作りました。

 

CANVAは無料で使えるツールとしては非常に優秀で、デザインも豊富です!

操作も簡単なので私のようなデザインセンスのない人でも簡単に素敵な画像編集ができちゃいます!

おススメですよ!

 

初心者はてなブロガーさんの参考になれば幸いです。

(私もまだ初心者を抜け切れてませんが(^-^;)

 

今日のにゃんこ♪マロンコーナー

今回はマロンさんの変顔のご紹介です^^;

ピアノの上で気持ち良さそうに寝ています。

f:id:marondiary:20200531092430j:image

そんな爆音の中よく寝れますなー

長男の演奏はタッチは力強いから結構な音量。

振動もあるはずなのに。

マロンさん、細かいことは気にしないタイプだからな^_^
f:id:marondiary:20200531092433j:image

マロンの寝顔は可愛いなぁ…??

あれ?

 

白目ーーー^_^;

ぶっさーーーwww

怖いよぉ。

f:id:marondiary:20200531092435j:image

そうそう、ちゃんと目瞑ってね。

f:id:marondiary:20200531092427j:image

 

今日もお読みいただきありがとうございました。

素敵な日曜日をお過ごしください♪

 

 

にほんブログ村 猫ブログへ
にほんブログ村  

 

にほんブログ村 主婦日記ブログへ
にほんブログ村

 

-ブログ, ブログ-カスタマイズ

© 2020 たぬき猫マロン Powered by AFFINGER5