【おうちで簡単ブログ編集】ブログヘッダーを10分で編集してみました。
こんにちは。OMOMUKI COMPASSの仁（JIN）です。
ブログを始めてすでに3週間が経ちました。今月のPV数が100PVを超え、多くの読者の方に読んでいただいていることに感謝の一言です。ありがとうございます。
ブログのコンセプトテーマを「趣味」に絞ったおかげで、ブログを綴ろうという”ブログモチベーション”が持ちやすくなりました。週末の朝活で1～2時間と家にいる隙間時間で行うブログの書き溜めも、思いのほかはかどっています。
さて今回の趣味のテーマは、「ブログ」です。ブログは文章を書くことももちろん大事なのですが、ブログ内のレイアウトを整ることも同じくらい大切です。ということで、早速、OMOMUKICOMPASSの内のレイアウトの一つであるヘッダーを10分ほどで簡単に編集しました。
編集の仕方も載せたので、はてなブログを利用している方（すでに知ってると思いますが＝＝）または私もブログ始めてみようかなと思ってる方は参考にしていただければと思います。
ヘッダーは大事なレイアウト
情報飽和の混迷期、サイト閲覧時間の減少
インターネットやスマホ端末の普及によって、企業サイトや個人ブログ、SNS、動画配信サイトなどを閲覧する機会は、ここ10年間だけで考えても格段に増えました。いわゆる情報化社会の発展です。
しかし、便利な世の中になったものの、このデジタル情報が増えたことで起こっている問題もたくさんあります。その中でもこの情報飽和の混迷期が引き起こす問題の一つがサイト閲覧時間の減少です。
例えば、SNSなどのタイムラインの高速スクロールや記事文章の読み飛ばしなどがあげられます。この記事を読んでいる読者の方も少なからず、ある程度記事を読み飛ばしたり、SNSを見る際のスクロールするスピードが早いのではないでしょうか？（それが悪いわけではありませんが、文章の前後関係を見ずに誤った切り取り方や捉え方をする可能性はあります。）
このように閲覧する目に留まることのないサイトや記事は、努力してサイト内のコンテンツを増やしたり、面白い記事文章を書いたとしても、閲覧される機会が増えません。まさに、のれんに腕押しです。
このような状態に対処するには、読者や閲覧者の目に留まるようなレイアウト、タイトル文章を考える必要があります。ブログ上級者であれば、ほかにもSEO対策や広告アフィリエイト機能を充実させることで対処する解決策もあります。
ヘッダーの役割とは？
ヘッダーとは、企業のウェブサイトや個人ブログの上部分のスペースを指し、どのページを開いても同じレイアウトが表示される部分です。
個人ブログをはじめ、企業公式サイトでもよく見るヘッダーは、そのページの閲覧者が最初に目にする窓口の部分なので、見せ方はとても大事です。企業であればその会社のロゴをヘッダーに表示させたり、個人ブログであれば自分の好みに合わせた画像やテキストを表示させたりといった具合です。
勤め先でウェブデザイナーをしている僕としても、ヘッダーは企業やブログのコンセプトを印象付けるうえで大切なレイアウトの一つと考えます。
このOMOMUKI COMPASS BLOGのヘッダー画像も元々はデフォルトの画像の上に、ブログ名が乗っているだけでした。ですが、せっかくお金を出して作ったロゴもあるので、うまく表示させてみようと思い、レイアウト変更をしました。
因みにロゴを作った経緯の過去記事です↓
omomuki-compass.hatenablog.com
はてなブログのヘッダー変更方法
ヘッダー用の画像を準備する
ヘッダーの重要性は説明しましたので、次はどのようにヘッダーのレイアウトを変更するのかを画像とともに説明したいと思います。
まず、自分好みのヘッダー画像を用意します。基本的にPC用のヘッダー画像は横長の画像がおススメです。
僕が準備した各ヘッダー画像がこちら↓
はてなブログのPC版ページレイアウトでは、ヘッダー画像の上に文章を重ねて表示する仕様になっています。なので、今回はシンプルに元のアイキャッチの中央にOMOMUKI COMPASSのロゴマークを入れた画像にしました。
一方で、スマホ版ページレイアウトは画像のみの表示です。なので、ヘッダー画像にはコンセプトとなるロゴをそのまま使いました。
編集画面でヘッダー画像を変更する（PCヘッダーの場合）
次にこの画像をブログページに反映させるために、編集画面で作業をします。
①編集画面からデザインページを開き、その中のヘッダを開きます。
②画像をアップロードする欄があるので、ファイルを選択をクリックします。
③挿入したい画像をPC内のファイルから選択して開きます。
事前に作成したヘッダー用画像を選択して開くと…
④挿入した新しい画像がヘッダー欄に表示されます。
見せたい部分の位置の調節も可能なので、微調整を加えて左上の変更を保存するボタンを押して更新すれば、完了です。簡単ですね。
編集画面でヘッダー画像を変更する（スマホヘッダーの場合）
次はスマホ版のヘッダー変更の作業です。
①編集画面からデザインページを開き、スマートフォンタブを開きます。そして、PC版と同じくその中のヘッダを開きます。
②画像をアップロードする欄があるので、ファイルを選択をクリックします。
③こちらも同じように、挿入したい画像をPC内のファイルから選択して開きます。
事前に作成したヘッダー用画像を選択して開くと…
④挿入した新しい画像がヘッダー欄に表示されます。
見せたい部分の位置の調節も可能なので、微調整を加えて左上の変更を保存するボタンを押して更新すれば、完了です。簡単ですね。
やり方さえわかれば、あとは自分の好きなようにヘッダーを変更することもできますし、他のレイアウト機能の使い方を知りたいという好奇心も沸くと思います。
レイアウト機能に関しては、無料ブログの一つのはてなブログも扱いやすいです。ただし、画像内にも映り込んでいる広告を見栄えが良くないと思うブロガーの方もいます。
また、ブログ運営サイトとして、はてなブログとよく比較されるWordPressよりは、レイアウトのカスタマイズ性は低いと思います。僕自身もウェブデザイナーとしては、もう少しカスタマイズの自由度があればうれしいところですね。
とはいえ、はてなブログが手軽にブログをはじめられるツールであることには変わりありません。レイアウトにこだわらなければ、十分に使える機能がそろっています。
皆さんもこれを機にブログを新しい趣味として始めてみてはいかがでしょうか？この記事がその助けになれば本望です。
ーーー
冒頭でも触れましたが、リモートワークの期間を利用して趣味で始めたブログが約一週間で100pvを超えたことは本当にうれしいことです。
これからも皆さんの新しい趣味をサポートしたり、まだ経験したことがない趣味の良さを伝えれるブログを細く長く続けたいと思います。
ではこの辺で。
「あなたのセカイに、趣味のミライを。」
