WordPressの記事記載時に行う文字入力・装飾・リンク生成・見出しの付け方と画像挿入方法を、ご紹介

今回は、WordPressでブログ記事を書く際の

  • 文字入力・装飾・リンク生成
  • 見出しの作成方法
  • 画像挿入

についてご紹介していきます。

WordPressでの文字入力、装飾が

  • 初めての方

参考にしていただけると思います。

※本記事では、動きのある画像(gif画像)を使用しているものがございます

目次

文字入力・装飾

WordPressで記事を書くためには、「編集画面」に行く必要があります。
その編集画面で文章を入力し、文字の装飾を行うイメージです。

新規追加

記事を作成する為に、WordPress、左メニューから【投稿】→【新規追加】をクリック。
新規投稿画面が表示されました。

以下の赤枠部分に記事本文を入力していきます。

記事本文の編集についてですが、以下の記事でお伝えしたプラグインがすでに導入されている事を前提でお伝え致します。
プラグインを導入していないのであれば、プラグイン【TinyMCE Advanced】が必須ですので、導入してください。↓でご紹介しています。

https://kima01.com/plugin-tinymce-advanced/

その他のおすすめプラグインは↓以下でご紹介しています。

https://kima01.com/essential-plugin/

文字の入力する

まずは、記事本文の入力です。

文字入力は、以下の空欄部分にカーソルを合わせて、文字を入力していきます。

※gif画像

文字に色をつける

文字色は、文章入力欄の上にある【テキスト色】から色を選択します。
あらかじめ文字色を選択して文字を入力することもできますし、入力した文字を後から変更することもできます。

※gif画像

上記のgif画像では、

  • 予め入力してある文字を選択(ドラッグ)
  • テキスト色の【▼】をクリック
  • タブより任意の色を選択

で、文字の色を変えています。

これから入力する文字の色を変えるには、

  • テキスト色の【▼】をクリック
  • タブより任意の色を選択
  • 文字入力

の順番になります。

文字色のルールを決める

文字に色を付ける際は一定のルールを定めて色を付けていきましょう。
僕の場合であれば、以下のように表現しております。

  • 赤:否定・ネガティブ表現等
  • オレンジ:単なる強調表現
  • 青:肯定・ポジティブ表現・本当に大事な部分

基本的に、これ以外の色はあまり使いません。

また、背景の白と相性の悪い色(黄色等)は絶対に使わないようにしましょう。

こちらが黄色なのですが、おそらくほとんど何も見えないと思います。

上記の文字は黄色なのですが、このようにかなり見えずらいので使わないほうがいい理由がお分かりいただけたかと思います。

文字の大きさを変更する

文字の大きさは、文章入力欄の上にある”フォントサイズ”から、文字の大きさを選択することにより変更可能です。
あらかじめ選択しておいた文の大きさを変更したり、これから入力する文字を指定の大きさにして入力することも可能です。

gif画像

文字の大きさを変更する場合は、変更したい文章を選択した後、文章入力欄の上にある【フォントサイズ】から任意の数値を選択します。

上記の画像のように、あらかじめ選択しておいた文字の大きさを変更できます。
これから、入力する文字を指定の大きさにして入力することも可能です。

基本的には、見出し以外でフォントサイズを頻繁に変更することは不自然で、見ずらい印象となるので、見出し以外のフォントサイズは統一するようにしましょう。

文字を太字にする

文字を太字にする方法をご紹介しております。
何かしらを強調したい時に利用してください。

文字を太字にする場合は、太字に変更したい文章を選択した後、文章入力欄の上にある【B】ボタンをクリックします。
文章を強調させたい場合などに用いましょう。

文字リンクの生成方法

文字リンクとは、例えば、【Gmail】のように、文字にURLを貼り付け、クリックできるようにすることです。
商品をアフィリエイトする際や別ページを紹介する際などに非常に便利です。
※gif画像

文字にリンクを挿入する場合は、リンクを適用したい文章を選択した後、文章入力欄の上にある【リンクの挿入/編集】ボタンをクリックし、URL欄に任意のリンク先URLを入力(コピペでも可)し適用をクリックすれば、完了です。

ブログカードの生成(サムネイル画像付きリンク)【Simplicity】

Simplicity限定ではありますが、サムネイル画像付きリンクを生成する方法をお伝えします。
通称【ブログカード】ともいいます。
(サムネイル画像付きリンク)で、記事編集時にURLを、貼り付けるだけでOKです。

本ブログは【Simplicity】を使用していますので、実際に貼り付けた画像はこちらです。

今回は、WordPressで記事を投稿した際に表示される 【アイキャッチ】画像とは何か? 【アイキャッチ】画像の設定方法 ...

見出しの作成方法

見出しとは、この文字上の「見出しの作成方法」のように、いわゆる目次をつくることです。
見出しを作る事により、「ここの文章では何のことを説明しているのだろう?」ということを、解りやすくしてくれます。

※gif画像

見出しを適用させる場合は、見出しに変更したい文章を選択した後、文章入力欄の上にある【段落ボタン】をクリックし、任意の見出し数を選択しましょう。

見出しについての注意点

基本的に見出しを生成する際は、以下のように生成してください。

見出し2

見出し3

見出し4

見出し5

以下の画像は、わかりやすくする為に(仮)に上の見出しをそのまま見出しにした状態の画像です。

見出し3

見出し4

逆に、以下のように生成しないようにしてください。(悪い例)

見出し4

見出し3

見出し6

見出し5

あくまでも、見出し4は、見出し3を更に細かく分類したもの。
見出し5は、見出し4を更に細かく分類したもの、というふうに考えてください。

見出し1の扱いについての注意

見出しは1~6までありますが、見出し1は記事のタイトルになるので、記事作成時には使用しないようにしましょう。
本ブログでいう見出し①は【WordPressの記事記載時に行う文字入力・装飾方法・見出しの付け方を初心者さん向けにご紹介】です。

画像挿入

文中に画像を表示させる

文中に画像を表示させるには、まず画像をWordPressにアップロードし、アップロードしたファイルを選択することで、表示させます。

※gif画像

画像をアップロード

画面左上の【メディアを追加】をクリック。
ファイルをアップロードページの【ファイルを選択】をクリック。
任意でファイルを選択し、ファイルを【開く】をクリック。
画像のアップロードができました。

画像を選択し、画像を表示させる

画面左上の【メディアを追加】をクリック。
メディアライブラリをクリック。
任意で画像を選択し、【投稿に挿入】をクリック。

以上で完了です。

まとめ

今回は、WordPressでブログ記事を書く際の

  • 文字入力・装飾・リンク生成
  • 見出しの作成方法
  • 画像挿入

についてご紹介しました。

WordPressでの文字入力、装飾が

  • 初めての方

参考にしていただいて、記事の作成をしていただきたいと思います。