Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressコンテンツエディターを使いこなすための16のヒント

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressユーザーの大半は、投稿やページ作成のためにコンテンツエディターを使ってほとんどの時間を費やしています。WordPressには直感的に使えるGutenbergブロックエディターが搭載されており、とても使いやすい。

しかし、パワーユーザーとして、あまり知られていないトリックをいくつか学ぶことで、生産性を大幅に向上させることができます。そうすれば、非常に魅力的なコンテンツを短時間で作成できるようになる。

この投稿では、WordPressコンテンツエディターを使いこなすためのコツをご紹介します。これらのヒントは、WordPressコンテンツエディターをプロのように使いこなす方法を教えてくれます。

Expert tips on using the WordPress content editor

1.基本ブロックを学ぶ

ブロックはWordPressコンテンツエディターの主要な構成要素であり、そのためブロックエディターと呼ばれることもあります。

Using blocks in WordPress content editor

コンテンツ内の各要素はブロックで構成されています。初期設定のWordPressには、段落、リスト、画像、ギャラリーなど、よく使われるブロックがたくさん用意されています。

これらのブロックを使って、美しいコンテンツレイアウトを作ることができます。そのため、さまざまなブロックを調べ、コンテンツでどのように使えるかを学ぶことが重要になります。この投稿の後半でも、いくつかのブロックについて言及します。

2.キーボードショートカットを使い始める

Using keyboard shortcuts

テキストを太字にしたり、リンクを追加するためだけにマウスを動かすのは非効率的です。コンテンツエディターには便利なキーボードショートカットがいくつか用意されており、マウスを使わずに一般的な書式設定を行うことができます。

キーボードショートカットを使えば、時間を節約し、より速く文章を書くことができます。WordPressで最も時間を節約できるキーボードショートカットのガイドをご覧ください。

3.個別行間と二重行間

初心者レベルのユーザーの多くは、WordPressで段落や改行を作成する方法を理解するのが難しいと感じています。

コンテンツエディターで新しい段落を追加するには、Enterキーを押すだけです。WordPressは新しい段落を二重行間隔で追加します。

Adding double line spacing in WordPress

ただし、個別改行のみを行いたい場合は、Shift + Enterキーを同時に押す必要があります。

WordPressで個別/二重行間を追加する方法については、こちらのガイドをご覧ください。

4.編集画面の並び替え

コンテンツエディターは、基本的にトップバーと右側のカラムで構成されるクリーンなキャンバスです。これにより、投稿を作成するためのすっきりとしたユーザーインターフェースを提供します。

エディターは編集中のブロックの上にツールバーを表示します。画面の右上にある3つの点のメニューをクリックすることでツールバーを移動させることができます。

Top toolbar

また、上部の歯車アイコンをクリックすることで、設定欄の表示・非表示を切り替えることができます。

Hide settings column

WordPressでは、スポットライトモードに簡単に切り替えることもできます。スポットライトモードでは、他のコンテンツを薄暗くすることで、今いるブロックをより目立たせることができます。

Spotlight mode

画面にもっと余白が必要ですか?フルスクリーンモードに切り替えると、上部にツールバーが表示され、すっきりとしたキャンバスになります。

fullscreen mode

5.WordPressビジュアルエディターでフォントサイズを変更する

タイポグラフィがウェブコンテンツにおいて非常に重要な権限を持つことは理解している。読者の注意を引くためにフォントサイズを使い分けたり、長い投稿の中で異なるセクションを強調したい場合もあるだろう。

Change font size in WordPress content editor

フォントサイズを変更したいブロックを選択するだけで、右側のブロック設定にフォントサイズのオプションが表示されます。

6.投稿に見出しを追加する

見出しは読みやすさを向上させる重要な権限グループです。そのため、Googleのような検索エンジンも見出しをSEOのために重要視しています。見出しにフォーカスキーワード(ユーザーが検索に使う言葉)を使うことで、検索エンジンはそのキーワードの重要性を理解しやすくなります。

コンテンツエディターでは、投稿に見出しを簡単に追加することができます。見出しブロックを選択し、ブロックの設定から見出しのサイズとテキストの配置を選択するだけです。

