どうも、まさひろです。

今日も元気に情報を配信していきます!

 

ブログの記事の内容で、強調したい文章や言葉を目立たせる方法って

いくつかあると思います。

 

例えば、文字の色を変えたり太さ大きさを変えてみるとか、

文字の背景に色をつけてみるなどいろいろな方法がありますが、

これらの方法はWordPressでも初期で使えるようになっていますので

使用されている方も多いと思います。

 

ではそれ以外で文字を装飾して目立たす方法はないのだろうか?

 

そんな方法を探しているあなたの為に、

今回はマーカー線を使った装飾の方法を説明します。

 

 

こんな感じでカラフルなマーカー線で文字を装飾することができます。

 

この方法は簡単に説明するとあらかじめCSSを追加しておき、

使いたいときにショートコードで記事を装飾するといったやり方です。

 

そのため、ひとつのCSSで1色しか設定できないので、

複数の色を使用したい場合はその分のCSSを設定する必要があります。

そこのところは注意してください。

 

では、設定方法を説明します。

今回は例として「賢威7」のテンプレートで説明していきます。

 

まず、WordPressの管理画面より「外観」→「カスタマイズ」を選択します。

 

 

 

そうすると下の画面が表示されますので、「追加CSS」をクリックします。

 

 

 

クリックすると下の画面が表示されますので、

左側の赤枠のところにCSSを入力し、「保存して公開」をクリックします。

 

 

追加CSS

/*水色のマーカー線*/

.marker_water {
background: linear-gradient(transparent 70%, #66ccff 70%);
}

/*黄色のマーカー線*/
.marker_yellow {
background: linear-gradient(transparent 70%, #ffff66 70%);
}

/*ピンクのマーカー線*/
.marker_pink {
background: linear-gradient(transparent 70%, #ff66ff 70%);
}

/*緑色のマーカー線*/
.marker_green {
background: linear-gradient(transparent 70%, #66ffcc 70%);
}

 

これで、設定は完了ですのであとは使いたいときに下のコードを

使って文章を作れば大丈夫です。

<span class=”marker_water”>水色のライン</span>

<span class=”marker_yellow”>黄色のライン</span>

<span class=”marker_pink”>ピンクのライン</span>

<span class=”marker_green”>緑のライン</span>

 

今回は賢威7のテンプレートで説明しましたが、

ほかのテンプレートでも使用できますので、

あなたの使っているテーマでも使ってみてください。

 

使う色によっては文章を結構目立たせられると思います。

 

最後までお読みいただきありがとうございました。

 


アフィリエイトランキング

にほんブログ村 小遣いブログ ブログアフィリエイトへ
にほんブログ村

ランキングに参加してます

応援クリック頂けると励みになります