ワードプレス(賢威6.1)各コンテンツ(外観)に簡単な枠線を入れる方法

この記事は約1分で読めます。

こんにちはFPヒデです。
今回はブログサイトを構築していく上で、デザインをカスタマイズする方法のひとつ、メイン投稿部分やサイドバーなどの枠線を入れる方法をお伝えしますね。
 
導入したイメージ
このような感じになります。
 
wakusen0
 

変更後はこのようになります。
 
wakusen1
 

それでは早速やってみます。
 

各コンテンツに枠線を入れる設定方法

メインコンテンツ・サブコンテンツ・サイドバー全てに枠線を入れる方法

『外観』⇒『テーマ編集』⇒『design.css』に下記の内容を記述します。
 

#sub-contents {
border: 1px solid #BDBDBD;
}
#main-contents {
border: 1px solid #BDBDBD;
}
#sidebar {
border: 1px solid #BDBDBD;
}

 

記述する場所

wakusen4.1
 
下記の場所で枠線の幅と色を指定してあげます。

枠線の幅と色を指定する

wakusen3
 
『ファイルを更新』をクリックして完了です。
 
カラーコードを参考にしてみてください。
参考カラーコード
 

サブコンテンツ・サイドバーのみに枠線を入れる方法

既に上でお伝えした内容で基本的にはOKですが、例えばサイドバーとサブコンテンツだけに枠線を入れたくて、メインコンテンツに枠線は入れたくないという場合をお伝えします。

至って簡単なのですが、下記のように記述(貼付け)内容を絞ってやるだけです。
 
wakusen4
 

このように反映します。 
wakusen5
 
以上で設定方法は終了になります。

非常に簡単にサイトデザインをカスタマイズできますので、興味のある方は是非やってみてくださいね。

コメントを残す

サブコンテンツ

このページの先頭へ