Wordpress

【ワードプレス】ラインマーカーを引く方法。ハミングバードやストークの場合。

The following two tabs change content below.
アバター
Twitter のプロフィールFacebook のプロフィールGoogle+ のプロフィール

松崎茂利

アチーブドリーム代表 / ブロガー / ブログ集客コンサルタント
たった一人でブログだけを使って月商400万円を達成。
個人・法人合わせて100件以上のコンサル実績があり、ブログを使った集客力アップ、収入アップのプロとして多くの人の成果を上げることに成功。
現在も自分自身がブロガーとして活動しながら、講演やコンサルを行っている。
プライベートコンサルティングの詳細はこちら

記事本文をうまく装飾することで読者さんにとって読みやすい記事にすることができますが、その一つとしておすすめしたいのがラインマーカー。

学生時代にだれもが使ったことがある“蛍光ペン”風に文字を強調することができるので、読者さんも大事な個所がすぐにわかるので便利です。

この記事では、ワードプレスの場合の設定方法について解説していますが、特にオープンケージ製のテンプレートでのやり方をご紹介していますので、お役立ていただけたら幸いです。

ラインマーカー　方法

1．ラインマーカーとは？

松崎茂利こんにちは、ブログ集客コンサルタントの松崎です。

最近、クライアントさんからも何度かご質問をいただいていたテーマ、「ラインマーカー」について詳しく解説したいと思います。

ちなみにラインマーカーというのはこういったものですね。

・ラインマーカーを使って文字を目立たせよう

いろんな人のブログを見ているとけっこう使っている人多いですよね。私は個人的には使っても使わなくてもどちらでもいいかなと思っていますが、ここはデザイン上の好みの問題ですね。

私は比較的シンプルな記事が好きで、そこまで目立った装飾というのは使わないほうなのですが、ブログを通してどんな印象を与えたいかで各々が判断すればいいと思います。

カラフルにして明るい印象のブログを作りたい！という人は積極的に使っていいと思います。

せっかくなのでこの記事では積極的にラインマーカーを使っていきます。

2．ワードプレスでラインマーカーを使えるように設定しよう

ということで、ラインマーカーを使用できるようにするために、ワードプレスの設定方法を解説したいと思います。冒頭でもお伝えしましたが、ここではオープンケージ製のハミングバードやストークなどのテンプレートでのやり方を解説していますが、ほかのテンプレートでもほぼ同じようにできますので参考にしていただければうれしいです。

私のクライアントさんのブログに関しては、私のほうで設定をしますのでご安心ください。もしご自身で挑戦してみたいという方はもちろんやっていただいて大丈夫ですよ。

2-1．「AddQuicktag」プラグインの設定をしよう

「AddQuicktag」というプラグインを使用すると大変便利です。まだインストールしていない方は「プラグイン」⇒「新規追加」から「AddQuicktag」を検索してインストールしておいてください。

インストールができたら、ブログ管理画面の「プラグイン」⇒「インストール済みプラグイン」をクリックします。

ラインマーカー　方法

「AddQuicktag」の「設定」をクリックします。

ラインマーカー　使い方

「ボタン名」「開始タグ」「終了タグ」の枠に次のように入力し、一番右側のチェックボックスにチェックを入れます。するとすべての項目にチェックが入ります。

ラインマーカー　方法

上記の枠に入力するタグは下からコピーしてお使いください。

ボタン名はあとでわかりやすい名前を自由につけておいてください。ここでは「ラインマーカー（黄）」としています。

【開始タグ】

【終了タグ】

ここまでできたら「変更を保存」をクリックします。これで「AddQuicktag」のほうの設定は完了となります。

2-2．ラインマーカーのCSSを追加しよう

これだけではまだラインマーカーを引くことができません。ラインマーカーのデザインのためのCSSも登録しておく必要があります。

ブログ管理画面の「外観」⇒「カスタマイズ」をクリックします。

ラインマーカー　方法

「追加CSS」をクリックします。

ラインマーカー　方法

画面を下にスクロールすると編集画面が表示されいます。そこに次のようにCSSを記載し、「公開」をクリックします。コードは下からコピーしてお使いください。

ラインマーカー　方法

【コピー用】

これでCSSも追加できましたので、設定はすべて完了となります。