Adding headings to your articles in WordPress content editor

また、見出しにリンクを追加したり、太字にしたり、斜体にしたりすることもできます。

7.投稿にカラムを追加する

WordPressのコンテンツエディターにはカラムブロックがビルトインされており、カラムにコンテンツを追加することができます。これを使えば、簡単に雑誌のような文章を作ることができます。

エディターにカラムブロックを選択して追加するだけです。ブロックの設定から追加したいカラム数を選択できます。

Adding columns to your posts

各カラムは自動的に段落ブロックを含みます。各カラム内には、お好きなブロックを簡単に追加することができます。例えば、ブロック引用、画像、段落などです。

ただし、テキストの横に画像を追加したい場合は、次のヒントを参照してください。

8.テキストの横に画像を追加する

WordPressの古いバージョンでは、テキストのすぐ横に画像を適切な配置で追加することは非常に困難でした。この問題はMedia & Textブロックで修正されました。

Media and text block in WordPress content editor

これにより、テキストブロックの隣に画像を追加することができます。2つのブロックの幅と間隔は自動的に調整されます。

ブロックを全幅にし、テキストブロックの設定オプションを使用することができます。

9.WordPressでYouTube動画を追加する

WordPressサイトに動画をアップロードすることができる。しかし、WordPressはストリーミング・プラットフォームとして使用するようには作られておらず、ほとんどのWordPressホスティングサービス会社は大きなファイルを適切に提供することができません。

さらに詳しく知りたい方は、WordPressサイトに動画をアップロードしてはいけない理由の投稿をご覧ください。

代わりに、動画をYouTubeや他のストリームサイトにアップロードし、WordPressの投稿やページに埋め込むことをお勧めします。

Adding YouTube block in WordPress content editor

YouTubeブロックを使って追加したい動画のURLを貼り付けるだけで、WordPressが自動的に埋め込んでくれます。

また、動画のURLを段落やテキストブロックの中に貼り付ければ、WordPressが自動的にYouTubeブロックに変換してくれます。

Auto embed YouTube videos in WordPress

10.WordPress投稿にテーブルを作成する

投稿エディターには、WordPressの投稿やページにテーブルを簡単に追加できるブロックも用意されています。

テーブルブロックを追加し、追加したいカラムと行の数を選択するだけです。必要に応じて、後からカラムや行を追加することもできますのでご安心ください。

Enter the rows and columns for your table

その後、プレーンテーブルが表示されます。表のセルにコンテンツを追加したり、ブロックの設定から表の色やスタイルを選択することができます。

Table block preview

WordPressのテーブルブロックは基本的なテーブルには適していますが、多くの機能が欠けています。例えば、ヘッダー行を選択したり、カラムをソート可能にしたり、行をハイライトしたりすることはできません。

そこで、TablePressの使用をお勧めする。これは、美しいテーブルを作成し、WordPressの投稿やページに追加できる無料のプラグインです。

さらに詳しく知りたい方は、WordPress投稿日にテーブルを簡単に追加する方法をご覧ください。

11.WordPressの投稿とページにボタンを追加する

WordPressの投稿やページに行動喚起を追加したい場合、ボタンは重要な権限グループになります。

コンテンツエディターには基本的なボタンブロックが用意されており、コンテンツに素早くボタンを追加することができます。

The default Button block in WordPress

ボタンは、Square、Rounded、枠線の3つのスタイルがあります。また、背景、テキストの色を選択し、ボタンを中央、左、右に配置することができます。

12.WordPress投稿にカバー画像を追加する

New York Timesのような人気のある出版物で、記事の真ん中にカバー画像が使われているのを見たことがあるかもしれない。カバー画像とは、投稿の真ん中に配置される画像のことで、テキストが重なることもある。

カバー画像の目的は、コンテンツをより魅力的なものにすることです。また、ユーザーにテキストを読む手を休めさせ、画像を見て注意を引くこともできます。

コンテンツエディターでは、投稿にカバー画像を簡単に追加することができます。カバー画像ブロックを追加し、使用したい画像をアップロードするだけです。理想的なのは、ワイドフォーマットで見栄えのする大きめの画像ファイルです。

