HOME  /WordPress(応用)
 /ビジュアルエディタの見出し等を自由にカスタマイズする
2020年03月26日

ビジュアルエディタの見出し等を自由にカスタマイズする

ここではビジュアルエディタの見出し、本文、URL設定を自由にカスタマイズする方法を解説しています。

1.見出しの設定と使い方

1-1.ビジュアルエディタのCSS設定

本テーマのビジュアルエディタのCSSは「editor-style.css」から「my-editor-style.css」に変更しています。

理由は下記ドキュメントを参照してください。

 ブロックエディタ時代にビジュアルエディタを使う方法

 ­親テーマが「editor-style.css」の時のスタイル機能の使い方

 

<my-editor-style.cssへの設定>

/*************************************************/
/* 見出しの設定  以降よりstyle.cssと共有する記述 */
/**************************************************/
h2,
h3,
h4,
h5{clear: both;}
h2{
  font-size:20px;font-size:1.25rem;
  color:#400fff;
  border:1px solid #400fff;
  border-left: 5px solid #400fff;
  padding:5px 0 5px 5px;
  margin:10px 0;}
h3{
  font-size: 18px;font-size:1.125rem;
  color:#b05927;
  border-bottom:1px solid #b05927;
  border-left: 5px solid #b05927;
  padding:5px 0 5px 5px;
  margin:10px 0;}
h4{
  font-size:16px;font-size:1rem;
  color:#228b22;
  border-left:5px solid #228b22;
  border-bottom:1px solid  #228b22;
  padding:5px 0 5px 5px; 
  margin:10px 0;}
h5{
  font-size:16px;font-size:1rem;
  color:#228b22;
  display:inline-block;
  border-left:5px solid #228b22;
  border-bottom:1px solid  #228b22;
  padding:5px 20px 5px 5px;
  margin:5px 0;}

※1.font-sizeはpx指定とrem指定を併記しています。
最近のブラウザはrem指定を優先し、デバイス種類によりフォントサイズを変更してくれます。
古いブラウザ(PC)はremが処理できないのでpxを使って表示します。

 

1-2.style.cssにも同様の定義を追加する。

/****************************************
見出しの設定
*****************************************/
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5{clear:both;}
.entry-content h2 {font-size:20px;font-size:1.25rem;color:#400fff;border:1px solid #400fff;border-left:5px solid #400fff;padding:5px 0 5px 5px;margin:10px 0;}
.entry-content h3 {font-size: 18px;font-size:1.125rem;color:#b05927;border-bottom:1px solid #b05927;border-left: 5px solid #b05927;padding:5px 0 5px 5px;margin:10px 0;}
.entry-content h4 {font-size:16px;font-size:1rem;color:#228b22;border-left:5px solid #228b22;border-bottom:1px solid  #228b22;padding:5px 0 5px 5px;margin:10px 0;}
.entry-content h5 {font-size:16px;font-size:1rem;color:#228b22;display: inline-block;border-left:5px solid #228b22;border-bottom:1px solid  #228b22;padding:5px 20px 5px 5px;margin:5px 0;}

 

1-3.見出しの使い方

下記アイコンをクリックして見出しの種類を選択します。

下記は見出しの種類別サンプルです。

見出し2

見出し3

見出し4

見出し5

­ ­メモ

上記でh2~h5までしか定義していないのは下記ドキュメントを参照してください。

 ­ビジュアルエディタでインデントが利用できる様にする

また上記の設定を行うと見出し要素もインデントが可能になります。

 

2.記事本文の設定

2-1.my-editor-style.cssへの設定

/****************************************************************/
/* 記事本文の設定 */
/*****************************************************************/
p{
  font-size:14px;font-size:0.875rem;
  line-height:20px;line-height:1.25rem;
  letter-spacing:0.1em;
  margin-bottom:4px;margin-bottom:0.25rem;}

 

2-2.css¥style.cssにも同様の定義を追加します。

/****************************************/
/* 記事本文の設定 */
/*****************************************/
.entry-content p{font-size:14px;font-size:0.875rem;line-height:20px;line-height:1.25rem;letter-spacing:0.1em;margin-bottom:4px;margin-bottom:0.25rem}

 

2-3.記事本文の表示例

文字を入力すると無条件でこの<p>タグが付けられます。

他のスタイルを<p>に戻すと時は要素を選択して下記アイコンで「段落」を指定します。

下記は本文の表示サンプルです。

あああああああああああああああ<Shift+Enter>
あああああああああああああああ<Eenter>

あああああああああああああああ

※1.改行(Shift+Enter)と段落替え(Eenter)で少し行間を変更しています。

※2.サイズ指定はPXとremを併記する事により、デバイス種類により文字サイズを変更させています。

 

3.URLリンクの設定

3-1.my-editor-style.cssへの設定

/** URLリンクの設定 **********************************************/
a {text-decoration:none;font-weight:normal;}
a:link {color:#400fff;}                                      /* 未訪問時の色 */
a:visited {color:#4082ff;}                                 /* 訪問済みの色 */
a:hover {text-decoration:none;color: #2feb67;} /* カーソルが乗った時の色 */

 

3-2.style.cssにも同様の定義を追加する。

/** URLリンクの設定 *****************************************/
.entry-content a {text-decoration:none;font-weight:normal;}
.entry-content a:link {color: #400fff;}
.entry-content a:visited {color: #4082ff;}
.entry-content a:hover {text-decoration:none;color: #2feb67;}

 

URLリンクの入れ方

URLリンクには記事外リンクと、記事内ジャンプがあります。
下記に2つに分けて解説していきます。

3-3.記事外へのURLリンクの入れ方

①リンク元の文字列をドラッグして選択します。

②メニューアイコンから下記のボタンを挿入します。

③表示されたダイアログの右にあるリンク設定(歯車マーク)を選択します。

④表示された下記ダイアログに必要事項を入力して「リンク追加」を実行します。

■URL:ジャンプ先のurlをコピー&ペーストで入れるか、下の方に表示されているドキュメントを選択します。

■リンク文字:選択した文字列が表示されます。
(ここでの修正も可能です)

■リンクを新しいタブで開くをチェックすると、リンク先が新しいタブとして表示されます。チェックしない場合は見ているドキュメントが上書きされます。

⑤URLリンクサンプル

ホームネットワーク研究所HP

 

3-4.ページ内の他の場所へのジャンプ

ページ内で他の項目にジャンプさせる為には、飛び先(アンカー)が必要でこれを入れた後にURLリンク操作を行います。

①飛びたい先をクリックした後、下記アイコンをクリックします。 

②表示されたダイアログに任意の名前を入れます。

※1.上記の例ではjump01という名前を付けました。

③リンク元の文字列をドラッグして、下記アイコンをクリックします。

④表示されたダイアログに、呼び先の名前を入れてEnterアイコンをクリックします。

※1.アンカーで付けた名前の前に#を付ける事

⑤URLリンクサンプル

下記をクリックすると、このページの先頭にジャンプします。

先頭の戻る

 

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

ここでは整形済みテキストの設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

TinyMCEのスタイルは1つの段落に対する定義になります。よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。ここではその作り方を解説しています。

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

TinyMCEのデフォルト設定ではインデントが使えない。またCSSを更新した時にスーパリロードしないと画面が更新されない等との問題があります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法を解す津指定ます。

ビジュアルエディタに幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってリンクBOXを作成する方法を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。