【WordPress】Twenty Sixteenの縁?枠?の部分を太くする方法

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-23-19-46-32-2

こんにちは。本日はWordPressの公式テーマ「Twenty Sixteen」の周りを囲っている縁、というか枠?の部分を太くする方法について書かせていただきます。

Twenty Sixteenを使ったブログの編集で、枠の部分の模様が見えにくいので幅を太くしてほしい。という依頼がありました。

Twenty Sixteenの枠の部分を消す方法は他にもたくさん出てきたのですが、逆に太くする方法について出てこなかったので、今回の作業を備忘録として残しておきます。

<スポンサードリンク>

Twenty Sixteenの縁の部分を太くする

編集前後のイメージ

★Before
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-23-18-55-08

★After
周りの枠がちょっと太くなっているのがお分かりいただけますでしょうか。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-23-18-57-30

実際にやること

実際にやることは簡単です。

上記のコードをスタイルシートにコピペするだけでOKです。

だけだと、PC画面では良い感じでも、スマホでbodyがせますぎる…という状況になったので、スマホでは反映されないように「@media screen and (min-width: 44.375em) {}」でくくっています。

このあたりは調整してみてください。

注意
正しい方法ではないかもしれないため、何か不具合が起こるかもしれませんので、編集は自己責任でお願いいたします。事前にバックアップを取ることをおすすめします。

Twenty Sixteenは追加のcssをカスタマイズ画面から入力できるようになっているので、WordPressについてよく分かってないという方は、「外観」→「カスタマイズ」→「追加css」というところを探してください。そこに上記のコードをコピペすればOKです。

zukai

<スポンサードリンク>

おわりに

以上、【WordPress】Twenty Sixteenの縁?枠?の部分を太くする方法についてでした。いかがでしょうか。気に入ればぜひぜひ試してみてください。

なお、デモサイトの画像では、縁の部分に背景画像を適用しているので、黒い枠からカラフルな枠へと変わっています。こちらの設定は「外観」→「カスタマイズ」→「背景画像」にて行うことができます。

それでは、本日もここまでお読みいただきありがとうございました。

<スポンサードリンク>

この記事を書いた人
MIYALOG編集部

こころの元気をチャージする。20代のジレンマに立ち向かう、元気が出るライフハックブログ『MIYALOG』の編集部です。現在、ライター様、寄稿ライター様を募集しています。

合わせて読みたい記事

ABOUTこの記事をかいた人

MIYALOG編集部

こころの元気をチャージする。20代のジレンマに立ち向かう、元気が出るライフハックブログ『MIYALOG』の編集部です。現在、ライター様、寄稿ライター様を募集しています。