このエントリーをはてなブックマークに追加  ブログランキング・にほんブログ村へ

WordPressで文字を装飾!下線マーカーを引くタグをプラグイン『AddQuicktag』に登録

WordPressで文字を装飾!下線マーカーを引くタグをプラグイン『AddQuicktag』に登録

ブログ記事を書いていると、強調したい部分を目立たせたいですよね!

文字の装飾をするだけで、記事も読みやすくなり、メリハリも出ます。

以前も、蛍光ペンのように文字を装飾できるプラグインを、お伝えしたのですが、前回は文字に背景をつける方法でした。

今回は、文字にマーカーラインのような下線を引く方法をご紹介します。

前回のマーカー装飾→Wordpressを始めたばかりの人におススメ!

今回のマーカー装飾→Wordpressに少し慣れてきた人におススメ!

こんな感じです(*’▽’)

今回ご紹介する方法は、CSSとhtmlを編集しますので、万が一を考えてバックアップは取ってから作業をしていきましょう!

CSSとhtmlを編集後は、プラグイン『AddQuicktag』にタグを登録して、ワンクリックでマーカーラインが引けるようになります♪

WordPressのバックアップ方法は、こちらの記事をご覧ください。

プラグイン『UpdraftPlus』でWordpressのバックアップと復元が簡単!さらにGoogleドライブの連携も簡単に!

まだ、CSSとhtmlを編集するのは怖いという場合は、プラグインだけでOKなこちらで文字装飾してください(^-^)→文字に背景色をつけます。

WordPressで文字を装飾!マーカーを引くプラグイン『TinyMCE Advanced』

CSSの編集と追加

下線マーカーで文字装飾をするには、CSSとhtmlを使います。

マーカーラインを引くためのCSSを、子テーマに追加していきます。

そんなに難しくはないので、順番通りに行ってください(^^)

*CSSが崩れると、テーマ自体に支障がでますので、CSSの追加は必ず子テーマで行ってください。

下線マーカーのCSS

まずは追加したい下線マーカーの色や線の太さを、SCCコードを編集して作成します。

下線マーカーを引くCSSです。

まずは、このCSSコードをお好みで編集して、色や太さを変えていきます。

名前1か所、下線マーカーの設定3か所を編集します。

マーカーラインCSSサンプル

名前:.の後ろに、わかりやすいものを付けてください。

線の太さ:0~100で設定します。数値が大きいほど細くなります。

色:マーカーの色は原色大辞典を参考にしてください。

透明度:色の透明度を設定します。数値が大きいほど透明度が上がります。

CSSの編集はできましたか?

次は、編集したCSSを子テーマのstyle.cssに追加していきます。

下線マーカーのCSSをstyle.cssに追加する

ここでは、黄色のマーカーラインを追加していきます。

CSSの追加をする場所は、style.cssです。

①管理画面【外観】から②【カスタマイズ】を選択します。

下線マーカーCSS追加

一番下にまでスクロールして【追加CSS】を選択します。

下線マーカーCSS追加

①先ほど編集したCSSコードを追加します。

②【公開】をクリックします。

下線マーカーCSS追加

SCCの追加方法は以上です。

htmlの編集

次に、テキストに入力するために必要なhtmlの編集をします。

htmlの編集

先ほどCSSコードに付けた名前を、そのままhtmlにコピーします。

通常はこんな感じ→ここに文字を入力

太文字はこんな感じ→ここに文字を入力

これで、htmlの編集はOKです。

下線マーカーを引きたいときは、『テキスト』入力にして、このhtmlのタグを入力すればいいのですが、毎回タグを入力するのは、ちょっと面倒ですよね(^^;

そこでプラグイン『AddQuicktag』で、ボタンを使って簡単に下線マーカーが引けるようにしていきましょう。

プラグイン『AddQuicktag』のインストールと設定

プラグイン『AddQuicktag』を使えば、登録したタグをボタンで操作することができます。

ビジュアル入力画面ではこんな感じ↓

テキスト入力画面ではこんな感じ↓

プラグインAddQuicktag』インストール

毎回タグを入力するより、楽ちんですよね(^-^)

では、早速インストールしていきましょう!

プラグイン『AddQuicktag』のインストール

管理画面の①【プラグイン】から②【新規追加】を選択します。

プラグインAddQuicktag』インストール

キーワードに【AddQuicktag】と入力し検索します。

『AddQuicktag』が表示されたら②【今すぐインストール】をクリックします。

プラグインAddQuicktag』インストール

インストールが終了したら【有効化】をクリックします。

プラグインAddQuicktag』インストール

『AddQuicktag』のインストールは以上です。

次に、ボタン表示されるように『AddQuicktag』にタグ登録をしていきます。

『AddQuicktag』にタグ登録する

管理画面の①【プラグイン】から②【インストール済みプラグイン】を選択します。

画面が切り替わったら③『AddQuicktag』の下の【設定】をクリックします。

プラグインAddQuicktag』タグ登録

画面が切り替わったら、先ほど作成したhtmlのタグを登録していきます。

プラグインAddQuicktag』タグ登録

①ボタン名:任意(わかりやすい名前)

②開始タグ:<span class=”marker-yellow”>または<strong class=”marker-yellow”>

③終了タグ:</span>また</strong>

④アクセスキーと順番:ボタンを表示する順番

⑤ビジュアルエディター:全てチェック(一番右にチェックを入れると全てにチェックが入ります)

プラグインAddQuicktag』タグ登録

全て入力したら【変更を保存】をクリックします。プラグインAddQuicktag』タグ登録

『AddQuicktag』のタグ登録は以上です。

プラグイン『TinyMCE Advanced』の使用をしている場合は、他のボタンが被らないように下記のようにチェックを入れて非表示にしてください。

*右端にチェックを入れれば、全ての項目にチェックが入ります。

プラグインAddQuicktag』タグ登録

実際に下線マーカーを引いてみよう

投稿画面からボタン表示の確認をしてください。

■ビジュアル入力→Qyicktags右の▼から表示

下線マーカーCSS追加

■テキスト入力→ボタン表示

下線マーカーCSS追加下線マーカーCSS追加

では、下線マーカーを引いてみましょう。

①下線マーカーを引きたい文字を選択します。

②マーカーを選択します。(先ほど作成したもの)

下線マーカーCSS追加

WordPressの投稿画面では、下線マーカーは確認できないので、プレビューで確認してください。

下線マーカーCSS追加

プレビュー画面では、下線マーカーが引けていることが確認できます。

下線マーカーCSS追加

まとめ

記事の読みやすさを考えると、文字装飾は大切ですよね!

マーカーも色や太さを変えて、あなたオリジナルの下線マーカーを作成してください。

プラグイン『AddQuicktag』は下線マーカーだけでなく、囲み枠など頻繁に利用するタグを登録することで、投稿作業の効率がアップします。

よく使うタグは登録して、あなたのブログ運営に役立ててください。

CSSを追加する前には、必ずバックアップを取ってくださいね(*’▽’)

最後までご覧いただきありがとうございます。

ポチッと応援してもらえると嬉しいです(*'▽')

このエントリーをはてなブックマークに追加 ブログランキング・にほんブログ村へ

メルマガ登録

メルマガ登録