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

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

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さんが参考にしたというおーにぎりどっとこむさん

 

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

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

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

1 個のコメント

  • コメントを残す

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