ここではビジュアルエディタの見出し、本文、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

見出し５

 

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リンクサンプル

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

先頭の戻る

 

CSSの基本設定する時、このサイトはどのフォントを使えば良いか？またレスポンシブデザインを考えた場合フォントサイズをどうするか？が悩ましい所です。

以前のサイトはあまり意味もわからず作成しましたが、新しいサイトはこの辺を意識したサイトにしました。

1.フォント指定が意味するところ

私のサイトはWindows10のPCで作成しています。

これで作成したWEBサイトはWindows、MAC、iOS、Android等のデバイスから見られます。

例えばWordPressのテーマの「Twenty Twelve」のフォント設定は下記の様になっています。

font-family: Helvetica, Arial, sans-serif;

上記の設定は下記を意味します。

①MACの場合はHelveticaを利用しなさい。

②WindowsにはHelveticaはないのでArialを利用しなさい。

③HelveticaもArialもない場合はゴシック系フォント(sans-serif)を利用しない。

 

ここでの疑問は、私のPC(Windows10)にはArialは確かにあるが、Arialは欧文フォントであり、この指定で日本語を表示した場合はどうなるのか？になります。

そこで私のPCで主要なフォントを使った場合、ブラウザでどの様に表示されるか？を調べてみました。

＜Google chromeの場合＞

※1.解析ツールで調べた結果、欧文フォントの日本語はMeiryo(メイリオ)が使われていました。

＜Firefoxの場合＞

※1.解析ツールで調べた結果、欧文フォントの日本語は、MS PGothic(MS Pゴシック)が使われていました。

※2.游ゴシックのMediumの指定は効かず、これもMS PGothic(MS Pゴシック)が使われていました。

＜Edgeの場合＞

※1.Edgeの場合、解析ツールがない様なので詳細は判らないが、欧文フォントの日本語は、どうもMS PGothic(MS Pゴシック)で表示されていると思われる。
また、Menloに関しては游ゴシックが使われている様だ。

 

2.このサイトのCSS基本部分の設定

上記の評価結果を含めこのサイトで利用するフォント設定は下記の様にしています。

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

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

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

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

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

ビジュアルエディタを利用するのは開発者だけなのでPCを使う事を設定しています。

＜my-editor-style.cssの設定＞

/*****************************************************************/
/* TinyMCE画面設定 */ 
/*****************************************************************/
//他の設定はここでは記述していません
/* ビジュアルエディタ画面の設定 */
@charset "UTF-8";
html {font-size:100%;} /* rem指定時の基準フォントは16px */
html .mceContentBody {
	margin:5px;
	max-width:1000px;}
body {
	color:#444;
	font-family:メイリオ;}

※1.スタイルシートで使う文字エンコーディングは「utf-8」とする。@charset “UTF-8”;

※2.HTMLで記述するフォントサイズはブラウザのディフォルトサイズを使用する。html {font-size:100%;}
よってrem指定する時はpx値÷16=rem値となる。

※3.ビジュアルエディタの画面(.mceContentBody)は、上下左右から5PX内に表示し、画面一杯(1000px)とする。

※4.body部のフォントカラーは#444(少し薄い黒)でフォントは下記になる。
フォンとは、ビジュアルエディタは開発者のPCだけなのでメイリオのみとする。

 

2-2.style.cssの設定

ビジュアルエディタで作成したコンテンツを表示するCSSは「style.css」です。

このCSSはPC、タブレット、スマホで見られる為、レスポンシブWebデザインを意識して下記設定にしています。

/********************************************************************************************/
/* レスポンシブフォントサイズの設定
/********************************************************************************************/
@charset "UTF-8";
html{font-size:100%;}  /*PCサイズ16px*/
@media screen and (min-width:768px) and (max-width:991px){html{font-size:87.5%;}}/*タブレットサイズ14px*/
@media screen and (max-width:767px){html{font-size:75%;}}  /*スマホサイズ12px*/
body {
  color: #444;
　font-family:'ヒラギノ角ゴ Pro W3',Verdana,メイリオ,sans-serif;}

※1.スタイルシートで使う文字エンコーディングは「utf-8」とする。@charset “UTF-8”;

※2.HTMLで記述するフォントサイズはBootstrapのブレークポイントで変更しています。

	スマホ	タブレット	PC
表示幅(px)	～767	768～991	992～
名称	xs	sm	pc

上記のPCの場合を100%とし、タブレットは87.5%、スマホは75%に設定しています。
この設定でfont-sizeをrem値で指定するとデバイス別に上記の比率でフォントサイズを変更してくます。

※3.body部のフォント設定はメイリオで書かれた物を他のデバイスではどの様に表示するか？なので
MACの場合はヒラギノ角ゴ Pro
Windowsの欧文フォントはVerdana
Windowsの和文フォントはメイリオ
その他の場合はゴシック系フォント(sans-serif)

 

3.その他

