WordPressブログはじめてみる?

[WordPress] ビジュアルエディターを便利に使うためのショートカットまとめ

こんにちは!きち(@YOSHI_YANO)です。このブログもそうですが、WordPressというブログシステムを使用しています。僕の周りのブロガーさん達はテキストエディターを使っている方が多いのですが、僕はずっとビジュアルエディターを使っています。理由はビジュアルエディターの方が文章を書くということに集中できるということと、単純にその方が早いから。という理由です。

ですので、ビジュアルエディター推奨派なのですが、もっとビジュアルエディターの良さを知ってもらうために、ビジュアルエディターをもっと便利に使うためのショートカットをまとめておきたいと思います。

※ちなみに今回はMacでの操作で書いていますが、Windowsの方は「command → Ctrl」「option → Alt」に置き換えてやれば同じことができます。(できるはずw)

SPONSORLINK

ビジュアルエディターでよく使うショートカット

見出し(command+数字)

ショートカット:
command+数字

これが最もよく使うショートカットですが、見出しを作成するために使うショートカットです。エディター上部を選択してもいいのですが、ショートカットの方が断然早いのでショートカットを覚えておいたほうが効率が上がります。

ビジュアルエディターを便利に使うためのショートカット_2014-10-26_15_33_04

使い方としてはまず普通に文字を打った後、見出しにしたい部分を選択して、「command+数字

見出しレベル2にしたい場合は、command+2を使います。他にも見出し3とか見出し4を使いたい場合は、数字の部分を「3」とか「4」でやってやればOKです!

文字を太字にする(command+b)

ショートカット:
command+b

ビジュアルエディターを便利に使うためのショートカット_2014-10-26_15_42_25

文字を太字にして強調させたい場合は「command+b」です。コントロールバーの「B」の部分にあたります。ショートカットもbなので覚えやすいですね。※ちなみにこの太字はソースでいうとstrongにあたるためHTML上の強調にあたり、見た目を太くする<b></b>とは意味が異なりますのでご注意を。記事内のテキストとして強調させたい場合に使用して下さい。あと使いすぎは禁物です。

リンクを挿入(option+Shift+a)

ショートカット:
option+Shift+a

ビジュアルエディターを便利に使うためのショートカット_2014-10-26_15_42_25

リンクを設置する場合は、リンクさせたいテキストを選択後「option+Shift+a」でできます。ポップアップでリンクの設定画面がたちあがるので、リンクを打ち込むか自分の過去記事にリンクさせたい場合は下の「既存のコンテンツにリンク › 検索」を押せば記事タイトルがでてきますので、選択すればURLとタイトルが上の部分に挿入されるので、あとは「リンク追加」を押すだけです。

ちなみに選択するのは文字だけじゃなくて画像でもOKです。ビジュアルエディターを便利に使うためのショートカット 2014-10-26 15.44.09

引用文にする(option+Shift+q)

ショートカット:
option+Shift+q

ビジュアルエディターを便利に使うためのショートカット_2014-10-26_15_42_25

ブログをしている方でよく使うのがこの「引用」ですよね。ショートカットは「option+Shift+q」。Wikipediaなどで文章を抜粋して自分のブログにのせたりする場合によく使います。

ビジュアルエディターを便利に使うためのショートカット_2014-10-26_15_54_59

リストタグを作成(option+Shift+u)(option+Shift+o)

ショートカット:
[番号なしリスト] option+Shift+u
[番号つきリスト] option+Shift+o

最後にこれもよく使うタグとして、リストタグがあります。細かな説明が難しかったので下のアニメーションgifをご覧ください。基本的な使い方は先に改行したテキストを書いておいて、それを選択して「option+Shift+u」か「option+Shift+o」を押すだけです。uとoの違いは番号なしリストか番号付きリストかどうかです。

リストタグショートカットアニメーション

続きを読む− moreタグ(option+Shift+t)

ビジュアルエディタショートカット_2014-10-31_18_10_21

ショートカット:
option+Shift+t

