【ZELO】レイアウト・ガジェットをカスタマイズしてみよう【blogger】

　本日もbloggerのテーマ【ZELO】をカスタマイズしています。

　作業前に、すでに完了している内容はこちら。

• 見出し装飾3種類の更新
• GoogleAdSenseの【Labs】機能コードの配置と有効化
  (各種自動広告が配信されます)
• ページ項目の移設と表示

文字の大きさと、配色にも手を入れたい。

今回は、レイアウトとガジェットをメインブログに近づけます。

ガジェットの追加とブログ全体のレイアウト更新をしてみよう

当ブログのデザインテンプレートをZELOに更新して、メインブログと比較しました。

記事内は、見出し装飾の更新が成功したのでおおむね同じ印象です。

ガジェットを追加しないと、Twitterのフォローボタンや記事アーカイブがないので物足りない。

ガジェットの追加は標準の操作でOK

【blogger】管理画面より、下記の項目を選択して編集画面へ

• レイアウト
• ガジェットを追加
  5か所のうちheader・main・sidebarの項目が配置候補

主にサイドバーへガジェットを追加していきます。

ブログ記事の【アーカイブ】は追加したほうが便利ですね。

他にはTwitter関連、webリンク、アクセスカウンターを追加しました。

レイアウト全体はスマートフォン表示を考慮する

スマートフォンで表示した場合、サイドバーに配置したガジェットは画面下部までスクロールしないと現れません。

ブログ記事が読まれた後に、続けて選択されやすそうなメイン項目に【人気の投稿】ガジェットを配置しました。

サイドバーのアドセンス表示は『レスポンシブ』にしました

bloggerといえばGoogleAdSense。
当ブログでもアドセンス広告が表示されます。

サイドバーへのアドセンス・ガジェットの配置時にレポート形式⇒レスポンシブを選択しておくと、大きな縦長広告が表示されます。

表示サイズを固定選択した場合、全体のレイアウトが安定します。

サイズ指定する場合は、モバイル版表示でのバランスに留意してください。