「記事上下の設定とプラグイン」の記事一覧

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

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

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

プラグイン適用後

プラグイン適用後

プラグイン適用前

プラグイン適用前

このプラグインで出来ること

  • ルックスの変更(上のプラグイン適用後のルックスに変更されます)
  • 画像がないページでは指定の画像を表示させる(オプションです。設定しなくてもOK)
  • 【このカテゴリーの最新記事】という文字を変更(オプションです。そのままの表示も可)

表示個数の設定は、このプラグインを使わなくても出来ます。それは後で説明します。

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

プラグインの設置方法

次のソースをマルっとコピーしてサイドバーに貼り付けて下さい。それで設置は完了です。

設置したプラグインの設定変更に関しては後述します。

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

サイドバーへの貼り方が分からない場合は「プラグインの設置方法」をご覧ください。

プラグインの設定変更

上のソースをサイドバーに貼り付けただけでレイアウトは自動で変わります。細かい設定を変更するには以下をご覧ください。

表示される画像の大きさを変えたい

このプラグイン適用後の標準の設定では、画像の大きさは縦60ピクセル x 横60ピクセルです。

この設定を変更したい場合は、貼り付けたソースの

 "size"          : 60 ,

と書かれた部分の数字を書き変えて下さい。書いた数字の大きさで正方形表示されます。ピクセルと言われてもピンとこないという場合は、とりあえず数字を変えてプレビューしてみるです。

書き変える際は必ず半角数字で書き変えて下さい。全角数字で書いても反映されません。

画像がないページでは指定の画像を表示させたい

画像がないページでは指定の画像を表示させることが出来ます。ただし、ページ毎の設定は出来ません。画像のないページでは常に指定された同じ画像を表示します。

画像を指定する際は

 "default_image" : "" ,

と書かれた行の " と " の間に画像のURLを書き込みます。例えば表示させたい画像のURLが
http://example.com/hoge.png なら次のようになります。

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

下は画像を指定しない場合と次の画像を指定した場合の違いです。

ロゴ

画像指定あり

画像指定あり

画像指定なし

画像指定なし

【このカテゴリーの最新記事】という文字を変更したい

【このカテゴリーの最新記事】というタイトルを変えたい場合は

 "title"         : "" 

と書かれた行の " と " の間に表示させたい文字を書きます。【こちらのページもオススメです】とさせたい場合は、次のようにします。

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

これで表示される文は変わります。さらに色を変えたい、文字のサイズを変えたい、太くしたいという場合はスタイルシートを書き込みます。

タイトル文字の色、大きさ、太さの変更方法

プラグインを貼り付けた自由形式の中でいいので、次のソースを追加して下さい。

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

ここで色を変えているのは次の行です。色を変える必要がない場合は、この行を消して下さい。

 color: blue;

blue という文字を red に変えれば文字は赤くなります。 pink にすればピンクになります。

文字の大きさを変えるには

 font-size: 120%;

の数字を変えます。数字を変える必要がない場合は、この行を削除して下さい。

文字を太くしているのは

 font-weight: bold;

という行です。文字を太くしない場合は、この行を消して下さい。

【このカテゴリーの最新記事】で表示する記事数を変えたい場合、非表示にしたい場合

このページのプラグインとは関係なく、ファンブログ標準の設定で【このカテゴリーの最新記事】が表示する記事の数を変える方法、また【このカテゴリーの最新記事】を表示させない場合の設定方法です。

ファンブログのログイン画面で「設定」 » 「ブログ設定」と移動します。

設定画面

「ブログ設定」画面の中に「記事カテゴリ最新記事」という項目があります。この設定を変えると表示個数の変更、または【このカテゴリーの最新記事】という項目自体を非表示にすることもできます。

設定画面


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

このプラグインを使わずにCSSで表示を変えるには

このプラグインではJavaScriptを使って【このカテゴリーの最新記事】が入っている div タグのクラス名を変更しています。本来のクラス名は上に出てくる説明のものとは違います。

【このカテゴリーの最新記事】本来のスタイルシートは 、http://fanblogs.jp/_common/css/user-common.css の中に書かれています。このプラグインでは、その中身を書き変えるのが面倒くさかったので、違うクラス名にして独自のCSSを適用しました。そうではなく、本来のCSSを上書きしても表示は変えられるのではないかと思います。

【このカテゴリーの最新記事】のHTMLと、本来ついているクラス名は次の通りです。

<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>

ただ、長いタイトルを丸めるのにCSSの text-overflow などは使わずにHTML中のタイトルそのものを短くして「..」を追加して出力されています。その部分を変えるにはテンプレートを修正するしかありません。

テンプレートを修正して表示を変えるには

このブログではプラグインを使うのではなく、テンプレートを改変して表示の仕方を変えています。

プラグインで出来るのは元々出力されているモノの見え方を変えるだけなので、例えば公開日も表示させたいなどと思っても出力されていないものを表示させることは出来ません。

このページの下にある最新記事一覧と同じ見え方でいいのならテンプレートを改造すれば出来ます。下に書いてある「変更前の該当箇所」を探して「変更後」のものに書き変えます。そして、スタイルシートも丸々コピーすればこのページと同じ見え方になります。ただし、1文字でも間違えたらブログが壊れますので、自己責任でやってください。

この部分の改造に関しては以前書いたページ「記事下に表示される【このカテゴリーの最新記事】をカスタマイズする」が参考になるかも知れません。テンプレートの設定ページの出し方などもそちらをご覧ください。

変更した場所は次の通りです。

変更前の該当箇所

<% 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 %>

ポイントはtext_summary()の中の数字を20から0に変更することです。これで文字数で切り詰められずタイトル全文が表示されます。それをCSSで文字数切り詰めすればOKです。

それからページの公開日をyyyy年mm月dd日で表示しているのは次の部分です。

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

またこの例では、クラス名を変更して元のCSSが適用されないようにした上で独自のCSSを書いて適用しています。

参考までに、あまりいいCSSではありませんが上の改造したテンプレートに当てているスタイルシートは次の通りです。赤文字の部分で画面サイズに応じてはみ出す文字は切り詰めて...と表示させています。ファンブログ純正のテンプレートなら最後の青文字部分は不要です。

このスタイルシートでレイアウトが崩れる時は、赤文字の中のwidth: 70%;の数字を変えて下さい。

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

.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やファンブログで最初の記事の下に表示される【このカテゴリーの最新記事】を改造します。

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

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

このページでやること

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

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

記事の最後にランキング投票ボタンを自動挿入するプラグイン

insert_button.jpg

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

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

insert.jpg

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

PC版ソースコード

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

<script type="text/javascript" src="http://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="http://fanblogs.jp/techs/file/sp_plugin_insert_bottom.js" charset="utf-8"></script>

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

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

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

記事の前に定型文を表示するプラグイン

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

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

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

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

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

表示例

おはよう
こんにちは
こんばんは
おはよう
こんにちは
こんばんは
おはよう
こんにちは
こんばんは
おはよう
こんにちは
こんばんは
おはよう
こんにちは
こんばんは
おはよう
こんにちは
こんばんは

ソースコード

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

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

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

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

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

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

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

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

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

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

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

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

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