瞑想Hack

32歳で国家公務員をやめて自由になったパオが、”瞑想ライフハック”を実践するブログ

開設1か月ではてな読者175人!デザインはこれだけやればOK!

【スポンサーリンク】

f:id:pao-elephant:20181223121721p:plain

おかげさまで、当ブログは開設1か月で、はてな読者175人に到達しました。今回は、読者を増やすには欠かせない、ブログデザインのカスタマイズをご紹介します。

 

 

 

 

 

はじめに

f:id:pao-elephant:20181223141100j:plain



私は、まったくのブログ初心者でした。

 

 

それでも当ブログ「瞑想Hack」は、開設から1か月で、175人の方から読者登録をしていただきました。

 

 

本当に感謝です。

 

 

はてな読者数は、あくまでブログの質をはかる指標のひとつにすぎませんが、スタートとしては悪くないと思います。

 

 

初心者だった私が読者数を増やしたブログ運営4つのポイントについては、先日まとめまたものがありますので、こちらもあわせてごらんください。

 

 

www.pao-elephant.com

 

 

はじめの1か月の運営はとても重要ですが、公開する前の準備も重要です。

 

 

特に、デザインのカスタマイズですね。

 

 

ブログ初心者が、いきなりプロブロガーさんのようなおしゃれなデザインを作ることはなかなかできないです。

 

 

でも、初心者なりに、努力してみる価値はあります

 

 

ぱっと見で、「あ、この人、ちゃんとブログやろうとはしてるな」と思ってもらうくらいの努力です。

 

 

プロ並みのブログはすぐには作れませんが、少しの努力で、そこそこの見た目にはなります。

 

 

具体的にどうやったか、順を追って説明します。

 

 

 

テーマ選び

f:id:pao-elephant:20181223141346j:plain

 

はてなブログを開設したら、まずデザインのテーマを選びます。

 

 

私は、ZENO-TEALというテーマを使わせていただくことにしました。

 

 

おしゃれでポップ、それにとても使いやすく、人気のテーマのひとつです。

 

 

ただし、無料版では使わない方がいいみたいです。

無料版で使うと、広告の表示がGoogle AdSense のポリシー違反になるおそれがあるそうです。

 


テーマ選びは、好みが分かれるところですね。

 

 

私は、トップページを見たときに、記事がパッと見で一覧になっているカードタイプの方が見やすいと思いました。


  
また、レスポンシブ対応という点も重視しました。

 

 

レスポンシブ対応のテーマにしておくと、スマホで見たときも、画面のサイズに合わせてデザインが自動的に調整されます。

 

 

今は、ブログ運営では、スマホからのアクセスを意識せざるを得ません。

 

 

レスポンシブ対応でない場合は、スマホ用のデザインもカスタマイズする必要がでてくるので、余計な手間がかかりったりします。

 


全体の色合いは、ホワイトとブルーを基調にして、できるだけオリジナルっぽくなるようにしました。

 

ヘッダー

f:id:pao-elephant:20181223140345p:plain

ヘッダー画像の推奨サイズは、1000px × 200px といわれています。

 

 

ヘッダー画像には、ブログタイトル、ブログの説明文、イラストを入れます。

 


ヘッダーは、文字だけですませることもできますが、少しでも読者の印象に残るように、簡単なイラストも入れました。

 

 

外注して本格的なものにしたい気持ちもありますが、それはおいおいということで。

 

 

ぞうさんのイラストを、妻に描いてもらいました。

 

 

iPad のペイントアプリで描いた後、自分のパソコンに取り込み、画像編集ソフトで体裁を整えました

 

 

画像編集ソフトは、Canva を使っています。

 

www.canva.com

 

日本語に対応しています。

 

 

無料で使えますし、photoshop などと違って初心者でもわりと簡単に使いこなすことができます

 

 

Google や Facebook のアカウントをもっていれば、ログインしてクラウド上で利用できるので、おすすめです。

  

 

ナビゲーション・バーの設置

f:id:pao-elephant:20181223134948p:plain

ナビゲーション・バーとは、図の赤枠の部分です。

 

 

ヘッダーの下にあり、カテゴリー名を表示しています。グローバルメニューともいうそうです。

 

 

リンクになっており、クリックすると読みたいカテゴリーの記事一覧が出てきます。

 

 

これは、読者がパッと見たときに、全体的にどんな内容を扱っているブログなのかを把握することができます。

 

 

