ライフハック~生活、子育て、仕事をもっと楽しく~

暮らしも、仕事も、子育ても、遊びも全部楽しみたい!

*

ワードプレスで蛍光ペンを引いたかのような線を表示する

      2015/03/19

なぜかiPhoneでは色がつかない!PCからは見えます!
の状態から、修正しました。

スタイルシートの最初のフォントなどの指定のすぐ下の挿入しました。

青色マーカー文字css修正後
緑色マーカー文字css修正後

青色マーカー文字
赤色マーカー文字
黄色マーカー文字
緑色マーカー文字
ワードプレスで蛍光ペンを引いたかのような線を表示する
こちらのブログを参考にさせていただきました!

CSS(スタイルシート)記述

Crayon Syntax Highlighterのプラグインで挿入

/*マーカー*/
.marker_b {
background-color: #4169e1;
margin-left: 0.0em;
margin-right: 0.2em;
}
.marker_r {
background-color: #ff6347;
margin-left: 0.0em;
margin-right: 0.2em;
}
.marker_y {
background-color: #FFFF00;
margin-left: 0.0em;
margin-right: 0.2em;
}
.marker_g {
background-color: #7CFC00;
margin-left: 0.0em;
margin-right: 0.2em;
}
/*マーカー*/

そのままコピペでビジュアルに貼り付け

/*マーカー*/
.marker_b {
background-color: #4169e1;
margin-left: 0.0em;
margin-right: 0.2em;
}
.marker_r {
background-color: #ff6347;
margin-left: 0.0em;
margin-right: 0.2em;
}
.marker_y {
background-color: #FFFF00;
margin-left: 0.0em;
margin-right: 0.2em;
}
.marker_g {
background-color: #7CFC00;
margin-left: 0.0em;
margin-right: 0.2em;

}

/*マーカー*/

 

 

html記述

<span class="marker_b">青色マーカー文字</span>
<span class="marker_r">赤色マーカー文字</span>
<span class="marker_y">黄色マーカー文字</span>
<span class="marker_g">緑色マーカー文字</span>

そのままコピペでビジュアルに貼り付け
<span class=”marker_b”>青色マーカー文字</span>
<span class=”marker_r”>赤色マーカー文字</span>
<span class=”marker_y”>黄色マーカー文字</span>
<span class=”marker_g”>緑色マーカー文字</span>

 - wordpress

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

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

  関連記事

さくらサーバーにWordPressをインストール

ついにさくらサーバーにWordPressをインストールしてみました。 かなり簡単 …

stinger5でサイドバーのnewpostを消す!

stinger5でサイドバー部分のnewpostを消す! こちらのブログを参考に …

日本エレキテル連合、錦糸町に来る!

11月9日に来るそうです。 スマホから、wordpressのアプリで 初投稿! …

女性にとって自宅で脱毛するメリットは?

業界最高クラスの光パワー搭載【LAVIE】 サマーキャンペーン開催中8/31まで …

no image
アドセンスで「保留中の自動支払い」

2018年11月のアドセンスの支払いが、「保留中の自動支払い」になってしまいまし …

no image
ウーマンラッシュアワー、中川パラダイスさんにオファー!

整体のモニターのオファーをしてみました。 芸能人の方に直接オファーする機会などな …

iphone、android、mac、windows対応bluetoothキーボードレビュー

Yahoo!ショッピングで1700円位で購入しました。別途単4電池、2本必要です …

no image
Crayon Syntax Highlighter文字化け

どうやらphpのバージョンなどでエラーのなってしまうようです。 他のサイトを見て …

プラグイン「Favicon by RealFaviconGenerator」でファビコン設置

プラグイン「Favicon by RealFaviconGenerator」でフ …

stinger5にドロップダウンメニューをcssのみでつける

いろいろ探したのですが、CSSのみで変更できるので、こちらのサイトを参考にさせて …