蛍光ペン風のテキスト下線をCSS編集とAddQuickTagで作ってみた

こんな感じにテキストに蛍光ペン風の下線を入れる方法、探してこの記事にたどり着きましたか?笑

以前から、僕もこれやりたかったんですよ。

なんか色んなブログ見ると蛍光ペンマーカーやってる人多いですし、なんかスタイリッシュでカッコいいですよね。というか見やすい。

まあ普通にテキスト背景色入れるやり方もあるんですけど、コレジャナイ感がある。ここはコレジャナイ感が。

で、最近になってCSS編集とAddQuickTagというプラグインを使えばすぐ作れるってことを知ったんです。

「CSS?AddQuickTag?」…って不安にならなくも大丈夫です、意外と簡単なのでこの記事の手順通りに進めていきましょう。

 

追加CSSに蛍光ペン風マーカーの設定をする

WordPressブログのCSS編集が行えるページを開いてください。

お使いのテーマで見当たらない場合は、Wordpressの子テーマ「style.css」で編集が行なえます。

ちなみに僕はSTORKを使っているので「追加CSS」でCSS編集を行いました。

追加CSSの入力スペースに、下記のHTMLコードをコピペして保存してください。

このブログはコピペ禁止プラグイン入れていますが、コピーしたいならHTMLコード表の右上端のボタン押せばコピーできますよ。

一応、コードの説明しておくと

①タイトル名:変えるなら自分がわかるようにタイトルを入れてください

②線の太さ0~100%の値を設定します。数字が0に近いほど太くなっていきます(60%が個人的にいい感じ)

③線の色線の色を指定します。上記のHTMLコードは3色ですが、他の色も使いたい場合は自由に追加してください。

一例ですが、色見本はこんな感じに仕上がります。

下線ピンク

下線イエロー

下線ブルー

カラーコード一覧表はこちら
原色大辞典

 

ブログ記事にHTMLコードを入力する

CSSのにマーカー設定を行えば、記事編集ページで下線マーカーが引けるようになります。

テキストモードで、

<span class=”pink”>ここにテキストを入れる</span>

このようにコードを入れて文字を入力すればOKです。

色を変えたい場合は、

<span class=”pink“>

赤文字の部分を変えればOKです。

カラーコード一覧表はこちら
原色大辞典

 

AddQuickTagで蛍光ペン風マーカーの入力がカンタンに

CSS編集をして、記事投稿毎にHTMLを打ち込めば蛍光ペン風の下線は引けるんですが、さらに便利な方法があります。

HTMLコードの入力をショートカットするのに使える「AddQuickTag」です。

「プラグイン」「新規追加」「AddQuickTag」をインストールし、有効化を行ってください。

クイックタグの追加画面にて、上記のように各色毎にコードを登録していきます。

 

記事編集画面の「Quicktags」のボタンに登録したコード名が表示されていればOKです。

こちらの機能を使って下線を入れたいテキストの範囲を指定して、マーカを適用させていきます。

ちなみに。
ビジュアルモード画面では見た目がわからないのでプレビューにて必ず確認を行ってください。

 

まとめ

CSSとかHTMLをいじるのに抵抗がある僕でしたが、意外とカンタンにできたのでホッとしました。笑

これで蛍光ペン風マーカーを使いまくって、ブログ記事をよりオシャレにスタイリッシュに仕上げていただければと思います。

 

生き方をお金に変える無料メール講座

●想いや情熱はあるのに売れない・稼げない
●好きなことで起業したけど集客できない
●自分だけの強みや差別化ポイントが見つからず悩んでいる

そんなあなたへ、“生き方をお金に変えるビジネスの全体像”を3つの動画にまとめました。

 

  1. 自分の好きなこと・強みをお金に変える方法(音楽、英語、恋愛、カメラ、筋トレ、占い、コーチングなど)
  2. 理想の見込み客が自動的に集まり、自然と商品が売れるビジネス戦略
  3. あなたの生き方をブランドに変えるコンセプトメイキング

といった内容を合計72分の3つの動画セミナーとメール講座を無料でプレゼントしていますので、興味がある方は下記のフォームからぜひご登録ください。



※登録してすぐに動画セミナーのプレゼント案内がメールで届きます。

携帯メールには対応しておりません。PCのメールアドレスでのご登録をお願いいたします。

<個人情報の取り扱いについて>
頂いたお名前とEメールアドレスを第三者へ販売、共有、公表することはございません。
あなたのプライバシーを保護すると約束いたします。



1986年生まれ、岐阜県出身・大阪在住

「生き方を仕事にできる個人を増やす」ことを理念に、インフルエンサーのような大きな影響力を持たなくても、個人が好きなことで稼いでいくための情報をブログやメルマガで配信中。

自分の生き方(才能・経験・スキル)を活かしたビジネスの仕組み化・WEB集客を教えており、
英語、音楽、恋愛、占い、転売、ハンドメイド、子育てなどサポートしてる発信ジャンルは多岐に渡る。

クライアントさん一人ひとりの理念・価値観・スキル・ステージに合わせたビジネス構築が得意。

【主なクライアント様の事例】
●オリンピック、サッカーW杯などで活躍中の英語通訳家プロデュース
●個人エステサロンオーナー様の集客支援、ホームページ制作
●関西で某有名飲食店(たこ焼き居酒屋)のホームページ制作、WEB集客支援
●オーダーメイドアクセサリー製作の集客支援、売上アップ
●スキーブロガーのコンテンツ収益化、ブログアクセスアップ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*