WordPressでいろいろなブログを見ていると、みんなの文字の協調がなんだかおしゃれなのにきがつきました。
こういうマーカーではなくこんな感じです。

 

「文字 マーカー」で調べると前者のマーカーの方法しか出てこなかったので、ここにおしゃれマーカーのやり方を記載しておきたいと思います。
私もCSS初心者なので初心者に分かりやすいようにご説明していきたいと思います。

スポンサードリンク



 

普通のマーカー

 

まず、上でご紹介した前者の黄色い普通のマーカーは以下です。

 

<span style=”background-color: #ffff00;”>ここに文字を入れる</span>

 

これをWordPressのテキストに書き込むとこのようになります。
ここに文字を入れる

 

しかし、求めているのはこれではありませんね。
私は自分のテーマを賢威に設定しているので、とても簡単に設定を行うことができました。
賢威でのやり方を記載していきますので、賢威でない人は賢威を用意しましょう。

 

賢威は本当に初心者こそ用意した方がよいテーマだと思います。
賢威を使ってからというもの、CSSが無知な私でも、おしゃれなページをつくることができています。



SEOに強い戦略的テンプレート「賢威7」。レスポンシブWebデザインにも対応!パンダアップデート・ペンギンアップデートで悩むサイトオーナー様必見のSEOマニュアルが付属!

 

1. 固定ページ

 

まずはWordPressの固定ページを開きます。
下の画像矢印部分です。

 

そして新規作成からページ作成画面を開いてください。
必ず下の画像の□部分、「テキスト」画面にいることを確認してくださいね。

 

 

2. 色を決める

 

次にアンダーラインの色を決めます。
カラーコードはこちらから決めてください→http://www.colordic.org/picker/
「HEX」に表示されている6桁の英数字を覚えておいてくださいね。

 

色々な色がほしいと思いますが、その方法はのちほどご説明していきます。
まずは1つずつ行きましょう。
今回は黄色を例にしていきます。

 

3. 本文に入力

 

本文に、以下を入力して下さい。
<em class=”yellow-under”>黄色</em>

 

タイトルは何か分かりやすいものを指定しておくと良いと思います。
次は「更新」を押します。

 

 

4.「外観→カスタマイズ」の「追加CSS」

 

更新をしたら、「外観→カスタマイズ」の「追加CSS」に移動します。

 

移動したら下記のデザインを、改行をそのままに貼り付けて「保存して公開」を押してください。

 

↓下線デザイン↓ここから↓

 

スポンサードリンク
em. yellow-under {
font-style:normal;
font-weight:normal;  
background:linear-gradient(transparent 60%, #ffcccc);  
}

 

 

※カラーコードhttp://www.colordic.org/picker/で選んだ色を4行目の「ffcccc」部分に書き換えます。
今回は黄色を選んだので、「HEX」に表示されている6桁の英数字ffff89をffcccc部分に書き換えればOKです。
上の画像を参考にしてくださいね。

 

全てが終わったら「保存して公開」を選びましょう!
これで終了です!

 

※文字を太くする場合は、3行目のnormalを消してbold にする。
※下線の太さは4行目の60% 部分で調整。

 

固定ページでプレビューを確認

 

固定ページでプレビューを確認してみてください。
先ほどの文字に色がついていたら成功です。
こんどは、このタグを便利に呼び出せるように「AddQuicktag」というプラグインを取得しましょう。

 

AddQuicktagはとても便利なプラグイン

 

(1)プラグイン⇒新規追加⇒検索窓に「AddQuicktag」と入れて⇒今すぐインストール⇒有効化
(2)WordPress左のダッシュボードにある「設定」に「AddQuicktag」が表示されているのでクリック。

 

下の画像がでてくるので、

 

①分かりやすい名前を入力
②先ほど固定ページに書いた<em class=”yellow-under”>黄色</em>の<em class=”yellow-under”>と</em>を分けて入力
③すべてにチェック
④変更を保存

 

をします。

 

ワードプレス

 

そうすると、投稿画面のテキストに以下のように出るので、文字をマーキングしたいところを範囲指定してボタンを押すだけで下線が引けます!

 

ワードプレス

 

他にもいろいろな色を選びたい場合

 

他にもいろいろな色がほしい場合は、新しく固定画面から新規作成をします。

 

 

こんどはピンクがほしいとしましょう。
<em class=”pink-under”>ピンク</em>として更新を押します。

 

そして「追加CSS」にいき、1行目のem. yellow-under {部分をem.pink-under {とすればOKです!

 

※以下の画像黄色い線参照

 

 

下線デザイン終わりに

 

どうですか?
とっても簡単でしたね。

もし、分からない方はお気軽にメッセージください!