【Simplicity2】記事やサイドバーの枠線を消す、色を変えるカスタマイズ

Simplicity

今回は、WordPressテーマ「Simplicity2」の枠線部分のカスタマイズ方法です。

Simplicity2は、デフォルトだと記事のまわりに枠線が入ります。

Simplicity 記事の枠線

メインカラムの枠線

 

この枠線を消したい、または色を変えたいという方もいるかと思います。

というわけで今回は、記事とサイドバーの枠線をカスタマイズする方法を紹介します。

枠線をカスタマイズする手順

手順は簡単、紹介するコードをコピペするだけですよ!

今回のカスタマイズは、CSSにコードを追加して行います。

コードを貼る場所は、Simplicity2の子テーマの「style.css」になります。

「style.css」は、WordPressのダッシュボード画面から「カスタマイズ」→「テーマの編集」にすすむとあります。

Simplicity2の子テーマにCSSを追加

コードは、特別な理由がない限り、後ろに追加していけばOKです。

記事部分(メインカラム)の枠線

枠線を消す方法と色を変える方法を紹介します。

記事部分の枠線を消す

まずは記事部分(メインカラムといいます)の枠線の消し方です。

次のコードを、子テーマの「style.css」にコピペすると、記事部分(メインカラム)の枠線を消すことができます。

/* メイン部分の枠を消す */
#main {
 border: none;
}

枠線が消えると画面に広がりが出て、すっきりとした印象になります。

記事部分の枠線の色を変える

つづいては、記事の枠線は消さずに色や太さを変える方法です。

記事部分の枠線の色を変える時は、次のコードを子テーマの「style.css」にコピペします。

/* メイン部分の枠の色を変える */
#main{
 border:1px solid #dddddd;
}

カスタマイズする際には次の点を変えると、自分好みのデザインにできます。

  • 上のコードの「1px」が枠線の太さです。数字を大きくすると線が太くなります。
  • 「#dddddd」で枠線の色を指示しています。色を選ぶ時は「WEB色見本」を参考にすると便利です。
  • 「solid」を「dotted」に変えると、点線になります。

色はサイトのメインカラーにあわせると、デザインしやすいかと思います。

サイドバー(サイドウィジェット)の枠線

サイドバーも枠線を消したり、色を変えたりできます。

サイドバーの枠線を消す

Simplicity2は、設定によってはサイドバー(サイドウィジェット)に枠線がつくことがあります。

サイドバーの枠線を消す時は、子テーマの「style.css」に次のコードをコピペします。

/* サイドバーの枠線を消す */
#sidebar{
 border:none;
}

サイドバーの枠線がなくなると、画面の印象がずいぶんと変わります。

見た目がシュッとした感じになるのでおすすめです。

サイドバー(サイドウィジェット)の枠線の色を変える

次のコードを子テーマのstyle.cssにコピペすると、サイドバー(サイドウィジェット)の枠線の色を変えることができます。

/* サイドバーの枠線の色を変える */
#sidebar {
 border:1px solid #dddddd;
}

こちらも、メインカラムの枠線の色と考え方は同じです。カスタマイズする際には次の点を変えると、自分好みのデザインにできます。

  • 上のコードの「1px」が枠線の太さです。数字を大きくすると線が太くなります。
  • 「#dddddd」で枠線の色を指示しています。色を選ぶ時は「WEB色見本」を参考にすると便利です。
  • 「solid」を「dotted」に変えると、点線になります。

ちなみに「#dddddd」は淡いグレーになります。

枠の色に迷ったときは、淡いグレー系の色にしておくと、どのデザインにでもなじみやすくなります。

記事とサイドバーの枠線をまとめてカスタマイズする

両方いっぺんに変える方法もありますよ!

「記事」と「サイドバー(サイドウィジェット)」の枠線を、同じように変更する時は、一括でカスタマイズすることもできます。

枠線を消す

次のコードを、子テーマの「style.css」に貼りつけます。

/* メイン部分とサイドバーの枠を消す */
#main,#sidebar{
 border:none;
}

これで記事とサイドバーの枠線がいっぺんに消えます。

別々に指定するよりもコードを短くまとめることができます。

枠線の色を変える

また、記事とサイドバーの色を一括で変える時は、次のコードを子テーマの「style.css」に貼りつけます。

/* メイン部分とサイドバーの枠線の色を変える */
#main,#sidebar {
 border:1px solid #dddddd;
}

こちらも、個別で指定した時と同じように考えます。次の点を変えると、自分好みのデザインにできます。

  • 上のコードの「1px」が枠線の太さです。数字を大きくすると線が太くなります。
  • 「#dddddd」で枠線の色を指示しています。色を選ぶ時は「WEB色見本」を参考にすると便利です。
  • 「solid」を「dotted」に変えると、点線になります。

一括で指定すると、コードをまとめて管理できるので便利です。

まとめ

ちなみにこのブログではどちらの枠線も消しています。

Simplicityはデフォルトのデザインが秀逸なので、何を足すのか何を引くのかを考えるのがたのしいテーマですね。

カスタマイズで迷っている方はぜひ参考にしてみてくださいね。

 

Simplicity、こんなカスタマイズもありますよ!
【Simplicity2】スマホでみた時の「ヘッダー下の空白」を消す方法
Simplicity2で作ったサイトをスマホやタブレットでみると、ヘッダー画像の下に広めの空白ができていることがあります。 上の画像では、ヘッダー画像とパンくずリストの間に、広い空白ができていま...
Simplicity2の固定ページで日付(投稿日・更新日)を非表示にする方法
Simplicity2の固定ページの日付表示(投稿日・更新日)を消してみました。 消したのはこの部分です。 というわけで、その方法を書いてみます。 Simplicity2の固定ページ...