ワードプレス

ワードプレス道 「機能編」記事の強調部分に下線と背景色の設定方法!!

こんにちはNAOです。

今回はワードプレスを始めたての方が何気にスルーしてしますポイント、
下線と背景色で文字の強調をして相手に伝えやすくする紹介をしていきます。 

TinyMCE Advancedプラグインをインストール

 

 

下線と背景色を使用するにはまずワードプレスに新エディターから急エディターに戻す
TinyMCE Advancedをインストールしてクラシックエディターにしましょう。

プラグイン新規追加→TinyMCE Advancedインストール→有効→設定の順序で

進めてくださいね。

設定の画面から旧エディターを選択してエディターのレイアウトが出てきますので、
下に使用しないボタンが複数あります。

そこにある下線、背景色がありますのでツールバーに移動することで変更を保存をすます。

 

 

そこまでの設定ができますと下記の画像のようにレイアウトがクラシックバージョンになり、
ボタンも増えていますので使いたいところで使用してみてください。

 

 

下線、背景色を入れてみよう

 

それでは下線を入れてみました。

基本的に下線は文字の色と同じ色になります。

 

次に背景色を入れてみました。

背景色はカスタマイズが存在しますので下記のようにwebカラーチャートでも

いいですし、オリジナルで色をカスタマイズしてみてください。

背景色ボタンの右をクリックすると色を選べますので、そこのカスタマイズを押すと

下記の画面が出てきます。

 

 

下線、マーカー下線を入れる方法

 

上記のやり方だと文字と同じ色しか下線にならないですよね。

ワードプレステーマにマーカー下線がすぐ使えるようになっているものもありますが、
それでも初めにAddQuicktagに登録していつでも使えるようにする必要があります。

今回は下記のHTML(CSS込み)コードをAddQuicktagに登録して簡単に使用できるようにしましょう。

 

色の部分のコードを変更したら自分の好みの色に変えられますので試してください。

<span style="background: linear-gradient(transparent 60%, #FFFF99 50%);"></span>

オレンジの部分が色の指示になりますので、そこだけをカラーチャートから選んで入れ替えてAddQuicktagに登録してみてください。

AddQuicktagの説明は下部で説明しています。

その他にも文字を装飾プラグイン ZEBLINE

 

もう一段レベルを上げるプラグインがあります。

動く下線マーカー(アニメーションライン)を引くプラグイン『ZEBLINE(ゼブライン)』

このプラグインは下線がその文字が見えるとこに来たら線が出てきます。

かなりのインパクトがありますので是非導入してみてください。

 

ZEBLINEプラグインの導入方法

まずはZEBLINEプラグインはどうやってインストールするのかになりますが、

このプラグインは有料(3,000円)のプラグインになります。

 

1,購入はこちらから購入

2,会員登録をして購入から支払いをします。

3,注文確認からZEBLINEをダウンロードボタンを押しパソコンに保存してください。

4,それではワードプレスにインストールします。

上部にプラグインのアップロードがありますのでクリックしてください。

下記の表記が出てきますのでZIPファイルを選択して今すぐインストールで無事にインストール完了!

 

 

 

ZEBLINEの設定

 

 

マーカーのスピード  3.5がベストなスピードになります。

マーカー色     オリジナルでwebカラーチャートから選択してもいいと思います。

マーカー色はA,B,Cと3つまで設定することができます。

ZEBLINEのHTML入力タグ

 

しかしこのマーカー下線を使用するにはHTMLが必要になります。

 

普通文字の入力タグ

 

太文字の入力タグ

そこで次のAddQuicktagプラグインをインストールすることで使用が楽チンになりますので紹介しますね。

コード自動入力プラグインAddQuicktag

『AddQuicktag』は、タグ登録ができるプラグインでます。

一度、登録すると次からはボタン一つで使用することができますので是非登録してください。

設定から上記のコードの開始部分と終了部分を事前に登録しておくと次回からはツールバーに出てきます。

下記のように登録したら変更を保存することをお忘れなく。

 

開始タグ

終了タグ

 

 

今回は下線、背景色などを紹介してきましたが、文字の強弱などインパクトがとてもありますので是非使用してみてください。

 

次回もワードプレス機能を紹介していきます。

 


ビジネスにもブログにも使いやすいWordPressテーマ

「WING(AFFINGER5)」

SEOや収益化に効果的な機能が豊富

記事ごとにAMP化を選択可能

簡単に設置出来るランキング機能をはじめとしたアフィリエイトを始めやすい設計

お得にご購入はコチラ

  • この記事を書いた人
NAO

NAO

NAOです。 DTPデザイナー、ワードプレスを愛するWEBデザイナー// 世の中のお得な情報、DTP、WEB、ブログに関して発信してまいります。 「使用ソフト」Illustrator Photoshop DreamWEAVER「使用プログラミング」HTML/CSS/ワードプレス/Jquery 「企業実績」販売促進に関係するアイテム作成 実績多数 「個人実績」 ココナラ 名刺作成・ロゴ作成 400件以上 広告 50件以上 販売実績

-ワードプレス

© 2021 TSUTAERU BLOG