記事一覧ページをつくる！
みなさんは他の人のブログを見てみて気に入ったので、ちょっと最初から読んでみたいなっと思った事はありませんか？
普通にブログをつくっていると昔の記事はどんどん奥に追いやられてしまうので、見ようと思ってもちょっと手間がかかってしまいます。 そんな時にブログのすべての記事を表示してくれるページがあったら簡単に見ることができるので便利ですよね！
他にも全ての記事のタイトルを表示できるので、気になる記事だけを選んで選んで数記事だけ見ることができたり、ホームページなどにあるサイトマップみたいな役割ができたりと色々と便利です。
そんな便利な全記事表示ですが、実はプラグインの設定→プラグインの追加（公式）→全記事表示リンクで簡単に設置することが出来ます。
・全記事表示リンク
それがこのリンクです。
でもこのリンクをクリックしてもらうとわかりますが、自分のブログとは全然違うFC2のページに全記事が並んでいてかなり見た目がかっこ悪いですよね！
自分のブログのテンプレートのまま記事一覧を表示できたらいいなぁ〜と思いませんか？
実はこれを作る事ができるんです！！見本を紹介しますね。
僕がアフィリエイトの紹介のために見本で作ったムーミンの商品を扱うショップブログの「ムーミンランド」です。この左にあるメニューの上から2番目にある[全商品リスト]をクリックして見て下さい。
こんな風に自分のブログの見た目のまま、普通の記事のように記事一覧を表示することができるんです。
まず、記事一覧ページへいくリンクを作ります。
このタグを自分の好きな所にコピーして張りつけるだけです。 フリーエリアを新しく設置してそこにおいてもいいし、カテゴリと一緒に並べたければカテゴリーのHTMLの変更を開いて一番上や一番下に張りつけてください。
次に、記事一覧を自分のブログにそのまま表示させるためにHTMLにタグを記入します。
テンプレートの設定→[ 編集 ]→HTMLの編集を開いてください。
この線で囲われた部分は下の画像の様に本文記事の部分が画像や線で囲われているブログの人のみがやる事です。
<!--topentry-->のタグを探します。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。
見つかったら、そのすぐ下などにある<div class="〜〜〜">という部分を探して下さい。見つかったら、〜〜〜の部分の文字を覚えておいてください。
次に<!--/topentry-->のタグを探します。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。
見つかったら、そのすぐ下に、
を張り付けてください。
このタグを<!--titlelist-->と<!--titlelist-->の間に自分の好きな様に並べて下さい。
普通にブログをつくっていると昔の記事はどんどん奥に追いやられてしまうので、見ようと思ってもちょっと手間がかかってしまいます。 そんな時にブログのすべての記事を表示してくれるページがあったら簡単に見ることができるので便利ですよね！
他にも全ての記事のタイトルを表示できるので、気になる記事だけを選んで選んで数記事だけ見ることができたり、ホームページなどにあるサイトマップみたいな役割ができたりと色々と便利です。
そんな便利な全記事表示ですが、実はプラグインの設定→プラグインの追加（公式）→全記事表示リンクで簡単に設置することが出来ます。
・全記事表示リンク
それがこのリンクです。
でもこのリンクをクリックしてもらうとわかりますが、自分のブログとは全然違うFC2のページに全記事が並んでいてかなり見た目がかっこ悪いですよね！
自分のブログのテンプレートのまま記事一覧を表示できたらいいなぁ〜と思いませんか？
実はこれを作る事ができるんです！！見本を紹介しますね。
僕がアフィリエイトの紹介のために見本で作ったムーミンの商品を扱うショップブログの「ムーミンランド」です。この左にあるメニューの上から2番目にある[全商品リスト]をクリックして見て下さい。
こんな風に自分のブログの見た目のまま、普通の記事のように記事一覧を表示することができるんです。
つくり方
まず、記事一覧ページへいくリンクを作ります。
<a href="<%url>archives.html">記事一覧</a>
（記事一覧の文字は自分の好きな文字に変えてください）
このタグを自分の好きな所にコピーして張りつけるだけです。 フリーエリアを新しく設置してそこにおいてもいいし、カテゴリと一緒に並べたければカテゴリーのHTMLの変更を開いて一番上や一番下に張りつけてください。
次に、記事一覧を自分のブログにそのまま表示させるためにHTMLにタグを記入します。
テンプレートの設定→[ 編集 ]→HTMLの編集を開いてください。
この線で囲われた部分は下の画像の様に本文記事の部分が画像や線で囲われているブログの人のみがやる事です。
次に<!--/topentry-->のタグを探します。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。
見つかったら、そのすぐ下に、
を張り付けてください。
カスタマイズの仕方
このタグを<!--titlelist-->と<!--titlelist-->の間に自分の好きな様に並べて下さい。
具体例を1つ作ってみます。
・記事の名前｜所属しているカテゴリー
��記事の概要（本文(20文字)）
という様になります。
��記事の概要（本文(20文字)）
- 関連記事 ； FC2ブックマークを好きな位置に！
- 関連記事 ； 特定のカテゴリーを表示しない！
|
｜
｜- 使える？小技 |
- Comment (25) |
- Trackback (0) |
- ▲
コメント
- 上手く出来ませんでした…。（涙）
- 初めまして！
“記事の折りたたみ” は、すごく重宝しました。
で！“全記事表示” も、自分のブログ内で！､表示させたかったのですが､､
どうしても､FC2ブログ上に飛んでの表示になってしまい､､
自分のブログ内に､､（←ムーミンさんの例のサイトの様に！）､､
表示する事が出来ませんでした…。
何でなんだろ…。 ギザ､カナシスです…。
テンプレートのHTML（編集）は､こんな感じだったんですが､､
<!--/plugin-->
</div>
<div id="mainBlock">
<!--エントリー-->
<!--topentry-->
<div class="mainEntryBlock">
<div class="mainEntryTitle"><a id="<%topentry_no>" name="<%topentry_no>"></a><%topentry_title></div>
<div class="mainEntryBase">
<div class="mainEntryBody"><%topentry_body></div>
<div class="mainEntryMore">
<!--more_link-->
〜〜〜で､おぼえるのは､､
｢mainEntryBlock｣ でいいんですかねぇ？？？
もし､お時間があれば、教えて下さい。
- ぴよさん
- <!--topentry-->のすぐ下にぴよさんの様に複数のclass設定してある場合は、とりあえず全部試してみればまずできますよ！！カスタマイズはテンプレによって違うからホント大変です！でも無事にできてよかったですね！！
- 20070408 |
るんばばさん ＠管理人 #-
- [Edit]
- レス、ありがとです。
- あたし､FC2ブログを２つ､つけてるのですが､､
もう１つの方では､別の “class設定！？” を貼りつけないと上手く出来なかったし､､
ホント､テンプレートによって､色々と､変わって来る事もあるんですね…。
あと､表示文字が､背景と同じになって､見た目､消えてしまったり､､
文字が大きくなってしまって入り切らなかったり､､
､太字になってしまったり､､色々と､｡
色々､勉強になりましたし､
ヒジョ→に使える技でした♪
また訪問させて頂きますネ！
ありがさうございました。
（お返事は､結構で〜す♪ ホントに､ありがとう！）
- テンプレートって 弄りはじめると いろんな発見があり面白いですね。
おかげで 自分のブログに愛着が沸いてきます。
「記事一覧ページ」の説明が 大変役に立ちました。
ありがとうございました。 - 20070503 |
えるさん ＠管理人 #41Gd1xPo
- [Edit]
- えるさんへ
- えるさんのテンプレートは工夫がいっぱいで面白いですね！
ほんとにいじればいじるほどテンプレートに愛着が沸きます。
お役に立てたようで光栄です。 - 20070504 |
るんばばさん ＠管理人 #c8dTRiQ2
- [Edit]
- namiさんへ
- 最近コメントスパムが多いので禁止語句を増やしたので、不便になってしまってもうしわけないです。
どうぞ掲示板の方に書いてやって下さい。 - 20070612 |
- [Edit]
- 記事一覧できました☆
- こんばんわ。
お世話になります。
カテゴリーわけが下手で以前書いた記事を見るのに大変な思いをしてました。
一覧を作るのって大変そうな気がして・・・。
サイトに説明されてるとおりやっていったら、簡単にできました。
ありがとうございました。
記事一覧って本当に便利ですね♪ - 20070805 |
紫陽花さん ＠管理人 #-
- [Edit]
- 紫陽花さんへ
- こんにちは。記事一覧って簡単にできてさらに便利ですよね。
ブログの中身全体が一目瞭然でわかるので初めて訪れたブログ先にあるとだいたい見ちゃいます！ - 20070806 |
- [Edit]
- ツリー化でも質問
- ツリー化でも質問させていただきましたsk8lionです。
こちらでも、質問失礼しますm(＿ ＿)m
記事一覧をグループ順に表示したいのですが可能ですか？
出来るのであれば、教えていただけませんか？ - 20071226 |
sk8lionさん ＠管理人 #-
- [Edit]
- sk8lionさんへ
- 「FC2ブログのテンプレート工房」さまの”ブログのサイトマップの作り方 ”であれば記事一覧をグループ順に表示できると思います。
http://10plate.blog44.fc2.com/blog-entry-119.html
例では2つのテンプレで説明されていますが、コメントを見るとどのテンプレートでもできるみたいですよ！ - 20071226 |
- [Edit]
- ありがとうございます
- 上記のサイトで記事一覧を作りました！
カテゴリーのツリー化も他の方法に変えて、グループ名が表示されないように出来ました！
サイトを紹介して頂きありがとうございました。 - 20071227 |
- [Edit]
- 基本的な質問です。
- 丁寧に初心者でも分かるように書かれていて勉強になります。
ありがとうございます。
古い記事が探しやすいようにしたくて、参考にさせて頂いています。
初心者で分からないんですが、下記の部分の
!--topentry-->のタグを探します。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。見つかったら、そのすぐ下などにある<div class="〜〜〜">という部分を探して下さい。見つかったら、〜〜〜の部分の文字を覚えておいてください。
--------------------------------------------------------------------------------
次に<!--/topentry-->のタグを探します。
最初と２回目の <!--/topentry-->は同じ所で良いんでしょうか？
このタグは１つしか見つかりませんでした。
- 20080105 |
モンペスさん ＠管理人 #-
- [Edit]
- さっきの質問の件です。
- <!--topentry-->と<!--/topentry-->は後のほうがスラッシュ入りで違うタグだったので、そこの所は解決しました。スイマセン早とちりでした。
その後、記述通りにやってみましたが、うまく表示できません。
サイドのカテゴリーの中に記事一覧と入れてみたんですが、クリックすると、記事一覧の部分がサイドに細長く表示されてみれません。
できたらサイドのカテゴリーの中にツリー化して表示したいのですが、教えていただけたら嬉しいです。 - 20080105 |
- [Edit]
- sk8lionさんへ
- 全てが上手くいってよかったですね！！
- 20080106 |
- [Edit]
- モンペスさんへ
- 繰り返しになってしまいますが、<!--topentry-->と<!--/topentry-->は別々で、
<!--topentry-->はここからtopentryが始まりますよ！って合図でスラッシュ入りの<!--/topentry-->はここまででtopentryが終わりですよ！って事なんですよ。
肝心の質問の件なのですが、「記事一覧の部分がサイドに細長く表示されてみれません」というのがいまいちよくわからないのです。そして「サイドのカテゴリーの中にツリー化して表示したい」もどんな状態にしたいのか悩んでしまいました。
この記事一覧ページは、サイドではなくて、記事の部分に一覧を作る方法なので、もしかしたらモンペスさんの求めているものではないのかな？と思いました。
もうちょっとだけ詳しく教えていただけるとお力になれるかも知れないです・・・。 - 20080106 |
- [Edit]
- 何度もチャレンジしてみましたが・・・
- 初めまして。
こんな時間に失礼します。
記事一覧ページを作りたいと思い、何度もタグを入れて試してみたのですが
どうしても自分のブログに表示してくれません(涙)
本文記事が画像で囲われているため、<div class="〜〜〜">の部分も、
<!--topentry-->の下にあるいくつかのものを試してみたのですがダメでした。
お時間がある時で構いませんので、どうかお力を貸してください。
<a href="<%url>archives.html">記事一覧</a>は、
右サイドのこまごま内検索の所にある「こまごま記事一覧」です。 - 20080301 |
きゃあさん ＠管理人 #-
- [Edit]
- きゃあさんへ
- 他ブログからFC2へ移ってきたのですね。ようこそ！いっらしゃいました。
きゃあさんのお使いのテンプレートは記事の部分が丸角にしてあり、画像を複数使ったものになっており、1つの<div class="〜〜〜">では駄目でちょっと複雑だと思います。
HTMLの様に<div class="〜〜〜">を使うと綺麗に表示できるかもしれません。
お使いのテンプレート名がわかるともう少し詳しく書けると思います。 - 20080303 |
- [Edit]
- お返事ありがとうございます。
- こんばんは。
ＦＣ２はいろいろと充実していて大満足です。(*^^*)
そうですか・・・。今のテンプレートでは難しいのですね。
現在使っているのは公式テンプレートの「band」で、
それを複製して背景や色、画像などを変えました。
.entry-header{ と.entry-bottom{ に
角丸が使われていたので、同じように角丸を作って使ったのですが。
あまりＨＴＭＬに詳しくないのですが、教えて頂けると助かります。
(ソースとか貼ったほうがいいですか？) - 20080303 |
- [Edit]
- きゃあさんへ
- こんばんは。そうですね。FC2は無料とは思えないほど色々な機能がありいまでもどんどん機能が増えていっています。嬉しい反面使いこなすのも大変だったりします。(^^;;
テンプレは「band」をみてみました。びっくりしましたよ！なぜなら面影が少しある程度で全然、元とは違ってすごくオリジナルでしたから。ココまでカスタマイズできるなら十分にＨＴＭＬはわかっていると思いますよ。しかも角丸も新たにご自分で作られたのですね。♪⌒ヽ(*゜O゜)ノ スゴイッ!!!
時間があまりなく、実際は確認していないのですが画像や背景はスタイルシートの画像の部分を張り替えているだけですよね？たぶんきゃあさんご自身が新たに作っているところがないとして、<!--/topentry-->の下に
<!--titlelist_area-->
<div class="entry-header">
<h3>記事の一覧</h3>
</div>
<div class="entry-body">
<div class="entry-main-body">
<!--titlelist-->
・<a href="<%titlelist_url>" title="「<%titlelist_title>」の記事を見る"><%titlelist_title></a>｜<a href="<%titlelist_category_url>"><%titlelist_category></a><br />
��<%titlelist_body><br />
<!--/titlelist-->
</div></div><div class="entry-bottom"></div>
<!--/titlelist_area-->
を貼り付けていただければ、見本の様な形にはたぶんなると思います。
ちょっとおかしな所があれば微調整で直せると思います。
他に、細かな「記事の一覧」の文字や記事の概要がいらない・日付を入れたいなどのカスタマイズは「カスタマイズの仕方」にある変数を組み合わせてみてください。
もし、駄目ならまたコメントしてくださいね！どこがおかしかったのかを教えていただけると助かります。(ソースはブログURLを記入していただいているので見ることができますから大丈夫です。) - 20080303 |
- [Edit]
- 恐縮です。
- こんばんは。
ブログのデザインは元の「band」が私のやりたり形に近かったので、
あんまり変えてないんですよ。角丸もペイントで作った簡単なものなんです。
HTMLですが、お時間のない時で申し訳ないです。m(__)m
早速やってみましたが、ダメでした。
やっぱりFC2のデザインで出てしまいます。
新たに何かを作って・・・というのはないとは思うのですが。 - 20080305 |
- [Edit]
- きゃあさんへ
- 一応、自分でも練習ブログをつくり上記のタグをそのまま入れてみました。
http://qedeq.blog64.fc2.com/ 記事一覧を押してみてください。
テンプレは「band」で一応できました。もしかしたら貼り付けている位置が違ったりすることはないでしょうか？ - 20080307 |
- [Edit]
- 出来ましたっ！！
- 昨日るんばばさんからのお返事を見た後ずっとチャレンジしていたのですが、
ついに！記事一覧を表示することに成功しました！
・・・えっと、実は今までも貼り付ける場所は合っていたのですが、
更新を押さずにプレビューで見ると一覧が反映されていなかったらしく、
しかも「ファイルの削除」「履歴のクリア」をしないとダメだったみたいで。
なんとも初歩的なミスで申し訳ありません。m(__)m
でもこちらで質問していなかったらずっと分からないままでした。
練習ブログも作っていただき、本当にもうなんとお礼を言ったら良いか・・・。
（実は【プラグインを折りたたみたい！】も参考にさせていただきました）
これからもいろいろと参考にさせて下さい！！
リンクも貼らせて貰いました。
もし何か不都合がありましたらお手数ですがご連絡下さい。
本当に有難うございました。 - 20080309 |
- [Edit]
- きゃあさんへ
- あっ、プレビューでみていたのですか。確かに初歩的です。そしてよく間違えることなのに、気づかなかった自分が駄目ですね。プレビューは便利なので全てを頼ってしまうのですが、プレビューできないことも結構あるので注意が必要なのですよね。
でも結果的にうまくいってよかったです。リンクも張っていただいてありがとうございます。 - 20080309 |
- [Edit]
この記事のトラックバックURL
http://rgrg.blog61.fc2.com/tb.php/630-7043f31f
』をクリックするとメニューが開きます。
