Home > FC2ブログ > basic_white > basic_whiteテンプレート サイドバーの最近記事などのリストに下線を表示

basic_whiteテンプレート サイドバーの最近記事などのリストに下線を表示

 basic_whiteテンプレートのサイドバーにある最新記事やリンクプラグインなどのリストに下線を表示する方法です。

 メイン部分の下部に表示されるプラグイン3も対象です。リスト形式になっていないカテゴリなどは対象外です。

  • 最新記事1
  • 最新記事2
  • 最新記事3
   
文字色

 スタイルシートに上記コードを追加すれば完成です。各項目を選択すると線の種類などが変わります。

 矢印ありの画像はそのままでも使用できますが、ご自身のブログにアップロードして使用することを推奨します。画像のダウンロードはこのリンク先を保存してください(右クリック:リンク先を名前を付けて保存)。そしてスタイルシートにある画像アドレスをアップロードしたものに上書きします。

カテゴリプラグインについて

 親子カテゴリが「┣」「┗」で表示される初期状態のカテゴリプラグインはリスト形式になっていないので下線などは反映されません。

 下線を有効にする場合は管理ページのプラグインの設定からカテゴリプラグインページに移動して、プラグインの改造【HTMLの編集】で既存のコードを以下のコードに丸ごと上書きしてください。

 これで下線が表示されるようになります。

子カテゴリ無視のカテゴリプラグイン

 親子カテゴリで子カテゴリに左余白が不要な時は以下のコードに丸ごと上書きしてください。

初期状態のカテゴリプラグイン

 元に戻したい時は以下のコードに上書きするか新たに公式プラグインからカテゴリをダウンロードしてください。

文字色の変更

 追加したスタイルシートの「color: #○○○○○○;」の部分を変更すると色が変わります。2つ目のcolorはマウスカーソルを重ねた時の文字色になります。

body .plg_body li a:link, body .plg_body li a:visited {
  color: #5DA7D1;
}
body .plg_body li a:hover,body .plg_body li a:focus, body .plg_body li a:active {
  color: #8ADAE6;
}

下線の色の変更

 追加したスタイルシートの「border-bottom: 1px #cccccc」と「border-top: 1px #cccccc」の「cccccc」の部分を変更すると色が変わります。2つとも同じ色を指定してください。

border-bottom: 1px #cccccc dashed;

border-top: 1px #cccccc dashed;

矢印の縦位置の調整

 追加したスタイルシートの「0.8em」の数値を「0.5em」などに減らすと矢印の位置が上に移動し、「1.0em」のように増やすと下に移動します。

background: url(http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/basic_white_arrow.gif) 1px 0.8em no-repeat;

関連記事
スポンサー リンク
コメント

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered