TinyMCE」タグアーカイブ

TinyMCE関連ドキュメント

ビジュアルエディタの引用BOXをカスタマイズする

引用タグblockquoteは他サイトで使われているコンテンツを自サイトで引用する時に使うもので、検索エンジンにこの部分はこのサイトのコンテンツでない事を伝える物です。

ここではこのサイトで使っている引用タグの設定と使い方を解説します。

1.引用<blockquote>の設定

ディフォルトのTinyMCEの引用タグはあまり美しくありません。
そこでWordPressのダッシュアイコンを使って下記の様な引用タグに変更しました。

ここに書かれた内容は、×××から引用した文書です

この設定方法を解説します。

 

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

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

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

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

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

 

<my-editor-style.cssに下記を設定します>

/****************************************/
/* blockquoteの設定 */
/*****************************************/
blockquote{
	margin:5px 0;                 /* マージンは左右5px、上下0に指定 */
	border:none;                   /* 枠線和表示しません */
	border-radius:5px;           /* BOXの上下左右の角を丸くします */
	background-color:#f7f7ff; /* 背景色 */
	padding:1.0em;               /* BOX背景色 */
	position:relative;              /* ここを基準点とする */
}
blockquote:before{                                                    /* 左上の記号 */
	font-family:"dashicons";                                         /* フォントはダッシュアイコン */
	content:"\f122";                                                    /* 文字コード */
	font-size:20px;font-size:1.25rem;line-height:1em;   /* 文字サイズ */
	color:#999;                                                           /* 文字色 */
	position:absolute;left:0;top:0;                                 /* 位置は基準点から上と左が0の位置 */
}
blockquote:after{                                                       /* 右下の記号 */
	font-family:"dashicons";                                          /* フォントはダッシュアイコン */
	content:"\f122";                                                     /* 文字コード */	  
	font-size:20px;font-size:1.25rem;line-height:1em;    /* 文字サイズ */
	transform:rotate(180deg);                                       /* 文字を180°回転させる */
	color:#999;                                                            /* 文字色 */
	position:absolute;right:0;bottom:0;                          /* 位置は基準点から下と右が0の位置 */
}

各設定の意味はコメントを参照してください。

­ ­メモ

左上と右下の文字はダッシュアイコンのを利用しています。

このアイコンを左上はそのまま、右下は180°回転させて利用しています。

 

2-2.style.cssのも同様の定義を行います。

/****************************************
blockquoteの設定
*****************************************/
.entry-content blockquote{
	margin:0;padding:0;
	border:none;
	border-radius:5px;
	background-color:#f7f7ff;
	padding:1.0em;
	position:relative;}
.entry-content blockquote:before{
	font-family:"dashicons";
	content:"\f122";
	font-size:20px;font-size:1.25rem;
	line-height:1em;
	color:#999;
	position:absolute;left:0;top:0;}
.entry-content blockquote:after{
	font-family:"dashicons";
	content:"\f122";	  
	font-size:20px;font-size:1.25rem;
	line-height:1em;
	transform:rotate(180deg);
	color:#999;
	position:absolute;right:0;bottom:0;}

 

2.引用<blockquote>の使い方

2-1.入力方法

①引用を入れる所にカーソルを置き、下記アイコンを挿入します。

②表示された枠の中に文字を入れて行きます。

<サンプル>

ここに書かれた内容は、×××から引用した文書です

 

2-2.引用BOXから出る方法

BOXから出る場合は<enter>を2回挿入すると出られます。

 

2-3.引用BOXのインデント方法

<blockquote>をインデント可能にする為には下記設定が必要になります。

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

 

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

 

上記の「blockquote」を選択した後、インデントボタンで操作してください。

 

2-4.引用BOXの削除方法

引用文を選択して下記アイコンを実行します。

通常の段落文に変わりますので、文字を選択して削除して下さい。

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

ここでは親テーマのビジュアルエディタのCSSが「editor-style.css」以外の場合の設定について解説しています。

親テーマがどの様なCSSを使っているか?は下記を参照してください。

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

 

1.TinyMCE Advancedをインストールした時の問題点

1-1.TinyMCE Advancedプラグインをインストールする。

下記のプラグインをインストールして有効化して下さい。

 

1-2.設定→TinyMCE Advancedの旧エディタタブを開きます

下記のエラーがでています。

 

­ ­エラーの理由

この記事を書いて時点のTinyMCE Advancedのバージョンは、5.3.0になります。

今後改善されるかも判りませんが、現在のAdvancedで意識しているCSSは「editor-style.css」になります。

しかし親テーマが使っているビジュアルエディタのCSSが「editor-style.css」でないので読めませんというエラーになります。

 

2.「editor-style.css」でないテーマにCSSクラスメニュを適用させる方法

<対策方法>

①利用しているビジュアルエディタのCSSファイルを子テーマフォルダにコピーする。場所は子テーマディレクト直下でも可。

 

②上記のファイル名を「editor-style.css」に変更する。

 

③子テーマのfunctions.phpに下記を追加します。

function my_styles() {
  remove_editor_styles();                  //親テーマのエディタスタイルシートの削除
  add_editor_style( 'editor-style.css' );//子テーマのスタイルシートの追加
} 
add_action( 'admin_init', 'my_styles' );

