カゴシマ・クリップ

鹿児島。西郷どん(せごどん)。カフェ・ランチ。なんでも書くブログ。

ユーザーの頭の中に「!」を与えるヘッダー画像の作成方法【初心者のはてなブログカスタマイズ】



f:id:gem-clip:20170709103351j:plain

はてなブログのカスタマイズについて、初心者が初心者向けに記事にしたいと思います。まずは「ヘッダー」の画像を作成したので、参考にしたサイトなど、その方法について解説します。

 ヘッダーに画像を設定しました

 

ブログのヘッダーに画像を設定しました。

 

初心者向けのシンプルなヘッダー画像の作成方法について解説します。 

「ヘッダー」とは、ブログの上部に表示されている部分の事で、ブログタイトルなどが入ります。「ヘッダー」は自分の家であるブログの「玄関」としてユーザーをお迎えする重要な場所となります。

 

ブログを開始して23記事目になりました。読者さんも少しずつ増えてきて、モチベーションもアップ!コメントいただく方、本当にありがとうございますm(――)m(逆に読者の方のブログを訪問したら素敵な方々ばかり)


ブログ「頭の中のゼムクリップ」は、はてなブログテーマに沿ったスッピンブログだったわけですが、欲が出てきました。

 

「カスタムしたいぜ・・・」

というわけで、しばらくブログのカスタマイズを行っていきたいと思います。


ブログは、自分の意見を表明する場であり、ユーザーをお迎えする「ゼムの家」でもあります。


新生活の春だからでしょうか。今までは、洗濯機、冷蔵庫、テレビ付きの大手アパートの1室を借りてたようなものでしたが、少しずつ自分の気に入ったものを揃えたくなってきた心境です。

 

家のレイアウトを変更しよう!と思い立ち、あれこれ片付けてると、途中で手が止まってしまう時ありませんか?昔の写真が出てきたり、無くしてた思い出の品がでてきたり・・

 

ブログのヘッダーが重要な場所であることは 明白であるために、3日間悩みました。でも、結果シンプルな方法でスタイリッシュにできました!

 

やっぱカスタマイズすることは勉強になります。いろいろな先輩のブログを参考にさせていただきました。これからカスタマイズしていくユーザー様のためになれば。

初心者として、誰でもできるシンプルな方法を紹介していきます。

 

これまでのスッピンスタイル

 

f:id:gem-clip:20170408090656j:plain

 シンプルなのは気に入っていましたが、オリジナリティは全くないですよね。スッピンですから。

 

欠点として、縦に余白(ムダなスペース)があること。読者さんを迎えたときに、このわずかな数cmの差が、ユーザビリティの低下を招いてしまいます。部屋の中に入るまでに気がひけてしまう。

 

そして標準フォントであること。インパクトが低く、印象に残らないヘッダーです。

 

ヘッダー画像の作成

「クリップアイコンの取得」

まずは画像の作成から。僕らが生きる星、ネット界の巨人グーグル先生もマテリアルデザインを主流としてますので、できるだけ意向に沿ったシンプルなものにしたいと思いました。

 

「頭の中のゼムクリップ」というブログタイトルにしてよかったこと。「クリップ」は、世界共通の文房具。すぐに素敵なサイトを見つけることができました。

アイコン素材ダウンロードサイト「icooon-mono」 |

f:id:gem-clip:20170408101152j:plain

 

 

 「!」(ビックリマーク)も。

  「!」には、記事を見ていただいたときの頭の中に「!」が出た瞬間をイメージしてつけました。

f:id:gem-clip:20170408101153j:plain

「クリップしとこう!」とか「なるほど!」とか。

「あっ!」とか「えっ!」とか「wow!」とか思っていただけるような記事を書くことをこれからも心がけていきたいです。

 

「ブログタイトルフォントの取得」

f:id:gem-clip:20170408101154j:plain

 オリジナリティがあって、シンプルなフォント。

「絵(イラスト)」より「文字(フォント)」の選択の方が難しいですよね。読みやすく、不快感を与えず、印象に残る文字ってなに?悩みに悩みました。

 

悩んだ末の結果。フォントは「フォントポにほんご」にしました。

こちらのサイトから拝借。

fontopo | 日本語フォント無料ダウンロード

f:id:gem-clip:20170408101155j:plain

 

自分で書いていたらそれこそ何時間かかることか。
イラストレーターとか持ってませんので
パワでシュシュシュっと。

 

完成です。(。・ω・ノノ゙ パチパチパチ

 

↓完成したヘッダー画像

f:id:gem-clip:20170408090655j:plain

↓ブログのヘッダーに画像を設定

f:id:gem-clip:20170408110013j:plain

訪れてくださる読者さんが不快にならず、シンプルに頭の中に「!」を与えるヘッダー画像になれたのでしょうか。

 

結局、何が正解なのかはわかりません。PVが上がることが正解なのか、ブロガーの作品として自分が満足できればそれでよいのか。

 

今後も、先輩のブログを参考に、勉強していきたいと思います。

 

次回、作成した画像をはてなブログのヘッダーに設定する方法を説明したいと思います。

 

最後までお付き合いいただき、ありがとうございました。

皆様のブログのヘッダー、どのように工夫されていますか?

皆様のご自宅、おじゃまさせてください。

ブログのヘッダーなどなど、参考にさせてもらいますので、よければ読者登録お願いします。