忍者ブログ

とちにすいはら式+

痒いところに手が届かない雑記ブログ。お金とDTMの話が多め

近未来的音楽素材屋3104式
↑音楽素材はこっち↑

とちにすいはら式+

忍者ブログで自作最新記事リストを作る方法

1.はじめに


Google Analyticsの行動フローを見ていて、

「ファーストビューでの見通しの悪さが離脱につながってるのではないか」

と考え、ファーストビューに表示される最新記事リストを作ることにしました。
ファーストビューとは、サイトにアクセスしたときに、一番最初に表示される部分のことです。

よくある「2chまとめブログのあれ」を目指します。
下図をご覧ください。



図中のような「最新記事」を作ります。
母材にするテンプレは

忍者ブログのカスタマイズ。とちにすいはら式+の場合

で触れた、忍者公式のものを利用します。

2.忍者ブログの仕組みはどうなっているのか


最新記事を作るにあたり、記事の更新毎に手打ちでリスト化するのは無茶というもの。
できるだけ忍者ブログの仕組みを使い、楽に作成します。

忍者ブログでは、いろいろな変数が用意されています。
その中で、$entry_titleが記事タイトルを持っています。
(詳細は忍者ブログ 構文辞典INDEXを参照)

そこで、これを利用します。

$entry_titleは<!--entry-->と<!--/entry-->の間だけ有効です。
この間に挟まないと、$entry_titleにテキストが入りません。

