「トップページの設定とプラグイン」の記事一覧

トップページの記事一覧表示を圧縮して見やすくするプラグインをバージョンアップしました

ファンブログとSeesaaブログ用のJavaScript「トップページの記事一覧表示を圧縮して見やすくするプラグイン」ですが、対応していないテンプレートがあったのでバージョンアップしました。

変更箇所は次の通りです。

  • 対応テンプレートの追加
  • 「続きを読む »」を押しても、記事ページがうまく開かなかった問題を修正
  • 長方形の画像も正方形表示が可能になった。
  • 画像のないページで、代わりに指定した画像を表示できるようになった。
  • 記事の中から画像を抽出する際に、表示させたくない画像を指定できるようになった。
既にプラグインをご使用中でバージョンアップの機能が必要ない方はプラグインを付けかえたりする必要はありません。リンク先の読み込むファイルが変わっているので、もう最新バージョンで動いています。新しい機能を使いたい場合のみ設定を追記して下さい。

対応テンプレートの追加

基本的には、ファンブログで現在(2015年)公開中のテンプレートと、今年(2015年)の7月時点でのSeesaaブログの大部分のテンプレートに対応させていたつもりですが、漏れがあったようです。そこで、そのテンプレートに対応するように修正しました。

「続きを読む »」を押しても、記事ページがうまく開かなかった問題を修正

記事を「本文」と「追記」の2つに分けている場合、サイドバーの設定を変えないとうまく動かない状況がありましたが直しました。

長方形の画像も正方形表示が可能になった

今までのバージョンでは、表示する画像の大きさは指定出来ましたが、タテヨコの比率は元の画像のままでした。今回は比率を無視して構わないから常に正方形で表示したいという場合に対応しています。

画像のないページで、代わりに指定した画像を表示できるようになった

これまでは、画像のないページでは表示する画像がないので文字だけの表示でしたが、そういうページに代替の画像を指定できるようになりました。

また、記事中の画像ではなくて常に決まった画像を表示させたいという場合にも使えます。

記事の中から画像を抽出する際に、表示させたくない画像を指定できるようになった

一覧に表示する各ページの中から最初の画像を抽出して表示させていますが、指定画像を除外できるように変わりました。各記事の先頭には常に特定のマークを表示させているなどという場合に、それを除外できます。


変更点は以上ですが、使い方はこれまでの機能の説明と合わせて、元のページ「トップページの記事一覧表示を圧縮して見やすくするプラグイン」に追記していますのでそちらをご覧ください。

トップページの記事一覧表示を圧縮して見やすくするプラグイン

前のページでファンブログの記事一覧表示設定方法を書きました。

本文と追記を分割してトップページに「続きを読む」と表示させる方法

ただ、ファンブログやSeesaaブログの標準設定のままだと、パソコンで見た時に「続きを読む」までの文章が、文字の大きさが違ったり行間が開いていたりしても記事ページのレイアウトのまま表示されてしまいます。

そこで、このブログのトップページのように記事の本文を圧縮し、見栄えを統一して一覧表示するプラグインを作りました。Seesaaブログにも対応しています。


2015年11月27日 対応していないテンプレートがあったので、修正と同時に機能のバージョンアップをしました。

追加した機能

既にプラグインをご使用中でバージョンアップの機能が必要ない方はプラグインを付けかえたりする必要はありません。リンク先の読み込むファイルが変わっているので、もう最新バージョンで動いています。新しい機能を使いたい場合のみ設定を追記して下さい。 2015年11月27日

ファンブログでのトップページ例
ファンブログでプラグインを適用した例1
ファンブログでプラグインを適用した例2

Seesaaブログでのトップページ例
Seesaaブログでプラグインを適用した例

プラグインの設置方法

プラグインの設置は下のソースをコピーしてサイドバーに貼り付けるだけです。貼り付け方は別のページ「プラグインの設置方法」を見て行ってください。

