ページ

2014年7月13日

blogger:テンプレートを修正中


bloggerのシンプルテンプレートでは、トップページの個々の記事の表示は空間効率が悪い。 ニュースサイト等のように個々の記事表示をコンパクトにし表示数を増やす方法を提示したい。






bloggerのシンプルテンプレートは、日記風ブログの作成には手頃なテンプレートだ。 しかしながら、ニュースサイトに見られる記事の一覧表示としては空間の効率は良くない。

トップページでは記事本体の表示およびカテゴリやアイコンエリアを削減しシンプルな表示となるようテンプレートを変更する。

将来テンプレートが変更となった場合に備え、テンプレート変更は出来るだけ行わないポリシーとする。

構造分析と変更ポイント


テンプレートは「シンプル」を用い分析と変更を行った。

HTML構造の分析にはGoogle Chromeのデベロッパーツールを用いるとclass名やschema.orgタグをテンプレート内のキーワードを用いた検索機能や構造の折りたたみ表示する機能等がHTMLを理解する際の助けに良いだろう。

bloggerのテンプレートは、schema.orgを用いたタグ記述(itemscopeやitemType等)とbloggerのレイアウト用ウィジェットタグ(<b:widget [属性]>等のタグ)を用いて記述されている。 そのため、これらのタグを用いて記述されたHTMLを理解することが必要だ。

HTMLファイルの構造を理解するためには、テンプレートから展開されたHTMLを参照し理解することが手軽な一つの方法だ。ブラウザに表示されているページ内の日本語のキーワードを検索し前後タグをピックアップしテンプレート上の該当箇所を探す。

目印としたキーワードは、DIVタグのclass名main-outer,region-inner main-innner,main-section,widget Blogやschema.orgタグのitempropやitemTypeに指定されているキーワードおよびbloggerレイアウトタグのdata:タグを用いて構造分析の目印とすることが出来る。


テンプレート上の記事表示部


上記方法で記事を表示する部分を検索すると下記の部分であることが分かる:

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
<!-- Then use the post body as the schema.org description,
     for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
     <div style='clear: both;'/> <!-- clear for photos floats -->
     </div>
</b:if>

黄色でマークした<data:post.body/>が記事を表示する部分となる。 緑色の制御構造はコメントで記述がある通りGoogle+やFaceBook向けにスニペット様にタグを付加してある。

この部分以後はSNSアイコン、カテゴリ名、投稿者名、時間等の表示を制御する記述がつづく。 この部分は表示制御(レイアウトメニュー内で個々のガジェット)にかかわらずDIVタグが出力されるようになっており記事の表示に空行が多くなる要因である。

トップページにSNSアイコンやカテゴリ名の表示をしなように当該行を<b:if ...>記述内に移動することで空行を削減させることとした。

トップページへ表示する内容


WordPressを例にすると、トップページには記事の一部だけを切り出して表示することと、記事内に使われているイメージをアイキャッチ画像にすることが出来る。

アイキャッチ画像をトップページへ表示させる方法として、記事上部をアイキャッチとリードとすることで対応可能である。

具体的には、記事の上部にアイキャッチ画像とリードを記載し<!--more-->で表示を切り分ける。 これによって、テンプレートの改変せずにアイキャッチ画像とリードをトップページへ表示することが可能だ。

記事単体への遷移は、テンプレートで<!--more-->が<A HREF=''>タグの#more付きでリンクとして作成される。 そのため、「記事を読む」や「続きを読む」で表示される記事はは一見視野から外れる。

記事へのリンクはボックス全体がリンクではない、リンクは「タイトル」と「記事を読む」の二箇所に生成されるが、タイトルをクリックすると全文表示となる。 テンプレート中の当該部分を変更することで対処することも可能ではあるが許容範囲とした。

まとめ


bloggerを用いる場合、サーバ側のスクリプトやテンプレートの自由度ではWordPressには及ばないがシステムがGoogleから提供されているため運用にかかる労力は非常に少なくて済む。

テンプレートの大幅な改変を行えば、ユニークなレイアウトを実現することは可能と考えられるが、Bloggerを利用する事が運用の容易さを求めていると考えることもできるためテンプレートの作成に時間を費やすことは難しいだろう。

コードの追加/改変を行わず(位置変更は行った)に表示を改変する方法でテンプレートのカスタマイズを検討したのだが、数行の変更でトップページをシンプルな表示に出来た。

大幅にカスタマイズすることも可能ではあるが、テンプレートはBloggerによるメインテナンスもあるだろう、新たなテンプレートが提供されることも考えられる、またレイアウトは季節や気分転換で変更したいこともあるかもしれない。

仮にテンプレートに追加/変更を行った場合は投下した労力からテンプレートの変更を躊躇するかもしれない、行の差し替え程度であれば気軽に変更することも可能だ。

結論


schema.orgのタグ記述はオブジェクトとプロパティに似ておりHTML記述は効率的な記述をでき、bloggerの制御構造タグは数も少ないため覚えることは難しくない。

レイアウトの自由度ではWordPress等のシステムの方が柔軟性は高いと思うが、WordPressのテンプレートの改変にはPHP/HTML/CSSの知見とWordPressのテンプレート構造や設定項目との関係を理解している方が良い等を考慮するとBloggerのテンプレートはより容易であるとも言える。

schema.orgを利用する際の課題としては、schema.orgのドキュメントに日本語での記述が無い事が日本のユーザを獲得する上での課題だろう。

bloggerのウィジェットの配置や構成等をWeb上で平易に行えるようになればよりユーザにやさしいと思う。また、テンプレートの改変に対しgit等のバージョンコントロールが可能であればより便利だと感じた。

これらの点において、レイアウトの自由度を求めるのであれば現時点ではWordPressを選択することが良いと言える。