僕がブログのデザインを新しく作るときに気をつけた3つのポイント

ロゴマークとデザインを変えます。
というエントリをあげてから早2日。
今日、ようやくデザインを変更できました。

想造ノート

 

今回はロゴから背景、テンプレートのカスタマイズまで全部手がけていたので、結局丸2日がかりの作業になってしまいました…。が、その対価に見合うデザインに仕上がったのではないかと考えています。
実は前のテンプレートはカスタマイズせずに使っていたので気に入らなかった部分が多かったのですが、今回はそれらの不満点をすべて払拭できたので大満足です。
なお、このエントリは「Blogger」での話です。Bloggerでしか使えない機能も一部含まれていますのでご注意ください。

今回気をつけた三つのポイント

さて、今回デザインを変更する際に気をつけたポイントがあります。
それは

  • ソーシャル連携
  • 検索機能
  • 関連記事

の3つです。

ソーシャル連携

今回一番気を使ったのは、この「ソーシャル連携機能」かもしれません。
先日までのページは、テンプレートそのまま使っていたので、Blogger標準のソーシャル連携機能しか存在していませんでした。
でも、ボタンは小さいし、サービスも偏ってるしで使い勝手がいいとは決して言えない。
「ブログをやっていく上で、ココは絶対外せないだろう」と改めて痛感しましたのでしっかりと設置することにしました。
今回設置したのは、エントリ上部と下部の2箇所。
2箇所に用意したのは、それぞれに異なる用途をイメージしているためです。
想造ノート: ロゴマークとデザインを変えます。
エントリ上部のものは、見出しをみたらおわかりいただけるかと思いますが「あとで読む」ため。タイトルを確認して気になるものを「あとで読む」しやすくするために設置しました。
想造ノート: ロゴマークとデザインを変えます。
エントリ下部のものは、情報共有、ストックのため。エントリ内容を確認し、誰かに教えたい・あとでまた資料として使いたいと思われたときに素早く登録できるようにと設置したものです。
今回連携できるようにしたサービスは

の7つ。
日本でのメジャー所は全てカバーできたかなと考えています。
なお、Read It LaterとInstapaperの連携機能はひとぅさんの「ひとぅブログ」を参考に実装させていただきました。
ひとぅブログ

参考にさせていただきました!ありがとうございます!

検索機能

次に気をつかったのがこちら。検索機能。
Bloggerに標準で付いている検索機能は何故か文字化けして使い物になりません。 今回は、自分でGoogleカスタム検索を使って実装することに。
Google カスタム検索 – サイト検索をカスタマイズ

意外と細かい設定も出来、ブログ内に直接組み込むことも可能!
使ってみて初めて知ったのですが、かなり細かく設定ができるのですね。
何より驚いたのは、検索結果を外部ウインドウに出さずにブログ内に組み込むことができる点。
このブログでも早速実装してみました。
右上の検索機能から検索してもらうと…あとはお楽しみということで。
想造ノート

関連記事

最後の一点はこちら。関連記事機能です。
いままではLinkWithinというサービスを使っていました。
こちらのサービスだと、ページのサムネイル表示が出来て綺麗だったのですが、ちょっと重かったのですね。
そして、何故か他のブログパーツとかぶってしまう不具合が出てしまいました。
ということで、今回からはBlogger用の関連記事表示機能「BRPS」を使うことに。
Blogger Related Posts Service » Get Key and Install

書かれているとおりにインストール。
で、テンプレートにきちんと組み込めたら準備完了です。これでBloggerでも関連記事を表示できるようになります。
ちなみにこのアドオン機能、ラベルをキーに関連記事を表示してくれるようですので、ラベルなしの記事だと関連記事が表示されません。ご注意くださいませ。

最後に

ということで、見た目の修正はこれで完了です。
個人的にはかなり気に入ってるので、このデザインで当面は継続していこうと考えております。
また、他にもいろいろと使い勝手の悪いところがあるかもしれませんので、もし何か有りましたらTwitterかFacebook、Google+かこちらのエントリのコメントにてお教えいただけるとありがたいです。

次は

あとは、プロフィールページや連載ページを充実させていきたい所です。
「仕事募集!」とか、ここで告知もしていきたい所です。

コメントを残す