WordPress投稿文章を見やすく修飾

WordPress(テーマSimplicity2)の文章修飾

WordPress(テーマはSimplicity2)で投稿する時利用しているビジュアルエディタTinyMCE
では文章を簡単に修飾出来るようになっています。今回は、どの様な修飾が出来るのか、その入力方法をまとめてみました。

WrodPressのインストール方法はこちらで説明しています。

XSERVERにWordPressをインストール 2019
XSERVERには、自動インストールと言う機能が有り、「WordPress」,「EC-CUBE」,「XOOPS Cube」,「PukiWiki」と言ったプログラムをサーバーパネルから簡単にインストールすることが出来ます。 XSERVE...

WordPressのテーマSimplicity2をインストールする方法は、こちらから。

Simplicity2をWordPressテーマとしてインストール 2018
WordPressの無料テーマ「Simplicity2」のインストール方法を解説します。 Simplicity2を選んだ理由としては、無料でしかもSEO対策もできる上、何といっても日本語しかも使用している方々多いので、困ったと...

ビジュアルエディタTinyMCEとは

ブログ記事の新規作成、編集を行ったり、固定ページの作成、編集を行ったりするエディタ。
入力モードはビジュアルとテキストの2種類があり変更はタブをクリックすることで、いつでも簡単に行えます。

ビジュアルモード


右上のビジュアルタグをクリックするとビジュアルモードとなり、実際に出来ある記事とほぼ同じ見た目で表示しながら編集することが出来まs。

テキストモード


右上のテキストタグをクリックするとテキストモードとなり、HTMLタグの入力も出来ます。

ビジュアルエディタTinyMCEでの文章修飾入力

ビジュアルモードとテキストモードで修飾できるものが違うので、修飾する方法によって切り換えが必要です。

ビジュアルモードでの修飾

ボタンをクリックして修飾範囲枠を出したり、修飾したい文字列を選択して修飾するボタンを押したりして使用します。

引用枠

文章を引用したりする際の、ダブルクォーテーションで囲んだ枠

ダブルクォーテーションのアイコンをクリックすると空の引用枠が出現するので、

 

枠の中に文章を書き入れます。

文章を枠の中に入力

テキストモードでの修飾

テキストモードの場合は、ほとんど次の順序で修飾を行います。
①修飾開始のHTMLタグをアイコンボタンをクリックすることで出す。
②修飾する文章を入力する。
③修飾終了のHTMLタグをアイコンボタンをクリックすることで出す。
①と③のアイコンボタンは、同じボタンで、③のボタンは①のボタンの先頭に”/”が付きます。

太字

太字ボタンをクリック。
②太字
/太字ボタンをクリック。
修飾結果
太字

赤字

赤字ボタンをクリック。
②赤字
/赤字ボタンをクリック。
修飾結果
赤字

太い赤字

太い赤字ボタンをクリック。
②太い赤字
/太い赤字ボタンをクリック。
修飾結果
太い赤字

赤いアンダーライン

赤いアンダーラインボタンをクリック。
②赤いアンダーライン
/赤いアンダーラインボタンをクリック。
修飾結果
赤いアンダーライン

黄色いマーカー

黄色いマーカーボタンをクリック。
②黄色いマーカー
/黄色いマーカーボタンをクリック。
修飾結果
黄色いマーカー

黄色いアンダーラインマーカー

黄色いアンダーラインマーカーボタンをクリック。
②黄色いアンダーラインマーカー
/黄色いアンダーラインマーカーボタンをクリック。
修飾結果
黄色いアンダーラインマーカー

打消し線

打消し線ボタンをクリック。
②打消し線
/打消し線ボタンをクリック。
修飾結果
打消し線

バッジ

バッジボタンをクリック。
②バッジ
/バッジボタンをクリック。
修飾結果
バッジ

キーボード

キーボードボタンをクリック。
②キーボード
/キーボードボタンをクリック。
修飾結果
キーボード

補足情報(i)

補足情報(i)ボタンをクリック。
②補足情報(i)
/補足情報(i)ボタンをクリック。
修飾結果

補足情報(i)

補足情報(?)

補足情報(?)ボタンをクリック。
②補足情報(?)
/補足情報(?)ボタンをクリック。
修飾結果

補足情報(?)

補足情報(!)

補足情報(!)ボタンをクリック。
②補足情報(!)
/補足情報(!)ボタンをクリック。
修飾結果

補足情報(!)

primary

primaryボタンをクリック。
②primary
/primaryボタンをクリック。
修飾結果

primary

success

successボタンをクリック。
②success
/successボタンをクリック。
修飾結果

success

info

infoボタンをクリック。
②info
/infoボタンをクリック。
修飾結果

info

warning

warningボタンをクリック。
②warning
/warningボタンをクリック。
修飾結果

warning

danger

dangerボタンをクリック。
②danger
/dangerボタンをクリック。
修飾結果

danger

pre(ソースコードなど)

preボタンをクリック。
②ソースコードなどの記述
foreach($A as $key=>$val){}
/preボタンをクリック。
修飾結果

ソースコードなどの記述
 foreach($A as $key=>$val){} 

 

他にも修飾用HTMLタグを直接入力して修飾させたり色々出来ますが、今回はここまで