yurufuwatty.com

【WordPressプラグイン】Black Studio TinyMCE Widgetの使い方

2019/10/06
 
Black Studio TinyMCE Widget
この記事を書いている人 - WRITER -
ゆる~くふわっと気になったニュース、好きな趣味なんかをブログで書いたりします。

今回は「ウェジット」(サイドバーやフッター、ヘッダー等)

自由にカスタマイズでき、ブログの見やすさはモチロン、オススメ記事などのサイト内誘導にも最適な

プラグインである「Black Studio TinyMCE Widget」についてインストール方法~使い方までまとめています。

Black Studio TinyMCE Widgetとは?

Black Studio TinyMCE Widget

「Black Studio TinyMCE Widget」はウィジェットをビジュアルエディタで簡単に操作できるプラグインになります。

ウィジェットはビジュアルエディターを使えますが、初期設定のままだとほんの一部のエディター機能しか使えません。

しかし、プラグインを使えばブログ記事を書くのと同じように、ウィジェットで文章や画像を挿入できるようになります。

「Black Studio TinyMCE Widget」の特徴
  • ウィジェットの中でビジュアルエディタを利用できる。
  • ビジュアルエディタからテキストエディタ(HTMLモード)に切り替えることができる。
  • ビジュアルエディタに画像やリンクを挿入できる。
  • ウィジェットに登録したコンテンツの更新がやりやすくなる。

つまり、「ウェジット」(サイドバーやフッター、ヘッダー等)に「プロフィール」や「画像」「広告」等を自由に載せカスタマイズすることが可能になります。

 

Black Studio TinyMCE Widgetインストール

まずは、自分のWordPress管理画面から「Black Studio TinyMCE Widget」をインストールしましょう。

プラグインから新規追加

ゆるふわ

ご自身のWordPress管理画面の左側のメニューで「プラグイン」から「新規追加」をクリック。

「Black Studio TinyMCE Widget」を検索

Black Studio TinyMCE Widget

  • 「新規追加」をクリックするとプラグイン検索画面になるので右側の検索窓に「Black Studio TinyMCE Widget」と検索します。
  • 検索すると画像のように「Black Studio TinyMCE Widget」が出てきますので「今すぐインストール」をクリック
  • 「今すぐインストール」をクリックすると「有効化」に変わるのでこちらもクリック

これで「Black Studio TinyMCE Widget」のインストールは完了しましたので設定方法について書いていきます。

 

Black Studio TinyMCE Widget設定方法

「ウェジット」を選択

Black Studio TinyMCE Widget

 

インストール後、WordPress管理画面の左側のメニューの「外観」から「ウェジット」をクリック

自分用にカスタマイズ

Black Studio TinyMCE Widget

「ウェジット」をクリックした後、上の画像のように表示されるかと思います。

このように表示されたら左の緑の枠(利用できるウェジット)から自分がブログのウェジット上に載せたいものを右側の緑の枠の項目部分に持っていきます。

 

例えば、「Google翻訳」を「サイドバー」に表示したい場合は、

左の緑の枠(利用できるウェジット)から「Google翻訳(左の上から4番目)」を選択し右側の緑の枠の「1.サイドバー(左上)」に持っていくことで「Google翻訳」を「サイドバー」に表示することができます。

 

 

Black Studio TinyMCE Widget使い方

Black Studio TinyMCE Widget

ここでは、例を出して「Black Studio TinyMCE Widget」の使い方について記載していきます。

【例として】

ウェジット(サイドバー)にプロフィールを加えていきます。

プロフィールを加える場所は、上の画像のようにサイドバー上の「スポンサードリンク」「カテゴリー」の間(緑の部分)設置したいと思います。

 

例)プロフィールを作ってみよう

ウェジットをクリックしこの画面に行こう

Black Studio TinyMCE Widget

まずは、先ほどの設定方法と同じように「ウェジット」をクリックしてこの画面に行きましょう。

 

「カスタムHTML」をサイドバーに加えよう

Black Studio TinyMCE Widget

プロフィールを作成するには「カスタムHTML」が必要となりますので、

「カスタムHTML」を「1.サイドバー」に持っていきましょう。

 

プロフィール内容の作成

Black Studio TinyMCE Widget

「カスタムHTML」を「1.サイドバー」に持っていったら、次はプロフィール内容を作成しましょう。

  1. 「タイトル」を入力。
  2. プロフィール内容を入力
  3. 完了をクリック

①今回はプロフィールの作成なので「タイトル」はプロフィール名でいいかと思います。

②プロフィール内容も自由ですが今回は「プロフィール画像」と「プロフィール文章」という構成で書いていきたいと思います。

プロフィール内容作成
  • まず初めに<div>と入力
  • 次に「プロフィール画像」を加えるため<center><img style=”border-radius:50%;” src=”プロフィール画像URL” width=”180″ height=”180″></center></div>を入力
  • 「プロフィール文章」は<p>文章</p>というように、<p></p>の間に文章を入力※段落を付ける場合は<br>を入力。

プロフィール画像のURLとは

Black Studio TinyMCE Widget

「プロフィール画像のURLって何のこと?」と思われる方もいるかと思いますので説明すると。

普段記事を編集する際に、記事に画像を入れるためメディアを開かれると思いますが、

そのメディア内で画像を選択すると画像のURLが表示されます。(上の画像内で緑の枠で囲んでいるところ)

表示された画像のURLをコピーし先ほどの「プロフィール内容」に張り付けましょう。

 

すべて入力し終えたら完了をクリックすると反映されます。

プロフィール完成

Black Studio TinyMCE Widget

上記のような手順でプロフィールを作成するとこのようにプロフィールができているかと思います。

今回は例として「プロフィール」を上げましたが、上の画像ように「グーグル翻訳」や「アドセンス広告」も自由にカスタマイズできるのでぜひ試してみてください。

また、更新もウェジットでところでいつでも変更できるので非常に便利かと思います。

 

Black Studio TinyMCE Widget【まとめ】

「Black Studio TinyMCE Widget」のインストール~設定使用方法は以上となります。

「ウェジット」(サイドバーやフッター、ヘッダー等)を自由にカスタマイズすることで

ブログの見栄え見やすさはモチロン、オススメ記事や最新記事などのサイト内誘導もできるのでPV増加などの効果も見込めるのではないかと思います。

この記事を書いている人 - WRITER -
ゆる~くふわっと気になったニュース、好きな趣味なんかをブログで書いたりします。

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© ゆるふわブログ , 2019 All Rights Reserved.