これがあるだけで、とても読者に親切なブログになるので、設置した方がいいと思います。

 


設置の方法は、つなさんという方のサイトを参考にさせていただきました。

 

pea-nut.hatenablog.com

 

わかりやすく解説してくださっています。

 

 

ブログ初心者でも、説明の通りに落ち着いてやれば、簡単にできます。

 

プロフィールは大きく

f:id:pao-elephant:20181223140524p:plain

トップページにあるプロフィール欄、このように大きくしました。

 

 

プロフィールは、自分がどういう人物か知ってもらうための場所。

 

 

ブログに興味を持った読者が、この人どんな人?と思って、最初に目が行くところです。

 

 

はてなブログのプロフィール欄、デフォルトだと小さくてあまり見やすくありません

 

 

やり方は、こちらのみっきーさんの記事を参考にさせていただきました。

 

panmeeee.hatenablog.com

 

 

とてもわかりやすい!htlm css ができない人でもまったく問題ないです。

 

 

サイドバーにあるデフォルトのプロフィール設定は、自由にカスタマイズできません。

 

 

モジュールを追加して、そこに新たなプロフィールを入れ込むかたちにします。

 

 

ポイントは、画像を大きくすること。

 

 

ぱっと見のインパクトが重要です。

 

 

みっきーさんの記事の通り、サイズは 300px × 300px くらいあった方がいいと思います。

 

 

SNSボタンをおしゃれに

最後に、SNSボタンのカスタマイズについてです。

 

 

はてなブログのデフォルトのSNSボタンもあるのですが、小さいですし、正直あまり見栄えが良くありません

 

 

ですので、おしゃれにカスタマイズします。

 

 

大きく分けて、フォローボタンシェアボタンがあります。

 

 

フォローボタン

f:id:pao-elephant:20181223141857p:plain

フォローボタン、私はこの3つです。

 

 

Hatenaを押すと、はてなブログの読者登録ができます。

 


Twitter、Instagramを押すと、それぞれフォローすることができます。

 

 

場所は、サイドバーと、記事の下の部分の2か所に設置しました。

 

 

こちらの shun さんのサイトを参考にしました。

 

www.ituore.com

 

フォローボタンだけで合計11種類のデザインを載せていただいているので、その中から好きなものを選びます。

 

 

説明の通りにやれば、なんなくできます。

 


初心者にもこれだけわかりやすくしていただいていて、感謝です。

 

シェアボタン

f:id:pao-elephant:20181223142114p:plain


こちらは、記事をSNSでシェアしたいときに使うボタンです。

 

 

私は、Twitterはてなブックマークを設置しました。

 

 

これは各記事につけるものです。

 

 

私は記事の冒頭部分と、記事の最後の部分につけました。

 

 

参考にしたのは、こちらの vinton さんのサイト。ありがたい。。

 

webgaku.hateblo.jp


SNSの種類はたくさん、人によって使うものもそれぞれです。

 


不要なものは削って、自分なりにカスタマイズしていくといいですね。

 

おわりに

f:id:pao-elephant:20181223142426j:plain

 

以上が、私がブログ公開前に行ったデザインのカスタマイズです。

 

 

見た目、やはり重要です。

 

 

ブログを訪問してくれた人に、ストレスなくコンテンツを読んでもらうための工夫ですね。

 

 

見た目や操作性が良いと、やはり読者はつきやすいです。

 


はてなブログは、ありがたいことに、デザインのカスタマイズの方法や css のコピペ用コードが、すでにネット上にたくさん公開されています。

 

 

はてなブログの先輩たちが、親切にも記事を蓄積してくれています。

 

 

基本的なことなら、ググれば、だいたい問題は解決します。

 

 

はてなブログ先輩のみなさんのおかげです。

 

 

しかし、やはり限界もありますね。

 

 

プロブロガーさんのようなおしゃれなブログは、すぐには作れません。

 

 

はてなブログを使うことの限界もありますね。

 

 

表面的なデザインは調整できますが、基本の構造は変えられません。

 

 

私は、はじめ慣れなかったので、デザインのカスタマイズをするだけでも、3〜4日費やしました。

 

 

 

見た目はとても重要ですが、見た目ばかり凝っていては本末転倒です。

 

 

あとは、中身です!

 

 

記事の質を上げていくのに、労力をさいていきましょう!

 

 

はてなブログをこれから始めたいという方、始めたばかりのいう方の参考になれば嬉しいです。

 

 

PAO