Engineer Blog テーマに搭載されているショートコードの一覧と使い方を紹介します。記事に多彩な表現を追加できます。
注釈ボックス（Callout）
4種類の注釈ボックスが使えます。[note], [warning], [tip], [info]
これは ノート です。補足情報や参考情報を伝える時に使います。
これは 警告 です。注意が必要な内容を伝える時に使います。title 属性でタイトルを変更できます。
これは ヒント です。便利なテクニックやおすすめ情報に使います。
これは インフォ です。一般的な情報の強調に使います。
引用ボックス（Quote）
[quote] で出典付きの引用が作成できます。
Stay hungry, stay foolish. ハングリーであれ。愚か者であれ。
タイムライン
[timeline] と [timeline_item] で年表や経歴を表現できます。
プロジェクト開始
チーム結成し、要件定義を開始しました。技術選定も同時に進行。
α版リリース
社内テスターにαバージョンを配布。フィードバック収集を開始。
β版リリース
一般ユーザー向けにβテストを開始。パフォーマンス改善に注力。
正式リリース
全ユーザーへ正式版をリリース。継続的な改善を計画中。
ステップガイド
[steps] と [step] で手順を分かりやすく表現できます。
環境構築
Node.js 18以上をインストールし、プロジェクトをクローンします。
依存パッケージのインストール
npm install を実行して依存パッケージをインストールします。
開発サーバーの起動
npm run dev で開発サーバーを起動します。http://localhost:3000 にアクセスして動作確認してください。
リンクカード
[link_card] でリッチなリンクプレビューを表示できます。
Amazonリンク
[amazon] でAmazon商品カードを表示できます。
バッジ
[badge] でインラインバッジを表示できます。カラーは primary / accent / warning / danger から選択可能です。
NEW 推奨 β版 非推奨
マーカー（ハイライト）
[marker] でテキストにマーカーを引けます。yellow / blue / pink / green が選択できます。
黄色のマーカーで重要な部分を強調できます。青色やピンク、緑色も使えます。
アコーディオン
[accordion] と [accordion_item] で折りたたみコンテンツを作成できます。
Q. ショートコードとは何ですか？
WordPressの機能で、角括弧で囲んだ短いコードを記事に書くと、自動的にHTMLに変換される仕組みです。記事にリッチなコンテンツを簡単に追加できます。
Q. ショートコードはどこで使えますか？
投稿、固定ページ、一部のウィジェットで使用できます。クラシックエディタでもブロックエディタでも利用可能です。
Q. カスタマイズはできますか？
テーマの inc/shortcodes.php を編集することで、新しいショートコードの追加や既存のカスタマイズが可能です。
カラムレイアウト
[columns count="2"] と [column] で多段組みレイアウトが作れます。count は 2〜4 が指定可能です。
左カラム
2カラムレイアウトの左側です。画像やテキストを自由に配置できます。レスポンシブ対応で、モバイルでは1カラムに折りたたまれます。
右カラム
2カラムレイアウトの右側です。比較表示やメリット・デメリットの対比など、様々な用途に活用できます。
まとめ
これらのショートコードを活用して、読みやすく視覚的に豊かな記事を作成しましょう。新しいショートコードの要望があれば、テーマの inc/shortcodes.php に追加できます。