これから数回に分け、上のようなデザインを、下のようなデザインに変更する方法を書いていきます。今日は、サイドバーとサブコンテンツバーに丸角の枠線を表示します。

3-1

カスタムCSS

すべてカスタムCSSでいけたので、ご自分が使っているテーマの変更箇所のクラス名などが分かれば、他のテーマでも応用できます。カスタムCSSは、通常のスタイルシート(style.css)の編集とは違います。興味がある方は、以下の記事をご覧ください。

『テーマ固有のCSS』編集と『カスタムCSS』編集の違い(1)

『テーマ固有のCSS』編集と『カスタムCSS』編集の違い(2)

サイドバーやサブコンテンツバーの構成

3カラム構成の場合、サイドバー(メインサイドバー、プライマリサイドーバー)、サブコンテツバー(コンテンツサイドバー、コンテンツバー)といった名称で呼ばれるウィジェットエリアが配置されます。図は例なので、左側がサイドバー、右側がサブコンテンツバーになっていますが、テーマのデザインによっては逆の場合もあるし、ふたつのサイドバーが横並びに配置されていることもあります。通常、2カラムならメインサイドバーが表示されています。

3-2

角を丸くするために半径を指定する『border-radius』

丸角に表示するために、『border-radius』を使います。これは、ボックスの四つの角の半径をまとめて指定できるプロパティです。図のようにボックスの丸角は、縦方向、横方向の半径により指定されています。

3-3

値が同じ場合は省略できる

左下が省略された場合は右上と同じ値、右下が省略された場合は左上と同じ値、右上が省略された場合は左上と同じ値といったように省略もできます。つまり、省略された場合は、対角線上の値で揃えるということですね。値が1つの場合は、すべて同じ値が指定されたとみなされます。

 

現在のサイドバーやサブコンテンツの設定確認

私の使っているテーマ『賢威』は、複数のCSSがあるですが、サイトの多くのデザイン指定はdesign.cssのなかに記述されています。そのため、管理画面の『概観』>『テーマの編集』から『design.css』を確認してみると、サブコンテツ/サイドバーという設定項目が確認できます。文字の大きさや色など、ここでかけられている設定は変更しませ。枠線などのdesign指定はないため、CSSのほうに、自分で追記することになります。

3-4

 

カスタムCSSに設定を追記するサイドバーの設定を指定する

まずはサイドバーから。

3-5

/*——————————————————————————-
サイドバー/コンンテンツバーの設定(design.css)追加
——————————————————————————*/
#sidebar {
border: solid 1.5px #A9A9A9; /*線の種類、太さ、色*/
padding: .5em; /*パディング*/
margin-bottom: 1em; /*下の間隔調整*/
border-radius: 7px; /*丸角の半径指定*/
-webkit-border-radius: 7px; /*丸角の半径指定ベンダープレフィックス*/
-moz-border-radius: 7px; /*丸角の半径指定ベンダープレフィックス*/
}

 

3-6

このテーマは右側がサイドバーだと分かりますね。
見出し代わりのコメントを添えるとき、オリジナルのスタイルシートの一部をコピペして、数値などの値だけ書き換えたものと、自分が追記したものと区別できるようにしておくと、あとで設定を見直すとき、分かりやすいと思います。私の場合は『追加』と書いていないものは、オリジナルのCSSの値をいじっただけだと分かるようにしています。

 

ベンダープレフィックス

ベンダープレフィックスとは、ブラウザベンダーが独自の拡張機能だということを識別するために明示が求められる接頭辞です。

3-7
まだ正式に新たな仕様が勧告される前の草案段階で、次のバージョンのCSSで実装される機能をブラウザで先行利用できるようになることがあります。この時、まだ、正式な仕様が出ていませんから、あくまで、そのベンダーごとの拡張機能ということになるわけです。そのため、ブラウンザーベンダーはCSSの指定に、それぞれ接頭辞をつけて、CSSを指定するように案内します。
本来ならば、正式に仕様の勧告が出れば、こうした表記は必要なくなります。ただ、ネット上にはバージョンの古いブラウザもありますから、互換性のために、一緒に記述していたほうが良い場合もあるし、逆に、新しいバージョンのブラウザによっては、プレフィックスを記述していることで、正常に動作しないケースもあります。
そのため、プレフィックスなしの指定のほか、慣習的に併記しておくほうが一般的なものと、併記を嫌い、古い記述は削除するほう良いものが混在します。丸角の場合は、-webkit-と-moz-は残して指定されることが多いです。

 

カスタムCSSに設定を追記するサブコンテンツバーの設定を指定する

サイドバーとまったく同じ設定にするので、カンマで区切って指定します。

3-8

/*————————————————————————
サイドバー/コンンテンツバーの設定(design.css)追加
———————————————————————–*/
#sidebar,#sub-contents {
border: solid 1.5px #A9A9A9;
/*線の種類、太さ、色*/
padding: .5em;
/*パディング*/
margin-bottom: 1em;
/*下の間隔調整*/
border-radius: 7px;
/*丸角の半径指定*/
-webkit-border-radius: 7px;
/*丸角の半径指定ベンダープレフィックス*/
-moz-border-radius: 7px;
/*丸角の半径指定ベンダープレフィックス*/
}

3-9

 

左側のサブコンテンツにも同じ設定が反映されました。
もしサイドバーとコンテンツバーで指定が違う場合は、別々に指定すればよいことになります。

長くなりましたので、今回はここまで。
次回は、双方のバーに透過を使った背景指定をおこないます。