【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カスタマイズ記事を活用して下さいね。

ブログのカスタマイズはもちろん大事なことですが、ブログを運営する上で一番大事なことは読者さんに読んでもらえること(アクセスがアップすること)です。たくさんカスタマイズして思い通りのブログが作れたのに全然読者さんが来ないんじゃ残念ですよね。

私の運営している無料のメールコミュニティではブログではお伝えしていないブログのアクセスアップノウハウやネットビジネスでお金を稼ぐためのノウハウ、自由を実現するためのマインドセットなどを無料でお伝えしています。

STORKブログをカスタマイズしてたくさんの読者さんに読んでもらいたい方はぜひ無料のメールコミュニティに参加して下さいね!


無料会員制のメールコミュニティへご招待しています

無料で参加できるメールコミュニティ、その名も「ニコニコスマイルコミュニティ」にご招待しています。

このコミュニティではブログでお伝えしきれなかった内容やコミュニティ参加者限定のコンテンツをプレゼントしています。ネットビジネスでお金を稼ぐ力を身に付け、自由なライフスタイルを実現して大切な人とニコニコ笑顔で暮らしていけるような人生を創造していきたいのなら、あなたも無料のコミュニティに参加して仲間になりませんか?