※1.関数名は任意です。

※2.上記は、現在設定されているエディタCSSを解除し、新たなCSS名を指定しています。

 

④「設定→TinyMCE Advanced」を再度、開き直すと、エラーが消えて下記が表示されますので✔して下さい。

その他の設定はデフォルトで問題ありません。

変更した場合は必ず「設定の保存」を実行して下さい。

以上で「editor-style.css」で設定した「スタイル」が利用できる様になります。

 

3.TinyMCE Advancedのスタイル機能とは

TinyMCE Advancedプラグインをインストールすると下記の様なボタンが追加されます。

このボタンをビジュアルエディタのメニュに配置して下さい。

 

このスタイルをクリックした時に表示されるメニュのデフォルトは下記になります。

 

しかし、項番2で「CSSクラスメニュ」の所に✔を付けるとクラスメニュが定義できるようになります。

­ ­メモ

CSSクラスメニュとはタグ(p、div、img、table等)に付けたクラスメニュです。

例えばimgタグに「.×××」というクラスをつけたメニューという事です。

 

例えば下記の様なクラスメニュを「editor-style.css」に設定します。

img.waku0 {
	padding:2px;
	border-radius:0;
	border:1px solid #8b8682;}
img.waku5 {
	padding:5px;
	border-radius:0;
	border:1px solid #8b8682;}

 

そうするとスタイルメニュをプルダウンすると、設定したクラスが表示されます。

下記の例ではimgが選択されている時に「.waku0」と「.waku5」のクラスを追加する事ができる様になります。

CSSのクラスはBootstrap等のクラスでも、任意設定のクラスでもOKです。

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

WordPress5.0以前は「ビジュアルエディタ(TinyMCE)」が標準エディタでした。

よって記事投稿画面とHTML表示を一致させる事が比較的容易でした。

 

しかし、2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりました。

その結果、記事投稿画面とHTML表示を一致させる事より、ドキュメント構造が重視されるようになりました。

 

プロの方は「ブロックエディタ」の方が良いとの意見もありますが、素人には「ビジュアルエディタ」の方が判り易いと思います。

私は「ビジュアルエディタ」時代にWordPressを始めたので問題なく理解できましたが、今、WordPressを始める人は、「あれ!どの様に文書を書いたら良いのか?」でつまずくのではないか?と心配しています。

 

そこで私は、WordPressは最新版を使うが、エディタは「ビジュアルエディタ」を使い続けたいと思っています。

そこでこれらの「エディタ」の現状を色々調べた結果を下記に報告します。

 

1.WordPressのデフォルトテーマでのエディタの取り扱い

<テーマ毎のビジュアルエディタ一覧>

テーマ名 年度 editor-style.cssの場所 クラス
twentytwelve 2012年版 テーマディレクトリの直下 .entry-content
twentythirteen 2013年版 CSSフォルダの中 .entry-content
twentyfourteen 2014年版 CSSフォルダの中 .entry-content
twentyfifteen 2015年版 CSSフォルダの中 .entry-content
twentysixteen 2016年版 CSSフォルダの中 .entry-content
twentyseventeen 2017年版 assets/cssフォルダーの中 .entry-content
twentynineteen 2019年版

ビジュアルエディタのファイル名が「style-editor.css」に変更になりました。

場所はテーマディレクトリの直下

.entry-content

twentytwenty 2020年版

ビジュアルエディタのファイル名が「editor-style-classic.css」に変更になりました。

場所はassets/cssフォルダーの中

.entry-content

­ ­解説

従来のビジュアルエディタのCSSファイル名は「editor-style.css」でした。

しかし「twentynineteenテーマ」や「twentytwentyテーマ」ではCSSのファイル名が変更されました。

ビジュアルエディタが無くなった訳ではありません。

確認方法:何が使われているのか?はfuncitions.phpを「add_editor_style()」で検索すると判ります。

またビジュアルエディタのCSSに対応するhttp表示のCSSは「style.css」で、クラスは全テーマで「entry-content」です。

確認方法:ビジュアルエディタで作成されたコンテンツがどの様なクラス名で表示されているのかは「EmEditor」の「ファイルからの検索」で「the_content()」で検索すると判ります。

 

一方、旧テーマでもブロックエディアが使える様にする為に「editor-blocks.css」というCSSファイル名が追加されました。

しかし「twentynineteenテーマ」や「twentytwentyテーマ」は上記と異なり下記になります。

■twentynineteen:style-editor-customizer.css

■twentytwenty:editor-style-block.css

確認方法:何が使われているか?はfuncitions.phpを「wp_enqueue_style()」で検索するとが判ります。

 

いづれにしても、WordPressのデフォルトテーマは「ビジュアルエディタ」でも「ブロックエディタ」でも使える様になっています。

 

1.ビジュアルエディタ(TinyMCE)のみを利用する方法

ビジュアルエディタを使うか?否かは、下記のプラグインを入れるか?否かで決まります。

入れた場合は「ビジュアルエディタ(TinyMCE)」、入れない場合は「ブロックエディタ(Gutenberg)」になります。

 

Classic Editorプラグインをインストールする。

下記のプラグインをインストールして有効化して下さい。

 

■ビジュアルエディタのCSSをカスタマイズする方法

①ビジュアルエディタのCSSを親テーマから子テーマにコピーする

項番1の表に記載したCSSファイルを子テーマフォルダにフォルダ構造毎コピーします。

 

②ビジュアルエディタの修正

このCSSを修正すると、ビジュアルエディタの表示が変わります。

例)

p{font-size: 16px;}

 

③http表示のCSSの修正

子テーマの「style.css」に上記の修正内容を追加します。

クラスは「.entry-content」です。

例)

