ワードプレスビジュアルエディタに動くマーカーと動かないマーカー設定方法

下線マーカーがあると、カッコよく見えます!

ブログを見ていたりすると、テキストに下線のマーカーがついていたりするのを見ますよね。

視線を対象の文字に移動させやすいので、何か強調したい時に使うととても効果的です。

 

特にスマートフォンでブログ記事ページなどを見る時には、デザインの違いなどをあまり出しにくいと思います。

スマートフォンの場合表現できるスペースがPCと比べて小さいので、なかなか違いを演出できないというデメリットがあります。

ですが、この下線マーカー(動かない)や、動く下線マーカーを使うと、閲覧者に穏やかなんですが、インパクトを与えてくれます。

 

このページでは、そういったマーカーをワードプレスのサイトに設定する方法を紹介します。

 

こちらも一緒に見られています。

フリー素材のアイキャッチをDrawIt (draw.io)でカッコよくおしゃれにする方法
ども、中の人です。 ブログを運営していくときに、フリー画像、フリー素材などを使う事というのはよくある話です。 ですが、フリー素材だけに、同じ画像を使うサイトも多いので、なんかもうちょっとオシャレにしたりと...

 

 

下線マーカーの簡単な紹介

下線マーカーも設定次第で無限にパターンが作れるような感じだとは思いますが、主にメインで使えそうな色合いの下線マーカーを紹介しています。

また、動くタイプ、動かないタイプもあります。

 

動かないタイプの下線マーカー

ピンク系、青系、黄色系、緑系、紫系

この5色に、太い下線、細い下線の10パターンを用意しました。

 

 

下線マーカー見本ピンク蛍光ペン太め

下線マーカー見本ピンク蛍光ペン細め

下線マーカー見本ブルー蛍光ペン太め

下線マーカー見本ブルー蛍光ペン細め

下線マーカー見本黄色蛍光ペン太め

下線マーカー見本黄色蛍光ペン細め

下線マーカー見本緑色蛍光ペン太め

下線マーカー見本緑色蛍光ペン細め

下線マーカー見本紫蛍光ペン太め

下線マーカー見本紫蛍光ペン細め

 

このマーカー自体は、使い方としては、主にほんのり強調するときに使うという感じになると思います。

ガツンとインパクトのある強調に使用すると、逆に、文字そのものが読みにくく成るからです。

その為、ピンク系、青系、黄色系、緑系、紫系 の色に決めたのはその為です。

 

まずは、動かないタイプの下線マーカーの設定を紹介します。

 

動かないタイプのマーカーの設定方法コピペでOK簡単!

動かないタイプのマーカーの設定は、

CSSで、色のパターンを制御します。

 

とにもかくにもこれをコピーしてください。

コピーして使用

/*ピンク蛍光ペン太め*/
.pinkline {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;}
/*ピンク蛍光ペン細め*/
.pinkline-s{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffb2d8 0%) repeat scroll 0 0;}

