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

このプラグイン適用後の標準の設定では、画像の大きさは縦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;

font-size: 120%;

font-weight: bold;

変更前の該当箇所

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