57


このたび、ブログのデザインを一新しました。

最初は、動かなくなったブログパーツを更新しようかと取りかかったのですが、勢いに乗ってデザインやレイアウトも全部新しくしてしまいました。


ポイントは 4つ;
・デザイン、レイアウト、コードを新しく
・機能を取捨選択する
・livedoor Blog 標準の機能を活用
・ソーシャルサービスとの連携を強化



A.PC向けのデザイン変更について

○デザイン、レイアウトの変更
1)デザインテンプレート
イマドキのデザインにするなら、やっぱりテンプレートは新しいものを選びましょう。コードも新しくなっているようです。
今回は、公式テンプレートの中からスッキリしたデザインを選びました。

(参考)
→・ライフハック心理学 - 佐々木正悟のブログです
→・livedoor Blog 開発日誌

たまたま目にした上記のブログのデザインが気に入ったので、参考にさせて頂きました。


2)レイアウト
レイアウトも上記のブログと同じく、3カラム(左右カラム)から 2カラム(右カラム)に思い切って変更しました。

3カラムだと、本文の幅が狭くて記事が読みにくい、カラムの幅が狭くてブログパーツがはみ出る、という所が気になっていました。

これが 2カラムになることで、幅が広くなってスッキリ読みやすくなりました。


3)カスタマイズ
選択したテンプレートのデザインだと、本文の文字サイズが小さすぎて、行間隔も広く感じたので、その 2点を変更しました。

・カスタマイズ>CSS のコードの内;

/* ----------------------------------------------- */
/** 記事本文 */

.article-body {
clear: both;
background-color: transparent;
padding: 10px 0 5px;
        font-size: 115%;              ←挿入
line-height: 150%;           ←170%から変更
}


この辺りの見た目は、好みになると思います。


4)「続きを読む」を使う
最近、分量の多い記事が続いたこともあり、トップページでの記事の一覧性がよいとは言えませんでした。
スマートフォン向けのデザインを見てみると、自動的に記事の冒頭数行だけを表示することで、記事の一覧がさっと見渡せます。

そこで、PC 向けには「続きを読む」機能を使うことにしました。手動なので、今月からの記事になりますが、見やすいようなら続けていきたいと思います。



○ブログパーツの更新
1)Twitter、Facebook
Twitter 公式ウィジェット (ログインした状態で)
Facebook 公式ウィジェット(ログインした状態で)
ブログパーツを新しいものに切り替えました。

(参考)
→・Facebookの「いいね!ボックス」やTwitterウィジェットの設置 - livedoor ブログ ヘルプセンター


2)はてなブックマーク
はてなブックマークブログパーツ
の、人気エントリーと新着エントリーを追加しました。


3)ブログパーツの整理
・見た目をスッキリさせる為に、あまり必要でないパーツは思い切って外しました。

・新たに加わった livedoor Blog 標準のブログパーツの内、「Twitter プロフィール」を追加して、「livedoor プロフィール」は外しました。



○外部サービスとの連携の見直し
1)livedoor Blog 標準の外部サービス連携が充実したようなので、その中から;
・ソーシャルボタン
・Google Analytics
を利用することにしました。

ただし、ソーシャルボタンは全種類設置するのではなく、効果の高そうな「はてなブックマーク」、「Twitter」、「Facebook」の 3種類に重点をしぼって整理しました。今まで設置していた「Web拍手」は活用していないので外しました。


livedoor 標準の連携サービスを使うことによって、ブログのデザインテンプレートを変えても、毎回カスタマイズでコードを埋め込む必要が減って、とても楽になりました。

ただし、同時投稿サービス(Twitter、Facebook)はイマイチだった(本文が投稿に含まれない)ので、引き続き他社のサービスを使うことにしました。
現在は;
・Twitter への同時投稿は dlvr.it
・Facebookページへの同時投稿は RSS Graffiti
を使っています。

(参考)
→・livedoor Blog の Facebokページへの自動投稿機能が残念だった
→・livedoor Blog のブログ記事を Twitter へ自動投稿するのに dlvr.it を使っていた


2)コードの埋め込み
Zenback

このサービスのコードだけは、テンプレートのデザインをカスタマイズして埋め込む必要があります。

・カスタマイズ>個別記事ページ のコードの内;
</div><!-- articleFooter End -->
               ←ここに Zanback のコードを挿入 
<$Advertise$>

確認したら、以前の記事と同じですね。
→・zenback 使いはじめました;ブログのコメント欄の代わりに、Twitter と「はてぶ」と連携



○コメント欄、トラックバック欄の廃止
今はコメント欄を付けず、Twitter や Facebook にコメントをもらう流れになったので、新規の記事にはコメント欄を付かないことにしました。

トラックバックもあまり使われなくなったので、トラックバック欄も廃止しました。
ただし、自分自身の記事の相互リンクにトラックバックを使うことはまだあると思います。



○個別記事に同一カテゴリの記事リストを載せる

・基本設定>個別記事に同一カテゴリの記事リストを>表示させる
で、関連記事の表示を期待して設定してみました。



B.スマートフォン向けのデザイン変更について

基本的には上記の PC向けと同じ方針です。
ちょうど、新しいデザインが追加されたので、それを使うことにしました。

(参考)
→・スマートフォン向けのデザインをモダンに - 新たなデザイン及びアイテムを追加しました - livedoor Blog 開発日誌
→・スマートフォン向け「Twitter プロフィール」、「アクセスカウンター」を追加し「月メニュー」をアップデートしました - livedoor Blog 開発日誌


1)デザイン選択> basic2013

2)レイアウト>トップページ(およびアーカイブページ)>記事一覧>スタイル> 2013

3)レイアウト>トップページ(および個別記事ページ)>ソーシャルボタン>スタイル>シンプル
(LINE も含めた 4種類)

4)レイアウト>トップページ(および個別記事ページ)>Twitter プロフィール を追加

今風のフラットデザインになりました。



以上が、ブログのデザイン変更ポイントです。
よかったら、参考にしてみてください。