【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」のデザインカスタマイズ、

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

でした。

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

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク