「WordPressテーマ「ストーク」 」には、ボタン1つで呼び出せる便利なショートコードがたくさんありますよね。
この記事では「ストーク」で使える全ショートコードとそのカスタマイズ方法を書きました。
デフォルトのデザインはちょっと違うんだよなぁ……なんて思ってた方は参考にしていただければと思います。
CSSのカスタマイズは、子テーマの「スタイルシート (style.css)」を使ってください。
子テーマの使い方がわからない方はこちらを先にどうぞ。

目次・読みたい所へタップできます
STORKショートコード1【ボタン系】
ボタンシリーズの大半のデフォルトカラーは、カスタマイズ画面のリンクカラーが影響します。
「管理画面」
↓
「外観」
↓
「カスタマイズ」をクリック
「サイトカラー設定」をクリック
「リンクのカラー」を選択
↓
「リンクの(マウスオン時)のカラー」を選択
シンプルボタン
「シンプルボタン」のショートコード
[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ショートコード2【枠線系】
[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ショートコード3【ボックス系】
[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]
ボックスショートコードもデフォルトの中から使わないカラーをそのままカスタマイズしていくので、ショートコードはそのまま使います。
ちなみにtitle=""
部分を消すと、ボックスのみ使用できます。
カスタマイズ後の「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ショートコード4【関連記事リンクカード】
リンクカードはかなり長くなるので、別記事にまとめました。

STORKショートコード5【吹き出し系】
[voice icon="画像のURL" name="名前" type="l"]ここに文章[/voice]
[voice icon="画像のURL" name="名前" type="r"]ここに文章[/voice]
以降の吹き出しは左側しか載せませんが、右側に表示したい時は「l」を「r」に変更して下さい。
[[voice icon="画像のURL" name="名前" type="l fb"]ここに文章[/voice]
typeを追加する時は半角スペースを空けてください。
[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にも同様に.hkds1
を追加します。

「内側」と「外側」の三角の見方
枠線だけであれば、「外側の三角」を指定するだけで枠線カラーを変更できますが、「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; }
左側の三角がborder-right
右側の三角がborder-left
と三角の向きとは逆になるので、注意してください。
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ショートコード6【2カラム&3カラム】
PCで見た場合のみですが、画像や文章を2つまたは3つ横並びにできます。
画像のサイズは統一しておくと綺麗に並びます。
「2カラム」文章サンプル
「2カラム」画像サンプル

1カラム

2カラム
「2カラム」用ショートコード
[colwrap] [col2]ここに画像URLや文章[/col2] [col2]ここに画像URLや文章[/col2] [/colwrap]
「3カラム」文章サンプル
「3カラム」画像サンプル

1カラム

2カラム

3カラム
「3カラム」用ショートコード
[colwrap] [col3]ここに画像URLや文章[/col3] [col3]ここに画像URLや文章[/col3] [col3]ここに画像URLや文章[/col3] [/colwrap]
で、先ほども言いましたが「2カラム」や「3カラム」はPCだと横に並びますが、スマホだと以下のように縦に並びます。
サンプルは3カラム画像。
でもスマホで横並びに表示したい時もあるかと思い、ショートコードをカスタマイズてみました。
カスタマイズ後のショートコード
[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%; }}
3カラムをスマホで3つ並べるとさすがに窮屈なので、2カラムのみにしています。

2カラムスマホ表示
STORKショートコード7【CTA(コールトゥアクション)】
通常の記事内で使うことはないですが(使うこともできる)「WordPressテーマ「ストーク」 」には記事下に「オススメの商品」や「資料請求」などを設置できる「CTAウィジェット」が最初から用意されています。
「管理画面」
↓
「外観」
↓
「ウィジェット」をクリック
「カスタムHTML」を「CTA設定」にドラッグ&ドロップする
↓
「内容」にショートコードを貼る
CTAは記事下にあるSNSボタンの下に表示されます。
CTA用ショートコード[cta_in] [cta_ttl]ここにタイトル[/cta_ttl] ここに文章 [cta_btn link="ここにボタンのリンク先を貼り付け"]ここにボタン内のテキストを入力[/cta_btn] [/cta_in]]

デフォルトのCTAデザイン
私のサイトは色々カスタマイズしているので、デフォルトのデザインでは使い物になりません。笑
特にカスタマイズしていない場合は以下の「カスタマイズ画面で指定するサイトカラー」がデザインに影響します。
「管理画面」
↓
「外観」
↓
「カスタマイズ」をクリック
「サイトカラー設定」をクリック
「記事ページ見出し(H2)背景」がCTAタイトル背景カラー
|
「記事ページ見出し(H2)文字色」がCTAタイトルテキストカラー
|
「フッターテキスト」がCTAボックス内のテキストカラー
※<p>タグで囲むと、「本文のテキストカラー」が適用されます。</p>
|
「フッター背景」がCTAボックスの背景カラー
※ボタンデザインは、「シンプル赤(大)」がデフォルトで適用されています。
「投稿・固定ページ設定」をクリック
|
見出しデザインの「シンプル」がCTAタイトルのデザインになります。
|
※他のデザインを選択しても変更されませんが、h2見出しをオリジナルデザインにカスタマイズしている場合は、そちらが適用されます。
「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テーマ「ストーク」 」は利用者が多いことで有名ですが、カスタマイズすればまだまだ差別化できますね。
※日本語が含まれていないコメントは投稿できません。(スパム対策)