背景をプラスしてみた
幅いっぱいに背景がつくように設定！
カスタマイズは自己責任でやろう
自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。
見たい場所へジャンプ
カスタマイズするための
準備
テキストエディタにコードを追加
|
1 2 3 |
[center]<div class="bg-max"> [yoko2 responsive][cell]<img>[/cell][cell]★[/cell][/yoko2] </div>[/center] |
１列目はBefore（開始タグ）、３列目はAfter（終了タグ）になります。
プラグインでタグの登録をしておくと毎回記入する手間が減ります。
２列目はSANGOに標準で入っているショートコード（2列）に画像と文字（とボタン）を入れてください。この部分はお好みです。
プラグインはAddQuicktagやVisual Editor Custom Buttonsがおすすめです！
CSSコードの追加方法
おすすめは追加CSSからコードを追加する方法です。
はじめてカスタマイズする方は、こちらの記事を読んでくださいね。
| 追加方法 | 難しさ |
|---|---|
| 追加CSS | |
| テーマエディター | |
| FTPソフト |
複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。
カスタマイズに必要な
CSSコード
CSSコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/*-------------------------------------- 追加する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の部分）
うまくできたか
確認
確認する際は必ずキャッシュを削除してから見てください。
| 確認方法 |
|---|
| 「Ctrl」+「F5」（キャッシュ削除） |
カスタマイズコードを追加CSS（またはテーマエディタ）に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。
Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。
くまからのお礼
本ブログ（for men）では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。（決して自己満足ではありません）
もっとカスタマイズしたい人はこちらの記事を見てください。
【圧倒的SANGOカスタマイズまとめ】～ようこそ、沼への入口へ～
まとめ
背景が全面にプラスされました！
コメントを残す