ウィジェット機能を使ってサイドバーを自由にデザインできるプラグイン「Black Studio TinyMCE Widget」の使い方

「サイドバーをもっと自由にデザインしたいけど、HTMLやCSSの知識がない…」「ブロックウィジェットが使いにくくて、以前のクラシックエディタのように編集したい…」そんな悩みを抱えていませんか？
結論から言うと、「Black Studio TinyMCE Widget」というプラグインを使えば、HTMLの知識がなくてもサイドバーを自由自在にデザインできます。
2026年現在、WordPressはブロックベースのウィジェットが標準になりましたが、クラシックな操作感で直感的に編集したい方にはこのプラグインが依然として人気です。
この記事では、インストール方法から具体的なカスタマイズ手順、さらにはAIツールを活用した効率的なデザインのコツまで、初心者にもわかりやすく解説していきます。

Black Studio TinyMCE Widgetとは？2026年でも使える理由

プラグインの基本機能と特徴

Black Studio TinyMCE Widgetは、WordPressのウィジェットエリアでビジュアルエディタ（TinyMCE）を使えるようにするプラグインです。
通常、ウィジェットで自由なレイアウトを作ろうとすると、「カスタムHTML」ウィジェットにHTMLコードを直接書く必要がありますよね。
しかしこのプラグインを導入すれば、投稿画面と同じビジュアルエディタでサイドバーを編集できるようになります。
画像の挿入、テキストの装飾、リンクの設定など、記事を書くのと同じ感覚でサイドバーをデザインできるのが最大の魅力です。

2026年のWordPressとの互換性

2026年現在、WordPressはバージョン6.7以降が主流となり、ブロックベースのウィジェットエディタが標準搭載されています。
「それならこのプラグインは不要では？」と思うかもしれません。
しかし、ブロックウィジェットは操作が複雑に感じる方も多く、クラシックな操作感を好むユーザーから根強い支持があります。
特に以下のようなケースでは、Black Studio TinyMCE Widgetが活躍します。

• クラシックエディタ（Classic Editor）を使い続けているサイト
• ブロックウィジェットの操作に慣れない初心者の方
• 既存サイトのサイドバーをシンプルに管理したい方

なお、プラグインは2026年時点でもWordPress最新版との互換性が維持されており、安心して使用できます。

Black Studio TinyMCE Widgetのインストール方法

プラグインの検索とインストール手順

インストールはとても簡単です。
以下の手順で進めてみてください。

1. WordPress管理画面の左メニューから「プラグイン」→「新規プラグインを追加」をクリックします。
2. 右上の検索窓に「Black Studio TinyMCE Widget」と入力します。
3. 検索結果に表示されたプラグインの「今すぐインストール」ボタンをクリックします。
4. インストールが完了したら、続けて「有効化」ボタンをクリックします。

これだけでインストールは完了です。
特別な設定画面はなく、有効化した瞬間からウィジェットエリアで使えるようになります。

インストール後の確認ポイント

インストールが正しく完了しているか、念のため確認しておきましょう。

1. 「プラグイン」→「インストール済みプラグイン」を開きます。
2. 一覧の中に「Black Studio TinyMCE Widget」が表示され、「有効」になっていることを確認します。
3. 次に「外観」→「ウィジェット」を開き、利用可能なウィジェット一覧に「ビジュアルエディター」が追加されていればOKです。

もし表示されない場合は、プラグインが無効化されていないか、またはWordPressのキャッシュをクリアしてページを再読み込みしてみてください。

Black Studio TinyMCE Widgetの基本的な使い方

ウィジェットの追加と配置

プラグインを有効化したら、実際にサイドバーにウィジェットを追加してみましょう。

1. WordPress管理画面から「外観」→「ウィジェット」を開きます。
2. 利用可能なウィジェットの中から「ビジュアルエディター」を探します。
3. 「ビジュアルエディター」をドラッグ＆ドロップで、サイドバーなど配置したいウィジェットエリアに移動させます。
4. ウィジェットが展開され、おなじみのビジュアルエディタが表示されます。

ブロックウィジェットを使用している場合は、ウィジェットエリアで「＋」ボタンから「レガシーウィジェット」→「ビジュアルエディター」を選択する方法でも追加できます。

テキストの入力と装飾

ビジュアルエディタが表示されたら、あとは投稿画面と同じ感覚で編集するだけです。

たとえば、サイドバーに「プロフィール紹介」を作りたい場合は以下のように操作します。

1. タイトル欄に「プロフィール」と入力します。
2. エディタ内に自己紹介文を入力します。
3. 太字にしたい部分を選択して「B」ボタンをクリックします。
4. 文字色を変えたい場合は「テキスト色」ボタンから好みの色を選びます。
5. 最後に「保存」ボタンをクリックして完了です。

リアルタイムでプレビューが反映されるので、完成イメージを確認しながら編集できるのが嬉しいポイントです。

画像の挿入方法

サイドバーに画像を入れたい場合も簡単です。

