コロナ対策・電子書籍100冊半額クーポンで引きこもろう

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

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

SHARE

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

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

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

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

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

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

WordPress子テーマ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]

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

補足

ちなみに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ショートコード４【関連記事リンクカード】

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

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

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

ストーク吹き出し左側

[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にも同様に.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;
}

 

補足

左側の三角が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ショートコード６【２カラム&３カラム】

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画像横並びにする方法 WordPressでCSSを使わず画像を横並びにする方法【最大9カラム】

STORKショートコード７【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カラー設定

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

｜

「記事ページ見出し(H２)文字色」が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テーマ「ストーク」 」は利用者が多いことで有名ですが、カスタマイズすればまだまだ差別化できますね。

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