.entry-content p{font-size: 16px;}

以上でhttp表示もビジュアルエディタと同様に修正されます。

 

2.TinyMCE Advancedを追加利用する場合

TinyMCE Advancedを利用する場合、親テーマが「editor-style.css」か否かで使い方が異なります。

親テーマの種類により下記ドキュメントを参照してください。

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

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

ビジュアルエディタにアイコンボタンを追加する方法

旧サイトではビジュアルエディタにアイコンを表示する為に「WordPress Visual Icon Fonts」プラグインを利用していました。

この使い方は下記URLを参照してください。

  WordPress Visual Icon Fontsのインストール方法と使い方

 

しかしビジュアルエディタで使いたいアイコンはそんなに多くないので、プラグインを入れるより必要なアイコンだけをビジュアルエディタのメニュに追加すると簡単に利用できる様になります。

下記にその設定方法を解説していきます。

1.ビジュアルエディタにアイコンボタンを追加する流れ

下図の赤枠の中がビジュアルエディタに追加したアイコンボタンです

アイコンをクリックすると、ダッシュアイコンのコードが追加されて、上記のアイコンが文書に追加されます。

尚、その他のアイコンはTinyMCE Advanceプラグインでどのアイコンを何処に表示するか?をカスタマイズしています。

 

上図の様なアイコンボタンを追加する流れは下記になります。

1-1.追加するアイコンボタンの画像を作成します。

1-2.追加するボタンの名前をフィルターフックで指定します。

1-3.ボタン処理を行うJavaScripのファイルの場所を指定します。

1-4.JavaScriptファイルで、アイコン画像を読み込んだり、クリックした時の処理を記述します。

 

それでは具体的な設定を解説していきます。

1-1.追加するアイコンボタンの画像を作成します

テーマフォルダの中に「icon」というフォルダを作成し、この中に下記の様な画像ファイルを作成しています。

「tinymce.js」はJavaScriptファイルで1-3項及び1-4項で解説します。

 

<対応表>

ファイル名 アイコン 備考(クリックされた時に書かれるコード)
clock.png  ­ <span class=”dashicons dashicons-clock“></span>
edit.png  ­ <span class=”dashicons dashicons-edit“></span>
media-default.png  ­ <span class=”dashicons dashicons-media-default“></span>
welcome-write-blog.png  ­ <span class=”dashicons dashicons-welcome-write-blog“></span>

<画像作成時の注意点>

①画像サイズ:200×300px位の画像

②背景色:#f5f5f5

画像はGIMP等の画像編集ソフトで作成して下さい。

 

1-2.追加するボタンの名前をフィルターフックで指定します。

「functions.php」に下記プログラムを記述します

function add_icon_buttons($buttons) {
	$buttons[] = 'media-default';         // media-defaultアイコン
	$buttons[] = 'welcome-write-blog'; // welcome-write-blogアイコン
	$buttons[] = 'edit';                        // editアイコン
	$buttons[] = 'clock';                      // clockアイコン
return $buttons;}
add_filter( 'mce_buttons', 'add_icon_buttons' );

①関数の引数で現在のボタン配列($buttons)を取得します。

②ボタン配列の最後に4つのボタンを追加しています。

③ボタン配列を返し、フィルターフックの「mce_buttons」で書き込みを行っています。

上記で設定したのはボタンの名前だけです。

 

<ボタンを書き込む場所の解説>

ボタンを何処に追加するか?によって3つのフィルタフックがあります。

■一段目に追加する場合は「mce_buttons」を利用します。

■二段目に追加する場合は「mce_buttons_2」を利用します。

■三段目に追加する場合は「mce_buttons_3」を利用します。

 

1-3.ボタン処理を行うJavaScripのファイルの場所を指定します。

「functions.php」に下記プログラムを記述します

function plugins_directory($plugin_array) {
	$plugin_array['custom_button_script'] = get_stylesheet_directory_uri()."/icon/tinymce.js";
	return $plugin_array;}
add_filter( 'mce_external_plugins', 'plugins_directory' );

①引数で現在のスクリプト一覧を取得します。

②その配列の中の「custom_button_script」という変数に、利用するJavaScriptのファイル名を指定します。

上記の例ではテーマフォルダの中にあるiconフォルダの中にある「tinymce.js」ファイルを指定しています。

③スクリプト一覧を戻します。

④「mce_external_plugins」というフィルターフックで書き込みます。

上記で設定したのはJavaScriptのある場所だけです。

 

1-4.JavaScriptファイルで、アイコン画像を読み込んだり、クリックした時の処理を記述します。