最近ではデバイス依存しないWebフォントが登場しており、それを利用するとサーバ上のフォントを読み込んでから表示する為、デバイスの違いによる問題をなくすことができる様になっています。

しかし日本語Webフォントで凝ったフォントは有料の物が多く、ブログレベルでの利用は断念しました。

ここではこのサイトで使っているビジュアルエディタの表に関する設定方法と使い方を解説します。

1.TinyMCE Advancedの設定

このサイトの「TinyMCE Advanced」のバージョンは 5.3.0です。

私が設定している「設定→TinyMCE Advanced」のテーブル設定は下記になります。

項目	選択	解説
マウスのドラッグでのテーブル、行、列のサイズ変更を可能にする	✔	セルの幅や高さをマウスで変更できる様になります
テーブル挿入時の HTML 枠線属性を1に設定	なし	枠線は他の方法で行うので、一律にありなしのこの設定はOFFにしています
テーブルを挿入する際、マウスでドラッグして行と列の数を選択できるグリッドを表示	✔	選択にするとテーブルの縦横指定がマウスで指定できる様になります
テーブルを編集中にタブキーを押して次のセルに移動	✔	表操作にTabキーがつかえるようになります。 最終セルでtabを使うと行追加ができます
テーブル属性のダイアログに詳細タブを表示	✔	表及びセルのプロパティで高度な設定タブが利用できるようになります

設定後は必ず「変更を保存」ボタンを挿入して下さい。

以上でビジュアルエディタで自由に表作成ができる様になります。

 

2. ビジュアルエディタの表機能だけを使った表作成

2-1.ビジュアルエディタのCSSに下記を追加します。

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

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

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

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

＜my-editor-style.cssの設定＞

