前編・中編に続いて、後編ではテキスト装飾・リスト・段落デザイン・テーブル・レイアウト制御・ボタン・共通コンテンツ機能を紹介します。
SYN Block以外にも、Synには「地味だけど便利」な機能がたくさんあります。
- STEP 1｜レビュー編
テーマ全体の導入、CocoonからSynへ移行した理由、カラーセット設計について書いています。
前編を読む → - STEP 2｜SYN Block編
独自ブロック7種類の実例と、学習記事での使い分けを紹介します。
中編を読む → - STEP 3｜装飾・運用編 》今ここ《
テキスト装飾、リスト、表、共通コンテンツなど、知識を届けるための細かな運用を整理します。
テキスト装飾──Syn独自の書式機能
マーカー（4色）
書式ツールから選べるマーカーは4色。それぞれにクラス名が割り当てられています。
manpuqu.comでは前編で説明したカラーセット設計と連動させて使っています。マーカーの色も「意味を持った色」として使うと、記事全体に統一感が生まれます。
きいろマーカー（is-yellow） オレンジマーカー（is-orange） みずいろマーカー（is-sky） きみどりマーカー（is-green）
たとえばG検定記事では、試験でよく問われる用語にオレンジ、10秒で説明できる定義にみずいろ、といった形で使い分けています。
インラインアイコン・文字色
テキストの途中にアイコンを挿入できます。書式ツールのアイコン一覧から選ぶか、SVGコードを直接貼り付ける方法もあります。
文字色もカラーセットと連動させられます。試験重要のポイントを赤で強調したり、10秒説明の箇所を青にしたり。マーカーとは異なる使い方ができます。
リスト拡張──4種類のデザイン
WordPressの標準リストブロックに、Synが独自のデザインを4種類追加しています。カラーセットとの組み合わせも可能です。
アイコンリスト：
- 選択できるアイコン
-
ドットリスト：
- 教師あり学習（Supervised Learning）
- 教師なし学習（Unsupervised Learning）
- 強化学習（Reinforcement Learning）
丸番号リスト：
チェックリスト的な使い方をしたいときはアイコンリスト、手順の要点整理には丸番号リスト、と使い分けています。
段落デザイン
通常の段落ブロックに、Synが2種類のデザインを追加しています。
背景色付き段落
右パネルの「色」→「背景」から背景色を設定できます。カラーセットの薄い色（ライト色）を使うと、強調しすぎず読みやすい囲みになります。
【構造理解】機械学習は「データからパターンを学ぶ」アプローチです。人間がルールを明示的にプログラムするのではなく、データそのものからルールを発見させます。
【試験重要】ディープラーニングは機械学習の一手法です。「AIの中に機械学習があり、機械学習の中にディープラーニングがある」という包含関係を押さえておきましょう。
三角のあしらい
右パネルの「スタイル」から「三角のあしらい」を選ぶと、段落ブロックの左上に三角のアクセントが付きます。カラーセットと組み合わせると、ブロック全体に色がつきます。
【10秒説明】強化学習とは、エージェントが環境と相互作用しながら「報酬を最大化する行動」を試行錯誤で学ぶ手法です。
【間違えやすい】「学習率が高い＝良い」ではありません。学習率が高すぎると最適解を飛び越えてしまい、収束しなくなります。
テーブル（横スクロール対応）
WordPressの標準テーブルブロックに、Synが「横スクロール」機能を追加しています。右パネルからONにするだけで、スマホでも表がはみ出さず横スクロールで見られるようになります。
G検定では「似た用語の比較」が頻出なので、比較表との相性が抜群です。
| 手法 | 学習データ | 目的 | 代表アルゴリズム |
|---|---|---|---|
| 教師あり学習 | ラベルあり | 分類・回帰 | 線形回帰、SVM、決定木 |
| 教師なし学習 | ラベルなし | クラスタリング・次元削減 | k-means、主成分分析（PCA） |
| 強化学習 | 報酬信号 | 行動の最適化 | Q学習、DQN |
レイアウト制御
デバイス表示切り替え
ブロックごとに「すべて」「PCのみ」「スマホのみ」「非表示」の4種類を、書式ツールから設定できます。特別なCSSを書かなくても、デバイスに応じた表示の出し分けがエディター上で完結します。
4つの設定と使い分け
- すべて
-
PC・スマホどちらでも表示。デフォルトの状態です。
- PCのみ
-
スマホでは非表示になります。横並びの比較図や、幅が必要なレイアウトに。
- スマホのみ
-
PCでは非表示になります。スマホ向けに縦積みのシンプルなリストを別途用意するときに使います。
- 非表示
-
全デバイスで非表示。ただし後述の注意点あり。
実際の使い方例
たとえばG検定の比較表を見せたいとき、PCでは横並びのテーブルを表示し、スマホでは同じ内容を縦積みのリストで見せる、という構成が取れます。同じ情報を2種類のブロックで用意して、それぞれに「PCのみ」「スマホのみ」を設定するだけです。
ブロック単位の余白調整
Synの余白設計は「上マージンで統一」です。書式ツールから上マージンをブロック単位で調整できます。
「このブロックの前だけ少し詰めたい」「ここは広めに空けたい」という細かい調整が、CSSを書かずにエディター上でできます。地味ですが、記事の読みやすさに直結する機能です。
ボタンリンク
WordPressのボタンブロックに、Synのメインカラーと角丸設定が自動で反映されます。カスタマイザーで設定したサイトカラーがそのままボタンの色になるので、サイト全体の統一感が保てます。
記事末の誘導や、関連記事へのCTA（行動喚起）として使いやすいブロックです。
共通コンテンツ機能がかなり便利だった
これ、地味に一番気に入っている機能かもしれません。
「共通コンテンツ」とは、一度作ったブロックの組み合わせを登録しておき、複数の記事からショートコード一行で呼び出せる機能です。WordPressの「再利用ブロック」に近い発想ですが、Synではより管理しやすい形で実装されています。
使い方の流れ
- WP管理画面から「共通コンテンツ」を開く
Synをインストールすると、管理画面のサイドメニューに「共通コンテンツ」が追加されます。
- 新規追加で内容を作る
通常の記事と同じようにブロックを組んで保存します。アイコンボックス・ブログカード・ステップブロックなど、Synのブロックもそのまま使えます。
- 投稿IDを確認してショートコードを貼る
保存後に表示される投稿IDを使って、呼び出したい記事に
を貼るだけ。以降は何も変えなくていいです。
一番の強みは一括更新です。共通コンテンツ側を直せば、そのショートコードを貼っている全記事に即座に反映されます。「シリーズに新記事を追加したので一覧を更新したい」という場面で、この設計の価値が実感できます。記事が増えるほど、効いてきます。
まとめ──Synを触っていたら、記事の作り方が変わってきた
Synに移行して数週間。正直に言うと、まだ全部は使いこなせていません。
ふきだしのキャラクター登録もこれから。共通コンテンツの整備もこれから。ブロックの使い分けも、まだ試行錯誤しています。
でも、移行してよかったとはっきり思っています。
使っていて感じるのは、「ブロックを積む」というSynの感覚が、自分の記事の書き方と妙に噛み合うということでした。
ステップで流れを整理する。QAで引っかけポイントを分ける。アイコンボックスで「ここは重要」と役割を分ける。
そうやって記事を組んでいくと、自分の頭の中も整理されるし、あとからNotebookLMに渡したときも流れが崩れにくい。
Synは、そのあたりをコードを書かずに自然にやらせてくれる感じがあります。
欠点も正直に書いておきます。
- HTMLクラス名がマニュアル非公開
-
CSSでカスタマイズしたい場合は、自分でDevToolsを使ってクラス名を調べる必要があります。これはノーコード前提の設計思想の裏返しでもあります。
- 賢威からの移行コスト
-
クラス名の体系が異なるため、スタイルの引き継ぎはできません。既存記事のカスタムCSSがある場合は修正が必要です。
- 情報がまだ少ない
-
2025年リリースの新しいテーマなので、ネット上の事例や解説記事はまだ多くありません。困ったときは公式マニュアルかDevToolsが頼りです。
それでも、今のmanpuqu.comの方向性──AI学習・G検定・WordPress運営を、文系シニア目線で整理する知識ブログ──には、Synがよく合っていると感じています。
今後の展望をざっくり書くと、こんな感じです。
- UIパターン化（進行中）
ステップ・QA・アイコンボックスの使い方を記事ごとに固定し、読者が「色と構造で意味を読める」状態を作る。
- 共通コンテンツの整備（これから）
シリーズ記事の導線・読み方の説明・音声解説への案内などを共通化。記事の入口と出口を統一する。
- manpuqu式学習システムへ（目標）
記事の集合ではなく「manpuqu方式で学ぶ体験」を設計する。G検定・AI・土木AIの記事が同じUI思想でつながっている状態。
「テーマを変えました」で終わるつもりは、最初からありませんでした。
Synというテーマを使いながら、「知識をどう届けるか」を少しずつ設計しています。その過程をこれからも記録していきます。
