• 副業・在宅ワーク
    iPadでイラストを描くなら、aibowの極細タッチペンがコスパ最高でオススメ!
    2018年03月26日
  • ゲーム
    【とび森amiibo+】村を売却する方法、条件、金額の決まり方を徹底解説!
    2018年03月27日
  • 奈良のこと
    にぼしこいし|奈良一煮干しの濃いラーメン店に行ってきた♡
    2018年03月25日
  • 妊娠・出産・育児
    男の育児休暇取得の流れと、実際に休んで思い知った3つのこと
    2018年03月26日
  • あずのおすすめ
    書評|フリーランスを代表して申告と節税について教わってきました。
    2018年02月28日
  • 妊娠・出産・育児
    お知らせ|「ハロー葉酸サプリ」様に出産後の体験談を寄稿しました
    2018年03月25日
  • ブログ運営
    読まれるブログは読みたいブログだし、まずは存在を認識してもらうことが大切
    2018年02月08日
  • あずのおすすめ
    無名の主婦ブロガーがpolcaで10万円の支援をしてもらえた理由と今思うこと
    2017年08月16日
  • ブログ運営
    コピペで簡単にできるSANGOのカスタマイズ方法まとめ
    2018年02月09日
  • ブログ運営
    SANGOの内部リンクボックスにラベルをつけたりするカスタマイズ
    2018年02月09日
CSSとHTMLで文字に蛍光ペンで線を引いたようなデザインを作る
▼ どこよりもわかりやすいブログの育て方
▼ シンプルライフに憧れるあなたへ

こんにちは
主婦ブロガーのあず(yuuki_azusa )です。

今回は、Twitterで質問のあった「蛍光ペンデザイン」の作り方を紹介します。

このブログでも使用しているWordPressテーマ「SANGO」には、デフォルトで3色の蛍光ペンデザインが用意されています。

ですが、色が合わなかったり、線の太さが思っているのと違ったりする方もいるでしょう。

そんな方は、自作のデザインを用意して色の種類を増やしたり、線の幅を変えたりしてみましょう!

もちろん他のテーマでも使用可能ですので、蛍光ペンデザインを使ってみたい方は参考にしてみてください。

スポンサーリンク

蛍光ペンを引いたようなデザインを自作する

今回はstyle.cssでデザインを指定して、実際に使用する際にはHTMLを使う方法を紹介します。

作ったHTMLは「AddQuicktag」というプラグインに登録しておくことで、簡単に使用できます。

style.cssに追記する内容

追記するのは子テーマのstyle.cssです。

今回は、当ブログでよく使っているこのようなオレンジの蛍光ペンデザインを元に説明します。

.orange_pen {
background: linear-gradient(transparent 65%, #fff7e6 10%);
padding-bottom: .2em;
font-weight:bold;
}

.orange_penというclassを作っています。ここは自分でわかりやすいように決めてください(.は消さないでね)。

background: linear-gradient(transparent 65%, #fff7e6 10%);で蛍光ペンの色や幅を指定しています。

padding-bottom: .2em;は線の位置を指定しています。

font-weight:bold;はおまけのようなもので、私は強調部分を必ず太字にする癖があるので、蛍光ペンの部分が必ず太字になるように指定しています。

あずさん

これを応用すると、このように青い蛍光ペンデザインを作ることもできます。

 

変更したのは1行目のclass名と、2行目のカラーコード部分です。

複数のclassを用意して、使い分けることによって様々な蛍光ペンデザインを表現することができます。

実際に使用するためのHTML

実際に自作したclassのコードを使うには、以下のようなHTMLで文字を囲みます。

<span class="orange_pen">蛍光ペンを引きたい文字</span>

赤文字の部分は、自分で作ったclass名(.を除く)を入れてください。

これで簡単に文字に蛍光ペンで線を引いたようなデザインが使えます。


▼ 癒し犬たろすけのLINEスタンプ ▼
sponsord by. @tatsuya141free

上級編:ショートコード化する

HTMLを使うのが面倒な場合は、ショートコード化してしまうのも一つです。

ただし、PHPファイルをいじりますので必ずバックアップをとった上で行ってください。

また、コードの意味がわからない場合は書き換えをしないでください。

function.phpに記載する内容

function keikoupen( $atts, $content = null ) {
 return '<span class="orange_pen">' . $content . '</span>';
}
add_shortcode('orange', 'keikoupen');

このコードをfunction.phpに記述することで、このショートコードが使用できます。

[orange]ショートコードで呼び出し[/orange]

2行目のreturn部分にHTMLを登録し、囲みで呼び出しができるように指定しています。

また、4行目のadd_shortcodeの1つ目の指定でショートコードで使用する文字(orange)を指定しています。

色の使いすぎには注意が必要

classを自作することで、無限に蛍光ペンの種類を増やすことができますが、記事では色の使いすぎに注意しましょう。

あずさん

どこが重要なのかわからなくなりますからね。

 

また、蛍光ペン風のデザインはおしゃれで見やすくすることもできますが、色が奇抜だと逆に読みにくくなる原因にもなります。

何度も調整しながら、読みやすい色を見つけましょう。

参考リンク WEB色見本|原色大辞典

今までに書いたSANGOのカスタマイズ方法は「コピペで簡単にできるSANGOのカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

[kanren id=458] 最後まで読んでいただき、ありがとうございましたあず(yuuki_azusa ) でした。
投資に興味がある方はコチラも ▼
ブログ運営者さんにオススメ ▼

アシレーヌ
スポンサーリンク


WPカスタマイズの関連記事
  • SANGOの横長記事一覧カードをPC表示でも1列にするカスタマイズ
  • WordPress|投稿一覧画面に記事IDを表示するカスタマイズ
  • コピペでOK!記事タイトルの文字数カウンターを設置する方法
  • SANGOの内部リンクボックスにラベルをつけたりするカスタマイズ
  • コピペで簡単にできるSANGOのカスタマイズ方法まとめ
  • SANGOのサイドバーの横幅をコピペで変えるカスタマイズ方法
コメントを残す