プライム会員限定!アマゾンミュージックの無料体験で音楽を聴けば500ポイントゲット!

【Simplicity2カスタマイズ】メインカラムの枠線をCSSで消す方法

Simplicity2 メインカラムの枠線を消す

当ブログのWordpressのテーマをWordpress公式テーマ「TwentyTwelve」から寝ログを運営しているわいひらさんという方が作ったテーマ「Simplicity2」に変更したので、「Simplicity2」のカスタマイズを備忘録がてら記事にしていきます。

この記事は「メインカラムを囲っている枠線をCSSで消す方法」を解説していこうと思います。

枠線があるとどうも窮屈な感じがしたので、枠線を消して背景と一体化させることでフラットな感じにしてみました。

スポンサーリンク

メインカラムの枠線を消す Before After

この画像のようにトップページの記事一覧や記事ページの記事本文が枠線で囲われているのでこの線をCSSで消していこうと思います。

[Before]

Simplicity2 メインカラムの枠を消す

カスタマイズ後はこのようになります↓

[After]

Simplicity2 メインカラムの枠を消す

枠線を消すことで背景と一体化するので窮屈な感じがせず、シンプルなデザインになったので、枠線を消していきました。

・記事一覧のサムネイルを正方形からの横長にしたいならこちら

・記事と記事の間に境界線を入れたいならこちら

・投稿日とカテゴリーを右にずらして背景色を変更したいならこちら

メインカラムの枠線を消す コード

枠線を消すならCSSにコードを追加するだけで簡単に消すことができます。

外観 → テーマの編集 → スタイルシート(style.css)

スタイルシート(style.css)にこちらのコードをコピペするだけです。

以上で、メインカラムを囲っている枠線を消すことができます。

メインカラムの枠線を装飾 コード

枠線を消すのではなく、枠線を装飾したいならこちらのコードで装飾が可能です。

このコードを追加するとこのようになります。

Simplicity2 メインカラムの枠線を装飾
青い二重線の枠線で囲われます。

コードの中身を変えることでデザインを変えることができます。

「double」は二重線。「solid」は1本線。「dotted」は点線。

「10px」は枠線の幅です。小さくすれば細く、大きくすれば太くなります。

「#0000ff」は枠線の色です。こちらで色のコードを確認するといいでしょう「color-sample.com

――――――――――

自分のサイトのデザインに合わせて枠線をデザインしてみてください。

メインカラムの枠線 まとめ

この記事は、「メインカラムを囲っている枠線をCSSで消す方法」をご紹介していきました。

モバイルでの表示は枠線は表示されないのでPC表示だけに限りますが、細かいところにもこだわってサイトを作っていくのは楽しいと改めて感じました。

枠線を消すなり装飾するなりしてみてください