【ワードプレス初心者向け】ブログでよく見かける文字に蛍光ペンで下線を引く方法

スポンサーリンク

どうも、もてちん(@ MoteChiNvwvwvN)です。

 

今回は、ブログでよく見かける文字に蛍光ペンで線を引く方法です。

わたしも覚えたてです。

超初心者のわたしが実践したワードプレスで蛍光ペンで線を引く方法を説明していきます。

 

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

 

ダッシュボードの『プラグイン』→『新規追加』から『AddQuicktag』をインストール。

インストール後、【プラグインを有効化】にする。

検索で探す際、フルネームを入れないと出てこなかったです。

 

プラグイン『AddQuicktag』を設定する

 

ダッシュボードの『設定』→『AddQuicktag』から設定画面へ。

少し見えにくいですが、『ボタン名』『開始タグ』『終了タグ』の三ヵ所に入力し、一番右側の項目にチェックをして【変更を保存】をします。

例)見出し2を作成の場合

『ボタン名』→任意(選択する時にわかりやすい名前。今回は「イエローの蛍光ペン(太め)」と入力)

『開始タグ』→<span class=”yellow_line”>

『終了タグ』→</span>

 

テーマの編集

 

続いてCSSのカスタマイズをしましょう。

今回はコードを作ってみたのでこちらを使います。

 

**** ここから下をコピー ****

 

/*蛍光ペンの下線引き*/

/*ピンク(太)*/
.pink_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;}

/*ブルー(太)*/
.blue_line{background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #cce5ff 0%) repeat scroll 0 0;}

/*イエロー(太)*/
.yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;}

/*ピンク(細)*/
.pink_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffb2d8 0%) repeat scroll 0 0;}

/*ブルー(細)*/
.blue_line_narrow {background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #add6ff 0%) repeat scroll 0 0;}

/*イエロー(細)*/
.yellow_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffff7f 0%) repeat scroll 0 0;}

 

コードをコピーしてきたらまず、『外観』→『テーマの編集』を開きます。

そうすると、『スタイルシート(style.css)』の画面になるので、一番下までスクロールしてコピーを貼り付けます。

 

*上の赤で囲ってある部分に貼り付けます。

貼り付けが終わったら保存します。

 

 

見出しを確認

 

投稿画面で確認作業をします。

赤で囲った部分が追加されていると思います。

文字を範囲指定後、赤で囲った部分で『ボタン名』(イエローの蛍光ペン(太め))を選択します。

 

プレビューで確認すると蛍光ペンの下線が表示されていると思います。

 

 

最後に

 

いかがでしょうか?

『AddQuicktag』プラグインはかなり使い勝手がいいようですね。

見出しも作れるし、他にも応用が効きそうです。

一緒により良いサイト作りをしていきましょう。

わたしも他のサイトをもっと研究して、より見やすく、よりスマートなサイトにしていきたいと思います。

 

 

 

コメント