いよいよここで、ボタン名に画像を指定したり、これがクリックされた時に何をするか?のプログラムを記述します。

「tinymce.js」に下記のプログラムを記述して保存します。

(function() {
	tinymce.create('add.buttons', {//関数名指定
		init : function(ed, url) { // ed には現在開いてるエディタの情報  urlにはこのJsファイルまでのパスが入る
// アイコン「media-default」のボタン設定 *********************************************
ed.addButton( 'media-default', {
				title : 'media-default',							        // ボタンのタイトル(マウスオーバー時に表示される)
				image : url + '/media-default.png',	// ボタン画像のパス
				cmd: 'media-default_cmd'				      // ボタンの処理プログラムの名前
			});
			// 「media-default_cmd」ボタン動作
ed.addCommand( 'media-default_cmd', function() {                                                           //上記で指定したコマンド名
				return_text = '&thinsp;<span class="dashicons dashicons-media-default">&thinsp;</span>&thinsp;';//返り値のセット 
				ed.execCommand('mceInsertContent', 0, return_text);                                                     //返り値の実行 
			});
			// アイコン「welcome-write-blog」のボタン設定 *****************************************
ed.addButton( 'welcome-write-blog', {
				title : 'welcome-write-blog',
				image : url + '/welcome-write-blog.png',
				cmd: 'welcome-write-blog_cmd'
			});
			// 「welcome-write-blog_cmd」ボタン動作
ed.addCommand( 'welcome-write-blog_cmd', function() {
				return_text =  '&thinsp;<span class="dashicons dashicons-welcome-write-blog">&thinsp;</span>&thinsp;';
				ed.execCommand('mceInsertContent', 0, return_text);
			});
			//アイコン「edit」のボタン設定 ********************************************************
ed.addButton( 'edit', {
				title : 'edit',						
				image : url + '/edit.png',	
				cmd: 'edit_cmd'			
			});
			// 「eedit_cmd」ボタン動作
ed.addCommand( 'edit_cmd', function() {
				return_text = '&thinsp;<span class="dashicons dashicons-edit">&thinsp;</span>&thinsp;';
				ed.execCommand('mceInsertContent', 0, return_text);
			});
			//アイコン「dashicons-clock」のボタン設定 *****************************************************
ed.addButton( 'clock', {
				title : 'clock',							
				image : url + '/clock.png',	
				cmd: 'clock_cmd'				
			});
			// 「dashicons-clock_cmd」ボタン動作
ed.addCommand( 'clock_cmd', function() {
				return_text = '&thinsp;<span class="dashicons dashicons-clock">&thinsp;</span>&thinsp;';
				ed.execCommand('mceInsertContent', 0, return_text);
			});
		},
	});
	tinymce.PluginManager.add( 'custom_button_script', add.buttons );
})();

以上でビジュアルエディタに4つのアイコンボタンを追加できます。

 

<解説>

プログラムを書くにあたって幾つかの注意点があります。

①プログラムは即時関数形式で書く

(function(window) { ここに処理を書く})(window);

上記の様な書き方が即時関数形式と呼ばれています。

これは、関数定義と実行を合わせて行う関数という意味です。

具体的に言うと{}の中にボタンの画像とボタンクリック時の動作を記述(関数定義)した後、(window)でこの関数を実行してボタン画像を表示します。

しかし、一般的にはwindowを省略して下記の様な書き方をします。この書き方が一般的です。

(function() { ここに処理を書く})();

 

②書き方の構造

(function() {
	tinymce.create('add.buttons', { 
		init : function(ed, url) {/*ここにアイコンボタンの定義を書きます*/	},
	});
	tinymce.PluginManager.add( 'custom_button_script', add.buttons );   
})();

■tinymce.createの第一引数に関数名(任意名称)、第二引数に処理の内容を記述します。

■init : function(ed, url) {}を指定すると、edにエディタ情報、urlにこのファイルまでのパスが返されます。

edとurlを使ってボタンの定義を行います。

■tinymce.PluginManager.addに関数名を指定し、実行します。

 

③アイコンボタンの定義例

ed.addButton( 'media-default', {       //mce_buttonsで設定したボタン名 
  title : 'media-default',                     // マウスオーバー時にボタンのタイトル
  image : url + '/media-default.png',  // ボタン画像のパス 
  cmd: 'media-default_cmd'              // ボタンの処理のコマンド名
}); 
ed.addCommand( 'media-default_cmd', function() {                                                          //上記で指定したコマンド名
  return_text = '&thinsp;<span class="dashicons dashicons-media-default">&thinsp;</span>&thinsp;';//返り値のセット 
  ed.execCommand('mceInsertContent', 0, return_text);                                                     //返り値の実行 
});

ボタンを複数設定する場合は、上記のい下に続けて書きます。

 ­注意

ダッシュアイコン  のコードは下記です。

<span class=”dashicons dashicons-media-default”>&thinsp;</span>&thinsp;

しかし、上記で書き込んでいるのは「&thinsp;」が追加されたコードになっています。

&thinsp;<span class=”dashicons dashicons-media-default”>&thinsp;</span>&thinsp;

