【STORK(ストーク)】蛍光ペンのようなアンダーラインを引く方法

こんにちは、あらやんです。

今回はWordPress用テーマ「STORK(ストーク)」で、蛍光ペンのようなアンダーラインを引く方法を説明していきます。

記事作成画面の下線ボタンでアンダーラインを引くとただの黒線ですが、STORK(ストーク)ではショートコードと追加CSSを活用することで蛍光ペンのような感じで好みの色の線を引くことができるようになります。

それがやりたかったんだよ!という方はぜひ参考にしてみて下さいね。

 

追加CSSの設定

まずは追加CSSの設定を行っていきます。

ダッシュボード画面左の「外観」より「カスタマイズ」→「追加CSS」をクリックして下さい。そうすると画面左側にテキストを入力できる部分があります。

ここに以下の文字列を入力してください。

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

この文字列の中に「#fcee21」という部分がありますが、ここがカラーコードになります。ここを好みの色のカラーコードに設定すればその色でアンダーラインを引くことができます。

私はSTORKのデフォルトの色使いである水色をそのまま使っているので、水色に合う黄色でアンダーラインを引いています。

アンダーラインの発色の設定がちょっと蛍光ペンっぽい感じなっているのでそういった色の方がキレイに表示されるかもしれませんん。

 

ショートコードを使う

追加CSSの設定が完了したら次は記事作成時にアンダーラインを引きたい箇所にショートコードを挿入します。

<span class=”marker1″>アンダーラインを引く箇所</span>

このようにすればアンダーラインを引くことができます。

 

AddQuicktagとの組み合わせで快適に

アンダーラインを引くショートコードに限った話ではないのですが、ショートコードは全般的にタグを管理するプラグインである「AddQuicktag」と組み合わせることで非常に快適に使用することができます。

AddQuicktagの使い方を学んで作業効率を上げる方法

2017.11.14

前回記事でショートコードの説明をしましたが、ショートコードを使いたいと思った時にいちいちショートコードを入力するのはめんどくさいですし、メモ帳かなんかに一覧を作っておいてコピペするというのも手間がかかります。

AddQuicktagを使ってよく使うショートコードを事前に登録しておけば記事作成画面でビジュアルエディターならドロップダウンリスト、テキストエディターなら上部にタグとして表示されるようになるので簡単にショートコードを挿入できるようになります。

STORKでは魅力的なブログを創る助けになるショートコードが用意されているので、使いこなすためにもAddQuicktagの導入をおすすめします。

カスタマイズ記事まとめ

他のSTORK(ストーク)カスタマイズ記事をお探しの方はこちらからどうぞ

あらやん公式メルマガはこちら

無料のメルマガに登録して頂くとメルマガ会員限定のメンバーズサイトに無料でご招待しています。

メルマガやメンバーズサイトでは

  • 自由なライフスタイルを実現するための具体的な方法
  • 理想を現実にするための思考法・マインドセット
  • より成果を出すための作業のマネジメント

などなど、自由なライフスタイルを実現するための様々な情報を発信していきます。

あなたも自由なライフスタイルを実現し、家族や恋人、友人などの大切な人とニコニコ笑顔で過ごしていけるようなそんな人生を歩んでいきませんか?もしそんな人生に興味や憧れがあるのなら、ぜひこのメルマガに登録して下さいね。

あなたが理想のライフスタイルを実現できるように私も頑張って情報を発信していきます!