WordPressユーザーの大半は、投稿やページ作成のためにコンテンツエディターを使ってほとんどの時間を費やしています。WordPressには直感的に使えるGutenbergブロックエディターが搭載されており、とても使いやすい。
しかし、パワーユーザーとして、あまり知られていないトリックをいくつか学ぶことで、生産性を大幅に向上させることができます。そうすれば、非常に魅力的なコンテンツを短時間で作成できるようになる。
この投稿では、WordPressコンテンツエディターを使いこなすためのコツをご紹介します。これらのヒントは、WordPressコンテンツエディターをプロのように使いこなす方法を教えてくれます。
1.基本ブロックを学ぶ
ブロックはWordPressコンテンツエディターの主要な構成要素であり、そのためブロックエディターと呼ばれることもあります。
コンテンツ内の各要素はブロックで構成されています。初期設定のWordPressには、段落、リスト、画像、ギャラリーなど、よく使われるブロックがたくさん用意されています。
これらのブロックを使って、美しいコンテンツレイアウトを作ることができます。そのため、さまざまなブロックを調べ、コンテンツでどのように使えるかを学ぶことが重要になります。この投稿の後半でも、いくつかのブロックについて言及します。
2.キーボードショートカットを使い始める
テキストを太字にしたり、リンクを追加するためだけにマウスを動かすのは非効率的です。コンテンツエディターには便利なキーボードショートカットがいくつか用意されており、マウスを使わずに一般的な書式設定を行うことができます。
キーボードショートカットを使えば、時間を節約し、より速く文章を書くことができます。WordPressで最も時間を節約できるキーボードショートカットのガイドをご覧ください。
3.個別行間と二重行間
初心者レベルのユーザーの多くは、WordPressで段落や改行を作成する方法を理解するのが難しいと感じています。
コンテンツエディターで新しい段落を追加するには、Enterキーを押すだけです。WordPressは新しい段落を二重行間隔で追加します。
ただし、個別改行のみを行いたい場合は、Shift + Enterキーを同時に押す必要があります。
WordPressで個別/二重行間を追加する方法については、こちらのガイドをご覧ください。
4.編集画面の並び替え
コンテンツエディターは、基本的にトップバーと右側のカラムで構成されるクリーンなキャンバスです。これにより、投稿を作成するためのすっきりとしたユーザーインターフェースを提供します。
エディターは編集中のブロックの上にツールバーを表示します。画面の右上にある3つの点のメニューをクリックすることでツールバーを移動させることができます。
また、上部の歯車アイコンをクリックすることで、設定欄の表示・非表示を切り替えることができます。
WordPressでは、スポットライトモードに簡単に切り替えることもできます。スポットライトモードでは、他のコンテンツを薄暗くすることで、今いるブロックをより目立たせることができます。
画面にもっと余白が必要ですか？フルスクリーンモードに切り替えると、上部にツールバーが表示され、すっきりとしたキャンバスになります。
5.WordPressビジュアルエディターでフォントサイズを変更する
タイポグラフィがウェブコンテンツにおいて非常に重要な権限を持つことは理解している。読者の注意を引くためにフォントサイズを使い分けたり、長い投稿の中で異なるセクションを強調したい場合もあるだろう。
フォントサイズを変更したいブロックを選択するだけで、右側のブロック設定にフォントサイズのオプションが表示されます。
6.投稿に見出しを追加する
見出しは読みやすさを向上させる重要な権限グループです。そのため、Googleのような検索エンジンも見出しをSEOのために重要視しています。見出しにフォーカスキーワード（ユーザーが検索に使う言葉）を使うことで、検索エンジンはそのキーワードの重要性を理解しやすくなります。
コンテンツエディターでは、投稿に見出しを簡単に追加することができます。見出しブロックを選択し、ブロックの設定から見出しのサイズとテキストの配置を選択するだけです。
また、見出しにリンクを追加したり、太字にしたり、斜体にしたりすることもできます。
7.投稿にカラムを追加する
WordPressのコンテンツエディターにはカラムブロックがビルトインされており、カラムにコンテンツを追加することができます。これを使えば、簡単に雑誌のような文章を作ることができます。
エディターにカラムブロックを選択して追加するだけです。ブロックの設定から追加したいカラム数を選択できます。
各カラムは自動的に段落ブロックを含みます。各カラム内には、お好きなブロックを簡単に追加することができます。例えば、ブロック引用、画像、段落などです。
ただし、テキストの横に画像を追加したい場合は、次のヒントを参照してください。
8.テキストの横に画像を追加する
WordPressの古いバージョンでは、テキストのすぐ横に画像を適切な配置で追加することは非常に困難でした。この問題はMedia & Textブロックで修正されました。
これにより、テキストブロックの隣に画像を追加することができます。2つのブロックの幅と間隔は自動的に調整されます。
ブロックを全幅にし、テキストブロックの設定オプションを使用することができます。
9.WordPressでYouTube動画を追加する
WordPressサイトに動画をアップロードすることができる。しかし、WordPressはストリーミング・プラットフォームとして使用するようには作られておらず、ほとんどのWordPressホスティングサービス会社は大きなファイルを適切に提供することができません。
さらに詳しく知りたい方は、WordPressサイトに動画をアップロードしてはいけない理由の投稿をご覧ください。
代わりに、動画をYouTubeや他のストリームサイトにアップロードし、WordPressの投稿やページに埋め込むことをお勧めします。
YouTubeブロックを使って追加したい動画のURLを貼り付けるだけで、WordPressが自動的に埋め込んでくれます。
また、動画のURLを段落やテキストブロックの中に貼り付ければ、WordPressが自動的にYouTubeブロックに変換してくれます。
10.WordPress投稿にテーブルを作成する
投稿エディターには、WordPressの投稿やページにテーブルを簡単に追加できるブロックも用意されています。
テーブルブロックを追加し、追加したいカラムと行の数を選択するだけです。必要に応じて、後からカラムや行を追加することもできますのでご安心ください。
その後、プレーンテーブルが表示されます。表のセルにコンテンツを追加したり、ブロックの設定から表の色やスタイルを選択することができます。
WordPressのテーブルブロックは基本的なテーブルには適していますが、多くの機能が欠けています。例えば、ヘッダー行を選択したり、カラムをソート可能にしたり、行をハイライトしたりすることはできません。
そこで、TablePressの使用をお勧めする。これは、美しいテーブルを作成し、WordPressの投稿やページに追加できる無料のプラグインです。
さらに詳しく知りたい方は、WordPress投稿日にテーブルを簡単に追加する方法をご覧ください。
11.WordPressの投稿とページにボタンを追加する
WordPressの投稿やページに行動喚起を追加したい場合、ボタンは重要な権限グループになります。
コンテンツエディターには基本的なボタンブロックが用意されており、コンテンツに素早くボタンを追加することができます。
ボタンは、Square、Rounded、枠線の3つのスタイルがあります。また、背景、テキストの色を選択し、ボタンを中央、左、右に配置することができます。
12.WordPress投稿にカバー画像を追加する
New York Timesのような人気のある出版物で、記事の真ん中にカバー画像が使われているのを見たことがあるかもしれない。カバー画像とは、投稿の真ん中に配置される画像のことで、テキストが重なることもある。
カバー画像の目的は、コンテンツをより魅力的なものにすることです。また、ユーザーにテキストを読む手を休めさせ、画像を見て注意を引くこともできます。
コンテンツエディターでは、投稿にカバー画像を簡単に追加することができます。カバー画像ブロックを追加し、使用したい画像をアップロードするだけです。理想的なのは、ワイドフォーマットで見栄えのする大きめの画像ファイルです。
詳しくは、カバー画像とアイキャッチ画像の違いやブログでの使い分けについての投稿をご覧ください。
13.段落の色を変更する
気づかれないことが多いもう一つの巧妙なトリックは、色を変更する機能である。ほとんどの人は、投稿全体を通してテキストの一貫性を保ちたいと思う。
しかし、時折色を使うことで、ユーザーの注意を向けさせたり、投稿の重要な部分を強調したりすることができる。
コンテンツエディターでは、右カラムに色のオプションが表示され、好きな色を選ぶことができる。背景色と文字色の組み合わせが読みやすいことを確認してください。
14.投稿にウィジェットを追加する
ウィジェットはブロックとよく似ている。コードを追加することなく、WordPressサイトにウェブ要素を追加することができます。
一般的に、ウィジェットはサイトのサイドバーやフッターエリアで使用されます。しかし、お問い合わせフォームのようなコンテンツエリアにウィジェットを追加することもできます。
ブロックの追加ボタンの下にあるウィジェットのセクションを探してください。ここから、投稿やページでよく使われるウィジェットを使うことができます。
15.WordPress投稿にカスタムHTMLを追加する
WordPressのコンテンツエディターは、完全に視覚的なWYSIWYGエディターです。しかし、必要に応じてHTMLコードを追加することができます。
最も簡単な方法は、投稿にカスタムHTMLブロックを追加することです。その後、追加したいHTMLを貼り付けるだけです。
16.投稿の単語数やその他の統計情報を取得する
長い投稿をするとき、記事の概要、単語数、配置を確認したいと思うかもしれない。
コンテンツエディターツールバーの上部には、そのためのボタンが2つあります。まず、情報ボタンで、単語数、段落、ブロック、使用した見出しに基づく投稿のアウトラインを表示します。
そのすぐ隣には、ブロックナビゲーションボタンがあります。投稿で使用したブロックをすべて表示し、ブロックをクリックするとそのブロックに直接ジャンプすることができます。
より詳細なデータを取得するには、WordPressでワードカウント統計を取得する方法のガイドを参照してください。
この投稿が、WordPressコンテンツエディターを使いこなすための新しいヒントを発見する一助となれば幸いです。また、メールマガジンを作成してブログのトラフィックを増やす方法についてのガイドもご覧ください。
この投稿を気に入っていただけたなら、WordPress動画チュートリアルのYouTubeチャンネルをぜひご登録ください。Twitterや Facebookでもご覧いただけます。
Mrteesurez
Nice post.
I didn’t see any way to see word count, number of paragraphs,l and others in block before, I used to switch to Classic editor to do it.
This post just teach me with block editor. Their are many things we still need to know about WordPress and blogging generally.
Thanks.
WPBeginner Support
You’re welcome, glad we could share how to do this in the block editor
管理者
Kadir
This is a really complete guide. Thanks
WPBeginner Support
You’re welcome
管理者
Khalid
I cannot find the heading block in my editor. Is it that I have inadvertently deleted it. How can I have it back.
WPBeginner Support
Your theme’s header is decided by your theme, not the post/page editor. For changing it you would normally go under Appearance>Customize.
管理者
Sanavi
Very helpful for beginners. Bookmarking this article. I will surely implement these tips in my blog.
WPBeginner Support
Glad you found our article helpful
管理者
Michael Torres
Very helpful for new blogger like me. Basics are very important.
WPBeginner Support
Glad our article could be helpful
管理者
Bob
Good article, looks to be a great tool for beginners like me, are there
any video tutorials as I like to be shown what to do?
WPBeginner Support
For that, you would want to take a look at our video section here: https://videos.wpbeginner.com/
管理者
Abhijit Bangal
I was trying to use the new gallery plugin for testing how it’d work with new blocks, which are now more flexible than before. But I stumbled upon the columns thing and tried out a few combinations. I think, to an extent, I’ll use less of the gallery plugin and more of columns. Of course, the columns cannot be everything that a gallery plugin can do/does. But to me, it’s helped me save a lot of time and energy.
Extremely helpful! Thanks team!
WPBeginner Support
Thanks for sharing how you’re using the block editor, while it won’t have all the features it can help those looking for a custom gallery setup
管理者
Kurt
Single line break…Shift + Enter…sweet. Wish I had known about that before now.
WPBeginner Support
Glad we could teach you something new and hope this trick helps with your content
管理者
Michael Walther
Very good article about the Gutenberg editor. However, I am still not convinced. For me, the Gutenberg editor stays what it is – an excellent answer to a question that I did not ask. Like a huge SUV to drive my daughter to kindergarten. Don’t get me wrong, shiny huge SUVs are a fine thing, but I am just a wordpress author. I’ll stick with my trusty Toyota (ie the ‘old’ WP editor via plugin) as long as I possibly can.
WPBeginner Support
Understandable, as the block editor improves it should become more useful for new WordPress users and have tools that those who have used the classic editor want to use
管理者
Mohamed Hassan
Thanks, an informative useful post.
WPBeginner Support
You’re welcome, glad our post could be helpful
管理者
Valentin Born
Nice overview … but
`By default, WordPress visual editor allows you to change the font size into paragraph text, headings, etc.`
This is incorrect (and implies terrible advice)—don’t use “paragraph“, “heading“ etc. for font-sizes (… but for marking up paragraphs and headings)! While you offer a slightly better option in your mentioned article on how to change font sizes (namely, adding a font-sizes dialog, e.g. using TinyMCE Advanced), only at the very bottom of that article do give the important advice:
`Note: If you want to change the font size of all paragraphs (i.e the entire post content), then DO NOT use the TinyMCE advanced. Rather, you would need to adjust the styling in your style.css file.`
This should even be expanded upon: “If you ever want to change the font-size of a piece of content for purely stylistic purposes, create a class for that and add it to that element“ (perhaps with the help of a plugin)—otherwise you will manually have to crawl through every post and page, readjusting those manually set font-sizes, every time you change your theme’s base font-size.
Pawan Singh
Hi Admin, would you please tell all your readers which editor you use. i’m impressed with the styling of text.
Amanda
Great article! I learned some very helpful things, and was reminded of other helpful things I’ve learned from you! Thanks so much!
Bob Diebel
Thanx much! much learned, much appreciated!
kittkatt123
Is there a keyboard shortcut to switch between the text editor and the visual editor? Or do I have to click every time?
Rick Teisan
I asked how to add a visual to the media library. I was directed to thispage. There isnothing about adding a visual to the library. SUCKS. 39 MINUTES JUST TRYING TO ADD A PHOTO TO THE LIBRARY TO PUT IT IN THE BLOG POST.
MAKE IT EASY
!!!!!!
WPBeginner Support
Hi Rick,
On the post edit screen you will see a button labeled ‘Add Media’ you can click on it and then upload your photo.
You can also add a photo to your WordPress library by visiting Media > Add New page in your WordPress admin area.
Let us know if this solved your issue.
管理者
Hamid
thanks for sharing such valuable tips.
Nadeem
Thanks so much for this easy and simple explanation of all the necessary suggestions for writing an article on wordpress. Keep posting such amazing articles.
Rufus B
One of the best news letters yet from you guys. The links to other recommended articles was super helpful.
Ahmed
Great tips, thanks
jagmohan singh negi
hi syed , its my first landing page of my secrch in google and i dont think i have to go to other sourses to find any information about wprdpress ,blog ,adsense etc.
really nice post with complete information and presentaion is 10/9 in my view.
WPBeginner Staff
WordPress themes are responsible for handling all things related to the visual appearance of your content. Having said that, since each WordPress theme is different, the Visual Editor can not automatically guess what styles to use. To solve this issue, it is a standard practice to add an editor stylesheet in WordPress themes. It seems like your theme does not have one. You can ask your theme developer for support. Or you can create your own editor-style.css file and copy the rules from your theme’s main stylesheet.
Gary Neal Hansen
Thanks for the great tips. At the beginning you say the visual editor is a WYSIWYG environment — but I don’t see what I type in its proper format and font until I hit the “preview” button. Is there a setting to have the editor function as true WYSIWYG?
Chris Finnegan
Excellent roundup, I’ll be using the keyboard shortcuts for headings from now on!
WPBeginner Staff
You are confusing “Paste as Text” button with “Paste From Word” button which is no longer available since 3.9.
Dave Porter
Yep, you are quite correct!
Derek Wyatt
When switching from HTML to Visual editor and vice versa, how do you keep the html information from stripping away? I haven’t noticed a pattern as to how this happens, it just springs up when I least want it to…
As a safety measure, I just stick to the HTML editor because I don’t want to lose my formatting. Unless someone knows a way to prevent this?
Dave Porter
Hi Derek, check out Tiny MCE Advanced
https://wordpress.org/plugins/tinymce-advanced/
And checkout the settings – there is an option to not strip out html like and
John Mauldin
I must say that anyone who doesn’t know about all the wonderful information your site supplies is really missing out on a Great opportunity. I love the fact that you present the information in direct, no b.s., format and written in easily understandable language most anyone can digest. Keep up the GREAT work! JM
Roger Lill
Hi, Thanks for the summary, that should save some time.
Dave Porter
isn’t #13 obsolete with WP 3.9 ?
And ‘TinyMCE Advanced’ is worth a mention
Dave