【最新版】「STORK」で使えるショートコードを、全部・サクッと、便利に登録!

テーマ「STORK」には、たくさんの便利な「ショートコード」が用意されています。

例えば、こんな吹き出しや(↓)

狐火兎
吹き出し♪

こんなリンクカード(↓)を、簡単に使えます。

【2017年9月最新】WordPress ブログを始めたら、導入すべきプラグイン 18選

2017.01.11

 

こういったパーツがあるだけで、記事レベルがあがりますね!しかし、この便利なショートコード、毎回手作業で入力するのは大変です。「AddQuicktag」に、1つ1つ登録するのも、かなりの手間・・・

 

そこで、ワンクリックで登録できるように、僕が実際に登録しているコードを、公開・配布します!

公式ページで案内されている「全ショートコード」が入っているほか、便利に使えるような工夫もしているので、是非使ってくださいね。

 

 【2017/5/5】最新版に、更新しました!

STORK」のアップデートにより増えた、ショートコードも追加しました!また、吹き出しも「LINE風」「Facebook風」などを、使いやすいように登録しました!

 

では、改めて「STORK」で使える全ショートコード」の説明と、それをサクッと登録する方法をご紹介します!

 

「STORK」ショートコードを、簡単サクッと登録する方法

1.AddQuicktag の導入

サクッと登録するには、「AddQuicktag」プラグインが必要です。導入がまだの方は、まずコチラ(↓)を見てね。

「AddQuicktag」で、面倒なタグ打ちから、オサラバ!

2017.01.13

 

2.ショートコードの登録

(↓)のボタンを押して、「addquicktag.-05-05-2017.json」ファイルを、ダウンロードしてください。(任意のフォルダに保存してね)

 

「AddQuicktag」で、面倒なタグ打ちから、オサラバ!」に書いた方法で、「インポート」!

以上で、終わり! サクッと簡単ですね~

 

登録できた内容は、以下の通りです。(↓)

 

それでは、各ショートコードについて、解説します。

 

「STORK」で使える、全ショートコードを解説

記事リンク

★【リンク】 記事(関連ラベル有り)
[kanren postid="x,x"]

こんな感じ(↓)になるよ。

  •  記事1つの場合: 「“x,x”」の部分を「“465”」に変更(↓)

要注意!「STORK」で、不具合の起きるプラグイン・ウィジェット

2017.01.16
  •  複数記事の場合: 「“x,x”」の部分を「“38,243”」に変更(↓)

「STORK(ストーク)」を、たった1時間で、おしゃれにカスタマイズ!

2016.12.27

ブロガーに大人気! 話題のテーマ 「 STORK(ストーク)」 を使う!

2016.12.21

※当ブログでは、デザインを一部カスタマイズしています。(色や文字の変更など)そのため、同じ見た目にならないものがあるので、標準的なサンプルも見てね。

 

x」に、リンクしたい記事のIDを入れて使います。記事IDは(↓)のように確認してね。

 

x,x」としてあるのは、例えば「32,96」のように並べると、複数表示できるからです。ただ、複数記事の場合は、順番がランダムになります。特定の順番に並べたい時は、「記事1つの場合」の方を、複数使いましょう。

 

★【リンク】 記事(ラベル無し)
[kanren2 postid="x,x"]

使い方は、「★【リンク】 記事(関連ラベル有り)」(↑)と同じ。違いは、タイトル前の「黒色」ラベルが無いところです。(↓)

STORK(ストーク)で、ランディングページ(LP)を設置するべき、3つの理由と具体例

2017.02.28

 

 

吹き出し

★【吹き出し】 シンプル(左)
[voice icon="(画像アドレス)" name="(名前)" type="l"](定型文)[/voice]

こんな感じ(↓)になるよ。

狐火兎
では、また♪

voice icon」に画像アドレスを、「name」に自分の名前を入れて、使ってね。(↑)の「では、また♪」のように、定型句を入れておくと便利です。

 

★【吹き出し】 シンプル(右)
[voice icon="(画像アドレス)" name="(名前)" type="r"](定型文)[/voice]

こんな感じ(↓)になるよ。

狐火兎
アイコンが、右に来ます♪

 

★【吹き出し】 シンプル(ビッグ)(左)
[voice icon="(画像アドレス)" name="(名前)" type="l big"](定型文)[/voice]

こんな感じ(↓)になるよ。

狐火兎
アイコンが

大きくなります!

 

★【吹き出し】 Facebook風(左)
[voice icon="(画像アドレス)" name="(名前)" type="l fb"](定型文)[/voice]

こんな感じ(↓)になるよ。

狐火兎
Facebook風のカラーに♪

 

★【吹き出し】 LINE風(左)
[voice icon="(画像アドレス)" name="(名前)" type="l line"](定型文)[/voice]

こんな感じ(↓)になるよ。

狐火兎
LINE風のカラーに♪

 

★【吹き出し】 カラー枠(左)
[voice icon="(画像アドレス)" name="(名前)" type="l icon_black/icon_blue/icon_yellow/icon_red"](定型文)[/voice]