使っているかたもいない方もいるかと思いますが、続きを読むタグ(more)のショートカットです。moreの「m」じゃないんかい!と思われるところですが、つづきをよむ(tudukiwoyomu)の頭文字の「t」とおぼえて下さい。「m」じゃない理由は下記…

メディアを追加(option+Shift+t)

ビジュアルエディタショートカット 2014-10-31 18.14.42

ショートカット:
option+Shift+m

上のmoreタグが「m」じゃないはこのせいです。メディア[media]の頭文字の「m」が使われています。おそらく続きを読むタグは使う人が限られるし、こちらのメディアを追加の方が需要があるのでこちらが優先されているんですね。

ビジュアルエディターをさらに使いやすくするプラグイン「Ultimate TinyMCE」の紹介

ここまでよく使う基本のショートカットを抑えてきたのですが、ショートカットだけではできない(そもそもWordPressのビジュアルエディターにない)機能もあります。そんなときはプラグインのUltimate TinyMCEをインストールしてやれば幸せになれるかもしれません。

どうしてもタグを挿入したい場合

ブログなどをしている場合、Amazonの商品リンクを貼りたいとかアフィリエイトタグを挿入したいという場合がでてきます。そんなときはテキストエディタに切り替えるしかないのですが、この「Ultimate TinyMCE」を使えばビジュアルエディターのままでタグの操作が可能になります。

ビジュアルエディターを便利に使うためのショートカット_2014-10-26_15_42_25

プラグインを有効化するだけでデフォルトの機能が有効になりビジュアルエディターの見た目が少し変わり、「< >」というボタンが出現します。このボタンを押すと、ポップアップでコードが表示されて、ビジュアルエディターのままタグを表示・操作することができるようになります。

タグを見慣れない方には少し吐き気がするかもしれませんが、Amazonの商品用ソースを入れたりする方はある程度見慣れているかと思いますので、試してみてください。ちょっとしたことですが便利ですよ!

ビジュアルエディターを便利に使うためのショートカット_2014-10-26_16_32_57

テキストエディタとビジュアルエディターを表示切り換えすると思わぬ不具合がでたり、タグが消えたりってことがあるのですが、この機能を使えばその不具合もほとんどなくなっていると実感しています。(※ただし完全に不具合がなくなるかどうかわかりませんのでその辺りは自己責任で。)

他にも多機能だよ!

またこのプラグインはデフォルトでは使えないタグなども使えるようにできたり、機能をカスタマイズすることができるので、興味がある方はいろいろ試してみてください。Ultimate TinyMCEに関してはネタワンさんがうまくまとめてくれているのでそちらをご参照下さい。

参考:Ultimate TinyMCE – ビジュアルエディタを拡張できるWordPressプラグイン – ネタワン

まとめ

さて、ビジュアルエディターの便利なショートカットについて書いていきましたが、あらためて見てみると使っているタグはほとんどありませんね。でもブログを書く上で使うタグというのは僕の場合、そんなにたくさんありません。

なので今後もビジュアルエディターを極めていきたいと思うのですが、この記事をみてビジュアルエディターも悪く無いじゃんという方がいてくれたら嬉しいっす。

シェアしてくれたらうれしー。
ABOUT US
アバター画像
矢野キチ
フリーランスのWEB屋です。このブログでは「自由に生きる」をテーマに生活の中で思ったことをザクザク書いていきます。身体的特徴としては目が細いので、ゴミがあまり目に入らないので人生得しています。

このサイトで使っているWordPressテーマ
「STORK19」

当ブログはWordPressを使用して作られています。そしてデザインテンプレートはSTORK19を使用しています。

4件のコメント

[…] 以前個人ブログでWordPressの更新はビジュアルエディタを使ってますといった記事を書かせていただきました。普通にテキストを書いたり、それを見出しにするくらいであればデフォルトでも問題ないのですが、表組み(table)をしようと思ったらどうでしょう。タグの知識がないと結構難しいですよね。 […]