Amazon Gaming Week【9月19日~9月29日まで】

STORK(ストーク)のボックスをちょこっとカスタマイズ!

こんにちは! ちょっとだけカスタマイズに慣れてきたネイネイ(@NEYNEYx2)です。

今回は、WordPressテーマのSTORK(ストーク)のボックスをカスタマイズしてみましたので、まとめをご紹介いたします。

STORK(ストーク)でオリジナルのボックスをお探しでしたら、ご覧になってください。

 

おすすめASP
  1. A8.net:定番の最大手
  2. もしもアフィリエイト:独自の報酬制度が魅力的
  3. バリューコマース:定番・独自案件が豊富
  4. afb(アフィビー):美容系の案件に強い
  5. アクセストレード:通信系・転職系に強い
目次(タップできます)

STORK(ストーク)のショートコードをカスタマイズ

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にコピペする場合には、下記のどちらかお好みな方で編集ください。

  1. 子テーマの「style.css」を編集する。(外観/テーマ編集から変更できます)
  2. 追加CSSを編集する。(外観/CSS編集から変更できます)

子テーマの導入については、コチラ( ↓ )の記事にありますのでそちらをご覧ください。

あわせて読みたい
STORK(ストーク)をインストールしたら「子テーマ」を入れよう! こんにちは! HTML&CSSの勉強中のネイネイ(@NEYNEYx2)です。 WordPressテーマのSTORK(ストーク)をインストールしたら、初めにしておいた方がいいのが「子テーマ」の導...

 

補足

色を変更する方法

これまで紹介してきた見出しデザインの色を変更する場合の方法を説明していきます。

色の変更は、「 /* 背景色 */ 」「 /* 文字色 */ 」などの〇〇〇とコメントがある行の「 #78b4ff 」の #〇〇〇〇〇〇をお好きな色コードに変更してください。

色コードの参考には、下記のサイトがおすすめです。

色コードの参考サイト

 

アイコンを変更する方法

アイコンを変更する場合は、下記のサイトからアイコンのコードを取得してください。

アイコンのコード取得サイト

 

アイコンの変更は、「 /* アイコンを指定 */ 」とコメントがある行の「content:”f06c”;」のf06cを下記画像の赤枠部分を参考に変更してみてください。

 

参考サイト

コチラ(↓)のサイト様で紹介されているボックスのデザインはとても参考になります。 本記事を作成するのにも参考にさせていただきました。

ボックスのデザイン参考サイト

 

まとめ

お好みのボックスデザインは見つかりましたか?

これでブログが、あなた好みのオシャレなサイトにどんどんなっていきますね~

それでは、まったです。 (‘◇’)ゞ

 

コチラで紹介している「【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ」の記事もよかったらどうぞ。

あわせて読みたい
【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ こんにちは! カスタマイズにハマってしまっているネイネイ(@NEYNEYx2)です。 今回は、WordPressテーマのSTORK(ストーク)でこれまで紹介してきたカスタマイズをまとめま...

 

おすすめASP
  1. A8.net:定番の最大手
  2. もしもアフィリエイト:独自の報酬制度が魅力的
  3. バリューコマース:定番・独自案件が豊富
  4. afb(アフィビー):美容系の案件に強い
  5. アクセストレード:通信系・転職系に強い

 

Amazonギフト券 チャージタイプ

 

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

30代の元開発エンジニア。本の書評多め(ミステリ、ファンタジー、気になった本を読む雑食系)。現在は、自由な働き方で生活していけるように、日々の『喜び・怒り・悲しみ・楽しみ』を書きつづっています。

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次(タップできます)