1. エディタ上部の「メディアを追加」ボタンをクリックします。
2. メディアライブラリから画像を選択するか、新しくアップロードします。
3. 画像サイズや配置（左寄せ・中央・右寄せ）を設定します。
4. 「投稿に挿入」をクリックすると、エディタ内に画像が表示されます。

バナー画像やプロフィール画像など、視覚的に訴求力のあるサイドバーを簡単に作れます。
画像にリンクを設定すれば、おすすめ記事やアフィリエイトリンクへの誘導にも活用できますよ。

サイドバーデザインの実践テクニック

おすすめ記事リンクの作成

サイドバーにおすすめ記事の一覧を作ると、回遊率アップにつながります。
以下のような構成がおすすめです。

1. ビジュアルエディターウィジェットを追加し、タイトルに「おすすめ記事」と入力します。
2. 記事タイトルをテキストで入力し、それぞれにリンクを設定します。
3. 各記事の横にサムネイル画像を配置すると、クリック率がさらに上がります。

ポイントは、3〜5記事に絞ることです。
多すぎると読者が迷ってしまい、逆にクリック率が下がってしまいます。

CTAボックス（行動喚起）の設置

メルマガ登録やLINE登録など、読者にアクションを促すCTA（Call To Action）ボックスもビジュアルエディタで簡単に作れます。

効果的なCTAボックスの構成例を紹介します。

HTMLモードに切り替えれば、ボタン風のリンクも作成できます。
しかしHTMLがわからない方は、テキストリンクに太字＋色変更を適用するだけでも十分目立ちますよ。

HTMLモードの活用

ビジュアルエディタだけでなく、「テキスト」タブに切り替えてHTMLを直接編集することも可能です。
たとえば、背景色付きのボックスやボタンデザインなど、より高度なカスタマイズをしたい場合に便利です。

ChatGPTやClaudeなどのAIツールに「サイドバー用のCTAボックスのHTMLを書いて」と依頼すれば、HTMLが書けなくてもオリジナルデザインのコードを手に入れることができます。
生成されたHTMLをテキストモードに貼り付けるだけで、プロっぽいサイドバーが完成します。

AIツールを活用したサイドバーデザイン術

ChatGPT・Claudeでデザインコードを生成する

2026年はAIツールを活用したWebデザインがもはや当たり前になっています。
Black Studio TinyMCE Widgetと組み合わせることで、デザインの幅が大きく広がります。

たとえば、以下のようなプロンプトをChatGPTやClaudeに入力してみてください。

プロンプト例:
「WordPressのサイドバーに設置する、LINE登録を促すCTAボックスのHTMLを作ってください。
背景色は薄い緑、角丸デザインで、ボタンは緑色。
横幅300px以内に収まるようにしてください。」

AIが生成したHTMLコードを、ウィジェットのテキストモードにそのまま貼り付けるだけです。
HTMLの知識ゼロでも、AIに指示するだけでプロ級のデザインが実現できる時代になりました。

AIで作ったデザインの調整方法

AIが生成したコードをそのまま使うと、サイト全体のデザインと合わない場合があります。
そんなときは、以下のように追加で指示を出しましょう。

• 「色をもう少し濃くして」
• 「フォントサイズを14pxに変えて」
• 「余白をもう少し広くして」

AIとの会話形式でデザインを微調整できるので、コーディングスキルがなくても安心です。
完成したら、実際のサイトでプレビューを確認し、スマホ表示でも崩れていないかチェックすることを忘れないでくださいね。

デザインアイデアをAIに提案してもらう

「そもそもサイドバーに何を置けばいいかわからない」という方も多いですよね。
そんなときもAIが頼りになります。

プロンプト例:
「WordPressのブログ（テーマ: Web集客・SEO）のサイドバーに配置すべきウィジェットを、優先度順に5つ提案してください。」

こうした構成の相談からデザインの実装まで、AIツールをフル活用すれば、初心者でもサイト全体のクオリティを一段上げることができます。

まとめ

今回は、WordPressのサイドバーを自由にデザインできるプラグイン「Black Studio TinyMCE Widget」の使い方を解説しました。
最後に、要点を振り返っておきましょう。

• Black Studio TinyMCE Widgetを使えば、ビジュアルエディタでサイドバーを直感的に編集できる
• 2026年現在もWordPress最新版と互換性があり、クラシックな操作感を好む方に最適
• インストールは「プラグイン新規追加」から検索して有効化するだけ
• テキスト装飾・画像挿入・リンク設定が投稿画面と同じ感覚で可能
• おすすめ記事リンクやCTAボックスなど、実践的なサイドバーデザインが簡単に作れる
• ChatGPTやClaudeなどのAIツールを組み合わせれば、HTML不要でプロ級デザインも実現可能

サイドバーはブログの「顔」とも言える部分です。
ぜひBlack Studio TinyMCE WidgetとAIツールを活用して、あなただけのオリジナルサイドバーを作ってみてください。