MENU
HOME
TOP
WhiteTiger Ver 1.2.1に更新しました。確認よろしくお願いします。

WordPressで強調文字に蛍光ペン風のスタイルを追加する方法

なんでまた蛍光マーカーを使う方法な 記事を書いたかというと、実はテーマ変更でマーカーのスタイルとか消えちゃってることに今更気づいたアフォーです。

なので、アフォーな自分でも覚えておきたいのでメモがてら記事にした次第でございます。

色のサンプル

linear-gradientを使って蛍光ペンで引いたようなスタイルを追加しておき、クラス毎にスタイルをふる感じで行きましょう。

以下よく見かけるメジャーな色を用意しておきました。

  • light yellow
  • crimson
  • royalblue
  • limegreen
  • orangered

ちなみに色は以下の記事を参考にチョイスしてきました。
英語(日本語色付き)で使う104背景色

スタイルの追加

light yellowのスタイル

strong.light-yellow {
background: linear-gradient(transparent 40%, #ffff66 80%);
}

crimsonのスタイル

strong.crimson {
background: linear-gradient(transparent 40%, #ff8282 80%);
}

royalblueのスタイル

strong.royalblue {
background: linear-gradient(transparent 40%, #44a3ff 80%);
}

limegreenのスタイル

strong.limegreen {
background: linear-gradient(transparent 40%, #44fd44 80%);
}

orangeredのスタイル

strong.orangered {
background: linear-gradient(transparent 40%, #ff7744 80%);
}

あとはこれをstyle.cssにぺったんこするだけだす!(`・ω・´)b

蛍光マーカー的なやつの使い方

ここまで来たらあとは、ストロング+クラスで囲むだけだけ。

<strong class="light yellow">light yellowのスタイル</strong>

タグを登録しておくと便利

ただこれ、毎回タグを打ち込むのがめんどくさい。

そうです皆さんも思いますよね?ね?…

なので、プラグインのAddQuicktagを使うのが一番手っ取り早いのですよ。

では、ひとまずプラグインのインストールをします。

 

有効化すると設定にAddQuicktagな項目が追加されるので、アクセスします。

 

さてさて、一見難しそうに見えるセッティング画面ですが、意外と簡単ですの。ここでAddQuicktagさんに、先ほどのタグ名、HTMLタグ、順番を教えてやるだけです。

これで時間使うのもアレなもんで、今回は最低限の設定で行きしょう。最低限ボタン名、開始タグと終了タグを入力すれば使えます。

ようするに、こんな感じで登録してやります。名前は任意で分かればOK、開始タグと終了タグが大事。

 

これで、エディタに追加されているので、使ってみる。スタイルを当てたい文字を選択してQuicktagのドロップダウンに先ほど追したタグをポチっと。

 

プレビューするとスタイルが当たってるのが確認できます。

他も同じように登録しておけばすぐ使えるので便利ですね。


けんじ

AddQuicktagは、こういう吹き出しなんかも登録しておくと便利なので入れておくことをお勧めします

あと、ちょくちょく出てきたひよこのボックスも紹介してるので参考にしてみてね。
ぴよこボックスが可愛過ぎるので紹介!投稿の補足情報などにどうぞ
ぴよこボックスが可愛過ぎるので紹介!投稿の補足情報などにどうぞ
どうも!柄にもなく可愛いの作りました。気持ち悪いとか言わないでね。今回ぴよこをお借りしたイラストやさんがぴよたそです。 今回の完成イメージはこんなやつですん(テーマ配布終了のお知らせで使用) ※ベータ版の配布は終了しました。これから完成版を発表しようと思いますので、今しばらくお待ちください。 けんじ ジャガイモみたいでかわいい!! こちらのサイトのイラストを使ってボックスを使ったら「あら!素敵だわ!!なシリーズの紹介」スタートです。 Photo by Tim Umphreys on Unsplash 著作権的なアレ 個人的に使うとかブログなどで紹介する分には問題ないようですが、再配布がダメな感じだったので問い合わせました。以下ぴよたそ様の利用規約の気になるところです。 商用利用の方:素材の再配布、転売等は以下をご参考に商用利用や素材を加工しての利用はもちろんOK。クレジットの記載も不要で、何点ご利用頂いても大丈夫です。ただし未加工(もしくはほぼ手が加わっていない)イラストの著作権の主張、転売はご遠慮ください。(何に使ってもらってもOKですが、元イラストの著作権は放棄しておりません) ぴよたそ利用規約 | ゆるくてかわいい無料イラスト素材屋「ぴよたそ」 お問い合わせの結果、結論的に言うと、パーツとして作成したものを配布してユーザーに利用していただくものは再配布としないとの許可を得ました。 お問い合わせのメール内容です。 ということで、ぴよこボックスのパーツとして配布できるようです。次回配布予定のテーマにも組み込む予定です。 あ、あとぴよこボックスってなんやねん!震えるぅ~。そう思った方も300人はいてると思いますが、僕が勝手に命名しただけでやんす。 ぴよこボックスのスタイル とりあえず、5種類の紹介です。 ごめんね的なやつ ケンちゃんが気に入って使ってるやつですね。ごめんねと書けば何となく許してしまう的な感じです。 <div class="piyo-info piyo-info_sorry">ここが文章ですよ。</div> .piyo-info_sorry { background: #fffcdd; border: 1px solid #ff9658; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_sorry:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } 補足説明てきな さっきも出て来ましたが、投稿の補足説明なんかに使えそうなやつです。ていうか使って下さい。 <dip class="piyo-info piyo-info_suppleme">ここが文章ですよ。</dip> .piyo-info_suppleme { background: #f5fcff; border: 1px solid #00acee; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_suppleme:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } ここ注目てきな アテンションプリーズ!ってやつです。functions.phpの編集は危険なので、バックアップは必ずとっておいてね。みたいな使い方でしょうか。 <div class="piyo-info piyo-info_attention">ここが文章ですよ。</div> .piyo-info_attention { background: #ffe9e9; border: 1px solid #bf0000; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_attention:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } 何でもいけそうなやつ ただただ無表情です。逆に何でもOKなオールマイティー。文中で本題からずれたときにでも使えちゃう。ザキヤマてきなやつ。 <div class="piyo-info piyo-info_nature">ここが文章ですよ。</div> .piyo-info_nature { background: #f0fff0; border: 1px solid #7c7; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_nature:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } 寝てるやつ よくわからんけど、たまにはゆっくり休んでもいいよね。ブログばっかやってると肩こっちゃうよ的な? <div class="piyo-info piyo-info_sleeping">ここが文章ですよ。</div> .piyo-info_sleeping { background: #fbfbfb; border: 1px solid #666; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_sleeping:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } 全部まとめる場合 因みに全部まとめるとこんな感じでCSSは省略できます。 .piyo-info { padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; width: 100px; height: 100px; background-size: cover; background-position: center; } /*sorry*/ .piyo-info_sorry { background: #fffcdd; border: 1px solid #ff9658; } .piyo-info_sorry:before { background-image: url(ここにURLを入れてください。); } /*補足*/ .piyo-info_suppleme { background: #f5fcff; border: 1px solid #00acee; } .piyo-info_suppleme:before { background-image: url(ここにURLを入れてください。); } /*attention*/ .piyo-info_attention { background: #ffe9e9; border: 1px solid #bf0000; } .piyo-info_attention:before { background-image: url(ここにURLを入れてください。); } /*nature*/ .piyo-info_nature { background: #f0fff0; border: 1px solid #7c7; } .piyo-info_nature:before { background-image: url(ここにURLを入れてください。); } /*sleeping*/ .piyo-info_sleeping { background: #fbfbfb; border: 1px solid #666; } .piyo-info_sleeping:before { background-image: url(ここにURLを入れてください。); } ちょっとした文字をキャプションみたいに入れても可愛いです。 スタイルはこんな感じです。適当に変更して使ってね。 .piyo-info.piyo-info_attention:after { content: "注目!!"; top: -12px; left: -13px; font-weight: bold; position: absolute; transform: rotate(-17deg); color: #bf0000; font-size: 21px; background: #ffffff; border: 1px solid #bf0000; padding: 1px 6px; border-radius: 4px; } 画像のURL確認 まず以下の画像をダウンロードしてください ぴよこボックスの素材ダウンロード あくまでもこのパーツとしてです。画像は圧縮リサイズ済みです。 で、ZIPなので解凍してWordPressのメディアに新規追加します。 アップロードが終わったら、ライブラリから編集をクリックします。 右側を見れば確認できるのでURLをコピーします。 後は、コピーしたURLをCSSのurl(ここに入れます)にいれてください。 WordPressの場合は、タグ登録しておくと便利です。こちらで説明してるので参考にしてみてね。 公式ぴよたそのシブタク🐣(@pochimin02)さんからツイート頂きました。Yes!✌Yes!✌でもケンちゃんSNSの使い方わからない…(泣)逆輸入的な感じ。 おお!ぴよたそのご紹介ありがとうございます~。ぴよこボックスが可愛過ぎるので紹介!投稿の補足情報などにどうぞhttps://t.co/67bDd44e71 — シブタク🐣 (@pochimin02) 2018年8月27日 以上!!ひよこのお祭りでした。(`・ω・´)ゞ

報告は以上でございます!!(`・ω・´)ゞ

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください