【使える！】WordPress(ワード プレス) のおすすめの装飾方法８選

 

 

こんな悩みに答えます。

 

この記事で解決できる悩み

 

本記事の執筆者

 

WordPressを導入したのはいいけど、基本的な装飾方法について悩むのではないでしょうか？

 

 

 

本記事では、そんなWordPress（ワードプレス）の装飾方法について一覧にまとめて紹介します。

 

「見出し」「太字」といった基本的な装飾方法から、アイコンの設定方法といった応用の設定方法を紹介していきます！WordPressの装飾に悩みましたら、本記事をいつでも読み返せられるようにブックマークしておくことをオススメします。

 

なお、WordPressブロックエディタでの装飾方法は以下でも紹介していますので参考にしてみてください！

 

WordPressプラグインGutenberg（グーテンベルク）の使い方とアフィリエイトリンクの貼り方を紹介！

続きを見る

 

基本的な投稿方法【WordPressの装飾前に！】

基本的な投稿方法【WordPressの装飾前に！】

 

装飾をする前にまずは、記事の投稿方法を紹介します。

※記事の投稿のやり方をすでに知っていてWordPressの装飾のやり方一覧を知りたい方は「WordPressでできる装飾一覧」から飛べます。

 

記事の投稿をするには、WordPressを開きまして、サイドバーメニュー「投稿 → 新規追加」をクリックします。

 

 

すると以下の投稿画面が開きますので、こちらに記事を書きます。

 

 

 

ちなみに、今回は以下のツールバーを使って装飾をしていきます！

 

 

それでは具体的なWordPressの装飾方法について紹介します。

 

WordPressでできる装飾一覧８選

WordPressでできる装飾一覧8選

 

WordPressの具体的な装飾方法を紹介します。

 

 

・見出しのつけ方

 

見出しは以下赤枠で囲った「段落」をクリックすると、「見出し2」「見出し3」と表示されるので好きな見出しを選択します。

 

 

ちなみに、H2,h3をしっかり設定しておくことで、Googleに記事の内容を伝えることができSEO効果があります。

 

SEOをちゃんとやっておくことで、Googleの検索結果で上位を獲得できユーザーが流入してくれる機会が増えます。

 

 

関連記事

ブログ見出しの作り方とSEOで検索上位を狙うポイントを徹底解説

続きを見る

 

・フォントサイズの変更

 

文字を大きくしたい場合や小さくしたい場合に、フォントサイズを変えられます。

 

 

 

文字のサイズを変えたい箇所をドラックして、フォントサイズのボタンを押して好きな文字サイズを選択すれば大きさを変更できます。

 

 

文字を大きくして一文を強調したい時なんかには便利です。

 

・文字の装飾

 

太字を太文字にしたり下線を入れて装飾したい場合には、以下の赤ワクで囲った箇所をクリックして太字や下線に変えられます。

 

 

太くしたい文字を選択して、ツールバーの「B」ボタンをクリックしますと太字に変えられます。

 

また、お使いのWordPressテーマによって異なりますが、当ブログで使用しているAFFINGERですと以下のようにマーカーを使って装飾ができます。

 

 

太字はユーザーに文字を目出せるといったメリットがあり、SEOにも効果があります。

 

WordPressブログやサイトで太文字を使うメリットについて、以下記事で詳しく紹介しているので参考にしてみてください。

 

関連記事

Strongストロングタグ（太字）はSEOで重要？【使いすぎには注意】

続きを見る

 

・文字の色を変更する

 

文字に色をつけたい場合は、以下の「テキスト色」ボタンをクリックします。

 

 

テキスト色ボタン横にある「▼」をクリックすると色の選択ができます！

 

 

 

 

・改行

 

改行コードは<br>を入れてあげます。

 

 

 

ただ、こちらは「テキスト」モードで必要になりますので、「ビジュアル」モードでは改行コードは入れる必要はなく、Enterキーを押せば改行になります。

 

・引用タグの装飾

 

参照するサイトを掲載したいときに、引用タグは使えます。

 

引用タグを表示させるには、以下のボタンをクリックします。

 

 

このボックス内にテキストを入力すれば引用タグ内に文字を入れることができます。

 

 

なお、引用タグをおしゃれに装飾したい場合は、サルワカさんが紹介してくれているCSSを使うことで簡単におしゃれなデザインを作れます。

 

参照元：CSSで作る！魅力的な引用デザインのサンプル30（blockquote）

 

 

多種多様な引用のボックスデザインがあるので、自分のサイト・ブログのデザインに合わせてカスタマイズしてみてください。

 

・箇条書きリスト/番号リスト

 

ブログで文字を羅列して紹介するのではなく、何かをリストにして紹介したい場合に箇条書きや番号リストが使えます。

 

