2012/02/28

bloggerとWordPress 〜デザインカスタマイズについて:blogger編〜

どうもこんばんは。ちょっと更新間隔が空いてしまいました。
なぜかと言いますとこんなサイトを作ってたからなんです!

弊社で開始したウェブパックサービスのサイトです。
自分で言うのもあれですが、めちゃくちゃお得なプランとなっております。
初期費用無料だったり、最短15営業日納品/25万円で営業ツール(ホームページ・名刺・封筒・会社案内・ロゴマーク)が全て揃っちゃったり・・・!
詳しくは上記のリンクからご覧になっていただければと思います。まずはよろしくお願いします!!

よし。一宣伝打ったところで、前回に引き続き、bloggerとWordPressの比較記事を書いていきます。

が、ちょっと記事が長くなりそうなので、デザインカスタマイズについてはblogger編・WordPress編と2回に分けることにしました。

今回は「デザインカスタマイズ:blogger編」をお送りします。

まずはbloggerのデザインカスタマイズを行った印象をば。

■bloggerのここが良い!

・テンプレートのhtml編集までやらなければ、直感的にデザインを選んでクリックしていくだけなので設定が簡単。
・ガジェットの追加で手軽に便利な機能が追加できる。

■bloggerのここがちょっと・・・

・独自のタグがパッと見で理解出来ないのでテンプレートのhtml編集がやりづらい

細かい部分を気にせず、気分に合うデザインをちょちょいっと選んで、ブログに必要な機能を設定して、さぁ、ブログ開始!する分にはbloggerは非常に使いやすいです。
ガジェットの豊富な機能やとっつきやすいメニュー群も相まって、恐らく30分もあればデザイン面・機能面においても及第点なブログが始められると思います。

ただ、細かい所に手が届くデザインカスタマイズ(例えばページごとにガラリとレイアウトを変えたり、アニメーションを設定したりとか)は厳しいかと思います。
あくまでもブログの範疇でのデザインカスタマイズは簡単かつ柔軟に可能、という印象ですね。当たり前といえば当たり前ですけど。

また、最初から用意されているデザインテンプレートはどちらかというとクールなデザインが多いので、可愛いテンプレートで絵文字も使って・・・なブログには不向きかもしれません。

とはいえ、変更したい部分も多々ありましたので、あれこれ弄ってみました!

本ブログのデザイン設定あれこれ

1、テンプレートの選択

管理画面サイドメニューのテンプレートから、好きなデザインテンプレートを選びます。
画像にカーソルを合わせて「ブログに適用」をクリックするだけの簡単設定です。適用する前にプレビューも見られる親切設計です。

マウスオーバーで記事項目がアニメーションしたり、画面の大きさに合わせて要素がアニメーションする「動的ビュー」という洒落たテンプレートも用意されています。こんな感じの見た目になります。そのまま使ってもクールですね。

今回は翠灯舎の圏外から始めるSEOランクアップチャレンジに見た目を合わせるという命題があったので「シンプル」カテゴリーのなかでもとびきりシンプルな真っ白いテンプレートを選びました。

2、テンプレートの編集

テンプレートを適用すると「ブログで使用中」で表示されている画像が変わります。記事内の要素の位置を変更したり、細かくデザインも変更したいので、とりあえずHTMLの編集をクリックしてソースを見てみました。

おー、ちょっとよくわからないタグがたくさん。「ウィジェットのテンプレートを展開」すると多少はわかりやすいような・・・

ブツブツ言ってても始まらないのでとりあえず手を動かすことにします。
あまりデフォルトのCSSを書き換えないほうが良いかなと思ったので、翠灯舎のサーバに上書き用のCSSを置いてヘッダーの最後尾辺りで読み込ませるようにしました。javascriptについても同様に翠灯舎サーバに設置します。
これで少し作業しやすくなったぞ!!

あとはfirebugで編集したい箇所を探しては、

テンプレートの編集画面で「command + F」で検索かけて編集、と地味な作業を繰り返して、おおまかな外観を作りました。

3、ガジェットで機能を追加

外観は出来たのでガジェットを使って機能を追加していきます。
サイドメニュー「レイアウト」からブログのガジェットの追加、編集ができます。bloggerはこの機能が非常に使いやすい上に内容も充実しているのが良いですね。

「ガジェットを追加」を押すと下記の様なポップアップが出ますので、その中から追加したい機能を選びます。フィードリーダーやユーザー登録など他のブログシステムでも見かける機能や、スライドショーなんかも追加できます。

「HTML/JavaScript」ガジェットではベタ書きのhtmlやjavascriptの追加も簡単にできるので、これもうれしい機能です。googleアドセンスや、amazonアフィリエイトはこの機能を使って設定しました。
各機能の詳細設定もナビゲーションが親切なので設定しやすいと思います。

そうそう、現時点では、自身の最新投稿を任意の数表示する機能が用意されていないみたいです。
一応ブログのサイドメニューに最新投稿を表示しておきたかったので、「フィードの設定」を利用して、自身のブログのRSSを取得することで解決しました。
ちなみにbloggerのRSSは
"http://自身のbloggerブログアドレス/feeds/posts/default?alt=rss"
で取得できます。

4、コメント機能をfacebookコメントに差し替え

facebookコメントが便利すぎるのでこちらのブログを参考にコメント機能を差し替えました。

大まかな流れはこんな感じ。

facebook App IDを発行(→App IDの発行はこちらから

facebook Commentsのコードを発行(→facebook Commentsコードの発行はこちらから

発行したfacebook Commentsのコードを少し修正。

<b:if cond="data:blog.pageType == &quot;item&quot;">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-comments" data-href="ブログのURL" expr:data-href="data:post.url" data-num-posts="2" data-width="500"></div>
</b:if>


「HTMLを編集」から「ウィジェットを展開」して上記のコードを貼付け。参考ブログと同様に

<b:includable id='comments' var='post'>
の次の行に埋め込み。

これで設定出来ました!尚、bloggerのデフォルトのコメント機能は管理画面サイドメニュー「設定」→「投稿とコメント」で停止しておきました。

bloggerのデザイン設定は大体こんな感じです。当ブログはベーシックなデザインですが、不慣れな上に意外と細々とした設定が多く、思ったより作業時間がかかってしまいました。

次回はWordPressのデザイン変更について、bloggerと比較しつつ記事を書いていきます。
ありがとうございました!

<運営サイト>
株式会社翠灯舎
翠灯舎のWEB PACK SERVICE(ウェブパックサービス)
翠灯舎の圏外から始めるSEOランクアップチャレンジ
フリーペーパー「音読(おとよみ)」