ホーム > サポート・マニュアル > チュートリアル > 利用シーン > エントリーの見せ方と利用するモジュールについて　その1

エントリーの見せ方と利用するモジュールについて　その1

ドキュメント最終更新日時：2011/08/17 13:48

利用の仕方で選ぶエントリー表示用モジュール

a-blog cmsでは、投稿されたエントリーを一覧で見せるための方法が複数存在します。それぞれ特徴がありますので、必要に応じてご利用ください。 それぞれのモジュールは、モジュールIDを設定する事で個別の動作条件を指定できます。

目次

参考

ブログのサイドメニューやローカルナビゲーションに
エントリーリスト (Entry_List)

エントリーの一覧としての例

エントリーの一覧としての例

エントリーの一覧として最低限の情報「タイトル」「リンク先URL」を表示するエントリーリスト (Entry_List)では、ごくシンプルなエントリーの一覧が生成できます。

このモジュールは、ブログの最新エントリーのようにタイトルのリストとしての利用法と、該当カテゴリー内のエントリーをリスト化（＝ローカルナビゲーション化）する利用法が考えられます。

新着タイトルリストとして使用する場合

新着タイトルリストとして使用する場合

タイトルのリストとして利用する場合には、今後も増えていくエントリーの最新情報としての利用が考えられます。このような場合は、モジュールIDの設定で日時を「降順」に、表示件数を任意の件数に指定をしておくことで「最新のx件」という表示が実現できます。

カテゴリーIDにチェックをつける

カテゴリーIDにチェックをつける

ローカルナビゲーションとして利用する場合には、モジュールIDの設定でカテゴリーを指定し、表示順を「表示順(降順、昇順は任意に指定)」表示件数をナビゲーションの数と同じ以上の件数に指定をすることで、カテゴリを指定したタイトルリストが実現できます。

テーマ「company3」での利用例

テーマ「company3」での利用例

この際、表示しているカテゴリーを元に表示内容を切り替えたい場合には、モジュールIDの引数設定でURLコンテキストを優先するチェックをつけます。こうすることで、指定したカテゴリーではなく表示しているカテゴリーからのみタイトルリストを表示します。

サンプルコード(CSSの記述は含みません)

<h2>最新のエントリー</h2>
<!-- BEGIN_MODULE Entry_List -->
<ul>
	<!-- BEGIN entry:loop -->
	<li><a href="{url}">{title}</a></li>
	<!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->

参考

トップページに日付とタイトルで新着情報を作成
ヘッドライン (Entry_Headline)

ヘッドラインモジュールの表示例

ヘッドラインモジュールの表示例

基本的な情報をシンプルにまとめた、新着情報としての利用にはヘッドライン (Entry_Headline)モジュールを活用しましょう。

ヘッドラインモジュールでは、タイトル、リンク先URL、投稿日付、カテゴリーを出力します。下記の例では単純にリストとしていますが、一覧へのリンク、RSS出力、ページ送りも可能です。詳しくはマニュアルの「ヘッドライン（Entry_Headline）モジュールの設定」「スニペット」をご確認ください。

サンプルコード(CSSの記述は含みません)