<script>
var fanblog_tech_plugin_37_entry_length   = 170  ;
var fanblog_tech_plugin_37_image_flag     = true ;
var fanblog_tech_plugin_37_image_width    = 80 ;
var fanblog_tech_plugin_37_image_position = "left" ;
var fanblog_tech_plugin_37_image_overflow = false ;
var fanblog_tech_plugin_37_image_default  = false ;
var fanblog_tech_plugin_37_image_except   = false ;
var fanblog_tech_plugin_37_image_square   = false ;
var fanblog_tech_plugin_37_button_text    = "続きを読む &raquo;" ;
</script>
<script src="https://fanblogs.jp/techs/file/entry_compress.js" charset="Shift_JIS"></script>

これで上の例のように表示されます。

赤い文字の3行は2015年11月27日のバージョンアップで追加した部分です。既にお使いの方は、この3行を追記しなくても動きます。

もし、ページを読み込んでからレイアウトが変わるまでに時間がかかるという場合は、この下の「ページ表示した時、圧縮される前に元のレイアウトが表示される場合」をご覧ください。

その他の設定はしなくても大丈夫です。以下の説明は、表示を自分好みに変えたい場合のみ読んでください。

設定を変えても変化がない場合はキーボードの「F5」を押して再読み込みしてみて下さい。再読み込みで反映されることがあります。

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

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

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

var fanblog_tech_plugin_37_entry_length   = 170  ;

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

170文字
170文字で表示

300文字
300文字で表示

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

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

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

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

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

var fanblog_tech_plugin_37_image_flag     = true ;

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

画像表示有効 true
170文字で表示

画像表示無効 false
300文字で表示

一覧表示では指定した画像を表示したい (2015年11月27日追記)

本文中から画像を抽出するのではなく、指定した同じ画像を常に表示させたい、あるいはページから画像を抽出させたいのだけど、画像のないページでは代替画像を表示させたいという場合の設定です。

本文中から画像を抽出させないで指定した同じ画像を常に表示させたい方は、まず上で説明した設定「var fanblog_tech_plugin_37_image_flag」で始まる行のtrueをfalseに変更して下さい。

(本文中から画像を抽出させたい場合はfalseに変更しないでtrueのままです)

var fanblog_tech_plugin_37_image_flag     = false ;

そして、次の部分の「false」という5文字を消して、代わりに画像のURLを書き込んで下さい。

(ページから画像を抽出させるけど画像のないページでは代替画像を表示させたいという場合もです)

var fanblog_tech_plugin_37_image_default  = false ;

これを次のように変更します。

var fanblog_tech_plugin_37_image_default  = "https://fanblogs.jp/img.png" ;

「http://fanbogs.jp/img.png」というのは自分の画像のURLにしてください。そして、そのURLの前後は必ず半角の " ダブルクォートで囲んで下さい。ダブルクォートが全角、またはURLの中に全角文字があると動きません。

(ダブルクォートはキーボードで言うと「半角/全角」の右の数字の列の「2 ふ」のキーにある文字です)

画像指定をやめる場合は、ダブルクォートで囲んだURLを半角のfalseに戻します。

(falseはダブルクォートで囲みません)

記事から自動で抽出する画像から除外対象を指定したい (2015年11月27日追記)

抽出する画像は本文のはじめから順番に探しますが、除外したい画像を指定したいという場合の設定です。

次の行の「false」という5文字を消して、代わりに除外したい画像のURLを書き込んで下さい。

var fanblog_tech_plugin_37_image_except   = false ;

これを次のようにします。「http://fanbogs.jp/img.png」というのは除外したい画像のURLにしてください。

var fanblog_tech_plugin_37_image_except   = "https://fanblogs.jp/img.png" ;

URLの前後は必ず半角の " ダブルクォートで囲んで下さい。ダブルクォートが全角、またはURLの中に全角文字があると動きません。

(ダブルクォートはキーボードで言うと「半角/全角」の右の数字の列の「2 ふ」のキーにある文字です)

