楽天お買い物マラソン

【SANGO】ボックスのショートコードを増やす方法!CSSサンプルも紹介

バビ
バビ

ごきげんよう。CSSはめんどくさいけど、カスタマイズは好き。バビです。

今回は、SANGOのショートコードのボックスを新たに作るカスタマイズをご紹介します。

「え?phpとかいじって大変なんじゃないの?」

と思われるかもしれませんが、実はちょっとCSSを追加するだけで簡単に追加できちゃいます。

SANGOのボックスショートコードのルール

SANGOのボックスのショートコードは、このページにある、

こんな感じで表示される

[box class="box6"]ここに文章[/box]

や、

タイトル

こんな感じで表示される

[box class="box26" title="タイトル"]ここに文章[/box]

などがありますが、基本的なルールは同じです。

[box class="box6"]ここに文章[/box]

の場合は「.box6」というクラス名で定義されたCSSが読み込まれ、

[box class="box26" title="タイトル"]ここに文章[/box]

の場合は、「.box26」というクラス名で定義されたCSSが読み込まれます。

これを利用して、新たなクラス名、例えば「.box99」というクラス名でボックスデザインのCSSコードを作れば、

[box class="box99"]ここに文章[/box]

というショートコードで新しいボックスが作れてしまうんです。

サンプル

実際に作ってみたのがこれです。

こんな感じで、いくつでも新しいボックスが思いのほか簡単に作れてしまいます。

SANGOデフォルトのCSSをコピーして修正する

新たに作り直すと大変なので、元々あるボックスデザインのCSSをコピーしてきて修正するのがおすすめです。

なので、親テーマからオリジナルのボックスのCSSをコピーしてきます。

まずは ダッシュボード→外観→テーマエディター を開きます。

画面右上の「編集するテーマを選択」から「SANGO」を選択してください。

編集するテーマを選択

画面が切り替わったら「entry-option.css」を選択します。

entry-option.cssを開く

「/** ボックス **/」の下に「.box」からはじまるCSSコードがあります。

このコードをコピーして、子テーマのスタイルシートに貼り付けて修正を行うことができます。

注意

間違って親テーマのCSSを修正しないように注意してください。

下手にいじると元に戻せません。

好きなクラス名をつけていいんですが、「box40」などにすると、今後SANGOのアップデートでボックスのデザインが増えると困るのでやめておきましょう。

新たに作成したボックスのサンプル

ということで、新しいボックスを作成してみました。

サンプル

新たに作成したボックスのサンプル

関連記事を赤系で表示したくて作りました。

私は内部リンクの関連記事で「あわせて読みたい」として使いたくて作成しているので、クラス名は「box-awasete」にしています。

ここは自由に変えることができるので、お好きな名前にしてください。

ボックス内の余白を削ったりもしています。

[box class="box-awasete" title="タイトル"]ここに文章を入力[/box]
/*あわせて読みたい*/
.box-awasete {
 margin: 2em 0;/*ボックスの外側の余白*/
}
.box-awasete .box-title {/*ボックスのタイトル*/
 display: inline-block;
 position: relative;
 bottom: 0;
 background: #ffaead;/*背景色*/
 color: white;/*文字色*/
 border-radius:3px 3px 0 0;
 font-weight: 600;
 font-size: 100%;
 margin: 0em 0px;
 padding: .1em 0.5em;
}
.box-awasete .box-title:before {/*ボックスタイトル前の記号*/
 content: "\f058";
 margin-right: 5px;
 font-family: "Font Awesome 5 Free";
}
.box-awasete .box-content {/*ボックス自体*/
 margin: 0em 0px 2em 0px;
 padding: 0.8em 0.8em;
 border: dashed 1px #ffaead;
 background: #fff2f2;
 color: #565656;
}
Font Awesomeのバージョン

「Font Awesome 5」対応のCSSなので、「Font Awesome4.7」を使用している人は、「Font Awesome 5 Free」を「Font Awesome」に変更してください。

コピペでそのまま使えるボックスデザインのおすすめサイト

こちらのサイトでは、シンプルでおしゃれなボックスデザインがたくさん紹介されています。

参考 【Cocoon】コピペで簡単!タイトル入力可のおしゃれなボックスを作る!【カスタマイズ】絵が描けない系WEBデザイナー ぽんひろ.com

Cocoon用と書いていますが、そのままコピペしてSANGOのショートコードで使用できます。

1番最初のは

[box class="box1-green" title="タイトル"]ここに文章[/box]

とすればこんな感じにになります。

タイトル

ここに文章

ここに文章

ここに文章

SANGOのイメージとも相性が良さそうです。

コメントを残す

メールアドレスが公開されることはありません。