公開日
カテゴリー
記事上下の設定とプラグイン
コメント
1件
トラックバック
0件

ファンブログは Seesaa Blog と同じなので、このブログのほとんどの内容は Seesaa Blog でも利用できます。


ファンブログ テック http://fanblogs.jp/techs/A8.netのファンブログ(無料)を使っています。


Seesaa Blogやファンブログで最初の記事の下に表示される【このカテゴリーの最新記事】を改造します。

このページでは、画像付きの【このカテゴリーの最新記事】は取り扱っていません。画像付き【このカテゴリーの最新記事】の表示を変えたい方は次のページをご覧ください。

画像付きで記事下に表示される【このカテゴリーの最新記事】のルックスを変更するプラグイン

このページでやること

c1.jpg

このページで出てくるもの

  • <% article.category.name %>
  • text_summary(0)

準備

改造するためにはテンプレートを編集しないといけません。ファンブログのテンプレートは次の手順で開きます。

管理画面にログインした直後なら下の画面のデザインをクリック。

plugin1.jpg

切り替わった画面でHTMLをクリック。

c2.jpg

するとHTMLの一覧という画面が開きます。

c4.jpg

ログイン直後以外の画面から移動する時は画面上部のメニューにあるデザインにマウスを合わせ、出てきた一覧のいちばん下にあるHTMLをクリックしても開けます。

c3.jpg

html名の一覧にあるデフォルトHTMLは編集できません。デフォルトHTMLしかない時はHTMLの追加ボタンを押します。

デフォルト以外のHTMLがあって、そこに適用の印が付いている場合は、そのHTMLの名前(または"編集"という文字)をクリックします。

古いファンブログから移行したテンプレートは、はじめからデフォルト以外のテンプレートが追加されています。

c5.jpg

HTMLの追加ボタンを押した場合は、開いたページのHTML名が空欄になっているので、好きな名前を記入します。

名前は必ず必要です。保存する時に名前がないとエラーになります。また保存後、名前の左の適用マークをクリックして印を付けないと、カスタマイズしたHTMLが有効になりません。

c6.jpg

上の画像の<!DOCTYPE HTML>で始まっているのがテンプレートです。

<!DOCTYPE HTML>以外ではじまっているテンプレートもあります。上の図と同じ場所にあるのがテンプレートです。

テンプレートの編集は難しいので一旦、メモ帳などのエディタにコピーして作業することをおすすめします。エディタで修正が終わってから、コピー元に貼りつけて保存する方が間違えにくいです。

このカテゴリーという表示を変更する

テンプレートの中にある【このカテゴリーの最新記事】という文字を探します。

テンプレートの中は複雑に同じような表示がたくさん出てきますが、
【このカテゴリーの最新記事】は1ヵ所しかありません。

見つけたらこのカテゴリーという部分を<% article.category.name %>に変更します。

変更前

<% if:list_category_article -%>
<div class="listCategoryArticle">
【このカテゴリーの最新記事】<br />
<ul>
<% loop:list_category_article %>
<li><a href="<% article.page_url %>"><% article.subject | text_summary(20) %></a></li>
<% /loop %>
</ul>
</div>
<% /if %>

変更後

<% if:list_category_article -%>
<div class="listCategoryArticle">
【<% article.category.name %>の最新記事】<br />
<ul>
<% loop:list_category_article %>
<li><a href="<% article.page_url %>"><% article.subject | text_summary(20) %></a></li>
<% /loop %>
</ul>
</div>
<% /if %>

これで【このカテゴリーの最新記事】と表示されていた部分の
このカテゴリーその記事のカテゴリー名に変更されます。

c7.jpg

カテゴリー名を表示するタグは<% article.category.name %>

ただし、このタグ<% article.category.name %>
<% if:list_category_article -%><% /if %>の間でしか使えません。

長い記事名の後半を省略させずに全部表示する

Seesaa Blog と同じシステムのファンブログのテンプレートでは文字数を縮める時は text_summary(20)という関数を使います。

この中の20という数字を大きくすれば、切り詰める前の文字数が長くなります。また、この数字を0にすれば省略せずに全文表示します。

数字をいくつにするかは好みですが、このページの例では0にして全部表示します。

全文表示させたい時は、数字を0にするのでなくtext_summary(20)を丸ごと削除しても出来ますが、後で「やっぱり元に戻したい」となった時は大変です。

注)もし丸ごと削除する時は、その前にある | も消去する必要があります。

変更前

<% if:list_category_article -%>
<div class="listCategoryArticle">
【<% article.category.name %>の最新記事】<br />
<ul>
<% loop:list_category_article %>
<li><a href="<% article.page_url %>"><% article.subject | text_summary(20) %></a></li>
<% /loop %>
</ul>
</div>
<% /if %>

変更後

<% if:list_category_article -%>
<div class="listCategoryArticle">
【<% article.category.name %>の最新記事】<br />
<ul>
<% loop:list_category_article %>
<li><a href="<% article.page_url %>"><% article.subject | text_summary(0) %></a></li>
<% /loop %>
</ul>
</div>
<% /if %>

c8.jpg

切り詰める文字数の変更はtext_summary(0)の数字を変える。
数字を0にすると全文表示となる。

スタイルシートでルックスを変える

カテゴリーの最新記事のクラス名はlistCategoryArticleです。このクラスにスタイルシートを適用すればルックスは変わります。

スタイルシートそのものの説明はしませんが、このページのサンプルには次のスタイルを適用しています。

.listCategoryArticle {
	background: #eeffee;
	border: 1px solid #00ff00;
	border-radius: 5px;
}

c1.jpg

ファンブログでの、スタイルシートの追記方法は、別の記事「大きな画像が枠から絶対はみ出さないスタイルシートの設定」に書いてあります。


執筆

統括責任者CEOTom と申します

千葉県船橋市在住。Google+ はこちらです。
Twitter アカウントは@Tom3sutekiです。

この情報が役に立ったら、みんなに教えよう!
http://fanblogs.jp/techs/archive/23/0 記事下に表示される【このカテゴリーの最新記事】をカスタマイズする
このブログへの投票はこちら
 → にほんブログ村
カテゴリー
記事上下の設定とプラグイン
タグ
カテゴリー

ご存知ですか?
ファンブログにはA8.net以外のアフィリエイトを貼ることが、規約で正式に認められています。

おすすめアフィリエイト会社(ASP)一覧

忍者AdMax
クリック報酬型専門アフィリエイト。クリックされるだけで報酬に。今まで最高で1クリック73円ついたことがあります。
最低振込報酬額500円(振込手数料150円 ただし楽天銀行ジャパンネット銀行への振込は無料)
アフィリエイトB
アフィリエイターへのサポートが良く、報酬に消費税分を上乗せして払ってくれます。
最低振込報酬額777円(振込手数料無料)
アクセストレード
オンラインゲーム系のアフィリエイトが非常に豊富。クローズド・ベータ・テスター募集広告などが狙える。
最低振込報酬額1,000円(振込手数料無料)
バリューコマース
通常の広告以外にも、非常に多くのアダルトサイト向け広告がある。アダルトサイト運営者におすすめ。
最低振込報酬額1,000円(振込手数料無料)

ファンブログは A8.net の会員だけが使えます。

Amazon  楽天市場