ここでは「カスタマイズ」からCSSを追加しましたが、一般的なCSSの追加方法は「外観」⇒「テーマ編集」⇒「スタイルシート」を開いて、編集画面にCSSを追加します。しかし、オープンケージ製のテンプレートではこのやり方だとうまくいかないことがありましたので、「カスタマイズ」のほうから追加するようにしましょう。

3．実際にラインマーカーを使ってみよう

ここまでできてしまえばあとは簡単です。ラインマーカーを引きたい文字をドラッグして選択し、ツールバーの「Quicktags」をクリックします。

ラインマーカー　方法
「Quicktags」という項目はプラグインをインストールすることで自動的に表示されます。

さきほど追加した「ラインマーカー（黄）」が表示されるのでクリックして選択します。

ラインマーカー　方法

これで設定ができたのですが、記事の編集画面ではラインマーカーは反映されません。確認するには「プレビュー」をクリックしてプレビュー画面をご覧ください。プレビュー画面のほうでは実際のラインマーカーを確認することができます。

4．ラインマーカーの太さや色を調整してみよう

ここから先はデザインを微調整したい人だけやってください。

さきほど設定したラインマーカーですが、マーカーの太さを自由に調整することができます。一見むずかしそうなのですが、コードの中の数字をちょこっと変更するだけなので慣れれば簡単です。余裕がある方はぜひ挑戦してみてください。

デザインを変更する場合は、ブログ管理画面から「外観」⇒「カスタマイズ」⇒「CSS追加」をクリックして開きます。

すると、さきほど追加したCSSのコードが表示されますので、そのなかの「transparent 60%」と書かれている数字を変更します。

/*黄色のマーカー*/
.marker_yellow {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

上記のコードの赤い数字を変更することでマーカーの太さを調整することができるのですが、この「transparent」というのは「透明」という意味で、「上から何％を透明にするか」を設定します。数字が大きくなれば透明な範囲が広くなり、マーカーは細くなるということです。ここはお好みで自由に調整しましょう。

ちなみに色を変更したい場合は、下記の赤文字部分の2か所を変更します。カラーコードはこちらのサイトで調べましょう。

/*黄色のマーカー*/
.marker_pink {
background: linear-gradient(transparent 70%, #fa58f4 60%);
}

ただ、黄色のラインマーカーのコードをそのまま変更してしまうと、記事のほうで設定したラインマーカーの色がすべて変わってしまいますので、新しい色のためのコードを追記する必要があります。

ブログ管理画面から「外観」⇒「カスタマイズ」⇒「CSS追加」を開いて、黄色のラインマーカーのコードの下に別の色用のコードを追加してください。ここではためしにピンク色のラインマーカーのCSSを追加してみました。

コードは下記からコピーしてください。

そして、「AddQuicktag」にも設定する必要がありますので、さきほどと同じようにブログ管理画面から「プラグイン」⇒「インストール済みプラグイン」を開き、「AddQuicktag」の「設定」をクリックします。

そして、「ボタン名」「開始タグ」「終了タグ」の枠に次のように入力し、「変更を保存」をクリックしてください。

【ボタン名】

ラインマーカー（ピンク）

【開始タグ】

【終了タグ】

これで黄色のラインマーカーと同じようにピンクも登録できますので、ぜひお試しください。

5．まとめ

ワードプレスでのラインマーカーの設定方法について、特にハミングバードやストークなどのオープンケージ製のテンプレートの場合の手順をご紹介しましたがいかがでしたか？

文字にラインマーカーを引くことで簡単に強調表示できますし、メリハリが出て読みやすくなりますね。これはSEO効果が直接期待できるわけではありませんが、記事が読みやすくなることによってページ滞在時間が伸びて、間接的にSEO効果が出る可能性もありますので、ぜひ活用してみてください。

シェア！

コメントを残す

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

ABOUTこの記事をかいた人

アバター

アチーブドリーム代表 / ブロガー / ブログ集客コンサルタント
たった一人でブログだけを使って月商400万円を達成。
個人・法人合わせて100件以上のコンサル実績があり、ブログを使った集客力アップ、収入アップのプロとして多くの人の成果を上げることに成功。
現在も自分自身がブロガーとして活動しながら、講演やコンサルを行っている。
プライベートコンサルティングの詳細はこちら

NEW POST最新の記事

RECOMMENDこちらの記事も人気です。