ワードプレスを納品した後、記事を更新していくクライアント様の中にコードが書ける方がいるほうが稀ですよね。そんな時「ビジュアルエディタ」が便利なのですが、ボタンを押した時にどういった処理がされているのかがわかっていないと、結構やっかいなものな気がしましたのでまとめてみました。※2016/03/14時点の情報です。?&gt;↑こちらとします。?&gt;&lt;/div&gt;ここはそのままのほうが楽です。このクラス「wp-editor」はワードプレスの記事投稿画面に振られているクラス名なので、テンプレートにcssで装飾した後にeditor-style.cssファイルにその部分をコピペすれば投稿画面と投稿された記事の見た目を同じにすることができます。editor-style.cssの使い方editor-style.cssは記事投稿画面の見た目を管理しているファイルです。デフォルトだと使用できないので、functions.phpをいじり、好きなスタイルを記載した後に使用しているテーマフォルダにアップしなければなりません。1,functions.php内に//投稿画面編集用cssadd_editor_style('editor-style.css');これを追加する2,editor-style.cssというファイルを作成し、テーマフォルダにアップする。画像の挿入まずは画像を追加するために使う「メディアを追加」ボタンです。これを押すことで「メディアを挿入」メニューがポップアップで出てきます。一応「ファイルをアップロード」と「メディアライブラリ」のタブ切り替えができますが、気にせず画像をドラッグ&ドロップすれば画像がアップロードされます。添付ファイルの表示設定をいじる際は下記のサイト様の情報などをご確認ください。http://webdesignerwork.jp/wordpress/wordpress_image_default/どんなサイズの画像が挿入されるかわからないので、先手を打って画像のサイズ調整を行います。auto;}画像を挿入した後、画像をクリックすることで位置を変更することができます。ありますが、重要なのは前3つです。「左寄せ」ではimgタグにクラス【alignleft】が追加されます。「中央揃え」ではimgタグにクラス【aligncenter】が追加されます。「右寄せ」ではimgタグにクラス【alignright】が追加されます。これを利用することで画像の横にテキストが回りこむレイアウトを作ることが可能になります。auto;}「中央揃え」の時は回り込みは発生せず画像が中央配置になるだけの設定です。テキスト装飾ボタン入力範囲の上側にくっついてるやつですね。テキスト装飾ボタンは対象テキストをドラッグした後にボタンをクリックすることで使用します。・「太字」ボタンテキストを&lt;strong&gt;&lt;/strong&gt;で囲みます。–ダミーテキストダミーテキスト・イタリックテキストを&lt;em&gt;&lt;/em&gt;で囲みます。–ダミーテキストダミーテキスト・打ち消しテキストを&lt;del&gt;&lt;/del&gt;で囲みます。–ダミーテキストダミーテキスト・番号なしリストテキストを&lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;で囲みます。–ダミーテキストダミーテキストダミーテキストダミーテキストテキスト入力後【エンターキー】一回で次のリストに移動します。【エンターキー】二回でリストを終了します。・番号付きリストテキストを&lt;ol&gt;&lt;li&gt;&lt;/li&gt;&lt;/ol&gt;で囲みます。ダミーテキストダミーテキストダミーテキストダミーテキストテキスト入力後【エンターキー】一回で次のリストに移動します。【エンターキー】二回でリストを終了します。・引用テキストを&lt;blockquote&gt;&lt;/blockquote&gt;で囲みます。–ダミーテキストダミーテキストダミーテキストダミーテキスト・横ライン&lt;hr&gt;を挿入します。left;を加えます。–ダミーテキストダミーテキスト・中央揃えテキストを囲むp要素にstyle=&quot;text-align:center;を加えます。–ダミーテキストダミーテキスト・右寄せテキストを囲むp要素にstyle=&quot;text-align:right;を加えます。href=&quot;&quot;&gt;&lt;/a&gt;で囲みます。–ダミーテキストダミーテキスト・リンクの削除リンクを設定したテキストのリンクを外します。・「続きを読む」タグを挿入&lt;!--more--&gt;こちらを挿入します。-2段目-↑こちらのボタンを押すとさらに使用できるボタンが増えます。underline;&quot;&gt;&lt;/span&gt;で囲みます。justify;を追加します。style=&quot;color:選んだ色&quot;&gt;&lt;/span&gt;で囲みます。–ダミーテキストダミーテキスト・テキストとしてペースト他のテキストファイルなどからコピーしてきた文を貼り付ける際、元々装飾していたスタイルを完全に無視するモードに移行します。・インデントを減らす/インデントを増やすインデントを減らしたり増やしたりします。・取り消し/やり直し「取り消し」で一つ前の作業をする前に戻り「やり直し」で「取り消し」をやり直すことができます。・キーボードショートカットショートカット集です。必要ないボタンの削除ボタンが多すぎても混乱を招くだけなので、ある程度機能をしぼったほうが良い時もあります。そんな時はfunctions.phpに下記コードを追加します。‘unlink‘));青い部分を変更すればボタンを消していくことができます。設定についてはこちらのサイト様をご確認ください。h3{font-size:18px;font-weight:bold;}他のcssとバッティングする箇所が現れるかと思いますので注意してください。.wp-editorにwidthやfont-size、font-familyなどを細かく設定することで記事投稿画面と投稿記事の見た目が同じになり、イメージ通りの投稿ができるようになります。地味ですが、ここをキチンと作っておくとお客様満足度が上がると思いますので、なるべくやっていきたいところですね。