こんな感じ(↓)になるよ。

狐火兎
黒枠にするには「 type="l icon_black"」にしてね(必要な色以外を消してください)
狐火兎
青枠にするには「 type="l icon_blue"」にしてね(必要な色以外を消してください)
狐火兎
黄枠にするには「 type="l icon_yellow"」にしてね(必要な色以外を消してください)
狐火兎
赤枠にするには「 type="l icon_red"」にしてね(必要な色以外を消してください)

 

 

★【枠】 シンプル(白)
[aside type="boader"]タイトル
シンプルな
枠
だよ
[/aside]

こんな感じ(↓)になるよ。

 

★【枠】 注意(赤)
[aside type="warning"]注意
注意
喚起
だよ
[/aside]

こんな感じ(↓)になるよ。

 

★【枠】 補足(黄)
[aside]補足
補足
説明
だよ
[/aside]

こんな感じ(↓)になるよ。

 

(↑)の枠は3種類とも、タイトル」を太文字にして、改行(3行分)を入れてあるので、使いやすいと思います。好きな文字を入れて、使ってね!

 

 

ボタン

☆【ボタン】 ベタ塗り
[btn](テキストリンク)[/btn]

こんな感じ(↓)になるよ。

 

☆【ボタン】 ベタ塗り(ビッグ)
[btn class="big"](テキストリンク)[/btn]

こんな感じ(↓)になるよ。

 

☆【ボタン】 枠線
[btn class="simple"](テキストリンク)[/btn]

こんな感じ(↓)になるよ。

 

☆【ボタン】 枠線(ビッグ)
[btn class="simple big"](テキストリンク)[/btn]

こんな感じ(↓)になるよ。

 

☆【ボタン】 目立つ(赤)
[btn class="lightning"](テキストリンク)[/btn]

こんな感じ(↓)になるよ。

 

☆【ボタン】 目立つ(赤)(ビッグ)
[btn class="lightning big"](テキストリンク)[/btn]

こんな感じ(↓)になるよ。

 

☆【ボタン】 目立つ(赤)(灰色背景付)
[btn class="lightning bg"](テキストリンク)[/btn]

こんな感じ(↓)になるよ。

 

☆【ボタン】 目立つ(赤)(黄色背景付・角丸)
[btn class="lightning big bg-yellow maru"](テキストリンク)[/btn]

こんな感じ(↓)になるよ。

 

☆【ボタン】 立体的(黄)
[btn class="rich_yellow"](テキストリンク)[/btn]

こんな感じ(↓)になるよ。

 

☆【ボタン】 立体的(ピンク)
[btn class="rich_pink"](テキストリンク)[/btn]

こんな感じ(↓)になるよ。

 

各ボタンは「(テキストリンク)」の部分に、リンクを貼った文字を入れて、使ってね!

 

 

カラム表示

☆【表示】 2カラム
[colwrap]
[col2]カラム1(左)[/col2]
[col2]カラム2(右)[/col2]
[/colwrap]

こんな感じ(↓)になるよ。

カラム1(左側)です。
カラム2(右側)です。

 

(↑)は「カラム1(左)」「カラム2(右)」の部分を、画像アドレス+文字に、変更してみました。文章・広告なども、2カラム表示にできますよ!

 

☆【表示】 3カラム
[colwrap]
[col3]カラム1(左)[/col3]
[col3]カラム2(中央)[/col3]
[col3]カラム3(右)[/col3]
[/colwrap]

こんな感じ(↓)になるよ。

カラム1(左側)です。
カラム2(中央)です。
カラム3(右側)です。

 

(↑)は「カラム1(左)」「カラム2(中央)」「カラム3(右)」の部分を、画像アドレス+文字に、変更してみました。文章・広告なども、3カラム表示にできますよ!

 

 

 当ブログは、デザインを一部カスタマイズしています

コビトブログでは、ショートコードのデザインを、一部カスタマイズしています。(色や文字の変更など)そのため、同じ見た目にならないものがあるので、標準的なサンプルも見てね。

 

おまけ

インポートした中に、僕がよく使っているタグも、入っています。よかったら、色を変えたりして使ってね!

◆【下線】 赤

コビトブログ

◆【太字】 赤

コビトブログ

◇【マーカー】 ピンク

コビトブログ

 

まとめ

今回ダウンロードして頂いたファイルには、制作者である「OPENCAGE(オープンケージ)」さんで案内されているショートコードが、すべて入っています

また今回登録したコードには、項目の前に「◆」「◇」「★」「☆」をつけて、優先順位をつけています。こうすると、よく使うコードから順に並べることができるので、非常に便利です。

ここは登録後、自分好みに変えて使ってね!

 

また、普段の記事作成では使いませんが、「CTA用のショートコード」があります。詳しくは、コチラ(↓)をどうぞ。

STORK(ストーク)で、CTA(Call To Action)を上手に使う方法

2017.04.27

 