<!-- BEGIN_MODULE Entry_Headline -->
<ul><!-- BEGIN entry:loop -->
	<li><!-- BEGIN new --><span class="new">new!</span><!-- END new --><a href="{url}">{title}</a><!-- BEGIN category:veil --> 【{categoryName}】<!-- END category:veil -->{date#y}年{date#m}月{date#d}日（{date#week}）</li><!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_Headline -->

新着情報（NEWマーク）の表示用には、以下の記述が必要になります。この<-- BEGIN new --> から<-- END new --> で囲まれた部分は、モジュールの設定で指定されている新着期間の間だけ表示されます。

<!-- BEGIN new -->new(任意の内容に変更可能)<!-- END new -->

参考

画像やテキストを使って、内容も含めた簡易一覧を表示
サマリー (Entry_Summary)

テーマ「company3」での利用例

テーマ「company3」での利用例

エントリーを表示するモジュールは、タイトルを表示するもの、本文も表示するものの大きく2つに分けられますが、サマリーモジュールはその間を埋めるものと言えます。

サマリーモジュールでは、エントリーの情報から、URL、タイトル、日時、カテゴリー、メイン画像、概要テキストを表示できます。これだけの情報を表示できると、ほぼエントリー本文（Entry_Body）モジュールと変わらない表現ができます。

利用シーンとしては、文字通りサマリー＝概要としての使い方が挙げられます。 タイトルに加え、画像や表示文字数を制限した本文で、エントリーの概要を伝え、本文の詳細表示への誘導をします。

company3で使用しているサマリーモジュールのコンフィグ設定

company3で使用しているサマリーモジュールのコンフィグ設定

テーマ「company3」では、トップページの製品情報部分に使われています。ここではタイトルメイン画像、概要テキストを使ってエントリーを表現しています。文字数制限を行うことで、限られた表示エリアであってもテキストの文量を一定にできるため、レイアウト崩れを防止できます。

また、コンフィグ設定では表示する画像のサイズや表示位置の変更、画像が無い場合の表示の取扱いなど、多岐にわたる設定ができます。

サンプルコード(CSSの記述は含みません)

<div id="productListTop">
	<h2>製品情報</h2>
	<!-- BEGIN_MODULE Entry_Summary id="productListTop" -->
	<div id="prdListWrapper"><!-- BEGIN unit:loop -->
		<div class="prdListUnit clearfix"><!-- BEGIN entry:loop -->
			<div class="prdListItem js-biggerlink clearfix">
				<div class="prdThumb" style="width:{x}px; height:{y}px; overflow:hidden;">
					<a href="{url}"><!-- BEGIN image:veil --><img src="%{ROOT_DIR}{path}" width="{imgX}" height="{imgY}" style="left:{left}px; top:{top}px; position:relative;" /><!-- END image:veil --><!-- BEGIN noimage --><img src="/images/noimage100x100.gif" width="100" height="100" alt="" /><!-- END noimage -->
				</a></div>
				<div class="prdTxt">
					<h3><a href="{url}">{title}</a></h3>
					<p>{summary}[trim(63, '...')]</p>
				</div>
			</div>
		<!-- END entry:loop --></div>
	<!-- END unit:loop --></div>
	<!-- END_MODULE Entry_Summary -->
</div>

参考

ブログエントリーの月別(年別)アーカイブを作成
アーカイブ (Entry_ArchiveList)

アーカイブリストの表示例

アーカイブリストの表示例

ブログやお知らせなどで「これまでのエントリータイトルを一覧してしまうと多すぎるけど、過去のまとめをリンクにしておきたい」といった場合には、アーカイブ (Entry_ArchiveList)モジュールがおすすめです。

サンプルコード(CSSの記述は含みません)

<!-- BEGIN_MODULE Entry_ArchiveList -->
<ul><!-- BEGIN archive:loop -->
	<li><a href="{url}">{date#Y}年 {date#n}月</a> ({amount})</li><!-- END archive:loop -->
</ul>
<!-- END_MODULE Entry_ArchiveList -->

モジュールの設定により、表示の昇順・降順、まとめ方の指定(年月日)、件数の指定もできます。

参考

設定次第でいろいろな使い方が可能

エントリー関連のモジュールに限ったことではありませんが、各モジュールはモジュールIDの詳細設定・引数の設定による表示エントリーの絞り込みと、各モジュールのコンフィグ管理による表示内容の変更で、いろいろな表示状態を作成できます。

カスタマイズをされる方の設定次第で設定次第でいろいろな使い方が可能です。是非お試しください。

「エントリーの見せ方と利用するモジュールについて　その2」は以下のモジュールについての解説を予定しています。

  • エントリー本文 (Entry_Body)
  • フォト(Entry_Photo)
  • タグリレーショナル (Entry_TagRelational)
  • コンティニュー (Entry_Continue)
このエントリーをはてなブックマークに追加
  •  
  •  

ドキュメントの内容に関するお知らせフォーム

内容に誤り・現行バージョンと異なる部分がありましたら、下記のフォームよりお知らせください。

お名前
 
メールアドレス(任意)
 
お知らせ内容
Cookieに保存

サポート情報検索

キーワード

利用シーン

利用シーンの一覧に戻る
  • オンラインセミナー
  • イベントスケジュール
  • ユーザーフォーラム
  • Twitterでa-blog cmsをフォローしてください！
携帯アクセス解析