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

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

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

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

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

 

おすすめASP

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編集から変更できます)

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

関連記事

こんにちは! HTML&CSSの勉強中のネイネイ(@NEYNEYx2)です。 WordPressテーマのSTORK(ストーク)をインストールしたら、初めにしておいた方がいいのが「子テーマ」の導入です。 今回は、「子テーマ」を導入する仕方[…]

STORK(ストーク)をインストールしたら「子テーマ」を入れよう!

 

補足

色を変更する方法

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

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

色コードの参考には、コチラ(↓)のサイトがおすすめです。

色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色…

 

アイコンを変更する方法

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

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

 

参考サイト

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

サルワカ | サルでも分かる図解説明マガジン

HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご…

 

まとめ

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

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

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

 

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

関連記事

こんにちは! カスタマイズにハマってしまっているネイネイ(@NEYNEYx2)です。 今回は、WordPressテーマのSTORK(ストーク)でこれまで紹介してきたカスタマイズをまとめましたので、ご紹介いたします。 STORK(ストーク[…]

【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ

 

おすすめASP

 

ポチして頂くことで、ランキングの順位が上がります

人気ブログランキングへ
にほんブログ村 本ブログ 書評・レビューへ
Amazonでお得にお買い物
amazonギフト券

Amazonでお買い物するなら、Amazonギフト券の利用がおすすめ!

チャージするたびに、プライム会員なら最大2.5%分通常会員なら最大2.0%分のAmazonポイントが貯まる。

\ TRY NOW!! /

\ こちらも読まれています! /