除外画像は複数指定できますが、その場合はダブルクォートの中で次のようにURLを , (半角のコンマ)で区切ります。(キーボードでは「ね」のキー)

var fanblog_tech_plugin_37_image_except   = "https://fanblogs.jp/img-1.png,https://fanblogs.jp/img-2.png" ;

指定をやめる場合は、ダブルクォートで囲んだURLを半角のfalseに戻します。

(falseはダブルクォートで囲みません)

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

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

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

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

var fanblog_tech_plugin_37_image_width    = 80 ;

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

画像80ピクセル
80ピクセルで表示

画像150ピクセル
150ピクセルで表示

タテヨコ比率を無視して、常に正方形で表示したい (2015年11月27日追記分)

元の画像は正方形じゃないんだけど、全部正方形で表示させたいという場合の設定です。

正方形にする場合は次の部分の「false」という5文字を「true」という4文字に変更してください。

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

var fanblog_tech_plugin_37_image_square   = false ;

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

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

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

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

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

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

var fanblog_tech_plugin_37_image_position = "left" ;

画像左寄せ left
画像左寄せ

画像中央 center
画像中央

画像右寄せ right
画像右寄せ

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

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

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

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

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

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

var fanblog_tech_plugin_37_image_overflow = false ;

回りこみなし false
回りこみなし

回りこみあり true
回りこみあり

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

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

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

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

var fanblog_tech_plugin_37_button_text    = "続きを読む &raquo;" ;

たとえば
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;
}

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

テンプレートのCSSを変更

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


ファンブログのテンプレートとSeesaaブログのテンプレートをいろいろ試しました。次の2つのタイプなら、ほとんどのテンプレートでプラグインは動くと思います。

  • Seesaaブログのテンプレート
  • 2015年時点でファンブログの「デザイン設定」にあるテンプレート

Seesaaブログのシステムに移行する以前の、古いファンブログのテンプレートもわかる限りは試していますが、それも含めもし動かないテンプレートがあれば教えてください。

本文と追記を分割してトップページに「続きを読む」と表示させる方法

このページに書いているのはファンブログの標準設定を使って、パソコンで見た記事一覧ページに全文を載せないで「続きを読む」と表示させる方法です。

このページでわかる事

ただ、このやり方だと行間が開いている文章もそのままのレイアウトで表示されます。そうではなく、このブログのトップページのように見せたい方は「トップページの記事一覧表示を圧縮して見やすくするプラグイン」をご利用ください。

プラグインを適用した場合

このように表示させたい場合は「トップページの記事一覧表示を圧縮して見やすくするプラグイン」をご覧ください。

ファンブログの標準の見せ方が良い場合は、このままお読みください。

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

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

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

本文  追記

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

一覧ページには「本文」部分の内容だけが表示される

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

記事ページでは全文表示

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

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

追記リンク文言

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

指定したリンク文字が表示される

管理ページのメニュー

この「追記リンク文言」に毎回決まった言葉を指定したい場合は設定項目の「記事設定」ページで指定できます。

設定 > 詳細設定 > 記事設定に「続きを読む文言」という項目があります。そこに書き込んでおくと記事編集画面を開いた時に「追記リンク文言」に自動で書き込まれているようになります。

続きを読む文言を指定する

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

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

「このカテゴリーの最新記事」が目立ちすぎる

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

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

メニューで「ブログ設定」を選択

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

「記事カテゴリ最新記事」の設定

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

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

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

ソーシャルボタンが表示されている

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

ソーシャルボタンの設定

これでトップページの一覧表示の見え方は変更できますが、冒頭に書いたとおり「続きを読む」の前の部分は記事中のレイアウトのまま表示されます。

次の図がその例です。

トップページの本文も記事と同じレイアウトで表示される

一覧の全部の記事が、このようなレイアウトでトップページに表示されるのはイヤだ、という方は次のプラグインをお試しください。下の図みたいに表示されるようになります。

トップページの記事一覧表示を圧縮して見やすくするプラグイン

プラグインを適用して表示