ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPress 蛍光ペン風テキスト装飾をCSSに設定

   

WordPress 蛍光ペン風テキスト装飾をCSSに設定

こんにちは。@dmgadget_ディーエムガジェットです。ブログを書いていて太字を使ったりする時もあると思うのですが、こんな風に蛍光ペンで強調したくなるような場合も多々あると思います。ディーエムガジェットではあまり使わないのですが、一度設定しておくと便利なので導入方法を備忘録としてここに残したいと思います。

スポンサーリンク

ディーエムガジェットではStinger5に子テーマを導入して運用しています。説明は子テーマを利用した説明になりますので、お間違えの無いようお願いいたします。ちなみにStinger5の子テーマ導入方法はこちら。

子テーマのstyle.cssを開きます

TransmitなどのFTPアプリを使ってサーバーにあるstingerの子テーマフォルダのstyle.cssを開き一番下などに以下の記述をコピペします。

色の指定はコードの中の rgba(255, 255, 0, 0.5)の最初の3っつ「255,255,0」が黄色を示しています。ちなみに4つ目の「0.5」と云う数字は色の透過度の値で0.5より上の数字にすれば濃くなります。

そして蛍光ペンの使い方は本文中に装飾したい文字を以下のコードで囲みます。

ここはかなり重要なんです。

みたいな感じです。

スポンサーリンク

蛍光ペンの色を変更したい場合

好きな色に変更したい方はこちらのサイトで、

好きな色を作ってから、R G B それぞれの数字を先程のrgbaに書き込みます。

WordPress 蛍光ペン風テキスト装飾をCSSに設定

この場合、rgba(219,156,181,0.5)となります。

頭の「.keikou」を「.murasakikeikou」のように好きな名前に変えて先程と同じようにstyle.cssの一番下にコピペして保存すれば使えるようになります。

紫バージョンの蛍光ペンです。

こんな感じで5色ぐらい登録しておけば完璧です。

以上「蛍光ペン風テキスト装飾をCSSに設定」でした。読んで頂いてありがとうございました。

スポンサーリンク

 - WORDPRESS

Message

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

CAPTCHA


  関連記事

WordPress[Stinger3用 子テーマ]フォントを変更する方法
WordPress[Stinger3用 子テーマ]フォントを変更する方法
WordPress サイドバーにFacebookのいいねボックスを表示する方法
WordPress サイドバーにFacebookのいいねボックスを表示する方法
WordPress[Ultimate TinyMCE] ビジュアルエディタを拡張するプラグイン
WordPress[Ultimate TinyMCE] ビジュアルエディタを拡張するプラグイン
WordPress[Stinger3]サイドバーに人気記事を表示させる方法
WordPress[Stinger3] サイドバーに人気記事を表示させる方法
WordPress[Simple Local Avatars] Gravatarに登録不要!プラグインでアバター画像を変更
WordPress[Simple Local Avatars] Gravatarに登録不要!プラグインでアバター画像を変更
WordPress[Stinger3] コメントスパムを減らすプラグイン
WordPress[Stinger3] コメントスパムを減らすプラグイン
WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ
WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ
WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法
WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
WordPress[Stinger3] 背景を画像や写真に変更する方法
WordPress[Stinger3] 背景を画像や写真に変更する方法