【Word Press】蛍光ペン風に線を引く加工をショートコード化して作業を効率化する3ステップ

keiko_css_arrange7

イトカズです。

あなたはブログで強調したい部分はどういう工夫をしていますか?

あなたの好きな事を伝える記事も

誰かの為になる問題解決の記事も

書く内容は人それぞれですが

ブログを書く人に共通することが1つあります。

 

イトカズ
たった1つの共通点、それは・・・

一番伝えたい箇所は強調するということです!

当たり前ですよね(笑)

確かに当然ですが、あなたが記事にしてまで書くことはあなたが相当の熱量を持っているはずです。

その熱を伝えるために重要な場所は強調しますよね?

しかし熱を込めすぎて、何から何まで強調しすぎてしまうと、読み手は何が大事かわからなくなってしまいます。

強調するのもテクニックが必要ということを解説させていただきます

 

なぜブログライティングで強調するテクニックが必要なのか

みなさんはブログ記事を書いている時にどんな強調の仕方をしますか?

太文字にしたり

文字の色を変えたり

背景に色をつけたり

文字サイズを変えたり

 

表現方法は様々ですが、みなさん何かしらの手段で伝えたい場所を強調をしていると思います。

イトカズ
しかし、これらの表現方法を使いすぎて、逆に読みづらくなってしまうことってありませんか?

 

もちろん強調したい箇所を加工して目を引くようにすることは大事です。
しかし、加工するポイントが多いと何が重要かが伝わりにくくなってしまいます。

これは本末転倒であります。

例えば、文字を赤くすることを例にしてみましょう。

文字を赤くすることは、強調する方法としては一番わかりやすいく伝わりやすい方法です。

しかし、赤くする箇所が多かったり、長かったりすると、読むの嫌になってしまいませんか?

 

イトカズ
もしかして、今あなたは上の赤い部分を読み飛ばしませんでした?笑

強調するはずの赤い字も、長いと読みにくいです。

無意識に読み飛ばしてしまいます。

 

気持ちを込めて赤い文字にしても

更に強調するところは太字にしても

全然読まれないのでは意味がないですよね?

 

ここでわかることは強調するにもやり方を考える必要があるということです。

そこで今回イトカズが提案したいのは蛍光ペン風に線を入れる方法です。

 

↓↓↓↓↓↓↓↓
そう、コレです!

 

色を多く使い過ぎると、人は読みにくさを感じてしまいます。

絵や写真は形や景色を伝えるモノなので複数の色が必要かもしれません。

しかし、ブログは文字が主体の情報を伝えるツールです。

記事中で色を多く使い過ぎると、読み手の注意は分散します。

読むこと自体にストレスを感じてしまいます。

イトカズ
強調したいところが読まれないとなるとそれはあまりにも残念ですよね

 

そこで、オススメなのは蛍光ペン風のラインを引く方法です

蛍光ペン風の加工をオススメする理由は3つあります。

①文字全体ではなく、一部に色が入るの見疲れしない
②蛍光線の高さを調整できるので、適度なバランスで強調できる
③文字色を変える手法と使い分けて強調度の差を作れる

以上の3つの理由でこの蛍光マーカー風にラインを引く加工は効果的です。

 

イトカズ
ここで一つ疑問がでます。

背景色を変えるのと同じじゃないか?ということです。

背景色を変えるこの方法は、強調する方法としてはもちろん有効です。

しかし、赤い文字が近くにあると、どちらも強調されて重要度の差が伝わりにくい場合があります。

 

蛍光ペン風に線を引く方法では、強調されている点では一見変わりません。

しかし、赤い文字が近くにあると、重要度の差が前者よりも伝わりやすいのです。

比べて見ると、前者より後者の方がスッキリして見えます

なぜならば、蛍光ペン風の線は背景色の加工に比べて、色の主張が少ないからです。

 

ついつい読んじゃうブログ記事はこの蛍光ペン風の線をうまく使ってるように感じます。

私も使い始めてみると、実際読みやすくなった気がします。

