こんにちは！ ちょっとだけカスタマイズに慣れてきたネイネイ(@NEYNEYx2)です。
今回は、WordPressテーマのSTORK(ストーク)のボックスをカスタマイズしてみましたので、まとめをご紹介いたします。
STORK(ストーク)でオリジナルのボックスをお探しでしたら、ご覧になってください。
おすすめASP
- A8.net
：定番の最大手 - もしもアフィリエイト：独自の報酬制度が魅力的
- バリューコマース：定番・独自案件が豊富
- afb（アフィビー）：美容系の案件に強い
- アクセストレード：通信系・転職系に強い
：定番の最大手目次（タップできます）
STORK(ストーク)のショートコードをカスタマイズ
STORK(ストーク)には、ボックス用のショートコードが初めから用意されています。 ただし、ボックス内に背景色がありカラフルすぎたので使用していませんでした。
そこでコチラ（↓）のように背景を白にしてシンプルにカスタマイズしてみました。
背景色を白に変更
ボックス用ショートコードの背景を白に変更するカスタマイズです。
HTML
[box class="blue_box" title="ここにタイトル"]ボックスカラー（青）[/box]
[box class="red_box" title="ここにタイトル"]ボックスカラー（赤）[/box]
[box class="yellow_box" title="ここにタイトル"]ボックスカラー（黄色）[/box]
[box class="green_box" title="ここにタイトル"]ボックスカラー（緑）[/box]
[box class="pink_box" title="ここにタイトル"]ボックスカラー（ピンク）[/box]
[box class="glay_box" title="ここにタイトル"]ボックスカラー（グレー）[/box]
[box class="black_box" title="ここにタイトル"]ボックスカラー（黒）[/box]
[box class="custom_box" title="ここにタイトル"]ボックスカラー（カスタム）[/box]
CSS
/* ------------------------------------- */
/* ボックス カスタマイズ */
/* ------------------------------------- */
/* --------- 青 --------- */
.c_box.blue_box{
background: #fff; /* 背景色 */
}
/* --------- 赤 --------- */
.c_box.red_box{
background: #fff; /* 背景色 */
}
/* --------- 黄色 --------- */
.c_box.yellow_box{
background: #fff; /* 背景色 */
}
/* --------- 緑 --------- */
.c_box.green_box{
background: #fff; /* 背景色 */
}
/* --------- ピンク --------- */
.c_box.pink_box{
background: #fff; /* 背景色 */
}
/* --------- グレー --------- */
.c_box.glay_box{
background: #fff; /* 背景色 */
}
/* --------- 黒 --------- */
.c_box.black_box{
background: #fff; /* 背景色 */
color: #555; /* 文字色 */
}
/* --------- カスタム --------- */
.c_box.custom_box{
background: #fff; /* 背景色 */
border-color: #ffc787; /* 外枠の色 */
color: #555; /* 文字色 */
}
.c_box.custom_box .box_title span{
background: #ffc787; /* タイトル背景色 */
}
STORK(ストーク)のボックスをカスタマイズ
ここでは、オリジナルのボックスをCSSにコピペで簡単に使用することができるモノを紹介していきます。
シンプル ボックス
ボックスの左上にタイトルがある、シンプルなボックスです。
HTML
<div class="custom-box1">
<span class="custom-box1-title">タイトル</span>
<p>ここに文字を入力</p>
<p>ここに文字を入力</p>
<p>ここに文字を入力</p>
</div>
CSS
/* --------- シンプルボックス --------- */
.custom-box1 {
position: relative;
margin: 2em 0;
padding: .5em 4% 1.4em;
background: #fff; /* ボックス背景色 */
border: 2px solid #78b4ff; /* 外枠の色 */
border-radius: 8px;
}
.custom-box1-title {
position: absolute;
display: inline-block;
padding: 0 9px;
top: -13px;
left: 20px;
line-height: 1em;
background: #fff; /* タイトル背景色 */
color: #78b4ff; /* タイトル文字色 */
font-size: 19px;
font-weight: bold;
}
.custom-box1 p {
margin-bottom: .8em;
}
.custom-box1 p:last-child {
margin-bottom: 0;
}
左上タイトル
ボックスの外側にタイトルがある、ボックスです。
HTML
<div class="custom-box2">
<span class="custom-box2-title">タイトル</span>
<p>ここに文字を入力</p>
<p>ここに文字を入力</p>
<p>ここに文字を入力</p>
</div>
CSS
/* --------- 左上タイトル --------- */
.custom-box2 {
position: relative;
margin: 2em 0;
padding: .5em 4% 1.4em;
background: #fff; /* ボックス背景色 */
border: solid 2px #ff7f78; /* 外枠の色 */
border-radius: 8px;
}
.custom-box2-title {
position: absolute;
display: inline-block;
padding: 2px 10px;
top: -30px;
left: 20px;
vertical-align: middle;
border-radius: 5px 5px 0 0;
background: #ff7f78; /* タイトル背景色 */
color: #fff; /* タイトル文字色 */
font-size: 17px;
font-weight: bold;
}
.custom-box2 p {
margin-bottom: .8em;
}
.custom-box2 p:last-child {
margin-bottom: 0;
}
ボックス内タイトル
ボックスの内側にタイトルがある、ボックスです。
HTML
<div class="custom-box3">
<span class="custom-box3-title">タイトル</span>
<p>ここに文字を入力</p>
<p>ここに文字を入力</p>
<p>ここに文字を入力</p>
</div>
CSS
/* ------- ボックス内タイトル ------- */
.custom-box3 {
position: relative;
margin: 2em 0;
padding: 1.9em 4% 1.4em;
background: #fff; /* ボックス背景色 */
border: solid 2px #ffc278; /* 外枠の色 */
}
.custom-box3-title {
position: absolute;
display: inline-block;
padding: 2px 10px;
top: -2px;
left: -2px;
vertical-align: middle;
background: #ffc278; /* タイトル背景色 */
color: #fff; /* タイトル文字色 */
font-size: 17px;
font-weight: bold;
}
.custom-box3 p {
margin-bottom: .8em;
}
.custom-box3 p:last-child {
margin-bottom: 0;
}
アイコン付き
タイトル前にアイコンがある、ボックスです。
HTML
<div class="custom-box4">
<span class="custom-box4-title">タイトル</span>
<p>ここに文字を入力</p>
<p>ここに文字を入力</p>
<p>ここに文字を入力</p>
</div>
CSS
/* ------- アイコン付き ------- */
.custom-box4 {
position: relative;
margin: 2em 0;
padding: 2.0em 4% 1.4em;
background: #fff; /* ボックス背景色 */
border: solid 2px #60cc65; /* 外枠の色 */
border-radius: 8px;
}
.custom-box4-title {
position: absolute;
display: inline-block;
padding: 2px 10px;
top: 5px;
left: 45px;
vertical-align: middle;
background: #fff; /* タイトル背景色 */
color: #60cc65; /* タイトル文字色 */
font-size: 20px;
font-weight: bold;
}
.custom-box4-title:before {
font-family:"FontAwesome";
content:"f046"; /* アイコン指定 */
position: absolute;
top: -9px;
left: -35px;
vertical-align: middle;
color: #60cc65; /* アイコン色 */
font-size: 35px;
}
.custom-box4 p {
margin-bottom: .8em;
}
.custom-box4 p:last-child {
margin-bottom: 0;
}
横幅Maxのタイトル
タイトルがボックスの横幅と同じ、ボックスです。
HTML
<div class="custom-box5">
<div class="custom-box5-title">タイトル</div>
<p>ここに文字を入力</p>
<p>ここに文字を入力</p>
<p>ここに文字を入力</p>
</div>
CSS
/* ----- 横幅Maxのタイトル ----- */
.custom-box5 {
position: relative;
margin: 2em 0;
background: #fafaff; /* ボックス背景色 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.custom-box5-title {
padding: 4px;
margin-bottom: 1.4em;
background: #78b4ff; /* タイトル背景色 */
color: #fff; /* タイトル文字色 */
letter-spacing: 0.05em;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
.custom-box5 p {
margin-bottom: 0;
padding: 0 4% .8em;
}
.custom-box5 p:last-child {
padding-bottom: 1.4em;
}
Q＆A用 ボックス
HTML
<div class="custom-box6">
<div class="custom-box6-label">Q</div>
<p>ここに文字を入力</p>
<p>ここに文字を入力</p>
</div>
CSS
/* ------- 質問 Q ------- */
.custom-box6 {
position: relative;
margin: 2em 0 2em 1.3em;
padding: .5em 4% .5em 2.5em;
background: #fafaff; /* ボックス背景色 */
border-radius: 10px;
}
.custom-box6-label {
position: absolute;
display: inline-block;
top: -1px;
left: -20px;
background: #1478e6; /* ラベル背景色 */
color: #fff; /* ラベル文字色 */
letter-spacing: 0.05em;
font-size: 1.4em;
font-weight: bold;
width: 45px;
height: 45px;
line-height: 45px;
vertical-align: middle;
text-align: center;
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
.custom-box6 p {
margin-bottom: .8em;
}
.custom-box6 p:last-child {
margin-bottom: 0;
}
HTML
<div class="custom-box7">
<div class="custom-box7-label">A</div>
<p>ここに文字を入力</p>
<p>ここに文字を入力</p>
</div>
CSS
/* ------- 質問 A ------- */
.custom-box7 {
position: relative;
margin: 2em 0 2em 1.3em;
padding: .5em 4% .5em 2.5em;
background: #fffafa; /* ボックス背景色 */
border-radius: 10px;
}
.custom-box7-label {
position: absolute;
display: inline-block;
top: -1px;
left: -20px;
background: #e63c28; /* ラベル背景色 */
color: #fff; /* ラベル文字色 */
letter-spacing: 0.05em;
font-size: 1.4em;
font-weight: bold;
width: 45px;
height: 45px;
line-height: 45px;
vertical-align: middle;
text-align: center;
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
.custom-box7 p {
margin-bottom: .8em;
}
.custom-box7 p:last-child {
margin-bottom: 0;
}
タイムライン用 シンプル
時系列説明に使用できる、シンプルなボックスです。
HTML
<div class="custom-box8">
<div class="custom-box8-label">1</div>
<p>ここに文字を入力</p>
<p>ここに文字を入力</p>
</div>
CSS
/* -- タイムライン用シンプル -- */
.custom-box8 {
position: relative;
margin: 4em 0 4em 3em;
padding: 0 4%;
background: #fafaff; /* ボックス背景色 */
box-shadow: -25px 0 0 25px #fafaff; /* 背景色と同じカラーを指定 */
border-left: solid 2px #1478e6; /* ボーダー左の色 */
}
.custom-box8-label {
position: absolute;
display: inline-block;
top: -2px;
left: -33px;
color: #1478e6; /* ラベル文字色 */
font-size: 1.3em;
font-weight: bold;
}
.custom-box8 p {
margin-bottom: .8em;
}
.custom-box8 p:last-child {
margin-bottom: 0;
}
タイムライン用(タイトル付き) 01
時系列説明に使用できる、タイトルが付いたボックスです。
HTML
<div class="custom-box9">
<div class="custom-box9-label">2</div>
<div class="custom-box9-title">タイトル</div>
<p>ここに文字を入力</p>
<p>ここに文字を入力</p>
</div>
CSS
/* -- タイムライン用タイトル付 01 -- */
.custom-box9 {
position: relative;
margin: 4em 0 4em 3em;
padding: 0 4%;
background: #fafaff; /* ボックス背景色 */
box-shadow: -25px 0 0 25px #fafaff; /* 背景色と同じカラーを指定 */
border-left: solid 2px #1478e6; /* ボーダー左の色 */
}
.custom-box9-label {
position: absolute;
display: inline-block;
top: -2px;
left: -33px;
color: #1478e6; /* ラベル文字色 */
font-size: 1.3em;
font-weight: bold;
}
.custom-box9-title {
margin-bottom: .4em;
color: #1478e6; /* タイトル文字色 */
font-size: 1.4em;
font-weight: bold;
}
.custom-box9 p {
margin-bottom: .8em;
}
.custom-box9 p:last-child {
margin-bottom: 0;
}
タイムライン用(タイトル付き) 02
時系列説明に使用できる、stepの文字とタイトルが付いたボックスです。
HTML
<div class="custom-box10">
<div class="custom-box10-label">3</div>
<div class="custom-box10-title">タイトル</div>
</div>
CSS
/* -- タイムライン用タイトル付 02 -- */
.custom-box10 {
position: relative;
margin: 2em 0 2em 1.3em;
padding: .7em 4% .7em 3.5em;
background: #fffafa; /* ボックス背景色 */
border-bottom: solid 2px #1478e6; /* ボーダーの色 */
}
.custom-box10-label {
position: absolute;
display: inline-block;
top: -10px;
left: -20px;
background: #1478e6; /* ラベル背景色 */
color: #fff; /* ラベル文字色 */
letter-spacing: 0.05em;
font-size: 1.3em;
font-weight: bold;
width: 50px;
height: 50px;
line-height: 70px;
vertical-align: middle;
text-align: center;
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
.custom-box10-label:before {
content: "step";
position: absolute;
display: inline-block;
font-size: 12px;
font-weight: normal;
line-height: 25px;
left: 50%;
-ms-transform: translate(-50%);
-webkit-transform : translate(-50%);
transform : translate(-50%);
}
.custom-box10-title {
color: #3e3e3e; /* タイトル文字色 */
font-size: 1.4em;
font-weight: bold;
}
CSSコピペの場所
CSSにコピペする場合には、下記のどちらかお好みな方で編集ください。
- 子テーマの「style.css」を編集する。(外観/テーマ編集から変更できます)
- 追加CSSを編集する。(外観/CSS編集から変更できます)
子テーマの導入については、コチラ( ↓ )の記事にありますのでそちらをご覧ください。
あわせて読みたい
STORK(ストーク)をインストールしたら「子テーマ」を入れよう！
こんにちは！ HTML＆CSSの勉強中のネイネイ(@NEYNEYx2)です。 WordPressテーマのSTORK(ストーク)をインストールしたら、初めにしておいた方がいいのが「子テーマ」の導...
補足
色を変更する方法
これまで紹介してきた見出しデザインの色を変更する場合の方法を説明していきます。
色の変更は、「 /* 背景色 */ 」「 /* 文字色 */ 」などの〇〇〇色とコメントがある行の「 #78b4ff 」の #〇〇〇〇〇〇をお好きな色コードに変更してください。
色コードの参考には、下記のサイトがおすすめです。
アイコンを変更する方法
アイコンを変更する場合は、下記のサイトからアイコンのコードを取得してください。
アイコンの変更は、「 /* アイコンを指定 */ 」とコメントがある行の「content:”f06c”;」のf06cを下記画像の赤枠部分を参考に変更してみてください。
参考サイト
コチラ（↓）のサイト様で紹介されているボックスのデザインはとても参考になります。 本記事を作成するのにも参考にさせていただきました。
まとめ
お好みのボックスデザインは見つかりましたか？
これでブログが、あなた好みのオシャレなサイトにどんどんなっていきますね～
それでは、まったです。 (‘◇’)ゞ
コチラで紹介している「【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ」の記事もよかったらどうぞ。
あわせて読みたい
【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ
こんにちは！ カスタマイズにハマってしまっているネイネイ(@NEYNEYx2)です。 今回は、WordPressテーマのSTORK(ストーク)でこれまで紹介してきたカスタマイズをまとめま...
おすすめASP
- A8.net：定番の最大手
- もしもアフィリエイト：独自の報酬制度が魅力的
- バリューコマース：定番・独自案件が豊富
- afb（アフィビー）：美容系の案件に強い
- アクセストレード：通信系・転職系に強い
コメント