【カスタマイズ】記事の表示方法を色々試してみよう

今までのカスタマイズの中で、どうすれば
読みやすい記事になるかいろいろ模索してきました。
フォントサイズ然り、見出し然りと。

今回は、文章そのものではなく、文章（記事）の見せ方について、
考えてみようかと思います。

１．ファンブログにおける記事の入力方法

　まず、ファンブログにおける記事の入力方法を押さえておきましょう。

　ファンブログの管理画面を見ていただくと解るのですが、
　文章を入力するボックスは、本文・追記・概要の３つがあります。

　１）本文

　　普段、ブログを書いて記事をUPする際、本文に文章を書くと思います。
　　そうすると、その記事内容がTOPページ、および該当カテゴリーに
　　全文が表示されます。

　２）追記

　　ブログの各記事において、本文の続きに表示されます。
　　本文が長くなる場合は、追記に続きを書きましょう。
　　（ポップアップヘルプより）

　　本文と追記の関係は、こんな感じですね。

　　

　３）概要

　　記事の概要です。
　　トラックバックなどの更新通知の際に送信されます。
　　（ポップアップヘルプより）

　　トラックバックとは、他のブログやサイトに、自分の記事のリンクを
　　紹介文と一緒に貼り付ける機能です。

　　今回例として、自分で自分の記事にトラックバックを飛ばしてみました。
　　ここで書いた内容は、このように表示されます。

　　

　基本的に、記事に直接関連しているのは、本文と追記になります。

２．記事の見せ方を考える

　さて、前項で３つの入力方法を見てきましたが、実際どう使い分ければ良いのでしょう。
　それは、ブログの形態、およびアクセス状況に関わってきます。

　このブログを例にとってみましょう。

　１）ブログの形態

　　本ブログはタイトルの通り、ブログカスタマイズをメインにしています。
　　その為、解説記事が半数以上を占め、一記事辺りの文字数はかなり多い方です。

　　ファンブログの文字数規制である、10000字を越えることがざらにあります。
　　全ての記事を本文に書いてしまうと、TOPページが冗長になり、かつ表示に時間が
　　かかってしまいます。

　２）アクセス状況

　　解説記事が多いため、このブログは検索から訪問される方が結構いらっしゃいます。
　　ここ数週間の集計で見てみると、ほぼ半数が検索エンジンからになります。

　　

　　また、検索からこられる方は、TOPページを経由することなく直接記事詳細に
　　移動します。

　　つまり、ここでもTOPページに全文を表示する必要性はそれほど
　　無いことになります。

　以上の点を考慮し、本ブログは前項で紹介した画像のような構成をとっています。
　記事を本文と追記に分ける形ですね。

　ここでは、このブログを例に挙げてみましたが、もしアフィリエイトをメインにした
　ブログなら、また違った方向性になると思います。

　商品紹介だけなら、それほど文字数も多くないでしょうし、逆に本文だけで商品説明や、
　関連画像を入れた方が、訪問してもらった人への訴求力は高くなるかもしれません。

　この辺りは、自分のブログに合った表示方法を模索してみてください。

３．記事を追記に書くメリット・デメリット

　先日の書いた『参考になるかもしれない、私のブログ作成術』の記事内容と
　一部重複する箇所があります。
　ご了承ください。

　さて、記事の表示方法は決まりました。
　ここで改めて、この表示方法のメリット・デメリットを考えてみます。

　１）メリット
　

TOPページ、カテゴリーページが見やすい
読み込みが速い

　　２番目は、あくまでも全文表示よりも、ということです。
　　このブログは、他のファンブログの方に比べては、表示はかなり遅い方だと思います。

　２）デメリット
　

TOPページから来られた方は、記事全文を読むのに、
１クリック余計な作業が発生する

　　先日のブログでも書きましたが、この辺が二律背反で迷うところなのです。
　　自分の行動を踏まえてみると、１クリックの影響はかなり大きいです。

　　　手間を省くか、見やすさをとるか…。

　　私は見やすさをとりました。
　　理由は、２．で書いた内容と、やっぱり、TOPページが雑然と並んでいるのが、
　　個人的にあまり好きではないんですよね。

　では、次にこのデメリットを少しでも改善させる方法を考えてみましょう。

４．デメリットに対する改善案

　色々考えたのですが、あまり良いアイデアは浮かびませんでした。
　なので、とりあえず『続きを読む』をちょっとカスタマイズしています。

　

　左の方が、ちょっと押してみたくなると…。
　そう信じてます。

　何か他に良いアイデアがあれば教えて頂けると嬉しいです。

５．『続きを読む』をカスタマイズしてみよう

　それでは、『続きを読む』をカスタマイズしていきます。
　今回のカスタマイズはそれほど複雑ではありません。
　スタイルシートで定義されている場所さえ見つけてしまえば、ほぼ完了です。

　１）使用しているCSSを特定する

　　色々なやり方があると思うんですが、ここでは実際私が行った方法を紹介します。
　　私の場合、「ここをちょっと変えたいな？」と思ったら、まずコードを確認します。
　　コードの確認方法は、こちらの記事をご覧ください。

　　　【関連記事】記事とHTMLの関係をイメージしよう

　　そして、それが定義されている所を探して、何をしているか理解する。
　　解らなければ、タグの意味を調べたり、そこを弄ったりしてみて影響を見る。

　　これの繰り返しです。
　　今回の場合は、以下のCSS（entryContinue）で定義されていることが解りました。

 
続きを読む...

　２）使用する画像を用意する

　　従来の文字だけのリンクではなく、画像をクリックして記事詳細に飛ぶように
　　したかったので、こんな画像を用意しました。

　　　

　３）スタイルシートを修正する

　　最後に、実際にスタイルシート上のCSSを、用意した画像を使用するように
　　修正します。

 
/* 続きを読む */
#entries .entryContinue a {

	/* ここで用意した画像を定義 */
	background: url(https://fanblogs.jp/poirot/file/139/cmVhZG1lcJw.png) no-repeat;
	width:173px;				/* 横幅 */
	height:30px;				/* 高さ */
	margin-left: 18px;			/* 微妙な位置調整 */
	display: block;
	text-indent: -9999em;		/* リンク文字を消去 */
}

　　これで、『続きを読む』の表示が変わっているはずです。