テンプレート【k-add_magazine】の使い方

本記事は、新しいブログ記事テンプレート（k-add_article）で使用できる各デザインパーツの表示確認用サンプル兼、実践運用ガイドです。

標準のリッチテキストエディタの操作のみで、見出し、画像、リスト、テーブルなどがどのように洗練されたマガジンデザインへと自動整形されるかを実際にご確認いただけます。

1. 見出しデザインとテキスト装飾

ブログ記事テンプレートでは、特別なクラスをつけなくても通常の段落や見出しタグが自動でラグジュアリーなINTENSEトーンに最適化されます。

見出し3（H3）：セクション内の中見出し

見出し3は、左側にブランドレッドのアクセントバーと、下部にアクティブラインが伸びるデザインです。H2と同様に、記事冒頭および右サイドバーの目次（TOC）に自動で取得されます。

見出し4（H4）：小見出し・ポイント整理

見出し4には、先頭にスタイリッシュな菱形（ダイヤモンド）アイコンが自動表示されます。目次には含まれず、本文内の細かい要点を整理するのに適しています。

重要なキーワードには太字を使用します。たとえば「毛髪強度を140%回復させる最新テクノロジー」や「サロン専売品の店販リピート率向上」のように、文字を選択してエディタの「B（太字）」を押すだけで、上品な赤系透過マーカーが自動で適用されます。

テキストリンクは、ブランドカラーで下線が表示されます：
INTENSE SALON 公式オンラインストアへ移動する

2. 箇条書きと番号付きリスト

サロンワークの手順や商品のメリットなどを整理するリストです。ブラウザ標準の黒丸ではなく、洗練されたカスタムビュレットが適用されます。

• 最先端の毛髪補修サイエンス：ダメージで損傷した内部タンパク質を均一に補修。
• 日本人の髪質特化アプローチ：四季の湿度変化や紫外線ダメージに強い髪質へ。
• ホームケア連動設計：サロントリートメントの持続力を毎日のケアで最長3ヶ月キープ。

1. ステップ1（カウンセリング）：マイクロスコープで頭皮環境と毛髪ダメージレベルを正確に診断。
2. ステップ2（前処理＆塗布）：ナノスチーマーを使用しながら、薬剤を毛髪深部まで浸透浸透。
3. ステップ3（コーミング・なめし）：丁寧なハンドプレスでキューティクルを整え、ツヤと手触りを定着。

3. ワンポイント解説・コラムカード（引用）

エディタの「引用（“）」ボタンを押すだけで、単なる引用にとどまらず、スタイリストからのアドバイスや注意事項を伝える上質なカード枠に変換されます。

【スタイリストからの提案ワンポイント】

お客様の現状の髪の悩みが「乾燥」と「頭皮トラブル」のように複数ある場合は、シャンプーとトリートメントで異なるラインを組み合わせるクロス提案が非常に効果的です。パーソナルな処方感が顧客満足度を高めます。

4. 画像配置とキャプション（1枚 ＆ 2枚並び）

画像は中央揃えで自動配置され、繊細な角丸とシャドウが付与されます。画像の直下に「イタリック（斜体/em）」でテキストを配置すると、自動的に小さめのグレー中央キャプションになります。

▲ 画像直下の斜体テキストは自動的に美しいキャプションとして整流化されます

2枚並びレイアウト（ビフォーアフター用）

以下のHTMLブロックを使用すると、PCでは横2列、スマホでは1列に美しくスタックする比較レイアウトが作成できます。

▲ Before: 乾燥とカラーダメージによる広がり

▲ After: 酸熱トリートメント施術後のツヤとまとまり

5. YouTube動画のレスポンシブ埋め込み

YouTubeの「共有」>「埋め込み」から取得した通常のiframeタグを貼り付けるだけで、スマートフォンでも画面突き抜けを起こさず、縦横比16:9で綺麗にレスポンシブ表示されます。

▲ サロンワーク技術解説動画や製品プロモーション動画の埋め込み例

6. スマホ横スクロール対応テーブル（比較表）

画面幅の狭いスマートフォンでも閲覧しやすいよう、横スクロールに対応したテーブルスタイルです。ダークスレートのヘッダーと交互のストライプ背景が自動適用されます。

7. アクション誘導（洗練されたCTAボタン）

記事を読み終えた読者を、商品購入ページやサロン導入のお問い合わせフォームへスムーズに誘導するためのコンバージョンボタンです。

サロン導入のご相談・お見積りはこちら

まとめ

このように、本テンプレートでは通常のリッチテキストエディタの入力とシンプルなHTMLスニペットを組み合わせるだけで、プロフェッショナルで洗練されたメディア記事をスピーディーに量産することができます。