Cover image block

詳しくは、カバー画像とアイキャッチ画像の違いやブログでの使い分けについての投稿をご覧ください。

13.段落の色を変更する

気づかれないことが多いもう一つの巧妙なトリックは、色を変更する機能である。ほとんどの人は、投稿全体を通してテキストの一貫性を保ちたいと思う。

しかし、時折色を使うことで、ユーザーの注意を向けさせたり、投稿の重要な部分を強調したりすることができる。

コンテンツエディターでは、右カラムに色のオプションが表示され、好きな色を選ぶことができる。背景色と文字色の組み合わせが読みやすいことを確認してください。

Change background and text color in content editor

14.投稿にウィジェットを追加する

ウィジェットはブロックとよく似ている。コードを追加することなく、WordPressサイトにウェブ要素を追加することができます。

一般的に、ウィジェットはサイトのサイドバーやフッターエリアで使用されます。しかし、お問い合わせフォームのようなコンテンツエリアにウィジェットを追加することもできます。

ブロックの追加ボタンの下にあるウィジェットのセクションを探してください。ここから、投稿やページでよく使われるウィジェットを使うことができます。

Adding widgets in WordPress posts and pages

15.WordPress投稿にカスタムHTMLを追加する

WordPressのコンテンツエディターは、完全に視覚的なWYSIWYGエディターです。しかし、必要に応じてHTMLコードを追加することができます。

最も簡単な方法は、投稿にカスタムHTMLブロックを追加することです。その後、追加したいHTMLを貼り付けるだけです。

Adding custom HTML in WordPress post

16.投稿の単語数やその他の統計情報を取得する

長い投稿をするとき、記事の概要、単語数、配置を確認したいと思うかもしれない。

コンテンツエディターツールバーの上部には、そのためのボタンが2つあります。まず、情報ボタンで、単語数、段落、ブロック、使用した見出しに基づく投稿のアウトラインを表示します。

Article stats

そのすぐ隣には、ブロックナビゲーションボタンがあります。投稿で使用したブロックをすべて表示し、ブロックをクリックするとそのブロックに直接ジャンプすることができます。

Jump to a block in your post

より詳細なデータを取得するには、WordPressでワードカウント統計を取得する方法のガイドを参照してください。

この投稿が、WordPressコンテンツエディターを使いこなすための新しいヒントを発見する一助となれば幸いです。また、メールマガジンを作成してブログのトラフィックを増やす方法についてのガイドもご覧ください。

この投稿を気に入っていただけたなら、WordPress動画チュートリアルのYouTubeチャンネルをぜひご登録ください。Twitterや Facebookでもご覧いただけます。

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

43件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mrteesurez says

    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.

  3. Khalid says

    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 says

      Your theme’s header is decided by your theme, not the post/page editor. For changing it you would normally go under Appearance>Customize. :)

      管理者

  4. Sanavi says

    Very helpful for beginners. Bookmarking this article. I will surely implement these tips in my blog.

  5. Bob says

    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?

  6. Abhijit Bangal says

    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 says

      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 :)

      管理者

    • WPBeginner Support says

      Glad we could teach you something new and hope this trick helps with your content :)

      管理者

  7. Michael Walther says

    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 says

      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 :)

      管理者

  8. Valentin Born says

    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.

  9. Pawan Singh says

    Hi Admin, would you please tell all your readers which editor you use. i’m impressed with the styling of text.

  10. Amanda says

    Great article! I learned some very helpful things, and was reminded of other helpful things I’ve learned from you! Thanks so much!

  11. kittkatt123 says

    Is there a keyboard shortcut to switch between the text editor and the visual editor? Or do I have to click every time?

  12. Rick Teisan says

    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 says

      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.

      管理者

  13. Nadeem says

    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. :)

  14. jagmohan singh negi says

    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.

  15. WPBeginner Staff says

    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.

  16. Gary Neal Hansen says

    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?

  17. Derek Wyatt says

    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?

  18. John Mauldin says

    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

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。