SWELL（スウェル）のリッチカラム全体に背景を設定する方法

※当サイトにはプロモーションが含まれています。

ワードプレス（WordPress）テーマのSWELL（スウェル）には、リッチカラムというパソコンやスマホで見た時に、デザインがレスポンシブ対応になる機能があります。

しかし、このリッチカラム機能は、リッチカラム全体に対して背景を設定することができません。

つまり、次のように背景を設定することはできるのですが、

下記のように、リッチカラム全体を背景を設定することはできません。

今回は、リッチカラム全体に対して背景を設定して、次のようなデザインを作成したいと思います。

SWELL（スウェル）のリッチカラムに背景を設定する方法

SWELL（スウェル）のリッチカラムに背景を設定する方法です。

①リッチカラムに背景を追加するCSSについて

下記が、リッチカラムに背景を追加するCSSになります。

.nya-bg-graph-paper {
background-color: #fff; /* 背景色を設定 */
background-image: linear-gradient(transparent 95%, #e9e9e9 50%, #e9e9e9), linear-gradient(90deg, transparent 95%, #e9e9e9 50%, #e9e9e9);
background-size: 16px 16px;
background-repeat: repeat;
border-radius: 20px;
border: solid 2px #ccc;
padding: 10px 5px;
max-width: 700px;
margin: 0 auto;
}

background-colorで、背景色を設定する事ができます。

background-imageで、方眼紙のような線を作っています。

borderで、枠線を作成しています。

max-width: 700px;で、最大幅を設定していますが、親要素いっぱいの幅にしたい場合、この設定は不要です。

また、margin: 0 auto;で、記事の中央にする設定をしていますが、親要素いっぱいの幅にした場合は、この設定は不要です。

このCSSを「追加CSS」に記載しておきます。

にゃテック

画像は賢威のものですが、追加CSSへの記載方法はこちら

②リッチカラムを使ってデザインを作成

では、SWELLでリッチカラムを使ってデザインを作成します。

下記の図は、リッチカラム左（40%）、リッチカラム右（60%）で作成しました。

③追加CSSクラスを設定

全体を含む一番外側のブロックを選択します。

この状態でCSSのクラスnya-bg-graph-paperを追加します。

これで保存（更新）すれば、リッチカラム全体に背景が表示されていると思います。

※ワードプレスの編集画面には、デザインが反映されないのでプレビューでご覧ください

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

なお、追加CSSに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング（文字コード）の関係で、不具合が発生することがあります。

その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。