CSSファイルについて

CSSファイルの利用

【SEO対策済み】まとめ作成ツールはCSSファイルでスタイリングすることを前提としています。
以下のリンクからCSSファイルをダウンロードしてください。

CSSファイルのダウンロード(ver1.5)

CSSファイルの設置方法などについて

CSSのアップロードなどがわからない人向けの説明です。わかっている人は不要。

WordPress の場合

方法①:CSSファイルに追記

ダッシュボードから、 [外観] > [テーマの編集] をクリック。
大抵の場合、「スタイルシート (style.css)」と表示されるので、テキストエリアの末尾にダウンロードしたCSSをコピペし、ファイルを更新してください。

完了。

方法②:CSSファイルをアップロード

FileZillaまたはFFFTPで任意の場所にアップロード。あとは、<link>を貼ってください。

完了。

方法③:<head>に直接挿入

functions.phpに以下を記述してください。
(※『※ここにCSSの中身をコピペ※』の部分はダウンロードしたCSSの中身を貼り付けてください。)


add_action('wp_head',function(){
echo <<<EOT
<style>
※ここにCSSの中身をコピペ※
</style>
EOT;
},9999);

完了。

livedoor Blog の場合

マイページから[ブログ設定] > [PC] > [カスタマイズ] をクリックしてください。
CSSの編集画面が表示されますので、テキストエリア末尾にCSSファイルの中身をコピペしてください。

完了。

シェアブログ の場合

マイページから[管理TOP] > 4.デザイン / ブログパーツ設定[PC] > [カスタマイズ] をクリックしてください。
CSSの編集画面が表示されますので、テキストエリア末尾にCSSファイルの中身をコピペしてください。

完了。

FC2ブログ の場合

FC2ブログの管理ページTOPから[メインメニュー] > メインメニュー[テンプレートPC] をクリックしてください。
HTMLとCSSの編集画面が表示されますので、スタイルシート編集のテキストエリア末尾にCSSファイルの中身をコピペしてください。

完了。

CSSのカスタマイズ

CSSをカスタマイズする場合は、以下を参考にしてください。

(ver1.0-基本構成)

<div id="ch_matome" class="ch_style-df"> <ol class="ch_res-list"> <li class="ch_res-li"> <div id="ch_res-wrap-1" class="ch_res-block-wrap ch_res-depth-1"> <div id="ch_res-1" class="ch_res-block ch_res-author"> <p class="ch_res-info"> <span class="ch_res-number">1: </span><span class="ch_res-name">名無しさん: </span> <span class="ch_res-date">2014/04/12(土) 02:26:53.74 </span><span class="ch_res-id ch_res-auth-id">ID:E72Y8yP+F</span> </p> <p class="ch_res-comment">ひろゆきに文句ある人はこのスレで</p> </div> <div id="ch_res-wrap-52" class="ch_res-block-wrap ch_res-depth-2 ch_res-nest"> <div id="ch_res-52" class="ch_res-block"> <p class="ch_res-info"> <span class="ch_res-number">52: </span><span class="ch_res-name">名無しさん: </span> <span class="ch_res-date">2014/04/15(火) 18:19:16.74 </span><span class="ch_res-id">ID:5gQ6UCfMo</span> </p> <p class="ch_res-comment"> <span class="ch_res-anchor">&gt;&gt;1-2000</span> <br> 嫌なら来るなよ(笑) </p> </div> </div> </div> </li> </ol> </div>

http://sweet.2ch.sc/test/read.cgi/patisserie/1397237213/

クラス 要素
li.ch_res-li レスは ol li の形式で組んでいます。
(※ネストさせている場合は全てのネストを一つの li で囲っています。)
div.ch_res-block-wrap 間隔調整用のラッパーです。margin-bottomを設定しています。
div.ch_res-block 一つのレスを囲っています。
(※主レスには .ch_res-author が付与されています。)
div.ch_res-depth-{n} ネストの深さを表します。
p.ch_res-info レス番号、名前、日時、IDを表示している部分です。
p.ch_res-comment レスコメの部分です。
span.ch_res-number レス番号を囲ってます。
span.ch_res-name 名前を囲ってます。
span.ch_res-date 日時を囲ってます。
span.ch_res-id IDを囲ってます。
(※スレ主のIDは .ch_res-auth-id が付与されています。)
span.ch_res-anchor アンカーを囲ってます。
img.ch_image 画像を囲ってます。
span.ch_href リンクを囲ってます。
その他スタイリングクラス(主に全体のスタイリング)
.ch_all-name-bold スレ全体の名前を太文字にします。
.ch_all-comment-bold スレ全体のコメント部分を太文字にします。
.ch_all-anchor-{color} スレ全体のアンカーの文字色の設定。
.ch_all-info-shade-{low|high} .ch_res-info 部分の文字色の濃淡の設定。
.ch_auth-id-highlight スレ全体のスレ主のIDをハイライトします。
.ch_first-comment-quote 最初のスレのコメント部分の装飾。
.ch_auth-comment-{color} スレ全体のスレ主のレスコメの文字色の設定。