ブログカスタマイズ

文字マーカーのつけ方!色や太さも変更可能!WordPressでHTMLとCSSの編集

投稿日:2018年2月9日 更新日: 投稿者:

蛍光ペンみたいな可愛い文字マーカーをつけてみたい!

こんなのとか。

こんなのとか。

WordPressで自分好みの色や太さの蛍光ペン風マーカーがつけられます☆

わたしも最初はCSSとか訳が分からなかったし、色々間違えたり手こずりましたが、出来るだけ分かりやすく手順をまとめたいと思います。

ちゃんとやったのに反映されないんだけど!!ってなった時の対処法もご紹介します。

前準備編~よく使うタグはボタンにしとこう~

タグ・・・、文章に例えば「文字を太くする」だとか、「文字色を赤にする」だとか、今回の「文字マーカーをつける」というのも、全部ボタンで一瞬で書きこめるようにしときましょう!

ボタンってのは、コレのこと。

文字マーカー 蛍光ペン ボタン

超楽ですよね。
このボタンは「AddQuicktag」というプラグインをWordPressに入れると自分で好きなのを作れますので、ぜひ入れてみて下さい!

プラグインを入れない場合のやり方も一応書いておきますが、入れた方が断然便利ですのでおすすめです。

蛍光ペン風文字マーカーのつけ方

蛍光ペン風の文字マーカーを使うためにやることは2つ。

・HTMLの設定
・CSSの設定

です!順にやっていきましょう。

WordPressのHTML(タグボタン)の設定方法

AddQuickタグの設定から、

文字マーカー 蛍光ペン

自分がボタンを作っときたいタグの追加をしましょう。

タグはこれをコピペしてお使い下さい。

<span class="pink-line"></span>

下の図のように開始タグと終了タグを分けると、マーカーをひきたい所の文字を選択してボタンを推すと自動で囲ってくれるので楽です。

文字マーカー 蛍光ペン

「ピンクマーカー」というのは、ボタンになったとき自分が分かりやすい名前でいいです。
タグの「pink-line」というのも自分が分かればよくて、好きな名前でどうぞ!

ボタンを表示させたい場所(わたしの場合はビジュアルエディターとpost)にチェックを入れて、これで「変更を保存」すればHTML側の準備はOK~。

WordPressのCSS(スタイルシート)の設定方法

WordPressの外観→テーマの編集に行ってもらうと、CSSが書けるスタイルシートがあると思います。

文字マーカー 蛍光ペン

※クリックで拡大します。

わたしの書いてるブログはSTINGER8というテーマを使わせてもらってるので、このような画面。

貼るコードは下に用意しましたので、コピペしてお使い下さい。

.pink-line {
  background:linear-gradient(transparent 50%, #F8E0EC 0%) ;
}

「pink-line」の部分(クラス名といいます)は、さっきHTMLの設定でつけた名前と一言一句おんなじ名前にして下さいね。でないと対応しません!

CSSのスタイルシートは見つけたけど、どこにこのコードを貼ればいいの?
っていう疑問の答えは、「基本一番下に追加していけば良い」です。

CSSスタイルシートは下に貼ったコードがどんどん上のコードを上書きしていく方式ですので、反映したいものは下に書いておけば基本大丈夫。

1行に書けそうなものを3行に分けてる意味は、くっつけすぎると上手く読み込んでくれないからです^^;

文字マーカーの色や太さを変える方法は?

色については、HTMLのカラーコードを参照していただければと思います。
参考サイト:HTMLカラーコード

.pink-line {
  background:linear-gradient(transparent 50%, #F8E0EC 0%) ;
}

CSSの設定で、#~~というコードを好きな色のコードに変えてください!

文字マーカーの太さについては、50%という数字がマーカーの太さになってます。
0%(太い)~100%(細い)になってますので、より表現の幅が広がりますね^^

HTMLもCSSも設定したのに、文字マーカーが反映されない!?

ちゃんとWordPressでHTMLもCSSも設定したのに文字マーカーが反映されなくて困った時は、陥ってしまいがちな(わたしも陥った)ワナ・・・じゃなくて、間違いを見てみましょう。

記入間違いはない?

さっき言ったCSSを1行に詰め込んじゃうのもそうですが、他にも記入ミスはないでしょうか??

わたしの場合、「コピペするだけでOK♪」と書いてあるとこからコードをコピペしてきたら、なぜか一部分だけ全角表記になっていました・・・。あれは何だったんでしょう。

古いキャッシュが残ってるんじゃない?

これ、ひっかかりました。

わたしはブラウザはGoogle Chromeを使っていますが、そのキャッシュを削除しないと新しく設定した文字マーカーが反映されなかったんですよ。

Google Chromeの場合は履歴画面を表示(Ctrl+H)→閲覧履歴データを消去する→キャッシュされた画僧とファイルの消去からどうぞ!

どんなもんかなーって様子を見たいのに、いちいちキャッシュを消すのもめんどうですよねー・・。
色々追加する時は、キャッシュを保存しない設定にしてもいいかもって思い始めてきました。

慣れるまでは難しいと思いますが、やりたいなって思ったことを1つ1つクリアしていければOKです。
頑張ってゆっくりやっていきましょう(^^)/

-ブログカスタマイズ
-


comment

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

CAPTCHA


関連記事

固定ページ livedoorブログ

livedoorブログで固定ページ的なものを作ってメニューバーに貼る方法

livedoorブログを作り始めたのですが、色々設定してみて「固定ページはどうやって作るの?」というところで少しとまどいました。 固定ページというのは、WordPressのブログでなら普通に使える機能 …

お問い合わせフォーム WordPress

お問い合わせフォームをWordPressのブログに設置!プラグインContact Form 7が便利

自分のブログに、「お問い合わせフォーム」って…つけた方がいいですよね? 自分のブログから連絡を取りたい!と思ってくれた方にとっても、連絡を受け取る側にとっても、分かりやすくスムーズに管理できるのがお問 …

文字数を数える方法についての解説記事のアイキャッチ画像

Sublime Text 3でHTMLタグを除外して文字数を数える方法

皆さんはブログの記事を書く際、どのテキストエディタを使っていますか? WordPressを使っているブロガーなら、WordPressのエディタを使っている方が多いのでしょうか。 HTMLやCSSを本格 …

STINGER8 新着記事 非表示

STINGER8のトップページで新着記事を非表示にする方法!易しい条件分岐

ブログをやってると、ここをもっとこうしたい~とか自分好みにカスタマイズしたくなってきますよね! でもそれって難しそう…? 今回は、まずブログカスタマイズの中でも簡単な部分から変えてみることにしましょう …

ブログ(WordPress)を複数人で管理する方法は?権限の違いも画像で解説

このブログ「DigiLocus」は今は2人、そのうち3人?の複数人で運営してますので、WordPressもそれぞれ使えるようにしてます。 WordPressを複数人で使えるようにすること自体は簡単です …