表示する文字数を変更したい

初期設定では、本文中の170文字まで表示するようにしています。その文字数を変更する場合は次の部分の170を書き換えてください。

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

var fanblog_tech_plugin_37_entry_length   = 170 
;

注意事項 - トップページで表示できるのは編集ページで「本文」に書いたものだけです。追記に書いた部分は表示されません。指定文字数より表示が短い場合、「本文」の文章が少なくないか確かめてください。

本文中から画像を抽出して表示させたくない

初期設定では本文中に画像がある場合、最初の画像を文章の左側に表示させるようにしています。

ブログに画像のあるページとないページが混在する場合、画像があるページは画像を表示し、画像がないページは下の「画像表示無効」のように表示されます。

画像を表示させたくない場合は次の部分の「 true」という４文字を「 false」という５文字に変更してください。

書き換える文字は、必ず半角で書いてください。全角では反映されません。

var fanblog_tech_plugin_37_image_flag     = true 
;

注意事項 - 抽出する画像は大きさが15ピクセルより大きい物に限定しています。絵文字は15ピクセルなので表示対象から外れます。

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

この設定は、画像を表示させない場合、画像がないので反映されません。

画像の表示サイズは初期設定で横幅80ピクセルで、それに合わせて高さを自動調整しています。もし画像の大きさを変えたい場合はその80ピクセルを変更します。次の80という数字を好みの大きさに変えてください。

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

var fanblog_tech_plugin_37_image_width    = 80 
;

高さは自動で元画像の比率に合わせます。長方形画像だけど正方形で表示させたい場合は次のセクションで説明します。

表示する画像の場所を変えたい

この設定は、上の「本文中から抽出した画像の表示設定」を「false」にした場合、画像が表示されないので反映されません。

初期設定では、画像は文字の左側に配置されますが、右または、文字の上の中央に変更できます。

画像を「右」にしたい場合は、下の「left」という４文字を「right」という５文字に変更します。また、文字の上に中央表示させたい場合は「left」の４文字を「center」の６文字にします。

文字の左右の「"」は消さないでください。消すと動きません。

書き換える文字は、必ず半角で書いてください。全角では反映されません。

var fanblog_tech_plugin_37_image_position = " left 
" ;

画像の下に余った文字の回り込み指定

この設定は、上の「本文中から抽出した画像の表示設定」を「false」にした場合、画像が表示されないので反映されません。

文字数が多くて画像の高さより長くなった場合、画像の下に文字をまわり込ませるかどうかの設定です。

初期設定では回り込まないようになっています。

回りこむように変更したいときは次の部分の「 false」という５文字を「 true」という４文字に変更してください。

書き換える文字は、必ず半角で書いてください。全角では反映されません。

var fanblog_tech_plugin_37_image_overflow = false 
;

「続きを読む »」の文を変更したい

初期設定ではリンク文字は「続きを読む »」になっています。これを他の言葉に変えたいときは次の部分の " と " の間にある「続きを読む »」を消して書き換えてください。

ちなみに「»」はエンティティといってWeb上では「»」と表示される特殊文字です。

文字の左右の「"」は消さないでください。消すと動きません。

var fanblog_tech_plugin_37_button_text    = " 続きを読む » 
" ;

ページ表示した時、圧縮される前に元のレイアウトが表示される場合

プラグインを読み込む前に他のJavaScriptが多いと、プラグインの起動が遅くなります。そのため表示が変わるまでにタイムラグが出来ます。

もし、ページ表示した時に圧縮前のレイアウトのページが表示されてしまって、それを避けたいという時はスタイルシートの「いちばん最後」に次の通り追加してください。プラグインが表示を整形するまで記事内容が非表示になります。

本文が整形されるまでタイトルだけが表示されるイメージです。表示されるまでの時間は速くしようがないので、その間の見栄えが変わるだけです。

ただし、プラグインが動かないと永遠に非表示のままなので、プラグインが動くのを確かめた後で書き加えてください。また、プラグインの使用をやめるときには追加したスタイルシートも忘れずに消してください。

.entryBox .text,
.blog .text,
#entries .entryBody,
.entry .text {
	display: none;
}