STORKユーザーの方は、コチラもみてね
要注意!「STORK」で、不具合の起きるプラグイン・ウィジェット
STORK(ストーク)で、ランディングページ(LP)を設置するべき、3つの理由と具体例
【コピペOK】STORK(ストーク)をカスタマイズ!「第1弾:見出し テンプレート12選」

 

狐火兎
ショートコードを1つ1つ入れるのは、本当に大変なので、ぜひインポートして使ってね!では、また♪

 

好きな生き方を選べるように

かつて社畜だった僕のように
いつか、会社を辞めて、自由に生きるために
まず、月10万をネットで稼ぐ「現実的な方法」を紹介します

ブロガー向き テーマ「STORK(ストーク)」

当ブログも使っている
WordPressテーマ「STORK」です。

14 件のコメント

  • 初めまして、狐火兎 さんのブログの記事をいくつか参考にしてWordpressの設定をしました。6月下旬には芸術や書籍などの基本は自分が訪れたり感じたりした生の情報を大切に配信するサイトを無事開設する事が出来ました。

    また、つい先日Googleアドセンスの認証もされ、狐火兎さんのブログを参考にして広告を設置する事が出来大助かりです。

    立ち上げて間もないので、まだまだ技術的に改修できる所があると感じていますので、自コンテンツの作成と並列して狐火兎さんのブログに更新されているWordpressの技術的な細部へのこだわりについても習得実践できるようにしたいです。

    これからも記事の更新頑張ってください。

    • カズノリさん、コメントありがとうございます!
      僕のブログを参考にして頂き、とても嬉しいです(*’▽’)

      アドセンス合格おめでとうございますね!
      続けていくと、しっかりした収益になっていくので、頑張ってくださいね♪
      また、さきほどブログにお邪魔してきました。僕も美術館好きなので、たのしく記事を読ませて頂きました。

      ぼちぼち更新ですが、お役に立てる記事をアップしていきますね(>ω<*) 今後ともよろしくお願いいたします。

  • はじめまして。
    大変、お世話になっております。
    おかげさまで、昨日、headerにタグを入れ込むのも、無事にできました。
    ありがとうございます。

    このショートタグもお言葉に甘えて全コピさせていただいたのですが、一つ教えてください。
    関連記事を入れるショートタグ、kanren2のほうです。
    このタグは、サムネイルなしで使いたいのですが、なぜかサムネイルありで表示されます。
    サムネイルなしで使う方法を教えてもらえると嬉しいです。
    よろしくお願いします。

    • habitさん、はじめまして!
      コメントありがとうございます。
      僕のブログを参考にして頂き、嬉しいです(*’▽’)

      ご相談頂いたショートタグについてですが、リンクカードは2種類とも「サムネあり」が標準仕様です。
      サムネなしで使いたい場合は、サムネを消す定義をcssに追加する必要があります。
      (検証していないので、必要であればリクエストという形で、伺いたいと思います)

      どうぞよろしくお願いいたします。

      • お返事、ありがとうございます!
        記事を読み直して、あ!そうか!と思いました。
        理解できましたので、大丈夫です。
        これからもよろしくお願いします!

        • コメント確認遅くなりまして、申し訳ありません!
          ご相談頂いた内容が、解消されたようで何よりです(>ω<*) こちらこそ、これからも宜しくお願いいたしますね♪

  • なぜか、公式のがインストールエラーで使えず困っていたら、こちらのブログを見つけ紹介されてたショートコードをインポートさせてもらいました!おかげでかなり助かりました!ありがとうございました!
    ついでに教えてもらい事があるんですが、もしよろしければ教えてほしいです!
    紺色で「まとめ」の文字の回りを塗り潰してますよね?これはどうやってこんな風にするんでしょうか?

    • 龍一さん、コメントありがとうございます!

      お役に立てて良かったです(>ω<*) ショートコード以外にも、文字装飾のクイックタグも入っていたと思うので、お好きにアレンジして使ってくださいね♪ ご質問の「まとめ」文字についてですが、記事内の見出しのことでよかったでしょうか? であれば、実は装飾はしておらず、フォントを変えているのみです。 フォントの変え方については、他の方からご要望も頂いたので、4月に記事にする予定です♪ それまで、少しお待ちいただけると嬉しいです(*'▽')

      • 返事ありがとうございます!
        ブログを始めたばかりでわからないことが多かったので助かります!
        あれは、見出しって言うんですね^^;
        勉強になります!
        為になる記事が他にも書いてるので、ちょくちょく暇なときにに来て勉強させてもらいます!

        • いえいえ!はじめは知らないことだらけで、当たり前ですよ(*’▽’)僕もそうでした♪
          見出しや段落・hタグと、呼んだりします~

          これからも役立つ内容がお届けできるように頑張りますね!
          また気になる事などあれば、いつでもご質問ください♪

  • コメントを残す

    ABOUTこの記事をかいた人

    社畜エンジニアから、2014年に独立、フリーランスに。 「お金のための仕事」が、嫌になりました。 「好きな生き方を選べるように」、ネットで稼ぐ方法をお届けします。 *デザイン・機械・創作物・食べること が好き