WordPressで、記事内の文字に枠をつける方法は?

WordPressで記事を書いていて、なんか味気ない…。
記事内にタイトルをつけたり、文字の大きさや色を変えたりしているけど、もっとメリハリをつけられたらいいのに…。

このようなお悩みお持ちの方へ。

今回は、文字の装飾も中でも、「文字を枠で囲う」ことが簡単にできる方法をお伝えします。
保存版としてもらえたら嬉しいです^^

見出し文字をつける意義?

ブログ記事を書くとき、小見出しをつけたり、文字の大きさや色を変えたり、メリハリをつけている方は多いと思います。

でもなんか素人臭く見えてしまう…。

そんな方にオススメなのは、「見出し文字」を使ってインパクトを持たせる、「文字を枠で囲って強調させる」こと。

この2つを抑えるだけでも、ワンランクアップしたサイトになって行きますよ!

今日お伝えするのはこの2つの方法。まず最初に、見出し文字について。

「見出し文字って、なに?」そう思われる方もいるかもしれません。

文章を読みやすく、するためにつけるもので、本でいうと、章や項目といったものです。
次の写真でいうオレンジで囲んだ部分です。

 

 

ただ文章だけツラツラ書かれている記事よりも、タイトルがあることによって、スッキリ見やすく、整理されていますよね。

見出し設定をした方がいい理由

読み手が読みやすくなる

文章だけ所狭しと並んでいる文章って読みにくいですよね。
本当に必要な内容が書いてある文章なのか、ずっと読んでいかないとわからない。

でも見出しをつけることで、文章が整理されるので、スッキリと読みやすくなります。

Googleでの価値があがる

Googleが検索エンジンの上位にブログをあげる基準としては、いかにお客さんが欲しい情報を提供しているか。
つまり、お客さんが見やすいブログ記事か、情報を提供する上で必要なボリュームの記事かどうか。

細かくいってしまえばたくさんあるのですが、このようなところです。

その中で、「お客さんが見やすいブログ記事か?」といったところ。
本屋さんで本を見つけるイメージを持たれるとわかりやすいかもしれませんね。

あなたはWordPressのカスタマイズの本を探していたとします。
まずは、WordPressの本が置いてあるコーナーに行くと思います。

そこからどんな基準で本を探していきますか?

おそらく、タイトルを見てそれっぽいのを探しませんか?
そして、実際に手にとって、目次を見ませんか?

その時に、あまり思っていた内容と違っていたら、その本は戻してしまいますよね。

逆に、「あっ、知りたいことが色々書いてありそう!」そう思った時は、実際に本文を見て読みやすさだったり、トータル的な判断で最終的に購入しませんか?

お客さんがGoogleやYahooで検索をするときも同じなんです。
その時に重要なのが、ブログのタイトルや、本でいう目次の部分。
それがWordPressでは見出し文字なんです。

見出し文字は、ただ文字を大きくしたり、色を変えたらいいのか?というとそうではないのです。
ちゃんと「見出し文字だよ!」と教えてあげないと、認識してもらえないのです。

その時に認識してもらうために使うのが、「見出し」という項目。
写真のオレンジ枠で囲っている部分から設定していきます。
投稿、固定ページの、新規作成(編集)画面の、「段落」というところから設定していきます。

実は見出しのつけ方にもルールがあるのです。
その辺は、今度改めて記事にしますね!

文字を枠で囲って装飾していく方法

見出し文字は、テーマによって初めから装飾されているものもあります。

CSSと言うコードを最初だけ設定すれば、あとは見出し文字設定していけば自動的に、装飾されるようになるのですが…。これは結構ややこしい作業なのでここではお伝えしません。(最初から見出し文字の装飾されているテーマを選ぶと言うのも一つです。)

今日お伝えするのは、見出し文字に限らず、文字を枠で囲ってインパクトを持たせる装飾のしかたを2つお伝えします。

1. プラグイン「Shortcodes Ultimate」で装飾をしていく

イメージとしては次の画像のようになります。

1. プラグインのインストール

プラグイン → 新規追加

「 Shortcodes Ultimate 」 → 「今すぐインストール」 → 「有効化」

2. ショートコードを挿入

投稿、および固定ページの編集画面で、「ショートコードを挿入」をクリック。

「ノート」をクリック

3. 設定法

必要事項入力後、「ショートコードを挿入」をクリック。
(挿入前に、ライブプレビューで実際にどのように見えるか、見るといいですね)

2. テキスト(HTML)で文字の装飾をしていく

文字を装飾していきたいのなら、テキスト(HTML)形式で必要箇所にタグコードを書いてあげる必要があります。

通常文字を入力する時に、「ビジュアル」で入力されている方が大半ではないでしょうか?

テキスト形式で入力したいときは、オレンジ枠で囲った「テキスト」と言うタブをクリックして編集画面を切り替えてください。

文字を囲んで装飾したいなら、テキスト(HTML)形式で入れたい箇所にタグコードを書いていく。

タグコードとは、<div>〜</div>で形成されています。

<div>は開始記号。
</div>はコードをとじる記号。

今日は、囲み枠を4つご紹介します。
それぞれにコピペ用のコードを書いていますので、編集画面で「テキスト」に切り替えて、囲み枠を入れたい場所にコードを貼り付けてください!


直線の囲み枠

ここに本文を入力する。
改行はShift+Enter

 

以下のコードをコピペしてください。

<div style=”background:#fff; padding:10px; border:2px solid #ffdbff;”>ここに本文を入力する。<br />改行はShift+Enter</div>

  • #○○○○○○:色番号
  • background:背景の色を設定します
  • border ○px:直線の太さを意味します(数値を小さくすれば線が細くなる)
  • padding:ボックスと文字の間にある余白部(数値を小さくすれば余白が少なくなる)

角丸の囲み枠

ここに本文を入力する。
改行はShift+Enter

 

以下のコードをコピペしてください。

<div style=”padding: 10px; border: 2px solid #eddbff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;”>ここに本文を入力する。<br />改行はShift+Enter</div>

  • border-radius:ボックスの角を丸める設定(数値を小さくすれば、角の丸みが減る)

点線の囲み枠

ここに本文を入力する。
改行はShift+Enter

 

以下のコードをコピペしてください。

<div style=”background:#fff; padding:10px; border:2px dashed #ffdbdb;”>ここに本文を入力する。<br />改行はShift+Enter</div>

  • dashed:点線を意味します

二重線の囲み枠

ここに本文を入力する。
改行はShift+Enter

 

以下のコードをコピペしてください。

<div style=”background:#fff; padding:10px; border:3px double#99ffff;”>ここに本文を入力する。<br />改行はShift+Enter</div>

  • double:二重線を意味します

色の設定

WordPressのプラグインを使うときも、HTMLで設定するときも、色を任意で決めるには、「色番号」の設定が必要となります。

色番号は、「#○○○○○○」といったように、#と6桁の英数字から成り立ちます。
あなたが好みの色に変えたいときは、その色のコードがわかれば、自由自在にカスタマイズしていくことが可能になるのです。

その時に利用したいのは、以下のサイトです。
よく私が使っているサイトなので参考にしてくださいね!

インターネットの検索でも、「色番号」で検索すると色々なサイトが出てくるので好みのものを見つけるといいでしょう。

WEB色見本 原色大辞典 – HTMLカラーコード

https://www.colordic.org/