/******************************************************************/
/* tableの基本設定 */
/*******************************************************************/
table {
	border:1px dotted #444;                                                                       /* 表の枠線を標準文字色に合わせる */
	background--color:#fff;                                                                          /* 表の背景色を白にする */
	color:#444;                                                                                           /* 表内文字色を標準文字色に合わせる */
	font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt; /* 表の下の余白を文字の半分のサイズを指定 */
	margin-bottom:7px;                                                                               /* 表の下の余白を文字の半分のサイズを指定 */
	word-break:break-all;                                                                             /* 表の幅が狭くなった場合は英単語の途中でも改行する */
}
td {
	border:1px dotted #444; /* セルの枠線を標準文字色に合わせる */
	color:#444;                    /* セル内文字色を標準文字色に合わせる */
	padding:2px 7px;            /* セルの上下は2px　左右は7pxの余白を */
}
/* tableスタイルのCSS */
.____table_________{}                                       /* スタイルの区切り記号 */
table.border{border:1px solid #444;}                    /* 表の外枠線 */
td.border-left{border-left:1px solid #444;}             /* セルの左線 */
tr.border-bottom{border-bottom:1px solid #444;}   /* セル行の下線 */

■表やセルの枠線の色指定を標準文字色と同じ色に設定しています

■枠線の作画はTinyMCE Advansedでも可能ですが操作性があまり良くありません。

そこで枠線はスタイル定義とし「表の外枠線」、「セル行の下線」、「セルの左線」を用意しています。

 

2-2.style.css には上記内容を少し変更した形で同様の内容を定義します。

/****************************************
tableの基本設定 
*****************************************/
.entry-content table {
	border:none;   /* ビジュアルエディタで破線表示していたののは表示なしにしている */
	background-color:#fff
	color:#444;
	font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;
	margin-bottom:7px;
	word-break:break-all; }
.entry-content td {
	border:none;　 /* ビジュアルエディタで破線表示していたののは表示なしにしている */
	color:#444;
	padding:2px 7px;}
/* ｔableスタイルのCSS */
.entry-content table.border{border:1px solid #444;}
.entry-content td.border-left{border-left:1px solid #444;}
.entry-content tr.border-bottom{border-bottom:1px solid #444;}

■ビジュアルエディタでは表に破線枠が表示されますが、この破線枠はHTML表示では「枠線なし」に変更しています。

 

ビジュアルエディタ機能だけの表作成の方法

1.表のボタンから表を作成します。

表の作成でマウスで３×3の表を作成します。

画面枠一杯に破線の表が表示されますので、マウスで適当な幅の表にして下さい。

＜表示例＞

■セルのプロパティによる幅操作

セルを選択して「テーブル→セル→セルのプロパティ」を実行すると下図のダイアログが表示されます。

これを利用して幅を「PX」や「%」で指定できます。

■%指定：画面サイズに合わせて自動で縮小します。（※推奨）

■PX指定：画面サイズは関係なく固定幅になります。

 

2.各セルに文字列を入力します

＜表示例＞

文字入力の時に利用できるキー

キー	動作
Tab	次のセルに移動。 最終セルの場合は行を下に追加します
Shit＋Tab	前のセルに移動
↑↓キー	上下のセルに移動
← →	左右に移動 文字列先頭や文字列最後の場合はセル移動

 

3.罫線を引く

＜表示例＞

■表枠：表を選択し、スタイルから「table.border」を実行します

■下線：行を選択し、スタイルから「tr.border-bottom」を実行します

■左線：列１及び列２を選択し、スタイルから「td.border-left」を実行します

 

4．文字装飾及び位置指定する

＜表示例＞

■文字の横配置：

■文字色や太字：

 

５．背景色や文字の縦位置を指定する

＜表示例＞

■セルのプロパティ（テーブル→セル→セルのプロパティ）の一般タブ

文字の横配置、縦配置が指定できます。

■セルのプロパティ（テーブル→セル→セルのプロパティ）の高度な設定タブ

文字の背景色の指定ができます。

 

６．表のインデント操作

表のインデントには下記の設定が必要です。

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

 

＜表全体をインデントする方法＞

①表の何処かをクリックする。

するとビジュアルエディタの左下の方に下記がガイドが表示されます。

※上記が表示されない場合は、表示オプションを開いて「最大行表示エディターと集中執筆モード機能を有効化します」の✔を外して下さい。

②上記のtableを選択する。

③下記のインデントボタンを挿入してインデント操作をする。

以上でビジュアルエディタの表機能だけを使った罫線付きの表作成ができました。

上記の設定を使った表のサンプル

①表枠を教示しないサンプル

下記は２×２の表ですが、枠線は表示していません。

---

DOPPELGANGER　Libero Series 411（見えない枠を使ったサンプルです）
私は右のロードバイクで図書館に通いながらこのサイトを構築しています。 ロードバイクの購入は2台目で今回購入した４１１は前輪にサスペンションが付いており、今までのロードバイクよりは乗り心地が良くなっています。 ギヤはシマノの21段ですが、実際の走行で使うのは7段で十分と思っています。 またブレーキは前輪がディスクブレーキ、後輪はダブルピボット式キャリパーブレーキなのでブレーキの効きは問題ありません

②一部の表枠を表示したサンプル

＜ビジュアルエディタでの表示は下記になります＞

＜httpで表示した場合＞

破線は罫線が引かれないので下記の様になります

→

→

 

2.bootstrap機能を使った枠線や背景色付け方

項番１で説明した様にビジュアルエディタの基本機能で枠線や背景色を付ける事ができます。

しかしBootstrapの表機能クラスを利用するともっと簡単にこれらの事が行えるようになります。

これを行う為にはBootstorapを導入する必要があります。下記URLを参照してください。

 ­ビジュアルエディタでBootstrap3を利用する為の設定

 

2-1.my-editor-style.cssに下記を追加します。

/* BootStrapの定義とCSS変更 */
.____BT_table_________{}  /* スタイルの区切り記号 */
table.table{margin-bottom:7px;}
table.table td{
 border:1px solid #444 !important; /* 枠線カラーの変更 */
 color:#444 !important;;                /* 文字色の変更 */
}
table.table-bordered.table{}          /* 縦横線付きの表 */
table.table-condensed{}                /* セル内の余白を半分にする */
tr.danger()                                   /*Table rowの設定*/
tr.warning{}                                
tr.info{}
tr.success{}
tr.active{}
td.danger{}                                 /*Table Dataの設定*/
td.warning{}
td.info{}
td.success{}
td.active{}

2-2.Style.cssには下記を設定します。

BootstarpのCSSをロードしているので、基本的に設定は不要です。

しかしBootstarpの仕様で変更したい箇所のみを下記で記述しています。

/* BootStrapのCSS変更 */
.entry-content table.table{margin-bottom:7px;}
.entry-content table.table td{
	border:1px solid #444 !important;
	color:#444 !important;

Bootstrap表クラスの使い方

①スタイルの「table.table」

	列1	列2
行1	行1列1	行1列2
行2	行2列1	行2列2
行3	行3列1	行3列2

表を作成し、表にカーソルを入れスタイルから「table.table」を指定すると枠線が引かれます。

 

②スタイルの「table.table-condensed」

	列1	列2
行1	行1列1	行1列2
行2	行2列1	行2列2
行3	行3列1	行3列2

①の表にスタイルから「table.table-condensed」を追加すると表内の余白が半分になります。

 

③スタイルの「tr.danger」

	列1	列2
行1	行1列1	行1列2
行2	行2列1	行2列2
行3	行3列1	行3列2

②の表の1行目にカーソルを入れ、スタイルから「tr.danger」を追加すると1行目に背景色が付きました

 

④その他の色

スタイル（××）	色	カラーコード(参考)
danger		#f2dede
warning		#fcf8e3
info		#d9edf7
success		#dff0d8
active		#f5f5f5

■tr.××：行（TR：Table Row）に背景色を付けます。

■td.××：セル（TD：Table Data）に背景色を付けます。