これがNULLのポインタにアクセスしてぬるp(ガッ

内部的には、おそらく最新記事をfor文ループのように参照していて、<!--entry-->と<!--/entry-->が記事表示に関するループになっています。
そのため、$entry_titleと<!--entry--><!--/entry-->を上手く使う必要があります。

3.実際のコード例


$entry_titleと<!--entry-->を用いて作ります。
既にブログ記事本体を表示するために、<!--entry--><!--/entry-->が使われていますので、別に<!--entry--><!--/entry-->を用意し、タイトルリンクを加えました。

  1. <div class="EntryTopBox\>
  2. <h2 class="EntryTopTitle">最新記事</h2>
  3. <!--entry-->
  4. <ul class="EntryTopList\">
  5. <li><a href="<!--$entry_link-->"><!--$entry_title--></a></li>
  6. </ul>
  7. <!--/entry-->
  8. </div>

<!--$entry_link-->は記事タイトルへのURLを持つ変数です。

上記を<div id="EntryBlock"></div>の中に加えると、記事本体と同じカラムに最新記事リストが表示されます。
<div id="EntryBlock">の前に配置させることで、widthを広く取ることも可能です。

※使用するテンプレ次第ではうまく表示されない場合もありますので、CSSをうまくいじってください。
テンプレ次第で、クラスの名前が異なる場合もありますので、ご了承ください。

4.問題点


上記のコードは、1ページに表示される記事数に連動します。
1ページに20記事表示する設定にすると、このリストも20個になります。
同様に、詳細記事ページでは記事が1つしか無いので、リストの表示数も1個だけです。
それを下図に示します。



ちょっと間抜けな感じです。

そこで、<!--if_not_entry--><!--/if_not_entry-->という制御構文を併用します。
「トップページや、各カテゴリ別のページの場合に限り、最新記事リストを表示させる」という使い方になります。

5.まとめ


2chまとめブログのような大型ブログは、「いかに他の記事にも誘導するか」をすごく考えて作られているなーと思ったのです。
広告踏ませるのが最終的な目標点であっても、1ページで直帰されるのと、数ページ巡回するのではコンバージョン率が変わるもんね。

今回得た知識を元にすれば、パンくずリストも作れそう
今度ちょっと作ってみようと思いますが、なんだかごてごてしてまいりました(;´∀`)

6. おまけ


  1. <ul class="EntryTopList">
  2. <!--entry-->
  3. <li><a href="<!--$entry_link-->"><!--$entry_title--></a></li>
  4. <!--/entry-->
  5. <li>静的なリンク</li>
  6. </ul>

とすると、記事リンクとともに静的なリンクを貼ることが出来ます。
固定リンクやアフィリエイトリンクなどに有効です。

  1. <ul class=\"EntryTopList\">
  2. <!--entry-->
  3. <li><a href=\"<!--$entry_link-->\"><!--$entry_title--></a></li>
  4. <li>広告</li>
  5. <!--/entry-->
  6. </ul>

<!--entry--><!--/entry-->の中に静的なリンクを加えると、固定リンクも記事数分だけ繰り返すので、だいぶうるさくなります。

関連記事

ページが行き止まりになると離脱率が高まる?
忍者ブログでパンくずリストをつける方法

忍者ブログのカスタマイズ。とちにすいはら式+の場合

忍者ブログでソーシャルボタンをキレイに並べて貼る方法の覚書
忍者ブログでグーグル+1ボタンを貼る方法の覚書
忍者ブログではアクセスアップが期待できない2つの理由
忍者ブログのメタディスクリプションについて

 

拍手[1回]

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント

質問です。

どこにコメントをすれば良いのか分からないのでこちらで失礼します。
「ページが行き止まりになると離脱率が高まる?」がリンク切れです。
あと、ページ下「関連記事」とプラグイン「よく読まれている記事」はどうやって作成されているのでしょうか
ご教授頂ければ幸いです。

無題

リンク修正しました。
(反映されていない場合にはF5キーで更新してみてください)
定期的にカテゴリ見直しなどをしており、リンクの切れた記事も多数あり、ご迷惑をおかけしております。

関連記事は自分でチョイスして手動でリンクを貼っています。
よく読まれている記事も同じですが、こちらはGoogle Analyticsで取った、各ページ数の月間PV数を元に決めています。

もし、プラグイン側に人気記事リンクを作るならば、忍者ツールズの忍者レコメンドを使えば楽かと思います。

トラックバック

スポンサーリンク

PR

ブログ内検索

記事書いてる人

運営者:
さいれほ@planet_f108
30代個人事業主のDTMerで3104式の中の人。

音楽以外にはお金の話が好き。株式投資や投資信託もやってるよ。
マイクロ法人立ち上げを目指し、脱雇われ人の道を模索中。

活動域は青森県八戸市周辺。一緒にお仕事しましょう。

プロフィール詳細はとちにすいはら式+についてをご覧ください。

バトルモード3

2016年春M3の企画はバトルモード3!!


ついったー

お問い合わせフォーム

筆者の知識や経験であなたの力になれますか?

必要事項をご記入の上、送信ボタンをクリックすると、運営者宛にメールが送信されます。

ブログ内リンク

レビュー・改造系記事まとめリンク レビュー・改造系記事まとめリンク
PC・トイカメラなどのレビュー記事リストです。

DTM機材レビュー記事まとめリンク DTM機材レビュー記事まとめリンク
DTM機材に関するレビュー記事リストです。

クラブ関連記事まとめリンク集 クラブ関連記事まとめリンク集
音楽を流すクラブにいってきた話まとめ。

トラブル・お悩み解決系記事まとめリンク トラブル・お悩み解決系記事まとめリンク
ソフトのインストールなどで躓いた記事リストです。

サイト作り系まとめリンク サイト作り系まとめリンク
サイトのアクセス増、ユーザビリティに関する記事リストです。

忍者ブログカスタマイズまとめリンク 忍者ブログ運用術から収益化まで
忍者ブログ運用術から収益化までをまとめた記事リストです。

雅楽の舞改めポーチュラカリア成長記事まとめリンク 雅楽の舞改めポーチュラカリア成長記事まとめリンク
2011年から育てている雅楽の舞に関する記事リストです。

とちにすいはら式+アクセスアップ経過記録まとめリンク とちにすいはら式+アクセスアップ経過記録まとめリンク
本ブログのアクセス推移を記録した記事リストです。

お金持ち本まとめリンク お金持ち本まとめリンク
筆者が読んだお金持ち本あれこれまとめリンク。

無職関連の記事まとめリンク 無職関連の記事まとめリンク
無職関連の記事リストです。

スマホでUSENの記事まとめリンク スマホでUSENの記事まとめリンク
スマホで使える有線放送まとめ。データ量も測ってみました。

最新コメント

[01/20 かんりにん]
[01/20 シモハチ]
[04/03 かんりにん]
[04/01 シン]
[04/01 かんりにん]

フリーエリア

QRコード

とちにすいはら式+

サイトご利用上の注意

ブログ記事の著作権はとちにすいはら式+にあります。 引用される際には、必ず引用元として弊ブログのURLも記載していただくようお願いいたします。 記事の一部もしくは全ての無断転載はご遠慮ください。

記事を参考にされる際には、自己責任にてお願いいたします。