ファンブログで記事下に表示される【このカテゴリーの最新記事】のルックスを変えるプラグインです。PC版画面のみの対応です。スマホ画面では変わりません。

プラグインの使い方の他、表示個数を変える方法、【このカテゴリーの最新記事】を非表示にする方法も説明します。

お断り今ご覧頂いているこのブログでは、このプラグインは使っていません。プラグインを使わずテンプレートを改造してカテゴリーの最新記事の「公開日」なども表示しています。プラグインで出来るのは元々出力されているモノの見え方を変えるだけなので、出力されていないものを表示させることは出来ません。ご了承下さい。参考までに、ページの最後にテンプレートの改造した部分を掲載しています。

<script>
var techs_pugin_41_values = {
 "size"          : 60 ,
 "default_image" : "" ,
 "title"         : "" 
};
</script>
<script src="https://fanblogs.jp/techs/file/plugin_41.js"></script>

"size"          : 60 
,

"default_image" : "" ,

"default_image" : " http://example.com/hoge.png 
" ,

"title"         : ""

"title"         : " 【こちらのページもオススメです】 
"

<style>
.listCategoryArticleImage_ex .heading {
 color: blue;
 font-size: 120%;
 font-weight: bold;
}
</style>

color: blue;

font-size: 120%;

font-weight: bold;

以上で【このカテゴリーの最新記事】の設定は終了です。以下はこのプラグインとは違う表示にしたい場合の説明です。

<div class=" listCategoryArticleImage 
">
  <div class=" heading 
">【このカテゴリーの最新記事】</div>
  <ul>
    <li>
      <div class=" articleImage 
">
        <a href=""><img src=""></a>
      </div>
      <div class=" articleTitle 
">
        <a href="">タイトル..</a>
      </div>
    </li>
    <li>
      <div class=" articleImage 
">
        <a href=""><img src=""></a>
      </div>
      <div class=" articleTitle 
">
        <a href="">タイトル..</a>
      </div>
    </li>
  </ul>
</div>

<% if:list_category_article -%> 
<div class="listCategoryArticleImage"> 
<div class="heading">【このカテゴリーの最新記事】</div> 
<ul> 
<% loop:list_category_article %> 
<li> 
<% if:article.first_image %>
<div class="articleImage">
<a href="<% article.page_url %>"><img src="<% article.first_image.page_url_thumbnail %>"></a>
</div>
<% else %>
<div class="noImage">no image</div>
<% /if:article.first_image %>
<div class="articleTitle <% unless:article.first_image %>articleTitle-va-middle<% /unless:article.first_image %>">
<a href="<% article.page_url %>">
<% article.subject | text_summary(20) %>
</a>
</div>
</li> 
<% /loop %> 
</ul> 
</div>
<% /if %>

<% if:list_category_article -%>
<div class="category_recent_posts">
<h1>カテゴリー「<% article_category.name %>」の最新記事</h1>
<ul>
<% loop:list_category_article %>
<li>
<% if:article.first_image %>
<p><a href="<% article.page_url %>"><img src="<% article.first_image.page_url_thumbnail %>"></a></p>
<% else %>
<p><a href="<% article.page_url %>"><img src="/techs/file/logo-f4799.png"></a></p>
<% /if:article.first_image %>
<p><a href="<% article.page_url %>"><% article.subject | text_summary(0) %></a></p>
<p><time datetime="<% article.createstamp | date_format('%Y-%m-%dT%H:%M:%S+09:00') %>"><% article.createstamp | date_format("%Y年%m月%d日") %></time></p>
</li>
<% /loop %>
</ul>
</div>
<% /if %>

<% article.createstamp | date_format("%Y年%m月%d日") %>

.category_recent_posts{
 clear: both;
 padding: 1em 0;
 margin-bottom: 1em;
}

.category_recent_posts *{
 margin: 0 !important;
 padding: 0 !important;
}

.category_recent_posts li{
 border: 1px solid #dddddd;
}

.category_recent_posts,
.category_recent_posts li,
.category_recent_posts img{
 border-radius: 5px;
}

.category_recent_posts h1{
 color: #0000ff;
 font-size: 100% !important;
 margin-bottom: 0.5em !important;
 font-weight: bold;
 text-align: center;
}

.category_recent_posts ul{
 list-style-type: none;
}

.category_recent_posts li{
 margin-bottom: 10px !important;
 padding: 5px !important;
 background: #ffffff;
}

.category_recent_posts li:last-child{
 margin-bottom: 0 !important;
}

.category_recent_posts li:after{
 content: '.';
 display: block;
 height: 0;
 font-size: 0;
 clear: both;
 visibility: hidden;
}

.category_recent_posts p{
 backgroud: transparent;
 height: 30px !important;
 line-height: 30px !important;
 font-size: 110%; width: 70%;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis; 
}

