カスタマイズは自己責任で！
ワードプレステーマ
子テーマ
この記事では
画像に背景をプラスするカスタマイズ方法を説明。
画像に背景をプラスするカスタマイズ方法を説明。
CUSTOM POINT
背景が全面を全面にプラスするので、記事内のアクセントに使用すると効果的だと思います。
背景をプラスしてみた
幅いっぱいに背景がつくように設定！
このサイトの環境
テーマ 
子テーマ 
プラグイン 
使うソフトなどはこちら
必須
WordPress
Google Chrome
推奨
File zilla
sublime text
カスタマイズの準備
テキストエディタにコードを追加
1 2 3 | [center]<div class="bg-max"> [yoko2 responsive][cell]<img>[/cell][cell][center]★[/center][/cell][/yoko2] </div>[center] |
１列目はBefore（開始タグ）、３列目はAfter（終了タグ）になります。
プラグインでタグの登録をしておくと毎回記入する手間が減ります。
２列目はSANGOに標準で入っているショートコード（2列）に画像と文字（とボタン）を入れてください。この部分はお好みです。
プラグインはAddQuicktagやVisual Editor Custom Buttonsがおすすめです！
追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く
追加CSSの使い方はこちら
カスタマイズコードの追加
CSSコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /*-------------------------------------- 追加するCSSコード --------------------------------------*/ .bg-max{ background: #1DA1F21a; box-shadow: 0 0px 0 15px #1DA1F21a; margin: 30px 0; } @media only screen and (min-width: 1030px){ .bg-max{ background: #1DA1F21a; box-shadow: 0 0px 0 64px #1DA1F21a; margin: 128px 0; }} |
記事エリアの横幅を変更している人は調整が必要です。（15pxと64pxの部分）
まとめ
手順をザクッと説明
変更手順
- テキストエディタにコードを書き込む。
- FTPソフトとテキストエディタを開いて準備OK。
- 追加のコードを書き込んで、保存。アップロード。
- 更新して確認。
- プラグインでコードを登録して終了。
背景が全面にプラスされました！
