Bloggerのカスタマイズ

様々なテーマがあるものの…

Bloggerは、デフォルトで選べるテーマと様々なフリーで配布されているテーマがあります。フリーで配布されているテーマはおしゃれなものからシンプルなものまで幅広く存在します。もしBloggerユーザーの方でテーマをお探しの方は、「Blogger theme」で検索すればすぐに見つかるはずです。
しかし私の場合、好みが変わっているのか、はたまたセンスがないのか、すごくシンプルなデザインにしたかったものですから、凝った機能はあまり必要としていないので、ほぼHTML/CSSのみでカスタマイズしました。

作るにあたって、いきなりメインブログに適用して崩壊するのは避けたかったので、もう1つテスト用のブログを作成しました。Bloggerの良いところは、名前が使われていない限り、1つのアカウントでいくつでも作れることです。
手順としては、最初に以下のような記述をします。


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='ja-JP' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

この部分は必須となる部分ですので、そのまま書いて下さい。次にheadタグの部分です。


  <head>
    <b:include data='blog' name='all-head-content' />
    <title>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <data:blog.pageTitle/>
      <b:else/>
      <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
      <data:blog.pageName/> | <data:blog.title/>
      <b:else/>
      Page Not Found | <data:blog.title/>
      </b:if>
      </b:if>
    </title>
        <meta content='width=device-width, initial-scale=1.0' name='viewport' />
        <b:skin>
            <![CDATA[  
            /* Custom CSS code */
            ]]>
        </b:skin>
    </head>

この部分も必須です。そのまま書いて問題ないです。<b:skin>というタグに挟まれた<[CDATA[...]]>部分にお好みのCSSを記述するという形になっています。次にbodyタグの部分です。


    <body>
      <header>
        <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
        </b:section>
      </header>
      <article>
        <b:section class='main' id='main' preferred='yes' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
        </b:widget>
        </b:section>
      </article>
      <aside>
        <b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
        </b:section>
      </aside>
      <footer>
        <div class="copyright" style="clear: both;">
        Copyright <strong><data:blog.title/></strong>
        </div>
      </footer>
    </body>
</html>

<b:section>というタグがあります。これはレイアウトメニューで表示される部分で、最低１つは必要です。でなければ、ブログとして成り立ちません。<b:section>の属性として、id、class、maxwidgets、showaddelement、growthがありますが、必須なのはidのみです。idやclassはHTML同様、main、sidebar、footer、navbar、headerなどを指定します。maxwidgetsはそのセクションで使用できるウィジェットの上限を指定します。例えば、1と指定すると1つしかウィジェットを配置できません。特に指定しない場合は上限はありません。showaddelementはレイアウトメニューで「ページ要素を追加」リンクを表示するかどうかの指定をyesかnoで行います。growthはセクション内のウィジェットを並べて表示するか重ねて表示するかを指定するらしいのですが、使ったことはありません。verticalとhorizontalのいづれかを指定します。
<b:section>に含めることができるのは<b:widget>のみです。
<b:widget>の属性はid、type、locked、title、pageType、mobileとなっています。その中で必須なのは、idとtypeでtypeはウィジェットの種類なので、上記のように指定してください。lockedはyesかnoを指定します。これはそのセクションから他のセクションに移動したり、削除したりすることをできるようにするか否かを指定します。これもレイアウトメニュー内での操作の話になります。title、pageTypeは特に指定しなくてもデフォルトでよいと思います。mobileはyesかnoかonlyを指定できます。指定しない場合、defaultとなりHeader、Blog、Profile、PageList、Adsense、Attributeのみがモバイルでの表示となります。テーマメニューのところにあるモバイルでの表示に関わってきますが、私はデフォルトのものは使わず、CSSでモバイル用の記述を行いました。

適用

あとはお好みでレイアウトをCSSでカスタマイズしていきます。それが終わったら、テーマをバックアップし、そのバックアップをメインブログに適用するという形になります。私の場合は当ブログのような、まるで素うどんのようなシンプルなものになりました。フォントはGoogleフォントを使っています。新しいウィジェットはmaxwidgetsの上限を超えない、かつshowaddelementがyesとなっていれば、普通に追加できます。
ぜひ皆様も一度チャレンジしてみて下さい。

追記(2020/9/30)

一部コードのエスケープ文字の誤打を修正しました。申し訳ございません。

2019/07/31