STORKのショートコードの使い方




こんにちは、Naya☆Logです♪

今回は、今人気のテーマSTORKのショートコードの使い方に関して書こうと思います。

STORKはそのシンプルなデザインや豊富なレイアウトが非常に魅力的ですが、ショートコードの豊富さも魅力の一つなんです。

是非ともSTORKのショートコードを使いこなし、より見やすくスッキリした読みやすい記事を作れるようになりましょう^ ^

記事中に関連記事のリンクを画像付きで表示

記事内に表示させたい記事IDを入力するだけで、キレイなリンクがつくれます。

単一の場合:

MacでSSH接続の設定をする

2017.10.18

複数の場合:

【大阪でカメラマン探している方へ】プロフ写真、家族写真、その他諸々、¥1,000-で撮影します!

2017.08.27

要素の高さ揃えには「jquery.matchHeight.js」

2017.08.21

ラベル無し(※ストーク追加機能)

【一眼レフ初心者向け】一眼レフカメラの撮影モードについて

2017.08.11

【一眼レフ初心者向け】F値(絞り値)・シャッタースピード・ISOの設定方法

2017.08.10

単一の場合の書き方

[kanren postid=“301”]

複数の場合の書き方

[kanren postid="301,288”]

ラベル無し(ストーク追加機能)の書き方

[kanren2 postid=“57,59”]
※こちらの関連記事の表示機能は、固定ページではご利用いただけません。また、外部のサイトではご利用いただけませんのでご注意下さい。

補足説明

文書の下などに補足としてコメントをいれることができます。
これ意外とよく使う!!

補足説明をいれる
少し小さなフォントで少し目立つような補足説明を追加することができます。

書き方

[aside type="normal"] 補足説明をいれる
少し小さなフォントで少し目立つような補足説明を追加することができます。 [/aside]

注意説明

文書の下などに補足として注意書きをいれることができます。
これ意外とよく使う!!

注意説明をいれる
少し小さなフォントでかなり目立つ感じで注意説明を追加することができます。

書き方

[aside type="warning"] 注意説明をいれる
少し小さなフォントでかなり目立つ感じで注意説明を追加することができます。 [/aside]

シンプルな枠

目立たせるほどでもないけど、シンプルに差別化したい場合に使える!シンプルな枠。

シンプルな枠で囲む
少し小さなフォントでしれっと目立つ感じで補足説明を追加することができます。

書き方

[aside type="boader"] シンプルな枠で囲む
少し小さなフォントでしれっと目立つ感じで補足説明を追加することができます。
[/aside]

吹き出し機能

Naya☆Log
ビジュアルエディタ内でショートコードで吹き出しをつくることができます。

書き方

[voice icon="http://nayariku.com/blog/wp-content/uploads/2017/08/accordion-01.png" name="Naya☆Log" type="l"]ビジュアルエディタ内でショートコードで吹き出しをつくることができます。[/voice]
Naya☆Log
アイコンは左右に配置することができます。

書き方

[voice icon="http://nayariku.com/blog/wp-content/uploads/2017/08/accordion-01.png" name="Naya☆Log" type="r"]アイコンは左右に配置することができます。[/voice]
Naya☆Log
もちろん通常通りリンクとかも貼れるし、リスト形式にすることもできます。

リスト1
リスト2
リスト3

簡単です。

書き方

[voice icon="http://nayariku.com/blog/wp-content/uploads/2017/08/accordion-01.png" name="Naya☆Log" type="l"] もちろん通常通りリンクとかも貼れるし、リスト形式にすることもできます。

リスト1
リスト2
リスト3

簡単です。[/voice]

※サンプルコードでは表現できていませんが、実際はビジュアルエディタでリストタグを作成できます。

Naya☆Log
Facebook風のデザインにすることもできますし。

書き方

[voice icon="http://nayariku.com/blog/wp-content/uploads/2017/08/accordion-01.png" name="Naya☆Log" type="l fb"]Facebook風のデザインにすることもできますし。[/voice]
Naya☆Log
LINE風のデザインにすることもできますね。

書き方

[voice icon="http://nayariku.com/blog/wp-content/uploads/2017/08/accordion-01.png" name="Naya☆Log" type="l line"]LINE風のデザインにすることもできますね。[/voice]

まとめ

以上は、STORKの有名どころ(よく使う)のショートコードです^ ^

ここで紹介したものだけでも使いこなせば、かなり記事自体が読みやすいものとなります。

基本的にはコピペで使えるものが多いので、是非是非使ってみてくださ〜〜ーい!!




ABOUTこの記事をかいた人

福岡出身大阪在住のウェブデザイナー。トランク☆ラボというデザインコミュニティを運営していて、そこで制作兼ディレクターもしたりしています。 新卒から5年間独立したいとひたすら思いながら会社員をしていましたが、2017.9~ようやく完全フリーランスデビュー!お仕事ください・・・。趣味は、筋トレとカメラとお酒。