【Simplicity2】記事の枠線(ボーダー)を消す方法

スポンサーリンク

【Simplicity2】記事の枠線(ボーダー)を消す方法

 

WordPressの無料テーマ「Simplicity2」のデザインカスタマイズ

記事本文の枠線(ボーダー)を消す方法

です。

 

CSSに少し詳しい方は、border: none;を入れればいいんじゃないの?

と思うかもしれませんが、現状のSimplicity2の作りだと少し工夫をしなければいけません。

 

そこで、コピペでできる方法をご紹介します。

スポンサーリンク

 記事本文の枠線(ボーダー)とは?

記事本文の枠線(ボーダー)とは?

 

今回削除する本文の枠線(ボーダー)というのは、

 

記事本文の枠線

上の画像の矢印の部分の灰色の線を指します。

今回はこちらを、

 

記事本文の枠線削除後

 

このように、枠線が表示されないようにしていきます。

 

記事本文の枠線(ボーダー)を消す方法

記事本文の枠線(ボーダー)を消す方法

 

さっそく、

記事本文の枠線(ボーダー)を消す方法

をご紹介します。

 

ここから先は、必ず子テーマで操作してください。テーマが更新されると変更した箇所が戻ってしまいます。

 

操作方法

 

テーマの編集を選択してください。

ダッシュボードから「外観」→「テーマの編集」を選択してください。

 

テーマヘッダー(header.php)を選択してください。

テーマの編集」という画面が表示されますので、右側にある「ファイル一覧」から「テーマヘッダー(header.php)」を選択してください。

header.php」が存在しない場合は、親テーマからコピーして子テーマに配置してください

 

</head>のすぐ上に、

 

上記のコードを貼り付けてください。

 

貼り付けたら、ページ下部にある「ファイルを更新」を選択すれば完了です。

 

なぜ、このようなコードを利用するのか?

なぜ、このようなコードを利用するのか?

 

その答えは、

「Simplicity2の構造上、HOMEカテゴリー別一覧(アーカイブページ)投稿のid・classが同じため」

 

つまり、どういうことかというと、

#main { border: none; }」をそのまま挿入してしまうと

HOMEカテゴリー別一覧(アーカイブページ)の枠線まで消えてしまいます!

 

そのため、PHPのコードを用いて、HOMEとカテゴリー別一覧(アーカイブページ)の場合は適用されないようにしています。

 

結果、投稿と固定ページに適応されるようになります。

※実際は他にも適応されるが、WordPressをそれなりにいじれる場合のみ関係します。

 

ページ別コード一覧

ページ別コード一覧

 

投稿と固定ページではなく、投稿のみに適応したい場合など。

 

投稿のみ

 

 

固定ページのみ

 

 

HOMEのみ

 

 

カテゴリー別一覧(アーカイブページ)のみ

 

 

投稿・固定ページのみ

 

 

まとめ

 

WordPressの無料テーマ「Simplicity2」のデザインカスタマイズ、

記事本文の枠線(ボーダー)を消す方法

でした。

 

コピペでサクッと実装できますので、試してみてください。

コメント