「&thinsp;」は半角スペースの半分の幅のスペースです。これを入れる事によりアイコン前後にカーソルが入る様にしています。

書込みは必ずこの形式で行ってください。

 

④その他

 ­メモ

ダッシュアイコンのサイズ等を修正する場合はCSSに.dashicons{}で指定して下さい。

ビジュアルエディタにリンクBOXを実装する

ビジュアルエディタでBOXを作る方法には下記の2種類のやり方があります。

表を使う   :参考サイトはビジュアルエディタの表機能をカスタマイズする

スタイルを使う:参考サイトはビジュアルエディタで<Enter>が使えるBOXを作成する方法

どちらでも可能ですが、ここでは表を使う場合を解説していきます。

よって①の表の設定ができている事が前提となります。

 

下記がサンプルのBOXです。BOXの何処をクリックしても指定されたURLにジャンプします。

<横に1つのBOX>

■リンク先は画像に設定されています。

 

<横に2つ並んだBOX>

 

■左が3PXの枠線で、右が4pxの枠線です。

■リンク先は両方とも画像に設定されています。

 

1.CSSの設定

上記のリンクBOXを実現する始めの設定はCSSです。

 

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

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

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

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

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

 

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

/******************************************************************/
/* tableを使ったリンクBOX */
/*******************************************************************/
._____link_BOX________{}             /* スタイルの区切り線 */
td.link-waku3{                                  /* 枠線太さが3PXの設定 */
	padding:5px;
	border:3px solid #8b8682;
	cursor:pointer;          /* マウスがBOXに入るとカーソルが指マークになります */
}
td.link-waku4{                                  /* 枠線太さが4PXの設定 */
	padding:5px;
	border:4px solid #8b8682;
	cursor:pointer;
}
td.link-waku3:hover,
td.link-waku4:hover,{border-color:#9ed54c; /* マウスがBOXに入ると枠線のカラーが変わります */
}

■表のセル(tdタグ)に付与する枠線太さは3PXと4pxをスタイルで利用できる様にしています。

1px,2pxは線が細すぎるので上記設定としました。

■td.linkのスタイルは、マウスがBOXに入るとポインタが指マークに変わる事と枠線のカラーが変わる設定になります。

 

2-2.style.css にも同様な設定を追加します。

/******************************************************************/
/* tableを使ったリンクBOX */
/*******************************************************************/	
.entry-content td.waku3{
	padding:5px;
	border:3px solid #8b8682;
	cursor:pointer;}
.entry-content td.waku4{
	padding:5px;
	border:4px solid #8b8682;
	cursor:pointer;}
