ワードプレス「ストーク」文字の下部にマーカーでアンダーラインを引いて装飾する簡単な方法

文字の下に蛍光マーカーのような線が引っ張ってあるやつ。そう、これね

WordPressテーマ「ストーク」で入力した文字の下部に蛍光マーカーでアンダーラインをひいたような装飾をするやり方を紹介します

ストークのオプションには、このマーカー機能が装備されていなかったので渋々よそ様のサイトに出かけてドロボーしてきました(ほんとすんません!)

 

手順は2ステップぐらい(笑)このあと画像付きで簡単に説明します

  • AddQuicktagというプラグインをインストールして有効化
  • 「ストークの使い方」の、このページに出かけて⇒AddQuicktagインポート用ファイルをぶち込む。サイト見ながらやってね
  • <span class=”marker1″>マーカーを引きたいテキスト</span> っていうのをAddQuicktagに新規追加する
  • 自分のブログの「カスタマイズ」のCSSって所に /* マーカー強調カスタマイズ */
    .marker1 {
    background: linear-gradient(transparent 70%, #FFB96D 40%);
    } ってのを貼り付けて保存して完了

 

画像で説明します

01:(↑)まずは「プラグイン」の「AddQuicktag」の「設定」をポチ

 

02:(↑)下までスクロールすると空白な部分があるのでそこに新規に追加します、ここでは名前を「①マーカー」その下の所を押すと「アイコン」が選べるので「②ペンキを塗る刷毛」にしました

「③開始タグの所に<span class=”marker1″>」「④終了タグの所に</span>」

⑤↓その右側にチェックされていない□部分があるので「右端以外全部チェック」を入れてください


ここまで出来たらもう目の前です、ブログに戻りましょう

03:(↑)ブログ画面上の「カスタマイズ」を選ぶか「ダッシュボードの「外観」からカスタマイス」をポチ

 

04:(↑)左側にズラッと並ぶ「カスタマイズ項目の一番下に追加CSS」というメニューがあるので、そこをポチ。

 

/* マーカー強調カスタマイズ */
.marker1 {
background: linear-gradient(transparent 70%, #FFB96D 40%);
}

 

ってのを「貼り付けて保存」して完了

transparent(トランスペアレント)ってのは「透明度」

#FFB96Dってのはマーカーの色

色を変えたい方はこちらをどうぞWEB色見本 原色大辞典 – HTMLカラーコード

70%とか40%っていうのは「線の太さ」です

 

05:(↑)ブログ投稿画面に移動すると「Quicktags」というメニューが増えているので、そこをポチ、一番下に新しく追加した先ほどの「刷毛」と「マーカー」を発見!

 

あとは普段文字を太文字にするようなやり方で、マーカーを引きたいところを左クリック押しっぱなしで青くするやつで青ーくしておいて、「Quicktags」の「マーカー」をポチ

 

プレビューで見てみると↓

イエス!!ベリーグッド!ナイスマーカー!ビューリフォ!

 

どろぼ、参考にさせていただいたサイト様

という事で今回WordPressテーマ「ストーク」の文章の下部に蛍光マーカーのようなアンダーラインを引く方法を紹介していたサイト様のご紹介をします

サラリーマンlifestyleblogさん

そのサラリーマンlifestyleblogさんが参考にしたというおーにぎりどっとこむさん

 

大変参考になりました!ありがとうございます!

マーカーの色もぼくの大好きなオレンジ最高です!万歳!

一生懸命書きました!お役に立ちましたらシェアボタンを押してお友達にもご紹介ください!

5 件のコメント

  • こんにちは。

    記事がお役に立てたようで良かったです。
    また機会がありましたらよろしくお願い致します。
    お互い頑張りましょう(^O^)

  • 初めまして、まだブログ開設1ヶ月のさぎともうします。

    参考にさせていただきました!^^

    上にあるの2つ点々の濁点?の所がコピペでは使えなかったみたいです^^;

    突然の指摘すいませんでしたm(_ _)m

    • さぎさんコンバンワ!コメントありがとうございます!
      どうやらボク、やらかしたようで、、お役にたてずにすみません!
      さぎさんのブログこれから拝見させていただきます^^ おなじストーク使いとしてカスタム情報共有できると嬉しいです^^

  • こんにちは、数日前にストークを使ってブログを立ち上げました。
    蛍光ペンみたいな強調いいなと思って調べていたら、こちらのページにたどり着きました。
    すごく、わかりやすい解説でとても参考になったのですが、なぜか蛍光ペンのような装飾が表示されません。
    プルタブにマーカーが表示されているので、CSSの方の問題なんでしょうか?
    ばくっとした質問で申し訳ございませんが、教えていただけると幸いです。

    • 留美さんコメントありがとうございます!
      ぼくは今、水産の仕事をしておりまして、お返事に時間がかかってしましました!!
      ステロイドの不安や苛立ちに、さぞかし苦しんでいる時期かと思いますが、いっしょに頑張っていきましょうね!!!

  • コメントを残す

    メールアドレスが公開されることはありません。

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