ワードプレスでマーカーが使えない人必見!
単語の登録機能で簡単利用♪

ワードプレスでマーカーが使えない人必見!<br>単語の登録機能で簡単利用♪

最近、ワードプレスでブログを書く際に、マーカー機能を使う人多いですよね。

そう、これです!

言葉やセンテンスを強調させることもできるし、ブログ全体が華やかになるし…

私も使いたい!!と思う方、多いと思います。

でも、やり方を紹介したブログに従って設定したのにできない…そんな方いませんか?ショックですよね・・・

実は私も、このマーカー機能が使えない一人でした。いろんなブログを読みあさってもできない…

しかし、ついにマーカー機能が使えるようになりました!

同じ悩みを抱えている方もいるかと思いますので、 「Gutenberg(グーテンベルク)」 でのマーカーの使い方、紹介します。

ワードプレスのブログでマーカー機能が使えない。なぜ!?

多くのブログが推奨している方法は、「Add Quicktag」を使った方法です。私も試しましたが、何度確認しても、マーカーが表示されないんです!

その一番の理由は、ワードプレスが2018年12月にスタートさせた新エディタ 「Gutenberg(グーテンベルク)」 では、「Add Quicktag」を活用したマーカーが使えないからです。

最近ブログを始めた人は、私も含め、自然に 「Gutenberg(グーテンベルク)」 を利用しているかと思いますが、その場合、 「Add Quicktag」 を活用した方法は、基本的には不可能と考えてください。

※旧エディターを使っている場合は、 「Add Quicktag」 で利用可能なようですので、そちらのやり方をお試しください。

新エディタ 「Gutenberg(グーテンベルク)」でも利用可能なマーカーの使い方

本記事では、 新エディタ 「Gutenberg(グーテンベルク)」 でも可能なマーカーの使い方をご紹介します。(旧エディタにももちろん適用可能です)

まず、そもそもマーカー利用が利用可能な状態になっているかどうかを確認する必要があります。ブログテーマによっては、マーカー利用ができないようになっている場合もあるとのこと。そこで、まずはお試しのステップとして、以下のことを試し、適切に反映されるかどうかを確認してみてください。

やり方は、プログラミング言語で挟むという、初心者が最も敬遠するものです。しかし、以下のやり方に従ってくれれば、私のような初心者でもマーカーの利用が可能ですので、安心してください。

CSSにプログラミング言語を貼り付ける

いきなりわかりにくいのが出てきました。これはつまり、コンピュータに、私が○○したら、△△してね、と指示を出していると思ってください。今回の場合は、私がこの文字を打ったら、マーカーを付けてね、と言っているわけです。

ワードプレスの外観(ブラシのアイコン)をクリックすると、テーマエディターという場所が出てくると思います。テーマエディターをクリック

右端に、スタイルシートという項目があるので、クリック


するとよくわからない記号や数字がでてきますが、それは無視して、下枠内の文字をコピーし、スタイルシートの一番下にペーストしてください。その後、ファイルを更新をクリック。

コピー&ペースト
.markerred {background:linear-gradient(transparent 60%, #ffaaaa 60%);font-weight:bold;}

※ブログテーマによっては、CSSの貼り付け場所が別に準備されているようなので注意が必要です。

ちなみに私のテーマでは、同じブラシアイコンの中に、追加CSSというコンテンツが含まれており、そこに貼り付ける形になっていました。

マーカーを引きたい文章を準備

まずは、何でもいいので、マーカーを引きたい文章をボックス内に作成してください。

ボックスをHTMLに変換

続いて、ボックスをHTMLに変換します。

ボックスの右端に、3つの点(詳細設定)がありますので、選んでください。

うまくいけば、文字の書式が変わり、文の最初と最後にpが現れると思います。

マーカーを引きたい言語の両脇をプログラミング言語で挟む

最後のプロセスです。マーカーを引きたい場所の前後を、

<span class=”markerred”>

</span>

で挟んでください。

上記の文字を、コピペすればオッケーです。

プレビューで確認

最後に、下書きとして保存した後、プレビューで確認してください。下図のように、マーカーが引けていたら成功です。

どうでしたか?

もしこの手続きをしたにも関わらず、マーカーが生じされない場合は、プログラミング言語の貼り付け場所が異なっている、もしくは使用しているブログのテーマがマーカーの利用を制限している、のどちらかだと思いますので、プログラミングに詳しい友達に聞いてみてください。

単語の登録機能を利用して簡単にマーカーを利用する方法

もし上記のステップで、マーカーを引くことができたら、次のステップにいきましょう。

マーカーを利用するステップとしては、

  1. プログラミング言語をスタイルシートに貼り付ける
  2. ブロックをHTML表示にする
  3. 設定した言語で挟む(今回であれば <span class=”markerred”> と </span>
  4. 完成

です。

1については、1度設定してしまえばずっと使えますし、2については、1つボタンをポチっと押すだけです。一番めんどくさいのが3で、 <span class=”markerred”> と </span> を打ち込む必要があります。

毎回コピペするのでも問題ありませんが、「単語の登録」機能を利用することで非常に快適になりますので、その方法を紹介します。

「単語の登録」機能とは

パソコンに最初から含まれている機能で、ある単語を打ち込むことで、別の単語や文章に自動的に変換してくれるとても便利な機能です。

例えば、仕事でメールを頻繁に利用する人であれば、「本日はどうもありがとうございました。今後ともどうぞよろしくお願いいたします」という長文を毎回打たなければならないこともあるでしょう。そんなとき、「あいさつ」= 「本日はどうもありがとうございました。今後ともどうぞよろしくお願いいたします」 と登録しておくことで、「あいさつ」と打ったときに、この長文が自動的に出現するように設定できるのです。

今回であれば、○○と打ち込んだ時に <span class=”markerred”> と表示されるように設定しておけば、この紛らわしい文字を一瞬で出現させ、マーカーを利用できるようになるのです。

「単語の登録」の方法(Windows)

「単語の登録」の方法(Windows)を紹介します。

画面右下に文字アイコンがあると思うので、右クリックしてください。

すると、単語の登録というコンテンツがありますので、クリックです。

単語の登録画面が出てきます。

単語には、元の文字(今回であれば <span class=”markerred”> )と打ち込みましょう。

よみには、簡易のワードを入れておいてください。今回であれば、マーカーの赤(marker red)なので、mrと打ちました。ちなみに私は、 </span> は、終わり(finish)という意味で、fiにしてあります。自分が覚えやすいネーミングで大丈夫です。

最後に登録を押せば、この長くて紛らわしい用語が一瞬で引き出せるようになります。mrと打てば、 検索候補の中に <span class=”markerred”> が現れますので、それをクリックするだけです。

これでマーカーの利用も簡単ですね。

終わりに

マーカーの使い方を説明してきましたが、みなさん、マーカーが使えるようになりましたか?マーカーを使うだけで、ブログがとっても鮮やかに、また、伝えたいことを強調できるようになりますので、ブログを始めた方には、ぜひ取り組んでほしいなと思います。

また、初心者ブロガーのみなさんに、私が役に立ったと感じる情報をお伝えしていけたらと思いますので、ぜひ遊びに来てください。

お時間がありましたら、以下の記事もお読みいただけると嬉しいです。