スタイルシートの追加方法がわからない場合は別ページ「 大きな画像が枠から絶対はみ出さないスタイルシートの設定 」を参考にしてください。

自分独自のCSSを追加して見え方を変える方法

画像やリンク文字にスタイルシートで加工をされたい方もいるかと思います。初期設定のままだと生成されるHTMLは次のとおりになります。青文字部分が画像です。画像がない場合は青文字部分は作られません。

 <p class=" extracted_image 
" style="margin:5px 5px 0 5px;float:left;">
	<a href="URL" style="margin:0;padding:0;">
		<img src="URL" alt="サムネイル" style="width:80px;height:auto;margin:0;" />
	</a>
</p> 
<div class=" extracted_text 
" style="overflow:hidden;">
	<p>ここにHTMLタグを除去した文章</p>
	<p style="margin-bottom:0;padding-bottom:0;">
		<a href="URL">続きを読む &raquo;</a>
	</p>
</div>

画像を囲むPタグには「extracted_image」というクラス名がついています。画像そのものではなく、画像を囲むAタグのさらに上位のPタグについています。

また、抽出された本文には「extracted_text」というクラス名がついています。

これらのクラス名を目印にしてCSSを書いてください。たとえば下のスタイルシートをファンブログのテンプレート「森林」に追加すると図のようになります。

.extracted_image {
	padding: 8px;
	border: 1px solid #00ff00;
	border-radius: 3px;
}

.extracted_text a {
	color: #008800;
	background: #eeffee;
	border: 1px solid #00ff00;
	border-radius: 5px;
	padding: 3px;
}

.extracted_text a:hover {
	color: #00ff00;
}

スタイルシートの追加方法がわからない場合は別ページ「 大きな画像が枠から絶対はみ出さないスタイルシートの設定 」を参考にしてください。

スクリプトのソースコードは https://fanblogs.jp/techs/file/entry_compress.jsにあります。改変される場合は修正後、ご自分のブログにアップロードしてお使いください。拡張子が .css と .js のファイルは画像と同じ方法でアップロードできます。

記事の途中で分割して一覧ページに「続きを読む」と表示させる

本文をふたつに分けたいだけなら何の設定も必要ありません。

記事編集ページで「本文」に書いたものが、一覧ページでは「続きを読む」の前に表示され、記事ページを開くと「追記」を含めた全文が表示されます。

このように「本文」と「追記」を分けて書くと、一覧ページには「本文」部分の内容だけが表示されます。

「続きを読む」を押して記事本文のページを開くと、全文が表示されます。

「続きを読む」の言葉の変更

一覧ページに表示される「続きを読む」というリンクの文字は次のように、追記の記入欄の上にある「追記リンク文言」に書き込めば変更できます。

ここに何も書いていない場合は「続きを読む...」と表示されますが、何かを書き込むとその文章が表示されます。

「このカテゴリーの最新記事」の表示・非表示と表示数の変更

一覧ページで「続きを読む」として文書を短くしても「このカテゴリーの最新記事」が幅をとってしまいます。

この表示・非表示は次のやり方で切り替えられます。また表示数の変更も出来ます。

ただしトップページだけの設定は出来ないので、非表示にする場合は個別記事ページでも表示されなくなります。

設定 > 詳細設定 > ブログ設定のページに「記事カテゴリ最新記事」という項目があります。この数字を切り替えて「非表示」にすれば「このカテゴリーの最新記事」は表示されません。また、「非表示」ではなく件数を指定すればその数だけ表示されるようになります。

ソーシャルボタンの表示・非表示の方法

「記事カテゴリ最新記事」とは別に、各記事の下にツイッターやフェイスブックのソーシャルボタンが表示されています。このボタンの表示・非表示の切り替え方法は次のとおりです。

ただしトップページだけの設定は出来ないので、消す場合は個別記事ページでも消えてしまいます。

ソーシャルボタンを消すには、設定 > 詳細設定 > ソーシャルボタンのページを開きます。このページで印をつけたものだけが表示されます。全部消したい場合は全部の印を外します。