どうも、もてちん(@ 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』プラグインはかなり使い勝手がいいようですね。
見出しも作れるし、他にも応用が効きそうです。
一緒により良いサイト作りをしていきましょう。
わたしも他のサイトをもっと研究して、より見やすく、よりスマートなサイトにしていきたいと思います。
コメント