blog2014 のテーマをさらに改造し blog2560 をつくる

少し前に 2560px 対応にしたのですが、もう少し改良した点をご紹介しておきます。ちなみに、皆さんのブラウザには、どんな感じに表示されていますか? ディスプレイの解像度が高いと、上記のような横に3つのエントリーが並ぶようなレイアウトになるようになっています。

エントリーの続きを読むを Ajax 読み込みする

Ajax読み込みが簡単にできる a-blog cms では、Post_include という名前で呼ばれる機能として用意されています。これを使う事で、CMS のテンプレートを簡単に書くだけで画面の遷移無しに後半のエントリーが表示されます。

Entry_Body の中にある「続きを読む」のリンクのあたりに以下のフォームを追加します。

<p class="continueLink clear"><a href="{continueUrl}">「{continueName}」の続きを読む</a></p>

<form action="{continueUrl}" method="post" class="js-post_include">
<input type="hidden" name="tpl" value="include/continue.html">
<input type="submit" name="ACMS_POST_2GET" value=" 「{continueName}」の続きを読む ">
</form>

あとは、include/continue.html のファイルを準備します。この Entry_Continue のモジュールはコンフィグの一覧にも載ってないですが、今回のように続き部分を表示させるために利用します。

include/continue.html

<!-- BEGIN_MODULE Entry_Continue -->
<!--#include file="/include/unit.html"-->
<!-- END_MODULE Entry_Continue -->

Post_Include 後に JavaScript を起動する

最近、追加されたのか、私が知らなかっただけなのか、現状のバージョンでは FORMタグに onreset という属性を設定します。こうする事で vgrid の JavaScript が動くようになり、長くなったエントリー分で下にあったコンテンツが移動していきます。

<form action="{continueUrl}" method="post" class="js-post_include"  onreset="vgridStart();">

Google アナリティクスにも通知する

ページの遷移がなく各エントリーが読まれるようになると、PVが減っていくというか、どこが読まれているのか分からない状態になります。その部分を解決するために、Google アナリティクス のバーチャルページビュー という機能を使って Post include でコンテンツが呼び出された時には、そのページを見た事にする設定をします。

今は新旧の書き方がありますが、新しい方のユニバーサルアナリティクスの設定で紹介しておきます。submit ボタンを以下のように onclick を追記します。

<input type="submit" name="ACMS_POST_2GET" value=" 「{continueName}」の続きを読む " onClick="ga('send', 'pageview', \{'page': '/{entry:loop.ecd}', 'title': '{continueName}'\});" />

波括弧 { } がテンプレート上に書いてあると、変数として扱われてしまうために、カッコと、その間に書かれた文字が処理されて消えてしまいます。そのために波括弧の前にはバックスラッシュをつけてエスケープする必要があります。

オマケ: Entry_Body も Ajax 読み込みで増やす

せっかくなので、古い記事を読み込む部分も Post include を利用してみるようにします。

<!-- BEGIN forwardLink -->
<form action="{url}" method="post" class="js-post_include">
<input type="hidden" name="tpl" value="/include/entryBody.html" />
<input type="hidden" name="page" value="{forwardPage}" />
<input type="submit" name="ACMS_POST_2GET" value=" もっと読む "/>
</form>
<!-- END forwardLink -->

ここでのポイントは、Entry_Body の中にある forwardLink のブロック中の {forwardPage} を使って何ページ目なのかをフォームに用意するという部分かと思います。

これで、トップページからアクセスした人は、なんとなく興味のあるページの続きを読むってしてアクセスできるようになりました。これで PV 増えるかと思ったのですが、現状ではあまり効果は無いようです。

今、設定されている 2560px の 27インチディスプレイでフルスクリーンにした時まで考慮された blog2560 って名前のテーマにしようと思いますが、どうでしょうか? そもそも、どんな表示になってるか分からないかもしれませんね。(Chromeで表示の縮小ってすると雰囲気は分かるかもしれません。)


コメント

山本一道

山本 一道

有限会社アップルップル

名古屋のホームページ制作会社「有限会社アップルップル」の代表をしています。弊社で開発しているCMS「a-blog cms」や、名古屋の「WCAN」という名古屋のWeb制作者のためのセミナーの主催や、コワーキングスペース「ベースキャンプ名古屋」も始めました。

test

エントリーリスト

カテゴリーリスト

タグクラウド

  • ベースキャンプ名古屋に新しく27インチ 2560x1440 のディスプレイが追加されました。 でも、最大解像度で表示できるケーブルが入荷していないので 1920x1080 の表示になっています。

    kazumich

    Type: image / Filter: Normal / Link / Feb 18th, 2017

    Comments: 0 / Likes: 4

  • マカベン始まりました! #758markup

    kazumich

    Type: image / Filter: Normal / Link / Feb 18th, 2017

    Comments: 0 / Likes: 3

  • 今日のベースキャンプ名古屋では「YouTube勉強会」が開催されています。Super Chat というサービスが開始されたみたいです。

    kazumich

    Type: image / Filter: Normal / Link / Feb 11th, 2017

    Comments: 0 / Likes: 7

  • 席を確保しランチ!

    kazumich

    Type: image / Filter: Normal / Link / Feb 09th, 2017

    Comments: 0 / Likes: 8

  • 順調に進化している森田さんが JS の勉強会で jQuery のプラグインを作った事について発表している。

    kazumich

    Type: image / Filter: Normal / Link / Jan 21th, 2017

    Comments: 0 / Likes: 6

  • 今日はアップルップルの非公開な社内勉強会で「ブランディング勉強会」を、社外から先生(ワクグミ田川さん)を招いて全員で受講しています。

    kazumich

    Type: image / Filter: Gingham / Link / Jan 18th, 2017

    Comments: 0 / Likes: 9

  • 今日は千代さんと2017年版のサイトについて打ち合わせでした。 http://chiyo-katsumasa.com

    kazumich

    Type: image / Filter: Normal / Link / Jan 18th, 2017

    Comments: 0 / Likes: 5

  • 週に1回はココに。

    kazumich

    Type: image / Filter: Normal / Link / Jan 11th, 2017

    Comments: 0 / Likes: 12

  • 恒例の年末のイベントが終わって、1年が終わりです。皆、1年ありがとう!

    kazumich

    Type: image / Filter: Normal / Link / Dec 29th, 2016

    Comments: 0 / Likes: 12

  • 今年も忘年会終わった!

    kazumich

    Type: image / Filter: Normal / Link / Dec 29th, 2016

    Comments: 0 / Likes: 4

実践! コンテンツファーストのWebサイト運用  a-blog cmsではじめるCMSプロトタイピング

2016年6月30日に株式会社ボーンデジタル様より「実践! コンテンツファーストのWebサイト運用 a-blog cmsではじめるCMSプロトタイピング」が発売されました。