メンズのスキンケア・美容研究ブログ

1980年代生まれ。162cm 49kg 紙媒体制作会社の主に内勤営業。 美容や健康について日々勉強しています。 詳しいプロフィールはaboutページをご覧ください。

開設2ヵ月ブログ初心者が行ったデザインカスタマイズまとめ

スポンサーリンク

f:id:mochi-mochi-kun:20170314211615j:plain

こんにちわ。1月に美容ブログを開設した初心者がようやくはてなブログの機能も覚えてきた今日この頃です。

3~4月は仕事が忙しくなる時期で最近はなかなか更新できていませんでしたが、地道にブログのカスタマイズ作業を続けておりました。当ブログは美容ブログですので見た目も綺麗にしていきたいのです。

またGoogleもサイトのレイアウトや快適性を評価しているようですので、SEOやAdsense審査の対策も兼ねてより見やすく、使いやすいサイトにするためのカスタマイズは重要だと思っています。

 

今回の記事はブログ開設から2ヵ月を経過した現在まで行ったカスタマイズをまとめてみました。ジャンルを問わずに新しくブログを始めた方のご参考になれば幸いです。

 

カスタマイズ第一段階

開設1ヶ月の段階での工事です。主にはてなブログPro登録と独自ドメイン取得、デザインテーマ変更などを行っています。

 

はてなブログProへの登録&独自ドメイン取得

はてなブログのユーザーならご存知の有料プランです。一ヵ月契約なら1008円、最安の二年契約プランなら割引で月600円の費用がかかります。

Pro登録のメリットはブログを細かいところまでカスタマイズできること。

そして収益化を目指すのであれば、クリック型広告のGoogleAdsenseを申請する条件となる独自ドメインを設定するためにPro登録が必須になります。また、無料版に設置されている広告を消すこともできるのでより自分好みの広告配置が可能になります。

他にはデフォルトの簡易アクセス解析から機能を強化したはてなカウンターを使用できるようになります。「どの記事がアクセスが多いのか」、「どこからユーザーが来ているのか」など。より詳しい解析が行えます。

独自ドメインとは

独自ドメインとはインターネット上の自分専用のアドレス。いわゆる住所のようなものです。無料版はてなブログであれば.hatena.ne.jpのドメイン内の集合住宅に間借りしているようなもので、独自ドメインは自分の土地に家を建てるようなものと考えると良いでしょう。

無料ドメインを使用している場合はその運営会社がサービス終了となってしまうと、今まで運営会社のサーバー上にUPしてきた記事や情報が消滅してしまうリスクがあります。

上でも書きましたがGoogleAdsenseを使用するためには無料ドメインでは登録することができないので、独自ドメインが必要となります。

私はお名前ドットコムで取得しました。

 

デザインテーマ変更とレスポンシブ対応

ブログ開設当初はシンプルなデザインの公式テーマを使用していましたが、もう少し個性を出したくなったのでテーマストアから色々探して現在のMinimal Greenに決めました。

このデザインはレスポンシブ対応しているのでスマホ用の細かい設定をしなくても、自動的に表示を最適化してくれてPC版と共通のデザインにすることが可能です。デザイン→スマホアイコン→詳細設定でレスポンシブデザインにチェックするだけでスマホ版のデザインを変えられるので私のような初心者にはとてもありがたい機能です。

ちなみにこの背景画像は公式のもので、緑を基調としたシンプルなMinimaru Greenでライトなポップ感を出すために使用しています。

 

※現在はレスポンシブデザインを解除し、スマホ版は独自のデザイン設定にしました。

 

サイドバーにコンテンツを追加する

PC版のサイドバーは記事を読み進めてスクロールしているときもずっと目に入るので、とても重要な場所です。多くのブロガーさんがそうしているように、私もサイドバーは右側に配置されているのが、メインである記事に付随する情報として視覚的にも見やすくて良い考えています。

当ブログでは上から

広告

プロフィール

about・お問い合わせなど

検索窓

最新記事

人気記事

カテゴリー

アーカイブ

ブログ村バナー

他サイトへのリンク

広告

の順に配置しています。

サイドバー上の広告は目につきやすいのでクリックへの期待が高いのと、プロフィールも重要だと考えていますので上の方に配置しています。記事リンクやカテゴリー、アーカイブはナビゲーションのためにも見やすいところにあった方が良いと思います。

 

スマホ版になるとサイドバーは記事の下に来るのが一般的なので、ユーザーはそこまで見てくれない可能性が高くなります。直帰率を下げるには記事下のコンテンツを充実させるといった対策が必要になってきます。

 

カスタマイズ第二段階

先日から少しずつレイアウト変えていき、まだ細部の調整は必要ですがようやく形になってきました。主な内容はナビゲーションの強化のためにヘッダーにメニューバーを設置したのと、記事下に関連記事を表示したこと。そしてスマホ版をより良くするためにレスポンシブデザインを解除して独自のレイアウトにしました。

一応タイトル画像も設定してみましたが、フリーのイメージ素材に文字を打っただけの簡易なものなので、もう少しクオリティーを上げられるようにしていきたいです。

 

メニューバーを設置して全体を見やすく

