【ワードプレス】ラインマーカーを引く方法。ハミングバードやストークの場合。ブログ集客、マネタイズに欠かせないノウハウやワードプレスの使い方、SEO情報をお届けします。RevenueアフィリエイトAffiliateコンサルティングConsultingHOMEWordpress【ワードプレス】ラインマーカーを引く方法。ハミングバードやストークの場合。2019.06.25【ワードプレス】ラインマーカーを引く方法。ハミングバードやストークの場合。わせて100件以上のコンサル実績があり、ブログを使った集客力アップ、収入アップのプロとして多くの人の成果を上げることに成功。現在も自分自身がブロガーとして活動しながら、講演やコンサルを行っている。2020.01.28記事本文をうまく装飾することで読者さんにとって読みやすい記事にすることができますが、その一つとしておすすめしたいのがラインマーカー。学生時代にだれもが使ったことがある“蛍光ペン”風に文字を強調することができるので、読者さんも大事な個所がすぐにわかるので便利です。この記事では、ワードプレスの場合の設定方法について解説していますが、特にオープンケージ製のテンプレートでのやり方をご紹介していますので、お役立ていただけたら幸いです。目次1.ラインマーカーとは?2.ワードプレスでラインマーカーを使えるように設定しよう2-1.「AddQuicktag」プラグインの設定をしよう2-2.ラインマーカーのCSSを追加しよう3.実際にラインマーカーを使ってみよう4.ラインマーカーの太さや色を調整してみよう5.まとめ1.ラインマーカーとは?こんにちは、ブログ集客コンサルタントの松崎です。最近、クライアントさんからも何度かご質問をいただいていたテーマ、「ラインマーカー」について詳しく解説したいと思います。ちなみにラインマーカーというのはこういったものですね。・ラインマーカーを使って文字を目立たせよういろんな人のブログを見ているとけっこう使っている人多いですよね。私は個人的には使っても使わなくてもどちらでもいいかなと思っていますが、ここはデザイン上の好みの問題ですね。私は比較的シンプルな記事が好きで、そこまで目立った装飾というのは使わないほうなのですが、ブログを通してどんな印象を与えたいかで各々が判断すればいいと思います。カラフルにして明るい印象のブログを作りたい!という人は積極的に使っていいと思います。この記事では積極的にラインマーカーを使っていきます。2.ワードプレスでラインマーカーを使えるように設定しようということで、ラインマーカーを使用できるようにするために、ワードプレスの設定方法を解説したいと思います。冒頭でもお伝えしましたが、ここではオープンケージ製のハミングバードやストークなどのテンプレートでのやり方を解説していますが、ほかのテンプレートでもほぼ同じようにできますので参考にしていただければうれしいです。私のクライアントさんのブログに関しては、私のほうで設定をしますのでご安心ください。ご自身で挑戦してみたいという方はもちろんやっていただいて大丈夫ですよ。2-1.「AddQuicktag」プラグインの設定をしよう「AddQuicktag」というプラグインを使用すると大変便利です。インストールしていない方は「プラグイン」⇒「新規追加」から「AddQuicktag」を検索してインストールしておいてください。インストールができたら、ブログ管理画面の「プラグイン」⇒「インストール済みプラグイン」をクリックします。「AddQuicktag」の「設定」をクリックします。「ボタン名」「開始タグ」「終了タグ」の枠に次のように入力し、一番右側のチェックボックスにチェックを入れます。するとすべての項目にチェックが入ります。上記の枠に入力するタグは下からコピーしてお使いください。ボタン名はあとでわかりやすい名前を自由につけておいてください。ここでは「ラインマーカー(黄)」としています。class="marker_yellow">【終了タグ】</span>ここまでできたら「変更を保存」をクリックします。これで「AddQuicktag」のほうの設定は完了となります。2-2.ラインマーカーのCSSを追加しようこれだけではまだラインマーカーを引くことができません。ラインマーカーのデザインのためのCSSも登録しておく必要があります。ブログ管理画面の「外観」⇒「カスタマイズ」をクリックします。「追加CSS」をクリックします。画面を下にスクロールすると編集画面が表示されいます。そこに次のようにCSSを記載し、「公開」をクリックします。コードは下からコピーしてお使いください。60%);}これでCSSも追加できましたので、設定はすべて完了となります。ここでは「カスタマイズ」からCSSを追加しましたが、一般的なCSSの追加方法は「外観」⇒「テーマ編集」⇒「スタイルシート」を開いて、編集画面にCSSを追加します。オープンケージ製のテンプレートではこのやり方だとうまくいかないことがありましたので、「カスタマイズ」のほうから追加するようにしましょう。3.実際にラインマーカーを使ってみようここまでできてしまえばあとは簡単です。ラインマーカーを引きたい文字をドラッグして選択し、ツールバーの「Quicktags」をクリックします。「Quicktags」という項目はプラグインをインストールすることで自動的に表示されます。さきほど追加した「ラインマーカー(黄)」が表示されるのでクリックして選択します。これで設定ができたのですが、記事の編集画面ではラインマーカーは反映されません。確認するには「プレビュー」をクリックしてプレビュー画面をご覧ください。プレビュー画面のほうでは実際のラインマーカーを確認することができます。4.ラインマーカーの太さや色を調整してみようここから先はデザインを微調整したい人だけやってください。さきほど設定したラインマーカーですが、マーカーの太さを自由に調整することができます。むずかしそうなのですが、コードの中の数字をちょこっと変更するだけなので慣れれば簡単です。余裕がある方はぜひ挑戦してみてください。デザインを変更する場合は、ブログ管理画面から「外観」⇒「カスタマイズ」⇒「CSS追加」をクリックして開きます。60%」と書かれている数字を変更します。60%);}上記のコードの赤い数字を変更することでマーカーの太さを調整することができるのですが、この「transparent」というのは「透明」という意味で、「上から何%を透明にするか」を設定します。数字が大きくなれば透明な範囲が広くなり、マーカーは細くなるということです。ここはお好みで自由に調整しましょう。ちなみに色を変更したい場合は、下記の赤文字部分の2か所を変更します。カラーコードはこちらのサイトで調べましょう。60%);}ただ、黄色のラインマーカーのコードをそのまま変更してしまうと、記事のほうで設定したラインマーカーの色がすべて変わってしまいますので、新しい色のためのコードを追記する必要があります。ブログ管理画面から「外観」⇒「カスタマイズ」⇒「CSS追加」を開いて、黄色のラインマーカーのコードの下に別の色用のコードを追加してください。ここではためしにピンク色のラインマーカーのCSSを追加してみました。コードは下記からコピーしてください。60%);}そして、「AddQuicktag」にも設定する必要がありますので、さきほどと同じようにブログ管理画面から「プラグイン」⇒「インストール済みプラグイン」を開き、「AddQuicktag」の「設定」をクリックします。「ボタン名」「開始タグ」「終了タグ」の枠に次のように入力し、「変更を保存」をクリックしてください。class="marker_pink">【終了タグ】</span>これで黄色のラインマーカーと同じようにピンクも登録できますので、ぜひお試しください。5.まとめワードプレスでのラインマーカーの設定方法について、特にハミングバードやストークなどのオープンケージ製のテンプレートの場合の手順をご紹介しましたがいかがでしたか?文字にラインマーカーを引くことで簡単に強調表示できますし、メリハリが出て読みやすくなりますね。これはSEO効果が直接期待できるわけではありませんが、記事が読みやすくなることによってページ滞在時間が伸びて、間接的にSEO効果が出る可能性もありますので、ぜひ活用してみてください。コメントをキャンセルメールアドレスが公開されることはありません。【ワードプレス】ラインマーカーを引く方法。ハミングバードやストークの場合。わせて100件以上のコンサル実績があり、ブログを使った集客力アップ、収入アップのプロとして多くの人の成果を上げることに成功。現在も自分自身がブロガーとして活動しながら、講演やコンサルを行っている。2020.1.24「パンくずリストhttps://achieve-dream.net/で問題が...【新サーチコンソールの使い方】インデックス登録方法が変わりました。google】なかやまきんに君さんの新刊本「ウケる筋トレ」をご本人にいただきました。RECOMMENDこちらの記事も人気です。まつざきしげとしブログ歴8年/ブログ集客コンサルタント/アチーブドリーム代表/大学中退し、パソコンスクール経営を手伝う。その後「ブログ」に出会い、アフィリエイトとコンサルティング、コンテンツ販売で月商7桁を突破。あこがれだった新宿のタワマンに引っ越し、ひたすらパソコンと向き合う日々を送っています。社長ブログランキング人気記事ランキング【自己啓発のためにやるべき行動】7つの具体例と意味を徹底解説します【最新】アメーバブログはGoogleアドセンスなどの広告収入を稼ぐのに使えるのか?信念とは?私が強い信念を持つためにやった具体例をお話しします。夢ノート(ドリームノート)は書き方を間違えると逆効果!夢を引き寄せる方法!【初心者向け】ブログで稼ぐ方法はこの5つがおすすめ!ブログ収入の仕組みを徹底解説します【2019最新事情】ブログとTwitterはどっちを優先するべきか?違いについても解説します。meブログ歴7年/ブログ集客コンサルタント/アチーブドリーム代表/大学中退し、パソコンスクール経営を手伝う。その後「ブログ」に出会い、アフィリエイトとコンサルティング、コンテンツ販売で月商7桁を突破。あこがれだった新宿のタワマンに引っ越し、ひたすらパソコンと向き合う日々を送っています。