WordPressテーマ「STREETIST」で使えるショートコードを紹介していきます。
ボックス
この中に文章が入ります。
[box type="1"] この中に文章が入ります。 [/box]
この中に文章が入ります。
[box type="2"] この中に文章が入ります。 [/box]
この中に文章が入ります。
[box type="3"] この中に文章が入ります。 [/box]
この中に文章が入ります。
[box type="4"] この中に文章が入ります。 [/box]
この中に文章が入ります。
[box type="5"] この中に文章が入ります。 [/box]
この中に文章が入ります。
[box type="6"] この中に文章が入ります。 [/box]
この中に文章が入ります。
[box type="7"] この中に文章が入ります。 [/box]
この中に文章が入ります。
[box type="8"] この中に文章が入ります。 [/box]
この中に文章が入ります。
[box type="9"] この中に文章が入ります。 [/box]
この中に文章が入ります。
[box type="10"] この中に文章が入ります。 [/box]
この中に文章が入ります。
[box type="11"] この中に文章が入ります。 [/box]
この中に文章が入ります。
[box type="12"] この中に文章が入ります。 [/box]
この中に文章が入ります。
[box type="13"] この中に文章が入ります。 [/box]
タイトル付きのボックス
タイトル
この中に文章が入ります。
[box-label title="タイトル" type="1"] この中に文章が入ります。 [/box-label]
[box-label title="タイトル" type="2"] この中に文章が入ります。 [/box-label]
タイトル
この中に文章が入ります。
[box-label title="タイトル" type="3"] この中に文章が入ります。 [/box-label]
タイトル
この中に文章が入ります。
[box-label title="タイトル" type="4"] この中に文章が入ります。 [/box-label]
タイトル
この中に文章が入ります。
[box-label title="タイトル" type="5"] この中に文章が入ります。 [/box-label]
タイトル
この中に文章が入ります。
[box-label title="タイトル" type="6"] この中に文章が入ります。 [/box-label]
タイトル
この中に文章が入ります。
[box-label title="タイトル" type="7"] この中に文章が入ります。 [/box-label]
タイトル
この中に文章が入ります。
[box-label title="タイトル" type="8"] この中に文章が入ります。 [/box-label]
タイトル
この中に文章が入ります。
[box-label title="タイトル" type="9"] この中に文章が入ります。 [/box-label]
タイトル
この中に文章が入ります。
[box-label title="タイトル" type="10"] この中に文章が入ります。 [/box-label]
内部リンクのブログカード
内部リンクをブログカード化するには、３通りの方法を用意しました。
WordPressテーマ「STREET」にて、ボックスを使う方法を解説します。ボックスを使うには、ビジュアルエディタの「スタイル」から選択してください。ショートコードを使う方法は以下の記事に書いています。注意事項ビ...
[card id="記事ID"]
[card slug="記事のスラッグ"]
[card url="記事のURL"]
ex="no"を入れると、抜粋を非表示にできます。
[card id="記事ID" ex="no"]
[card slug="記事のスラッグ" ex="no"]
[card url="記事のURL" ex="no"]
吹き出し
MENここに会話の中身を書いてください。
[talk name="MEN" img="画像のURL"] ここに会話の中身を書いてください。 [/talk]
ここに会話の中身を書いてください。
MEN[talk name="SHIROMA" img="画像のURL" pos="right"] ここに会話の中身を書いてください。 [/talk]
posの値を省略した場合、画像が左側、吹き出しが右側になります。
開閉ボックス
クリックで開閉できるボックスのショートコードです。
開閉ボックスの中身をここに書いてください。
[toggle text="ネタバレ"] 開閉ボックスの中身をここに書いてください。 [/toggle]
テーブルの横スクロール対応
テーブルを横スクロールできるようにするショートコードです。スマホでの閲覧で便利です。
ブラウザの横幅を狭くして試してみてください。
| サイズ | Sサイズ | Mサイズ | Lサイズ | XLサイズ |
|---|---|---|---|---|
| 価格 | ¥800（税込） | ¥1,000（税込） | ¥1,400（税込） | ¥1,800（税込） |
| おおよその身長 | 〜165cm | 165cm〜170cm | 170cm〜180cm | 180cm〜 |
[table width="800"] <table> <tbody> <tr> <th>サイズ</th> <th>Sサイズ</th> <th>Mサイズ</th> <th>Lサイズ</th> <th>XLサイズ</th> </tr> <tr> <th>価格</th> <td>¥800（税込）</td> <td>¥1,000（税込）</td> <td>¥1,400（税込）</td> <td>¥1,800（税込）</td> </tr> <tr> <th>おおよその身長</th> <td>〜165cm</td> <td>165cm〜170cm</td> <td>170cm〜180cm</td> <td>180cm〜</td> </tr> </tbody> </table> [/table]
800というのはテーブルの最小幅で、800pxよりもコンテンツ幅が狭くなった場合に横スクロールするようになります。
この数値を変更してテーブルの最小幅を調整してください。
スマホ・タブレットのみで表示
[mobile] この中のコンテンツはスマホとタブレットのみで表示されます。 [/mobile]
PCのみで表示
[pc] この中のコンテンツはスマホとタブレットのみで表示されます。 [/pc]
Q&A
質問形式のボックスを表示できます。
クレジットカードは使えますか？
クレジットカードがご利用いただけます。
[faq-q] クレジットカードは使えますか？ [/faq-q]
[faq-a] クレジットカードがご利用いただけます。 [/faq-a]
YouTube動画の軽量化（画像化）
YouTube動画の埋め込みを画像化して、サイトの読み込みを速くします。
クリック・タップすると動画が埋め込まれます。
[youtube id="動画ID"]
例：[youtube id="zNl00mOSnJI"]
動画IDは、YouTube動画のURLにある、「v=」の後の文字列です。
星で評価
レビュー記事などで、評価点を星で表示できます。
0〜5の点数（小数点もOK）で評価してください。
[rating star="4.5"]
[rating star="3"]