こちらもワンクリックでリスト変更できるので、簡単に作れちゃいます。

 

箇条書き

 

以下のように箇条書きにしたいテキストにカーソルを当てて、ボタンをクリックします。

 

 

すると選択していた文章が箇条書きとして表示されます。

 

番号リスト

 

番号リストも同じやり方でOKです。

 

 

これで番号付きのリストの完成です。

 

ちなみに、「▼」をクリックすると「ラテン文字小文字」「ギリシャ文字小文字」を選べます。

 

・アイコン作成

 

ブログをみているとオシャレなアイコンをよくみかけると思います。

 

 

矢印やSNSといったアイコンがあり、ブログにちょっとおしゃれなアイコンを表示させたい時に簡単につけられます。

 

例えば、以下のようなアイコンを入れてみたい方にはオススメです。

 

 

ブログでよくみるのが、メニューのテキストの横に置いていたりしますね。

 

ブログ初心者でアイコンを設置してみたい方にはオススメです。

 

WordPressブログでFontAwesomeを使用する方法は、以下記事で紹介していますので参考にしてみてください。

 

 

WordPressで文字を装飾する方法（ブロックエディタ編）

WordPressで文字を装飾する方法（ブロックエディタ編）

 

ブロックエディターで文字の装飾方法を紹介します。

 

 

先に紹介したのが「Classic Editor」の編集方法でしたが、ここからはGutenberg（ブロックエディター）で文字を装飾する方法をご紹介します。

 

 

なお、ブロックエディターをインストールしていない方は、以下からできます。

 

>> Gutenberg（ブロックエディター）をインストール

 

画像を使って、１つずつ順番に紹介します。

 

1. 文字の大きさを変える

 

文字の大きさを変えるには、画面右側にある「ブロック」内の「タイポグラフィ」で調整できます。

 

 

サイズを変えたい文字をドラックして、タイポグラフィにある文字サイズを選べば、大きさを自由に変えられます。

 

 

2. 文字を太字にする

 

文字を太字にするには、太字にしたい箇所をドラッグします。

 

 

ドラッグができましたら、以下の【B】をクリックして文字を太字に変えられます。

 

 

 

『Strongタグ（太文字）を多用しすぎてないか？』気になりましたら以下記事をチェックしてみてください。

 

Strongストロングタグ（太字）はSEOで重要？【使いすぎには注意】

続きを見る

 

3. 文字に色をつける

 

まずは、色を変えたい文字をドラッグしましょう！

 

ドラッグができましたら、画面右のブロックのタブをクリックして、色の「テキスト」を選択します。

 

 

クリックすると色のテーマが表示されるので、好きな色を選択して変更できます。

 

 

 

4. 文字の背景に色をつける

 

文字に背景色をつけるには、先ほど同じように、画面右側にある「ブロック」のタブをクリックします。色のカテゴリ内に「背景」があるのでクリックすれば、文字の背景色が変わります。

 

 

5. 文字に下線をつける

 

Gutenberg（ブロックエディター）には、下線をつける機能がありません。

 

でも、ご安心ください！

 

 

 

上記のショートカットキーを使えばOKです！

 

こちらも文字をドラッグして、ショートカットキーを使えば文字下に下線がつきますよ。

 

 

WordPreessの有料テーマでさらに装飾できる！

WordPreessの有料テーマでさらに装飾できる！

 

実は、有料のWordPressテーマを使うことで簡単に装飾できます。WordPressの有料テーマは、無料のテーマと比べますと機能面がしっかりしており、おしゃれなデザインを作ることができます。

 

有料のWordPressデザインテーマ例４つ

 

上記のようにデザインによって、「スタイリッシュ」「かわいめのデザイン」をカスタマイズできます。また、上記以外にも最近ではおしゃれな有料テーマが沢山あります。

 

有料のWordPressテーマ

 

 

以下記事でオススメのWordPressテーマについて詳しく紹介していますので気になる方はご覧ください！

 

おすすめ

WordPressのおすすめ有料テーマ７選・無料テーマ１選【選び方も解説！】

続きを見る

 

ただ、有料テーマは沢山あるのでどのテーマにするか悩むと思いますが、悩みましたらAFFINGER6をオススメします。当ブログでもAFFINGERを使っておりカスタマイズのしやすさや初心者にも使いやすいテーマといえます。

 

 

ワードプレスを装飾してオリジナルのデザインを作成しよう！：まとめ

 

今回はWordPress(ワードプレス)の装飾方法を紹介しました。

 

ブログを綺麗にすることでモチベーションも上がりますし、読みやすい記事になります。

 

今回紹介したWordPressの装飾を使ってオリジナルのデザインを作ってみてください！

 

有料のWordPressテーマ