【STORK】全ショートコードのカスタマイズ方法を解説

→ サイトを見てみる

「WordPressテーマ「ストーク」 」には、ボタン１つで呼び出せる便利なショートコードがたくさんありますよね。

この記事では「ストーク」で使える全ショートコードとそのカスタマイズ方法を書きました。

デフォルトのデザインはちょっと違うんだよなぁ……なんて思ってた方は参考にしていただければと思います。

CSSのカスタマイズは、子テーマの「スタイルシート (style.css)」を使ってください。

子テーマの使い方がわからない方はこちらを先にどうぞ。

Cyberduckの使い方WordPressの子テーマを分かりやすく解説

STORKショートコード１【ボタン系】

ボタンシリーズの大半のデフォルトカラーは、カスタマイズ画面のリンクカラーが影響します。

シンプルボタン

「シンプルボタン」のショートコード

[btn]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後のショートコード

[btn class="spbtn1"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「CSS」

style.css
/* ボタンデザインの指定 */
.btn-wrap.spbtn1 a{
ここにCSSを書く
} 
/* ボタンにマウスオーバー時の指定 */
.btn-wrap.spbtn1 a:hover{
 ここにCSSを書く
 }

背景色を指定するなら

background:#ffc489;

テキストカラーを指定するなら

color:#555;

ボタン内の余白を指定するなら

padding:10px;

フォントサイズを指定するなら

font-size:20px;

フォントを太く指定するなら

font-weight:bold;

ボタン周りに影を指定するなら

box-shadow:0 0 4px #888;

ボタン周りの角を丸くするなら

border-radius:5px;

ボタン周りの枠線を消すなら

border:none;

※枠線を消したくない場合は、背景色と同じ指定をしてください。

border:solid 1px #ffc489;

マウスを乗せた時(PCでのみ確認可)の「背景色」「テキストカラー」「枠線を消す」指定するなら

background:#99ff99; color:#fff; border:none;

※枠線を消したくない場合は、背景色と同じ指定をしてください。

border:solid 1px #99ff99;

枠線ボタン(小・大)

「小さめ枠線ボタン」ショートコード

[btn class="simple"]ここに商品リンクやテキストリンクを設定する[/btn]

「大きめ枠線ボタン」ショートコード

[btn class="simple big"][/btn]

カスタマイズ後の「小さめ枠線ボタン」ショートコード

[btn class="spbtn2"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「大きめ枠線ボタン」ショートコード

[btn class="spbtn2 big"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「CSS」

style.css
.btn-wrap.spbtn2 a{ border:solid 1px #ffbf7f;
background:#fff;
color:#ffbf7f;
border-radius:4px;
}
.btn-wrap.spbtn2 a:hover{
background:#ffbf7f;
color:#fff;
border:none;
}

シンプル赤ボタン(小・大)

「シンプル赤ボタン(小)」ショートコード

[btn class="lightning"]ここに商品リンクやテキストリンクなどを設定[/btn]

「シンプル赤ボタン(大)」ショートコード

[btn class="lightning big"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「シンプル赤ボタン(小)」ショートコード

[btn class="spbtn3"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「シンプル赤ボタン(大」)ショートコード

[btn class="spbtn3 big"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「CSS」

style.css
.btn-wrap.spbtn3 a{
border:1px solid #ff7f7f;
background:#ff7f7f;
border-radius:3px;
}
.btn-wrap.spbtn3 a:hover{
border:1px solid #ff7f7f;
background:#ff7f7f;
opacity:0.8;
}

背景付き赤ボタン

「背景グレー赤ボタン」のショートコード

[btn class="lightning bg"]ここに商品リンクやテキストリンクを設定する[/btn]

「背景イエロー赤ボタン」のショートコード

[btn class="lightning bg-yellow"]ここに商品リンクやテキストリンクを設定する [/btn]

「背景イエロー角が丸い赤ボタン」のショートコード

[btn class="lightning bg-yellow maru"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「背景カラー付きボタン(小)」ショートコード

[btn class="spbtn4"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「背景カラー付きボタン(大)」ショートコード

[btn class="spbtn4 big"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「CSS」

style.css
.btn-wrap.spbtn4{
background:#bddeff;
padding: 1.5em 1em;
margin: 2.5em 0;
border-radius:4px;
}
.btn-wrap.spbtn4 a{
background:#ffbcdd;
border:none;
border-radius:4px;
font-weight:bold;
box-shadow:0 0 4px #888;
}
.btn-wrap.spbtn4 a:hover{
border:2px solid #ffbcdd;
background:#fff;
color:#ffbcdd;
}

リッチボタン

「リッチイエローボタン」のショートコード

[btn class="rich_yellow"]ここに商品リンクやテキストリンクを設定する[/btn]

「リッチピンクボタン」のショートコード

[btn class="rich_pink"]ここに商品リンクやテキストリンクを設定する[/btn]

「リッチオレンジボタン」のショートコード

[btn class="rich_orange"]ここに商品リンクやテキストリンクを設定する[/btn]

「リッチグリーンボタン」のショートコード

[btn class="rich_green"]ここに商品リンクやテキストリンクを設定する[/btn]

「リッチブルーボタン」のショートコード

[btn class="rich_blue"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「リッチボタン」ショートコード

[btn class="spbtn5"]ここに商品リンクやテキストリンクを設定する[/btn]

カスタマイズ後の「CSS」

style.css
.btn-wrap.spbtn5 a{
background:#8f6552;
box-shadow:0 4px 0 #6c3524;
border:none;
font-weight:bold;
border-radius:4px;
}
.btn-wrap.spbtn5 a:hover{
background:#8f6552;
box-shadow: 0 0 #6c3524;
}

STORKショートコード２【枠線系】

[aside type="boader"]ここに文章[/aside]

[aside]黄色い背景の補足説明 [/aside]

[aside type="warning"]ピンクの背景の注意喚起[/aside]

枠線のショートコードは、「シンプル枠線」のみ新たにCSSで作り「補足説明」と「注意喚起」はデフォルトのものをカスタマイズしていくので、ショートコードはそのまま使ってください。

カスタマイズ後の「シンプル枠線」CSSコード

<div class="wk1">シンプル枠線</div>

カスタマイズ後の「CSS」

style.css
.wk1{ background:#fbfbfb;
border:2px solid #eee;
padding:3% 4%;
margin:1.5em 0 2em;
color:#666;
font-size:85%;
}

style.css
/* 黄色枠を変える */
.entry-content .supplement{
border:2px solid #faebce;
background:#fcf8e4;
border-radius:2px;
color:#666;
font-size:85%;
}
/* 黄色枠のアイコン */
.entry-content .supplement:before{
font-family:"Font Awesome 5 Free";
content:"\f303";
font-size: 1.5em;
font-weight:bold;
color:#444;
}

上記で使用しているアイコンは「Font Awesome 5」のものなので、まだ導入していない方は以下の記事を参考にして下さい(以降のカスタマイズでも「Font Awesome 5」を使用するものがあります。)

アップデートが面倒くさい方は「Font Awesome 4.7.0」からアイコンを選択して下さい。

style.css
/* ピンク枠を変える */
.entry-content .supplement.warning{
border:2px solid #ffcccc;
background:#fff5f5;
border-radius:2px;
color:#666;
}
/* ピンク枠のアイコン */
.entry-content .supplement.warning:before{
content:'\f071';
color:#ff7f7f;
font-size: 1.7em;
}

STORKショートコード３【ボックス系】

[box class="black_box" title="ここにタイトル"]ブラックボックス[/box]

[box class="glay_box" title="ここにタイトル"]グレイボックス[/box]

[box class="red_box" title="ここにタイトル"]レッドボックス[/box]

[box class="green_box" title="ここにタイトル"]グリーンボックス[/box]

[box class="yellow_box" title="ここにタイトル"]イエローボックス[/box]

[box class="blue_box" title="ここにタイトル"]ブルーボックス[/box]

[box class="pink_box" title="ここにタイトル"]ピンクボックス[/box]

ボックスショートコードもデフォルトの中から使わないカラーをそのままカスタマイズしていくので、ショートコードはそのまま使います。

カスタマイズ後の「CSS」コード

style.css
/* ピンクボックスの指定 */
.entry-content .c_box.pink_box{
background:#f8f4e6;
border-color:#ebe1a9;
color:#555;
font-size:90%;
}
/* ピンクボックスタイトル周りの指定 */
.entry-content .c_box.pink_box .box_title span{
font-size:16.5px;
background:#ebe1a9;
}
/* ピンクボックスタイトルのアイコン指定 */
.entry-content .c_box.pink_box .box_title span:before{
font-family:"Font Awesome 5 Free";
content:"\f3a5";
padding-right:6px;
}

サンプルでは、「ピンクボックス」をカスタマイズしましたが、別のカラーボックスを変更したい場合はpinkの部分を各カラー(blueなど)に変更してください。

STORKショートコード４【関連記事リンクカード】

リンクカードはかなり長くなるので、別記事にまとめました。

【STORK】の関連記事（リンクカード）を超カスタマイズ

STORKショートコード５【吹き出し系】

[voice icon="画像のURL" name="名前" type="l"]ここに文章[/voice]

[voice icon="画像のURL" name="名前" type="r"]ここに文章[/voice]

以降の吹き出しは左側しか載せませんが、右側に表示したい時は「l」を「r」に変更して下さい。

[[voice icon="画像のURL" name="名前" type="l fb"]ここに文章[/voice]

[voice icon="画像のURL" name="名前" type="l line"]ここに文章[/voice]

[voice icon="画像のURL" name="名前" type="l big"]ここに文章[/voice]

[voice icon="画像のURL" name="名前" type="l icon_yellow"]ここに文章[/voice]

[voice icon="画像のURL" name="名前" type="l icon_red"]ここに文章[/voice]

[voice icon="画像のURL" name="名前" type="l icon_blue"]ここに文章[/voice]

[voice icon="画像のURL" name="名前" type="l icon_black"]ここに文章[/voice]

[voice icon="画像のURL" name="名前" type="l big icon_black line"]ここに文章]

[voice icon="画像のURL"  type=" l "]ここに文章[/voice]

カスタマイズ後の「ショートコード」

[voice icon="画像のURL" name="名前" type="l hkds1"]オリジナルの「type」を追加する]

カスタマイズに使う「CSS」

/* 吹き出し内のフォント・枠線・吹き出しのカラーを指定 */
.voice.hkds1 .voicecomment{
ここにCSSを書く
}
/* 吹き出しで使う画像の指定*/
.voice.hkds1 .icon img {
ここにCSSを書く
}
/* 吹き出しの「左側」の「外側」三角を指定 */
.voice.l.hkds1 .voicecomment:before{
ここにCSSを書く
}
/* 吹き出しの「左側」の「内側」三角を指定 */
.voice.l.hkds1 .voicecomment:after{
ここにCSSを書く
}
/* 吹き出しの「右側」の「外側」三角を指定 */
.voice.r.hkds1 .voicecomment:before{
ここにCSSを書く
/* 吹き出しの「右側」の「内側」三角を指定 */
.voice.r.hkds1 .voicecomment:after{
ここにCSSを書く
}

CSSで.hkds1というオリジナルの「class」を追加し、ショートコードのtypeにも同様に.hkds１を追加します。

「内側」と「外側」の三角の見方

枠線だけであれば、「外側の三角」を指定するだけで枠線カラーを変更できますが、「Facebook風」や「LINE風」のように枠線内のカラーも指定する場合は「内側の三角」部分も指定が必要です。

style.css
/* 吹き出しの枠線カラーの指定*/
.voice.hkds1 .voicecomment{
border-color:#ebe1a9;
}
/* 吹き出し「左側」の「外側の三角」を指定 */
.voice.l.hkds1 .voicecomment:before{
border-right-color:#ebe1a9;
}

style.css
/* 吹き出しの枠線カラーの指定*/
.voice.hkds1 .voicecomment{
border-color:#ebe1a9;
}
/* 吹き出し「右側」の「外側の三角」を指定 */
.voice.r.hkds1 .voicecomment:before{
border-left-color:#ebe1a9;
}

style.css
/* 吹き出しの「枠線カラー」と「背景色」の指定*/
.voice.hkds1 .voicecomment{
background:#ebe1a9;
border-color:#ebe1a9; 
}
/* 吹き出し「左側」の「外側の三角」を指定 */
.voice.l.hkds1 .voicecomment:before{
border-right-color:#ebe1a9;
}
/* 吹き出し「左側」の「内側の三角」を指定 */
.voice.l.hkds1 .voicecomment:after{
 border-right-color:#ebe1a9;
}

style.css
/* 吹き出しの「枠線カラー」と「背景色」の指定*/
.voice.hkds1 .voicecomment{
background:#ebe1a9;
border-color:#ebe1a9; 
}
/* 吹き出し「右側」の「外側の三角」を指定 */
.voice.r.hkds1 .voicecomment:before{
border-left-color:#ebe1a9;
}
/* 吹き出し「右側」の「内側の三角」を指定 */
.voice.r.hkds1 .voicecomment:after{
border-left-color:#ebe1a9;
}

style.css
/* 吹き出しアイコン画像周りの枠線を消す*/
.voice.hkds1 .icon img {
border-width:0; 
}

style.css
/* 吹き出しアイコン画像周りの枠線の幅を指定*/
.voice.hkds1 .icon img {
border-width:2px; 
}

style.css
/* 吹き出しアイコン画像周りの枠線カラーを指定*/
.voice.hkds1 .icon img {
border-color:#ebe1a9;
}

style.css
/* 吹き出しアイコン画像周りの枠線種類を指定*/
.voice.hkds1 .icon img{
border-style:dotted
}

枠線の種類はこちらを参考に「border-style(線の種類)のCSS&HTML基礎とデザイン13選」

STORKショートコード６【２カラム&３カラム】

PCで見た場合のみですが、画像や文章を２つまたは３つ横並びにできます。

画像のサイズは統一しておくと綺麗に並びます。

「２カラム」文章サンプル

「２カラム」画像サンプル

１カラム

２カラム

「２カラム」用ショートコード

[colwrap] 
[col2]ここに画像URLや文章[/col2]
[col2]ここに画像URLや文章[/col2] 
[/colwrap]

「３カラム」文章サンプル

「３カラム」画像サンプル

１カラム

２カラム

３カラム

「３カラム」用ショートコード

[colwrap]
[col3]ここに画像URLや文章[/col3]
[col3]ここに画像URLや文章[/col3]
[col3]ここに画像URLや文章[/col3]
[/colwrap]

で、先ほども言いましたが「２カラム」や「３カラム」はPCだと横に並びますが、スマホだと以下のように縦に並びます。

でもスマホで横並びに表示したい時もあるかと思い、ショートコードをカスタマイズてみました。

カスタマイズ後のショートコード

[colwrap class="clm2"] 
[col2 class="clm22"]
ここに画像URLや文章
[/cell]
[col2 class="clm22"]
ここに画像URLや文章
[/cell]
[/colwrap]

それぞれに「class」を足します。

「2カラム用」カスタマイズ後CSS

style.css
@media(max-width:500px){
.entry-content .clm2{
display:flex;
overflow:hidden;
margin-left:-19px;
margin-right:-19px;
}
.clm22{
margin:24px 3.2px;
width:48%;
text-align:center;
}
.clm22 p{
font-size:85%;
}}

３カラムをスマホで３つ並べるとさすがに窮屈なので、２カラムのみにしています。

２カラムスマホ表示

補足

画像の横並びだけでしたら、CSSを一切使わず(テーマによっては必要な場合アリ)に並べる方法もあります。

WordPressでCSSを使わず画像を横並びにする方法【最大9カラム】

STORKショートコード７【CTA(コールトゥアクション)】

通常の記事内で使うことはないですが(使うこともできる)「WordPressテーマ「ストーク」 」には記事下に「オススメの商品」や「資料請求」などを設置できる「CTAウィジェット」が最初から用意されています。

CTAは記事下にあるSNSボタンの下に表示されます。

CTA用ショートコード
[cta_in]
[cta_ttl]ここにタイトル[/cta_ttl]
ここに文章
[cta_btn link="ここにボタンのリンク先を貼り付け"]ここにボタン内のテキストを入力[/cta_btn]
[/cta_in]]

デフォルトのCTAデザイン

私のサイトは色々カスタマイズしているので、デフォルトのデザインでは使い物になりません。笑

特にカスタマイズしていない場合は以下の「カスタマイズ画面で指定するサイトカラー」がデザインに影響します。

「CTA」のデザインは他のショートコードと組み合わせて使うと、おしゃれなデザインにできます。

カスタマイズ後に使う「CTA」ショートコード

[cta_in] 
[colwrap]
[col2]
ここに画像のURLやアフィリ画像を入れる
[btn class="rich_orange"]ここに商品リンクやテキストリンクを設定する[/btn]
[/col2]
[col2]
<span class="ctattl">ここにタイトル</span>
<div class="ctacmt"><p>ここに文章</p></div>
[/col2][/colwrap]
[/cta_in]

ボタンデザインは気に入ったショートコードを使ってください。

「CTA」のカスタマイズに使うCSS

style.css
.cta-inner.cf{
background:#89c3eb;
}
.ctattl{
font-weight:bold;
color:#eee;
font-size:35px;
text-align:center;
display:block;
}
.entry-content .ctacmt p{
font-size:85%;
color:#eee;
font-weight:bold;
}

カスタマイズ後のデザインはこんな感じになります。

「CTA」スマホ表示

「CTA」PC表示

まとめ

現時点(2018年8月13日)の「ストーク」で使えるショートコードは全て紹介しました。

ショートコードは「AddQuicktag」と組み合わせると最強です。

マニュアル書はこちら「AddQuicktagの使い方と設定方法【作業効率化プラグイン】」

「WordPressテーマ「ストーク」 」は利用者が多いことで有名ですが、カスタマイズすればまだまだ差別化できますね。

→ サイトを見てみる