ブログ記事パーツ・使用ショートコードHow toまとめ

Writer：koga　更新日：2025/05/23

ブログ記事内で使用するパーツ、ショートコードの使用方法についてまとめます。 記事のレイアウトやパッと見た感じの文字量や画像の有無などからも、読者に一瞬でこれ以上読みにくいと判断されせっかく書いた記事も離脱に繋がりやすい場合もあり、仕様頻度の高いパーツからでもなるべく記事のトンマナを揃えていきたいので、こちらの内容を参考に記事作成をよろしくお願いします。 今後追加したパーツについては、こちらの記事に随時追記していきます。 記事に使用したい他のパーツがある場合は、ご相談ください。    

1、投稿テンプレート

共通のスタイルが当たるように、まず投稿テンプレートを選択します。 記事の編集画面右側の各メニューにある「投稿の属性」から「コラムテンプレート」を選択してください。  

2、カテゴリーの選択

投稿者の名前と、投稿内容に該当する項目を選択します。 投稿内容に該当する項目は下記の4つから選択してください。  

• ・how to講座
• ・デザイン情報
• ・会社紹介
• ・雑記

 

3、タグの追加

記事の内容に関連するタグを追加してください。自由に追加可能です。

タグの例

• ・採用
• ・サービスプロデューサー
• ・デザイン
• ・JavaScript

   

4、見出し

記事内の見出しについては、SEOの観点からショートコードのものは使用せず、クラシックエディタの項目から選択してください。 （ショートコードだと自動的に<p>タグに囲まれてしまう為） デフォルトで「段落」（本文テキスト）と表示されているプルダウンから選択をお願いします。 「見出し１」に関しては、すでに記事タイトルに<h1>タグが使用されている為、使用せず 「見出し２」から使用 し要素が深くなる毎に若い番号順に使用してください。 ※見出し5以降の共通スタイルについては今後随時追加作成していきます。 〜〜以下、各見出しの詳細〜〜

h2/見出し2 : 章タイトル

章タイトルをつける場合に使用してください。 <h2>タグにid="title"で任意のidを追加し、目次の各リンクにidに記載したものと同じ名称で<a href="#title">のように記載するとページ内リンクでその指定した要素まで飛ぶことができます。 （エディタをビジュアルタブからテキストタブに変更することでコードを直接変更できます。目次のリンクはショートコード挿入時に書き換え可能です。）

h3/見出し3 : 小見出し１

h2/見出し2配下の小見出し１をつける場合に使用してください。 h2/見出し2と同様の挿入方法です。

h4/見出し4 : 小見出し2

h2/見出し2・h3/見出し3配下の小見出し2をつける場合に使用してください。 h2/見出し2・h3/見出し3と同様の挿入方法です。    

5、ショートコード基本の使い方

ショートコードを使うことでテキスト以外のパーツがスタイルの当たった状態で、共通で使用することができます。

1. 「メディアを追加」ボタン隣の「ショートコードを挿入」ボタンを押す
2. 使用したいショートコードを選択
3. あらかじめこちらでパーツのプリセットを設定しているので該当のプリセットを選択
4. 「コンテンツ」の入力フォームで該当テキストを変更（「ライブプレビュー」で実際の見た目の確認ができます）
5. 「ショートコードを挿入」ボタンで本文に挿入

ショートコード挿入時の注意点

   

6、ショートコードのパーツ

現在スタイルを準備しているショートコードのパーツの使用例と詳細設定についてまとめます。 こちらから各パーツをご確認ください。

スポイラー

目次

ページ内リンク付きで目次を作成できます。 アコーディオン式で、最初は開いた状態で設定しています。 ページ内リンクと、表示するテキスト部分のみ「コンテンツ」フォームで変更して挿入してください。 ページ内リンク先の要素にも同じ名称（英数字）をid属性に追加が必要です。  

リスト

check_list

check_iconのリスト表示です。 プリセットのcheck_listを選択してください。こちらもテキスト部分のみ「コンテンツ」フォームで変更して挿入してください。 内容によってアイコンを変更したい場合は、アイコンピッカーから任意のアイコンで挿入していただいても構いませんが、アイコンカラーは基本的に変更せず使用してください。  

参照元リンク

他サイトの文献や画像などを使用する際に参考元のリンクを表示するパーツです。 参考元のサイトページ名と表示URL、<a href="">タグ内のURLのみ変更し使用してください。  

投稿

過去の投稿1件

記事中に過去の投稿リンクを表示したい場合に使用してください。プリセット名は「過去の投稿1件」です。 アイキャッチ画像、記事タイトル、投稿日が表示されます。 このプリセットは、任意の記事を指定する必要がある為、設定フォームを変更してもらう必要があります。

1. 「投稿ID」：任意の投稿を指定できます。IDの確認は以下の画像のように確認できます。 ※stg環境と本番環境ではIDは違うのでそれぞれで設定が必要です。 ( , )で複数可。またページあたりの投稿数も変更できます。
2. 「条件」：記事のカテゴリーを選択してください。自分の過去の記事の場合は、自分の名前になるかと思います。
3. 「投稿者」：こちらも２同様に、投稿者名を変更してください。
4. 「ライブプレビュー」にて、挿入したい記事リンクが表示確認できれば記事内に挿入。

 

ハイライト

強調テキスト

テキストテキスト 強調表示するテキスト テキストテキスト 記事内でテキストを強調したいときに使用してください。 プリセットは「強調テキスト」です。 「コンテンツ」フォームでテキストの変更ができます。