それでは実際に蛍光ペン風に線を引く設定手順をお伝えします。

 

がその前に、設定手順をお伝えする前に朗報です!!!!

ブログマーケッターJUNICHIさんが開発したブログ専用テーマELEPHANT2

実は蛍光ペン風に線を引くショートコード機能が標準装備されています。

 

 

あなたが複雑なCSSやPHPファイルを編集せずに蛍光ペン風の線を引くことができます

CSSやPHPファイルを編集するのが怖い方はブログ専用テーマELEPHANT2の購入の検討をオススメします。

↓↓『成果』を出すためのテーマの詳細は以下リンクをクリック↓↓

 

イトカズ
あなたが使用しているテーマにこだわりがあり、テーマを購入する予定がない場合。

蛍光ペン風の線を引くためにはCSSやPHPファイルを編集する必要があります

これからその具体的手順について解説していきます。

 

コピペだけで簡単に設定する蛍光ペン風の線を引く設定3ステップ

ここからは蛍光ペン風の線を文字上に引けるようにするための設定手順を解説します。

3ステップの作業を内容の要点を説明します。

①は蛍光ペン風の線を引けるようにするため
②は①の線を簡単に引けるようにするため
③は②よりも簡単に線を引くため

これから解説する各ステップは以上の意味があります。

 

これでお分かり頂けるように①の作業だけでも蛍光ペン風の線を引くことは可能です。

しかし、より簡単に線を引けるようにする為に②と③の設定まで解説します。

コピペで設定できるようにテキストコードを載せていきます。

 

この手順を完了すれば、誰でも簡単に蛍光ペン風の線を文字上にを引くことができます。

CSSコードやPHPファイルを編集するので作業には細心の注意を払ってください。

作業するCSSファイルはできるだけ子テーマを使用してください

①CSSファイルにテキストコードを入力する

まずは以下のテキストコードを全文コピーします

これをコピーしたらCSSファイルに貼り付けて保存します。

コピーするコードには変更可能な点が3つあります。変更可能な箇所で変更される内容は以下の通りです。

イトカズの例に手順を進めて行きますが、蛍光ペンの色や線の太さ(高さ)は変更可能です。

keiko_css_arrange8

ワードプレスの管理画面で「外観」→「テーマ編集」→「子テーマを選択」→「スタイルシート」へ移動してコピーしたコードを貼り付けます。

keiko_css_arrange1

 

これで1段階目は終了です。

テキストエディタで、以下のタグで囲んで文字入力すれば蛍光ペンで線を引いたような加工ができます。

しかしこのタグを入力するには問題が一つあります。

蛍光ペンが反映しているかの確認するに少し手間がかかります。

テキストエディタで見るか、プレビュー画面で確認する必要があります。

ビジュアルエディタでは蛍光ペンが引けているかがわかりません。

イトカズ
私はこのタグを見える化したいと思いショートコード化することを決意しました

次のステップへ進みます

 

②囲みショートコードを作成する

蛍光ペンで線を引く加工を囲みショートコード化することができれば

ビジュアルエディタで蛍光ペンを引く範囲を見える化できます。

ショートコード化するためにはphpファイルを編集します。

もし、失敗してしまうとあなたのブログの表示が壊れる恐れがあります。

作業には細心の注意を払い、編集前のファイルのバックアップをとってから取り掛かってください

まずは以下のテキストコードをコピーします

このテキストを子テーマのfunctions.phpに貼り付けます。

 

ワードプレスの管理画面で「外観」→「テーマの編集」→「子テーマを選択」「テーマのための関数(functions.php)」でコピーしたコードを貼り付けます。

keiko_css_arrange2

これで2段階目は終了です。

以下の囲みショートコードを使えば、ビジュアルエディタで蛍光ペン風の線を引くことができます

お使いのテーマによっては子テーマの中にfunctions.phpがない場合があります。

その場合は親テーマからfunctions.phpをコピーすることができます。

しかし、親テーマから子テーマにfunctions.phpをコピーするには注意が必要です。

funcitions.phpを安易に触ってしまうとWordpressが真っ白に飛ぶ場合があります。