/*ブルー蛍光ペン太め*/
.blueline {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #abc5ff 0%) repeat scroll 0 0;}
/*ブルー蛍光ペン細め*/
.blueline-s{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #5f81d2 0%) repeat scroll 0 0;}

/*黄色蛍光ペン太め*/
.yellowline {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #fffeaa 0%) repeat scroll 0 0;}
/*黄色蛍光ペン細め*/
.yellowline-s{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffeb00 0%) repeat scroll 0 0;}

/*緑色蛍光ペン太め*/
.gleenline {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #b1ffc7 0%) repeat scroll 0 0;}
/*緑色蛍光ペン細め*/
.gleenline-s{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #41e06e 0%) repeat scroll 0 0;}

/*紫蛍光ペン太め*/
.purpleline {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #dbbbff 0%) repeat scroll 0 0;}
/*紫蛍光ペン細め*/
.purpleline-s{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ac62ff 0%) repeat scroll 0 0;}

 

次にコピーしたCSSを、張り付ける作業に移ります。

 

ワードプレスの管理画面の外観 >カスタマイズをクリック

ワードプレスの管理画面のメニューの中に外観という項目があるはずですので、それをクリックすると、カスタマイズという項目が出てきます。

そのカスタマイズをクリックしてください。

 

外観カスタマイズ

 

追加CSSをクリック

 

すると、いくつか項目が出てくると思いますが、追加CSSという項目があるはずですのでそれをクリック

 

張り付けて、公開ボタンをクリック

追加でCSSを記入できるところが出てきます。

余談ですが、例えばテーマをPC、スマホで振り分けていたとしても、どちらでも強制的に読みこまれるところになります。

ここに追記したいCSSを追加すれば、それぞれのテーマに張り付ける必要はありません。

 

この入力欄に、先ほどコピーしておいてと記述した文字があると思いますのでコピペしてください。

コピペしたら、公開ボタンをクリック。

ボタンの名称などは、ワードプレスのバージョンで変わるかもしれません

 

 

次に、設定した色をビジュアルエディタで簡単に使えるようにします。

 

ビジュアルエディタにプラグインでオリジナルのタグ設定を追加

その為には、AddQuicktag というプラグインをインストールして有効化する必要があります。

 

プラグイン新規追加AddQuicktagで検索

 

プラグインをクリックして、新規追加をクリックしてください。

 

画面の右上あたりに、プラグインの検索とありますので、そこに

AddQuicktag をコピペして検索してください。

 

この様なプラグインが出てきますのでそれをインストールしてください。

今すぐインストールというボタンがありますので、それをクリックしたら、インストールが開始されます。

 

これがインストールボタンです。クリックしてインストールしてください。

 

 

これが有効化ボタンです。有効化してください。

 

これで、ビジュアルエディタに設定を追加するプラグインのインストールと有効化が完了しました。

 

最後に、この AddQuicktag の設定から、マーカーをビジュアルエディタで選べるようにする設定をします。

 

AddQuicktagで、必要な追加タグを設定する

 

設定AddQuicktag設定ファイルをインポート

ワードプレスの管理画面から、設定をクリック

次に AddQuicktag をクリック

 

するとこのような画面が出てきます。

本来なら、ここで、増やしたいマーカーの分だけ1つ1つ、設定項目を入れていく必要がありますが、

 

正直めんどくさいです。

 

 

なので、一発で設定が反映できるファイルを用意しました。

 

このリンクから設定ファイルをダウンロードできます。

AddQuicktag下線マーカー設定ファイル

まずは上のリンクの上で、右クリックして、名前を付けて保存を押してダウンロードしてください。

ダウンロードは自己責任にて行ってください。

カスペルスキーウイルスチェックで事前にウイルスチェックしています。

 

ダウンロード保存されたら、再度、AddQuicktagの設定画面へ移動してください。

 

設定AddQuicktag

AddQuicktagの設定画面へ移動したら、一番下までスクロールしてください。

 

すると

インポートという項目があります。

 

AddQuicktagの設定をインポートします。

 

先ほど保存したファイルを選択し、ファイルのアップロード・インポートボタンをクリックしてください。

 

 

これで、設定完了です。

記事や、固定ページの編集画面へ移動して、ビジュアルエディタの中に設定項目が増えているはずです。

 

 

あとは、下線を付けたい文字を範囲指定して、追加した項目から選択すれば下線を付ける事ができます。

 

下線マーカー見本ピンク蛍光ペン太め

下線マーカー見本ピンク蛍光ペン細め

下線マーカー見本ブルー蛍光ペン太め

下線マーカー見本ブルー蛍光ペン細め

下線マーカー見本黄色蛍光ペン太め

下線マーカー見本黄色蛍光ペン細め

下線マーカー見本緑色蛍光ペン太め

下線マーカー見本緑色蛍光ペン細め

下線マーカー見本紫蛍光ペン太め

下線マーカー見本紫蛍光ペン細め

 

 

 

 

スクロールしたときに画面内に入ったときに動くタイプの下線マーカー

 

スマホでも同様に動いてくれるので、例えば記事ページなどをスマートフォンで見た場合は、あまりデザインの差を出す事ができないですが、こういった機能を使えば地味に、おしゃれに演出できます。

 

下線マーカー動くタイプ見本

下線マーカー動くタイプ見本

下線マーカー動くタイプ見本

下線マーカー動くタイプ見本

 

こんな感じで、スーッと、下線マーカーが動いてくれます。

結構かっこいいですよね。

こちらは、プラグインで動作しています。

設定も簡単です。

 

Marker Animationプラグインをインストール

 

プラグイン新規追加Marker Animationで検索

プラグインをクリックして、新規追加をクリックしてください。

 

画面の右上あたりに、プラグインの検索とありますので、そこに

Marker Animation をコピペして検索してください。

 

この様なプラグインが出てきますのでそれをインストールしてください。

今すぐインストールというボタンがありますので、それをクリックしたら、インストールが開始されます。

 

これがインストールボタンです。クリックしてインストールしてください。

 

 

これが有効化ボタンです。有効化してください。

 

これだけで、ほぼほぼ設定は完了です。

 

ビジュアルエディタにアイコンが追加されている

 

記事や固定ページ管理画面で、ビジュアルエディタモードにするとこのようなアイコンが増えているはずです。

 

左から、デフォルトのマーカー設定のアイコン

次が、ほぼ同じアイコンですが、色や設定をその場で行ってマーカー設定をするアイコン

次が、赤色の動きのある下線のマーカーアイコン

次が、緑色の動きのある下線のマーカーアイコン

次が、青色の動きのある下線のマーカーアイコン

 

下線マーカー動くタイプ見本

下線マーカー動くタイプ見本

下線マーカー動くタイプ見本

下線マーカー動くタイプ見本

 

デフォルトの設定ですが、

ワードプレスの管理画面の設定の下あたりにこのようなメニューが追加されているはずです。

クリックして、設定画面へ移動できます。

 

Marker Animationの設定方法

基本的には、日本語で書かれてあるので、その設定がどういう物なのか?というのは見れば分かると思います。

また、これは、基本のデフォルトの設定なので

 

このアイコンにしか適用されないようです。

左から、デフォルトのマーカー設定のアイコン

 

先ほど紹介した、このアイコンだと、毎回設定するというウインドウが開きます。

これは、デフォルトの設定と同じことを毎回設定できるというアイコンです。

次が、ほぼ同じアイコンですが、色や設定をその場で行ってマーカー設定をするアイコン

 

 

という訳で、

 

動かない下線マーカーと動く下線マーカーの紹介と、設定方法でした。

あると、とてつもなく、カッコよく演出できますので、設定してみてはいかがでしょうか?

ただし、このサイトで紹介している事は自己責任で行ってください。

 

ちなみ、ワンセットで設定すると表現の幅が広がる事をこちらでも書いています。

フリー素材のアイキャッチをDrawIt (draw.io)でカッコよくおしゃれにする方法
ども、中の人です。 ブログを運営していくときに、フリー画像、フリー素材などを使う事というのはよくある話です。 ですが、フリー素材だけに、同じ画像を使うサイトも多いので、なんかもうちょっとオシャレにしたりと...

 

 

ではまた。