各記事を囲っている枠線の装飾を編集する方法

各記事を囲っている枠線を編集する方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. テンプレートのCSSを編集するだけで、各記事を囲っている枠線の下記装飾を編集できます。

    • 太さ
    • 線の種類(破線や実線など)
  2. valid-seo-2c と valid-seo-3c の ver1.0.1をお使いの場合、このページ内の過去バージョンのテンプレートの場合を先にご覧いただいた方がいいかと思います。

テンプレートのCSSを編集

通常時 (マウスオーバーしていない状態)

  1. テンプレートCSS内で、次の項目のborder:1px dashed #ddd;を編集します。

    • /*記事 > 各記事を囲っている枠線*/
    valid-seo-110-article-border-1.png
  2. ここでは、幅2px・実線・黒に変更する場合のコードを載せます。幅を1pxから変更する場合は、青丸で囲った部分(padding)も調整します。borderの幅とpaddingの合計を10pxにすると、マウスオーバー時にガタつきが発生しません。このページで使っている「ガタつき」とは、マウスオーバー時に枠線が変化するだけでなく、記事本文自体が若干移動する現象のことです。

    
    border:2px solid #000;
    
    valid-seo-110-article-border-2.png
  3. 任意の幅・線の種類・色に変更する場合、googleなどで「css border」を検索すると参考になるページがでてきます。

マウスオーバーした場合

  1. デフォルト設定では、HOMEページやカテゴリーページで各記事にカーソル(マウス)を乗せると枠線が変化するようにしています。カーソルを乗せることを「マウスオーバー」といいます。

  2. マウスオーバー時の定義は下図の黄色の枠内に書かれています。

    valid-seo-110-article-border-3.png
  3. borderの編集は上記方法と同様です。ここでもborderの幅とpaddingの合計を10pxにすると、ガタつきが発生しません。

過去バージョンのテンプレートの場合

  1. valid-seo-2c と valid-seo-3cの ver1.0.1をお使いの場合、次の手順でver1.1.0のデフォルト設定と同じにできます。

  2. ver1.0.1には下記1.のコードがありますので、それを下記2.のコードに書き換えます。

    1. 
      /*記事 > マウスオーバーで枠線表示*/
      .entry,#single .entry:hover{margin:0 0 1em;padding:10px;border:0;box-shadow:none;}
      .entry:hover{border:3px dashed #aaa;padding:7px;box-shadow:3px 3px 5px #777;}/*ie6非対応*/
        /*上の行を1行まるごと削除すると、マウスオーバーしても枠線表示されなくなります。*/
      
    2. 
      /*記事 > 各記事を囲っている枠線*/
      .entry,#sticky,#single .entry:hover{
      border:1px dashed #ddd; /*この行を丸ごと削除すると記事ごとに囲われている枠線を消去できます*/
      padding:9px; /*1行上を1行まるごと削除した場合、ここの9pxを10pxにした方がいいです(ガタつき防止)*/
      margin:0 0 1em;
      box-shadow:none;
      }
      .entry:hover,#sticky:hover{border:3px dashed #ccc;padding:7px;box-shadow:3px 3px 5px #777;}/*ie6非対応*/
        /*1行上を1行まるごと削除すると、マウスオーバーしても枠線が変化しなくなります。*/
        
  3. ver1.1.0と同じ状態になりますと、上述のテンプレートのCSSを編集を施していただけます。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)