.category_recent_posts p:first-child{
 float: left;
 line-height: 60px !important;
 margin-right: 10px !important;
}

.category_recent_posts p:first-child,
.category_recent_posts img{
 height: 60px !important;
 width: 60px !important;
}

.category_recent_posts p:last-child{
 text-align:right;
 font-size: 90%;
} @media (min-width:480px){
 .category_recent_posts p{
  width: 82%;
 }
}

@media (min-width:992px){
 .category_recent_posts p{
  width: 80%;
 }
}

@media (min-width:1024px){
 .category_recent_posts p{
  width: 87%;
 }
} 

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

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

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

このページでやること

• "このカテゴリー"という表示をページごとのカテゴリー名に変える
• 長い記事名の後半を省略させずに全部表示する
• ルックスを変える

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

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

準備

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

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

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

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

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

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

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

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

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

上の画像の <!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 %>

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

カテゴリー名を表示するタグは <% 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 %>

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

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

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

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

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

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

タイトルは記事の最後にランキング投票ボタンを自動挿入するとしていますが、ボタンでなくても構いません。好きなものをすべての記事の最後に自動で挿入して表示できます。

記事の最後にツイッターなどのソーシャルボタンがある時はその上に表示します。ソーシャルボタンがなく、【このカテゴリーの最新記事】がある時はその上に、それもない時は一番下に表示します。

貼り付けるソースコードはPC版とスマホ版で別のものになります。

PC版ソースコード

<div id="insert_bottom" style="display:none;"> ここに表示したいものを記入 
</div>

<script type="text/javascript" src="https://fanblogs.jp/techs/file/plugin_insert_bottom.js" charset="utf-8"></script>

このソースの赤字部分を表示したいもののソースに書き換えて、サイドバーに設置すればすべての記事の最後にそれが表示されます。設置方法について詳しい説明は、別の記事「 プラグインの設置方法 」を見てください。

スマホ版ソースコード

<div id="insert_bottom" style="display:none;"> ここに表示したいものを記入 
</div>

<script type="text/javascript" src="https://fanblogs.jp/techs/file/sp_plugin_insert_bottom.js" charset="utf-8"></script>

スマホ版も同じで、赤字部分を表示したいものに差し替えて設置します。設置方法は別の記事「 スマホ版プラグインの設置方法 」を見てください。

PC版では、これを設置するとトップページやアーカイブページでも、すべての記事の最後に同じものが表示されます。（スマホの一覧ページはタイトルしか表示されないのでプラグインは適用されません）

一覧ページで表示させたくない場合は、別記事「 記事ページと一覧ページでサイドバーの表示を違うものに変える 」を見て設定すれば解決できます。

ブログの記事の上に「お知らせ」など、決まったメッセージを一定期間表示させておきたいことがあります。

Seesaa Blogだとデザイン設定のコンテンツに「記事」という項目があってそれで出来るのですが、ファンブログにはその項目がありません。直接HTMLのテンプレートを編集すれば出来ますが、新しくなったファンブログのテンプレートは編集が難しいです。

そこで、表示したいメッセージをサイドバーに貼りつければ、記事の上に移動して表示させるプラグインを作りました。

サンプル ファンブログのテンプレート「ナチュラルコスメ」を使用

表示形式は6パターン。「イエロー」「ピンク」「ブルー」「グリーン」「ホワイト」「ブラック」です。

表示例

ソースコード

ソースコードは次のとおりです。

<div id="message" style="display:none;"> おはよう
こんにちは
こんばんは 
</div>

<script type="text/javascript">
var message_color=' yellow 
';
</script>

<script type="text/javascript" src="https://fanblogs.jp/techs/file/plugin_message.js" charset="utf-8"></script>

このソースの赤字のところを、自分が表示させたいメッセージに書き換えてサイドバーに設置すれば、すべての記事の上に、そのメッセージが表示されるようになります。

メッセージの改行は自動で行ないますので<br>タグは不要です。

色のパターンは青字の部分を好みの色に書き換えてください。指定できるのは次の６つです。

• yellow
• pink
• blue
• green
• white
• black

書き換える場合は、必ず半角英数字を使ってください。全角では反映されません。

この6種類以外の無効な色を指定したらwhiteが適用されます。白以外を指定したのに白になる時はスペルを確認してください。

サイドバーに貼りつける場所が編集エディタになっているので、メッセージ本文の文字色や太さなどの変更はそれで出来ます。

サイドバーへのくわしい設置の仕方は、別の記事「 プラグインの設置方法 」を参照してください。

設置すると個別の記事ページにも、記事一覧ページにもメッセージは表示されます。記事一覧ページには表示させたくないときは「 記事ページと一覧ページでサイドバーの表示を違うものに変える 」を見ると解決できます。それを見ながら設定してください。