Affiliate Maniacs

皆さま、こんにちは

今日は久々の休日を満喫しているのですが、ずいぶん放置してしまったAffiliate Maniacsをメンテナンスしようと思い立ちまして、スタイルシートを少しいじりました。

ボクがファンブログを始めて驚いたのが、ファンブログのスタイルシートの不備といいますか・・・、痒いところへの手の届かなさといいますか・・・。

まずびっくりしたのが、引用タグやリストタグが反映されないこと。

ファンブログに来る前は、FC2ブログで３年ほどブログを書いていましたが、あちらではどんなテンプレートを使用してもそんなことはなかったので、驚愕でした。
いつか自分でこれらのスタイルを実装しなきゃと思いつつ、既に１年が・・・
ようやくこれらのスタイルを実装できましたので、参考までにご紹介を。

他のWEBサイトの引用とは？

まずは、そもそも引用とは何かということを確認しておきましょう。
ボクらが書くブログの文章などは、著作権法という法律によって保護されていますので、自分以外の人が勝手にコピーして使用してはいけないんですね。
しかし、ちゃんと出所を示しつつ自分の文章と他人の文章をきちんと区別して表示すれば、基本的には他人の文章などを自分の文章の中で使うことができるのです。

そう、この他人の文章を自分の文章の中で使うのが「引用」なんです。

ここで覚えておいていただきたいこととして、他人の文章を引用するには一定のルールを守らなければならないのです。
細かいことは省きますが、引用のルールとして主なものは次の２点です。

1. 出所を明示すること
2. 自分の文章と他人の文章を区別する

順に見ていきましょう。

出所を明示すること

ブログやWEBサイトにおいて出所を明示する方法は、リンクを張ることといってよいでしょう。
エントリ内の特定の文章にリンクを張る方法については、エントリ（記事）にリンクを貼る方法というエントリを参照してみてください。

自分の文章と他人の文章を区別する

これは、どこからどこまでが他人の文章であるかがわかるようにするということです。
その方法は様々です。
例えば、次のように引用部分の始まりと終わりを明示するのもひとつの方法です。

［引用ここから］−−−−−−−−−−−−−−−−−−−−−
ここに他人の文章をコピーして張り付ける
［引用ここまで］−−−−−−−−−−−−−−−−−−−−−

しかし、この方法は人間の目で見れば引用部分がわかりますが、例えば検索エンジンのクローラーや音声ブラウザなどには、必ずしも引用部分がどこからどこまでなのかが明確ではありませんね？
そこで、引用するときのHTMLタグが用意されています。

それが<blockquote>です。

このタグを使って、次のように引用部分を囲うことによって閲覧者にとっても検索エンジンのクローラーにとっても引用部分が明確になるわけです。

<blockquote>
ここに他人に文章をコピーして張り付ける。
</blockquote>

そこで、多くのブログでは引用部分にこのblockquoteタグが使われているのです。

ところが！

このファンブログでは、blockquoteタグで引用部分を囲っても、なにも区別のための表示をしてくれないのですよ・・・

これではクローラーや音声ブラウザには引用部分を明示できても、目で確認することができません

そこで、例えば次のようにスタイルシートに追記することによって区別の表示を実現しました。

---

/*------------------------*/
/* 画面全体の基本的な設定 */
/*------------------------*/
* {
/* 全体のパディングとマージンをクリアする */
margin : 0;
padding : 0;
word-wrap : break-word;
word-break : break-all;
}

ここから追記部分
blockquote ｛　　←スタイルの変更を宣言ます
/* 引用のスタイル */
background-color: #F8F8FF;　　←背景色を指定します
font: 14px/22px normal helvetica, sans-serif;　←フォントを指定します
margin-top: 10px;　　　　　←上部余白を指定します
margin-bottom: 10px;　　←下部余白を指定します
margin-left: 20px;　　　　←左余白を指定します
padding-left: 15px;　　　　←左インデントを指定します
border-left: 3px solid #ccc;　　←側面に幅３ピクセルの線を入れます
｝

---

このようにblockquoteタグのスタイルを指定することで引用部分の表示を変えることができます。

その結果が以下のような感じです。

この部分が引用として表示されています。
他のコンテンツと明確に区別するようにスタイルを指定してあげるとよいでしょう。

いかがですか？

HTMLやスタイルシートの知識がないうちは難しいと感じるかもしれませんね。
でも、怖がることはありませんよ。コツさえつかめば簡単ですから。

ファンブログでのレイアウトやデザインのカスタマイズについては、wikoさんの＋ぷちカスタマイズ日記＋に役立つ記事がたくさん掲載されていますので、ぜひご訪問ください