コビトブログさんがわかりやすく解説してくださっているのでリンクを貼らせていただきます。

WordPress自作子テーマの作り方

 

イトカズ
コビトさんのブログはいつもかゆいところに手が届くような絶妙な記事を書かれています。

ワードプレス初心者にも勉強になることばかりですのでぜひ参考になさってください(*´∀`*)

では最後に囲みショートコードを更に簡単入力する為にプラグインAddQuicktagを設定します

 

③AddQuicktagでショートコードを登録して入力時間を最短にする

プラグインAddQuicktagに作成した囲みショートコードを登録します。

AddQuicktagにショートコードを登録することで、記事作成時に簡単に蛍光ペンの線を呼出せます。

まずはプラグインAddQuicktagをインストールして有効化します

AddQuicktag

それでは設定手順を追っていきましょう。

まずはワードプレスの管理画面から「設定」→「AddQuicktag」へ移動

keiko_css_arrange3

AddQuicktagの設定画面に移動します。

設定に必要な箇所を全て入力します。

keiko_css_arrange4

※必要事項入力後「変更を保存」ボタンを押さないと設定は反映されません。必ず押してください。

これで全ての設定を完了です。

イトカズ
設定作業お疲れ様でした。次は実際に蛍光ペン風の線を引く手順を解説します。

 

記事の編集画面で蛍光ペン風の線を引く手順

ここからは実際に記事の編集画面で、蛍光ペンみたいな線を引いていきましょう。

記事の編集画面でツールバーにあるAddQuicktagをクリックすると設定したタグを呼び出すことができます

蛍光ペンマーカーをクリックします。

keiko_css_arrange5

呼び出した囲みショートコードが編集画面に現れます。タグの間に文字を入力します。

例として「ここに言葉を入力します」と入力します。

keiko_css_arrange6

これで以下のように蛍光ペン風の線を文字の上に引くことができました

その結果がこの一文です!!!
↓↓↓↓↓↓↓↓

ここに言葉を入力します

 

簡単に蛍光ペン風の線を引くことができました。

これで記事作成もはかどり、読み手にも伝わりやすい記事を書くことができるようになります。

できる限り、簡単に書いてみましたがブログは書く事とCSSやPHPを編集する事は別のスキルです。

イトカズ
もしここまでの手順を読んだ上で難しさを感じた方は、ブログカスタマイズを承ります。気軽にお問い合わせください

【お客様の声】シュフーブログの知恵袋さんより蛍光ペンカスタマイズのご感想をいただきました

2017.09.05

 

まとめ:ブログ記事に使用する色は最小限にする方がベター

今回はあなたの記事の強調した箇所を表現する為に蛍光ペン風の線を引ける設定手順を解説しました。

冒頭でも伝えましたが、ブログ記事はあなたの情報を発信するツールです。

文字の色や大きさはあなたが届けたい情報を伝えやすくする為の工夫するポイントとなります。

 

なので、文字の色や大きさを何種類も使ってしまうと、読みにくい記事になってしまいます。

あなたの届けたい情報が伝わらなくなってしまうのはもったいないです。

目立たせたいのは、文字ではなくあなたの意見や情報です。

 

イトカズ
ブログを書くからには読まれないと意味ないですからね。

あなたの情報をきちんと届ける為にも目的と手段を見失わないようにしましょう。

最小限の色の露出で強調表現をすることができる蛍光ペン風の線を引くことで読まれるブログを目指しましょう!

 

この記事を書いた人- WRITER PROFILE -


“読んだ人が得をしないとブログじゃない”をモットーに書きます。
個人ブログでは“内容”よりも“誰が話しているか”が大切と思います。
iPhone修理、SEO、ライティングについて書いています。
沖縄出身福岡在住の30歳。ソフトバンクホークス応援してます。
好きな食べ物はちゃんぽん。
詳しいプロフィールはこちら

イトカズユウタ

keiko_css_arrange7

↓↓フォロワーさんにシェアするSNSボタン↓↓

1 個のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です