.entry-content td.link-waku3:hover,
.entry-content td.link-waku4:hover{border-color:#9ed54c;}	

 

以上の設定で見かけ上はBOXの中の何処をクリックしても、設定されたリンク先にジャンプできそうに見えます。

しかい現実はリンクが設定されている画像をクリックしない限りはジャンプできません。

そこでBOX内のどこをクリックしてもジャンプさせる為には下記のJqueryプログラムが必要となります。

 

2.jqueryプログラムを作成する

­ ­jqueryプログラムとは

PHPプログラムはサーバのプログラムで、サーバ側で画面を生成しデバイス側に送ります。

しかしサーバ側のプログラムにはユーザが画面をどの様に操作したか?は判りません。

一方、jqueryはユーザがどの様な操作をしたのか?を検知して処理するプログラムです。

 

2-1.jqueryプログラムを作成する

①ルートディレクトリにJSフォルダを作成します。

②その中に「my-jquery.js」ファイルを作成し下記プログラムを登録します。

/*****************************************/
/* 自作のjqueryプログラム */
/*****************************************/	
/* link-boxの全体をリンクエリアにする設定 */
$(function(){
 $('.link-waku3,.link-waku4').click(function(){
  var url=$(this).find('a').attr('href');
  var target= $(this).find('a').attr('target');
  if(target == '_blank'){window.open(url,'_blank');}
  else{window.location= url;}
  return false;
 });
});

上記プログラムで行っている内容は「.link-waku3」又は「.link-waku4」エリアがクリックされたら、aタグを検索し、href属性とtarget属性を取り出す。そしてtarget属性によりリンク先の表示方法を変えている。

<詳細解説>

$(‘.link’).click(function(){×××});は「.link」がクリックされたらfunctionの×××を実行しなさい!という命令です。

②ビジュアルエディタのリンク設定画面の解説

■上図のURLにリンク先を入れると、href属性に「リンク先」が入ります

■リンクを新しいタブで開くを✔するとtarget属性に「_blank」が入ります。

var url=$(this).find(‘a’).attr(‘href’);

上記は、a要素を探しhref属性(リンク先)を変数urlに入れています。

var target= $(this).find(‘a’).attr(‘target’);

上記は、a要素を探しtarget属性の値(_blankか?)を変数targetに入れています。

⑤あとの処理は下記になります。
新しいタブで開く場合はwindow.open(url,’_blank’);を実行します。
現在のドキュメントを書き替える場合ははwindow.location= url;を実行します。

 

2-2.jquryプログラムの利用宣言

<header.php>に上記のJqueryプログラムをロードします。

<head>
<!-- 他の設定は省略 -->
<!--自作jqueryプログラムの利用宣言-->
<script src='<?php echo get_stylesheet_directory_uri();?>/js/my-jquery.js'></script>
</head>

■子テーマフォルダの「js」フォルダにある「my-jquery.js」をデバイス側に送ります。

 

3.リンクBOXの作成手順

2BOXタイプのリンクBOXを作成する手順です。

①表作成で1×3の表を作成し、マウス操作で幅を調整します。

 

②各セルにカーソルを入れ、スタイルから「td.link-waku3」または「td.link-waku4」を設定する。

左が「td.link-waku3」で右が「td.link-waku4」です。

以上でリンクBOXの作成が完了しました。

 

③ボックスの中にコンテンツを書き込みます。

コンテンツを作成した後は、画像等にリンク先を設定します。

■新しいタブにリンク先を表示させる場合は「リンクを新しいタブで開く」に✔をいれます。

以上でリンクBOXは完成します。

ビジュアルエディタに<Enter>が使えるメモBOXを実装する

TinyMCE Advancedの「スタイル」機能は1つの段落に対する定義になります。

よってこの「スタイル」機能で作成したBOXでは、段落変更(Enter)は利用できません。

しかしショートコードという新しい概念を導入すると、段落変更(Enter)が使える新しいタイプのBOXを作成する事が可能となります。

 このドキュメント利用上の注意点

このドキュメントの中では[]を【】に置き換えて記述しています。

理由は解説に[]のままでショートコードを記述すると、更新処理でショートコード処理が動いてしまうからです。

よってこのドキュメントからソースをコピーする場合は、ペースト後、【】を[]に置き換えて利用して下さい。

 

1.ショートコードを作成する

1-1.functions.phpに下記プログラムを登録します。

ここにショートコード(【memo】)と、変換するHTMLコードを指定します。

/**************************************************/
/* TinyMCE Advancedにショートコードを追加  */
/**************************************************/
function my_scode($postarr) {
	/* メモBOX *************************/
	$search = '【memo】';
	$replace= 
		 '<div class="my_memo">
			<p>&shy;<span class="dashicons dashicons-edit">&nbsp;</span>&shy;メモ</p>
			<p>このBOXは段落替え(Enter)が使えます。</p>
		</div>';
	$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
	return $postarr;}
add_filter('wp_insert_post_data', 'my_scode');

■フィルターフック「wp_insert_post_data」はビジュアルエディタで「更新」又は「下書きで保存」を実行した時にビジュアルエディタのデータをユーザプログラムに渡してくれる関数です。

引数の$postarr[‘post_content’] の中に入力されたデータが格納されています。

■上記の処理はビジュアルエディタのコンテンツの中に【memo】という文字列があったら、$replaceで定義したた文字列に置き換える処理をしています。

注意:上記プログラムをコピー&ペーストした場合は【】を必ず[]に変更して下さい。

 

2.BOXの表示スタイルを設定する

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

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

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

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

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

 

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

/**********************************************************************/
/* メモボックス 対象:文字、画像 */
/**********************************************************************/
div.my_memo{
 margin:5px 0;
 padding:10px;
 border-radius:5px;
 background-color:#f5f0cf;
 overflow:auto; /*画像のはみ出しをなくす指定*/
 max-width:100%;
 font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;
}

 

2-2.style.cssにも上記と同じ内容を登録します。

/**********************************************************************/
/* メモボックス 対象:文字、画像 */
/**********************************************************************/
.entry-content  div.my_memo{
 margin:5px 0; 
 padding:10px;
 border-radius:5px;
 backgroundcolor:#f5f0cf;
 overflow:auto;
 max-width:100%;
 font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;
}

以上でショートコードを使った設定は完了です。

 

2.ショートコードで作成するメモBOXの操作方法

<作成>

メモボックスを入れたい所で【memo】を入れ「更新」又「下書きで保存」ボタンを挿入します 。

(実際に入力するコードは【】を[]に置き換えた文字列です)

下記BOXが表示されます。

 メモ

このBOXは段落替え(Enter)が使えます。

上記メモBOXの中では<Enter>を使った文書作成ができます。

当然<Shift+Enter>も利用可能です。

 

<文書作成時の注意点>

空白行を入れる時は空白行にスペースを入れて下さい。

下記の例では、2行目にスペースが入っています。

­ ­メモ

一行目

 

三行目

理由:二行目の先頭で<Enter>を挿入するとBOXの終了処理が行われてBOXからカーソルがでます。

それに合わせてアイコン文字も削除されます。

 

<メモBOX作成の終了>

メモBOXから出る場合はビジュアルエディタの下記アイコンを使ってください。

BOXから出た後、続きを読むーーーを削除します。

 

<メモBOXのインデント方法>

①メモBOXをクリックします。

②ビジュアルエディタの下に表示されるガイドからdivを選択します。

③下記インデントボタンでインデントします。

­ ­注意

インデント操作には下記設定が必要になります。

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

 

<メモBOXの削除>

下記のスタイルから「div.my_memo」をクリックします。

この操作でBOXが消え、通常ドキュメントになります。

 

以上で、ビジュアルエディタに<Enter>が使えるメモBOXを実装する事ができました。

ビジュアルエディタで画像を挿入する方法

ここでは本文中に画像を挿入する方法、画像に枠を付ける方法、画像のレスポンシブ表示について解説していきます。

1.画像を挿入する方法

画像を取り込む方法は下記の2つの方法があります。

①画像をWordPressのメディア機能を使って取り込む

写真等はこの方法で取り込んでいます。
メディアにある画像を本文中に取り込むには下記アイコンで画像を取り込みます。

 

②OnePress Image Elevator等のプラグインを使って取り込む

­ ­OnePress Image Elevatorのインストールと画像管理

上記のプラグインはクリップボードにある画像をペーストすると本文中に画像が取り込まれます。

また同時にメディアライブにも登録されます。

本サイトでは画面キャプチャ等はこのプラグインで取り込んでいます。

①に比べて非常に簡単に画像が取り込めます。

 

2.画像枠をTinyMCE Advancedのスタイルに登録する

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

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

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

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

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

 

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

/*************************************************************/
/* image 設定 */
/*************************************************************/
img{
  box-shadow:none;}  /* イメージに影が付くのを削除 */
img.waku0 {
  border-radius:0;
  border:1px solid #8b8682;}
img.waku5 {
  padding: 5px;
  border-radius:0;
  border:1px solid #8b8682;}

※1.イメージに影が付くのをなくす為に box-shadow:noneを入れている。

※2.waku0は、イメージの外側にスペース0を枠線を引く。waku5は、イメージと枠の間に5pxの余白を入れる。

 

1-2.style.cssに同様の設定をする。

/****************************************
Imagesの設定
*****************************************/
.entry-content img{box-shadow:none;}
.entry-content .waku0 {border-radius:0;border:1px solid #8b8682;}
.entry-content .waku5 {padding: 5px;border-radius:0;border:1px solid #8b8682;}

 

3.画像枠の設定方法

項番2の設定で2種類の枠がスタイルに登録されています。

よって画像を選択後、下記アイコンからスタイルを選択します。

img.woku0:画像と枠にスペースがない物

img.waku5:画像と枠に5pxのスペースがある物

 

3-1.img.woku0を選択した例

これはキャプチャ画像等を判り易くするために使っています。

<表示例>

枠を付けると下記になります。

 

3-2.img.waku5を選択した例

これは写真画像等によく使います。

<枠がない画像>

枠を付けると下記になります。

 

4.画像の表示サイズについて

ここでは画像サイズの指定方法によって表示形式が異なる事を説明します。

ブラウザの表示サイズを変更して、下記画像の表示がどの様に変わるか?を試してみてください。

 

4-1.画像サイズの指定の仕方

画像をクリックして、TinyMCEの下記のアイコンをクリックします。

すると下記ダイアロゴが表示されます。

上記は画像サイズが固定で指定されています。

これを下記の様に変更する事も出来ます。

上記は画像サイズを画面サイズ80%にした例です。

 

4-2.画像サイズが640×480の画像

上記画像は画面幅を変えると、画面幅が640pxまでは固定表示、それより小さくなった場合は自動縮小されます。

 

4-32.画像サイズが80%の画像

上記画像は画面幅を変えると、画面幅に応じて画像が縮小されます。

 

5.独自テンプレートを使う場合に注意する事

画像をクリックすると下記メニュが表示されます。

左側のボタンを利用する事により画像表示の位置が指定できます。

・alignleft    :配置位置(左)

・aligncenter:配置位置(中央)

・alignright  :配置位置(右)

・alignnone  :配置位置(なし)

独自テンプレートの場合は上記のクラスが設定されてないので、下記の様な設定が必要になります。

 

5-1.my-editor-style.cssに下記を設定する。

img.alignleft{
	float: left;
	margin: 5px 16px 0 0;margin: 0.3125rem 1rem 0 0;}
img.aligncenter{
	display: block;
	margin-left: auto;
	margin-right: auto;}
img.alignright{
	float:right;
	margin:5px 0 0 10px;margin:0.3125rem 0 0 0.625rem}

※1.aligncenterの場合はブロック要素に変更して左右からの自動位置でセンター配置を実現しています。

 

5-2.style.cssにも同様の設定をします。

 border-radius:0;
	border:1px solid #8b8682;}
.entry-content .img.alignleft{
	float: left;
	margin: 5px 16px 0 0;	margin: 0.3125rem 1rem 0 0;}
.entry-content img.aligncenter{
	display: block;
	margin-left: auto;
	margin-right: auto;}
.entry-content img.alignright{
	float:right;
	margin:5px 0 0 10px;	margin:0.3125rem 0 0 0.625rem}

以上の設定で、独自テンプレートでも画像のハンドリングがうまくできる様になります。

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

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

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

先頭の戻る

 

ビジュアルエディタにインデント可能なリストを作成する

TinyMCEではリストとして、オーダリスト<ol>とアンオーダーリスト<ul>が用意されていますが、決して使い易いものではありません。

そこでこのサイトではTinyMCE Advancedの「スタイル機能」を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

下記のその作成方法と使い方を説明します。

1.リストとは

オーダリストは下記アイコンで入れるNo付リストです。

表示サンプル

  1. バナナ
    バナナの2行目
  2. リンゴ
  3. パイナップル

アンオーダリストは下記アイコンで入れるリストです。

表示サンプル

  • バナナ
    バナナの2行目
  • リンゴ
  • パイナップル

リストはEnter(段落替え)で次のリスト項目、Shift+Enter(改行)で2行目となる仕様です。
しかしリストはインデントできないという欠点があります。

理由は、リストは文字列の前に記号を付け、margin-leftで位置をずらす仕様の為にmargin-leftでインデントする仕様バッティングする為です。

そこでインデントが行えて、見た目にも同じリストの様な新しいリストを下記に作成します。

 

2.OL,UL要素に変わる新しいLIST要素の追加

インデントが可能でリストと同じ様に2行目がシフトするリストを作成します。

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

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

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

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

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

 

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

/*****************************************************************/
/* textリストの設定 */
/*****************************************************************/
/*2行目を半角2文字ずらすlist設定*/
p.my_list_2{
  margin:0;
  padding-left:1.2em;
  text-indent:-1.2em;
  margin-bottom:4px;margin-bottom:0.25rem}
/*2行目を半角2文字ずらす(太字で色あり)*/
p.my_list_2b{
  margin:0;
  padding-left:1.2em;
  text-indent:-1.2em;
  font-weight:bold;color:#228b22;
  margin-bottom:4px;margin-bottom:0.25rem}
/*2行目を半角4文字ずらすlist設定*/
p.my_list_4{
  margin:0;
  padding-left:2.45em;
  text-indent: -2.45em; /*最初の行だけ*/
  margin-bottom:4px;margin-bottom:0.25rem}
/*2行目を半角4文字ずらす(太字で色あり)*/
p.my_list_4b{
  margin:0;
  padding-left:2.45em;
  text-indent: -2.45em;
  font-weight:bold;color:#228b22;
  margin-bottom:4px;margin-bottom:0.25rem}

※1.text-indentは文章の1行目の字下げ幅で、これをマイナスする事によりLIST形式を作り出します。

※2.p.××をいう表記形式はp要素に付くclassを意味しますp.my_list_2を選択すると下記形式になります。
<p style=”my_list_2″>文字列</p>

 

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

/****************************************
textリストの設定
*****************************************/
/*2行目を半角2文字ずらすlist設定*/
.entry-content p.my_list_2{margin:0;padding-left:1.2em;text-indent:-1.2em;margin-bottom:4px;margin-bottom:0.25rem}
/*2行目を半角2文字ずらす(太字で色あり)*/
.entry-content p.my_list_2b{margin:0;padding-left:1.2em;text-indent:-1.2em;font-weight:bold;color:#228b22;margin-bottom:4px;margin-bottom:0.25rem}
/*2行目を半角4文字ずらすlist設定*/
.entry-content p.my_list_4{margin:0;padding-left:2.5em;text-indent: -2.2em;margin-bottom:4px;margin-bottom:0.25rem}
/*2行目を半角4文字ずらす(太字で色あり)*/
.entry-content p.my_list_4b{margin:0;padding-left:2.5em;text-indent: -2.2em;font-weight:bold;color:#228b22;margin-bottom:4px;margin-bottom:0.25rem}

 

2.新しいリストの使い方

2-1.使い方

LIST形式にしたい文書を選択し、上記ボタンから
p.my_list_2
p.my_list_2b
p.my_list_4
p.my_list_4b
の何れかを選択します。
bが付いてスタイルは、太字でカラー文字になります。

 

2-2.半角2文字リスト(p.my_list_2、p.my_list_2b)の例

表示サンプル(p.my_list_2を指定した場合)

1.バナナ
バナナの2行目

2.リンゴ

3.パイナップル

•バナナ
バナナの二行目

•リンゴ

•パイナップル

上記はオーダリスト、アンオーダリストとほぼ同じように表示され、更にインデントが利きます。

半角2文字リストは上記以外に

・全角系:等が使えます。

・半角系:1)1.a)等が使えます。

 

2-3.半角4文字リスト

表示サンプル(p.my_list_4を指定した場合)

1-1.バナナ
バナナの2行目

1-2.リンゴ

1-3.パイナップル

半角4文字リストは上記以外に

※1.注1.等にも使えます。(総て半角4文字です)

 

3.インデント操作 

新しく作成したリストをインデント可能にする為には下記ドキュメントを参照してください。

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

その結果、下記インデントボタンでインデントが可能になります。

ビジュアルエディタで利用するフォント設定

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に関しては游ゴシックが使われている様だ。

 以上の結果のまとめ

①欧文フォントだけの指定では、日本語表示がブラウザによって異なる。

②新サイトのWindowsでの日本語表示は、メイリオがあっていると思う。
(ネットで評判の游ゴシックは、仮名部分のフォントが好きになれないので却下)

③欧文フォンはArialよりメイリオと近いVerdana(ヴァーダナ)が良い。

④MACの日本語表示は確認できないがネットで推奨されている’ヒラギノ角ゴ Pro W3’とする。

 

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フォントで凝ったフォントは有料の物が多く、ブログレベルでの利用は断念しました。