SWELLで特化サイト作ってみた

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

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

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

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

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

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

スタイルシート (style.css)編集

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

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

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

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

ワードプレス管理画面カスタマイズ

管理画面

外観

カスタマイズ」をクリック

ストークサイトカラー設定

サイトカラー設定」をクリック

ストークサイトカラー設定2

リンクのカラー」を選択

リンクの(マウスオン時)のカラー」を選択

シンプルボタン

ストークシンプルボタン

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

[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】の関連記事(リンクカード)を超カスタマイズ

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

ストーク吹き出し左側

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

ストーク吹き出し画像右側

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

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

ストーク吹き出しFacebook風

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

typeを追加する時は半角スペースを空けてください。

ストーク吹き出しLINE風

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

ストーク吹き出しBIG

[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カラム」文章サンプル

1カラム
2カラム

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

ストーク2カラム表示サンプル

1カラム

ストーク2カラム表示サンプル2

2カラム

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

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

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

1カラム
2カラム
3カラム

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

ストーク3カラム表示サンプル

1カラム

ストーク3カラム表示サンプル2

2カラム

ストーク3カラム表示サンプル3

3カラム

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

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

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

ストーク3カラムスマホ表示

サンプルは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カラムスマホ表示

2カラムスマホ表示

補足

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

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

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

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

ワードプレスウィジェット

管理画面

外観

ウィジェット」をクリック

ストークCTA設定

カスタムHTML」を「CTA設定」にドラッグ&ドロップする

内容」にショートコードを貼る

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

ストークCTAサンプル

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

デフォルトのCTAデザイン

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

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

ワードプレス管理画面カスタマイズ

管理画面

外観

カスタマイズ」をクリック

ストークサイトカラー設定

サイトカラー設定」をクリック

ストークCTAカラー設定

記事ページ見出し(H2)背景」がCTAタイトル背景カラー

記事ページ見出し(H2)文字色」がCTAタイトルテキストカラー

フッターテキスト」がCTAボックス内のテキストカラー

補足

※<p>タグで囲むと、「本文のテキストカラー」が適用されます。</p>

フッター背景」がCTAボックスの背景カラー

※ボタンデザインは、「シンプル赤(大)」がデフォルトで適用されています。

ストーク投稿・固定ページ設定

ストーク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」スマホ表示

ストークCTAPC表示

「CTA」PC表示

まとめ

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

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

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

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

コメントはお気軽にどうぞ

\最強のSEO対策ツール・Rank Trackerを解説/