これがあると本格的なホームページっぽくなるので見た目の印象もだいぶ変わってきますね。勿論、上部にメニューがあることで各コンテンツに誘導しやすくなりサイト内の回遊率向上に期待ができます。

 

こちらの記事を参考にさせていただきました。

pomeyama.hatenablog.com

 

私のブログではメニューバーを2段にしてホーム、aboutページ、お問い合わせフォームと全カテゴリを表記するようなレイアウトにしました。

現在9カテゴリあるので今後これ以上増えるようならメニューが多くなり過ぎてしまうので、大分類→小分類といったカテゴリ分けのナビゲーションにする必要が出てきそうです。

 

購読している月城さんのブログは元からメニューバーが設置されているデザインテーマを使用しているそうです。シンプルでオシャレ且つカスタマイズしやすそうなデザインですので、これからデザインテーマを決める方は検討する価値ありだと思います。

www.tukishiro01.com

 

 

関連記事を表示させてサイト内リンクの強化

良質な記事であれば最後まで読んだ後に記事下に関連記事が表示されていると、続けて読みたくなるものです。自分の記事を最後まで読んでくれたユーザーには是非とも他の記事も読んで回遊して行って欲しいですよね。

 

こちらのshisuh株式会社様のMilliardを設置させていただきました。

corp.shisuh.com

各種設定項目を入力することで自動的にコードを生成してくれます。複雑な操作はなくコピペだけで設置出来るのでビックリするくらい簡単です!

 

Milliardのデフォルトはパネル型でオシャレなレイアウトです。私としてはもうちょっとすっきり見せたかったので、こちらの記事を参照して関連記事を2列のリスト型で10記事表示するようにカスタマイズしました。スマホ版では5記事を縦1列で並べています。

www.yukihy.com

 

 

スマホ版のデザインを変えて個性を出す

はてなカウンターやGoogleアナリティクスを利用している方なら、どんなブラウザ・端末からアクセスが多いのかもチェックされていると思います。今の時代スマホからのアクセスはPCよりも多くなっているので、アクセスを集めたい・リピーターを増やしたいのならスマホ対策は必須といえます。

はてなブログのスマホページは本当にシンプルなレイアウトです。これはこれで見やすくて良いのですが、没個性的で寂しい感じなのがネックです。

スマホ版のデザインを変えるにはレスポンシブ対応のデザインテーマを設定するか、スマホ用に固有にカスタマイズをするかの二択となります。

レスポンシブデザインを使うのが一番簡単であり、私も最初はレスポンシブの設定にしていましたが、機能面を考えると元々のはてなブログのスマホ版の方が使いやすいと思います。

あとはPC版のhtmlを自分でいじったときに上手くスマホに反映されないことがあり、場合によってはデザインが崩れることもあったのでスマホページは専用にカスタマイズすることをおすすめしたいです。

www.ituore.com

こちらの記事に記載されている基本コードから自分好みに設定変更してスマホページでも個性を出すことができました。PC版に合わせたデザインにしたので、過去にPCからアクセスした人がスマホで検索して偶然再訪するようなことがあったときに、同じブログだと認識してもらえるのではないでしょうか。

 

スマホ版にメニューボタンを設置する

スマホでの記事閲覧はPCのようにサイドバーがすぐ見える場所にないので、カテゴリやアーカイブなどを探せるような分かりやすいナビゲーションが必要になってきます。

ヘッダー部分にメニューがあると目的のページが探しやすくなります。サイト内を回遊してもらいたいならPC版以上にメニューは重要といえるかもしれません。

 

関連記事表示のカスタマイズでも参考にさせていただいたゆきひー様の記事から、コードをコピペして簡単にトグルメニューを設置することができました。多くのブロガーのために役立つコードを公開されている皆様には本当に感謝です!

www.yukihy.com 

広告を見た目で選ぶ!

現在まだGoogleAdsenseが使えないので楽天の広告を貼っています。設置している広告にはちょっとしたこだわりがありまして、ブログをデコレートしてくれるパーツという考えで選んでいます。

いかにも「アフィリエイト貼ってます」という広告や「胡散臭い商品・サービス」の広告は配置しないようにしています。美容・健康関連にはそういったものが多いですが……

広告選びに関しては完全に自分の趣味で利率も度外視ですがそれで満足しています。ちなみに私は↓のようなナチュラルでいやらしさのない広告が好みです。

  

今後の方向性

今回は公開されているコードをベースに色やスペースなどを設定することでブログを自分なりにカスタマイズできました。はてなブログのデザインのカスタマイズはとても奥が深い……

今後はHTMLやCSSの知識を身に付けてもっと見栄え良く、もっと使いやすいブログに改良していきたいです。

 

そしてデザインもある程度形になってきたのでGoogleAdsenseの再審査もそろそろ申請しようかなと思っています。2月に記事数42でレスポンシブデザインを設定していた頃に「コンテンツ不十分」で一度落ちていますので何とかリベンジしたい!

審査が厳しくなったと言われているAdsenseに受かればGoogleから一定の評価を得られたと自信も持てることでしょう。

 

ところで、この段落を書いている時点で4400文字を超えてしまいました。美容記事でも最高は3300くらいだったと思うので、当ブログでもっとも重厚なテキストの記事になりました(笑)

最後まで読んでいただきありがとうございます。

スポンサーリンク