WordPressでブログを書き始めたら、蛍光ペンを使いたいと思った時の対処法

WordPressでブログを書いていると、蛍光ペンで文字を目立たせたい場合があります。

HTMLやCSSの知識がある人であれば、簡単かもしれませんが、

ブログを書くことが目的であれば、1から勉強するのは時間が掛かりすぎてしまうので

大変ですよね。

なるべくそういった知識を必要としないWordPressのテーマの利用は、最大の武器になります。

このブログでは、Stork(ストーク)という有料のテーマを使って作っています。

ですが、Storkには、蛍光ペンという機能は実装されいません。

そこで今回は、Storkをベースに蛍光ペンを使えるように設定しましょう。

まず、テーマを利用するには、

「親テーマと子テーマ」をセットでインストールする必要があります。

親テーマとは、いわゆるブログのデザインのテンプレートです。

子テーマとは、カスタマイズしたデザインの設定を保管しておく倉庫の様なものです。

テーマについては、親テーマと子テーマの考え方で分かりやすく解説されています。

蛍光ペン(マーカー)の設定を行うには、まずCSSに設定を記述する必要があります。

その後にタグを任意の文字に設定をすることで蛍光ペンを使えるようになります。

専門用語がいくつか出てきましたが、必要最低限の知識があれば、大丈夫なので手順に沿って設定してみましょう。

また、タグの設定には、プラグイン機能の「AddQuiktag」を事前にインストールしておく必要があります。

基本的なインストール方法はこちらです。

ラインマーカーを設定しよう

①「外観」　→　「テーマの編集」と進みます。

②編集するテーマを選択という項目が「stork_costom」になっていればOKです。

③スタイルシートが選択されていることを確認します。

④蛍光ペンに関するコードを入力します。

⑤ファイルを更新ボタンをクリックします。

※蛍光ペンのコードについては、手順の最後にまとめてあります。

⑥プラグイン　→　インストール済プラグインをクリック

⑦「AddQuiktag」の「設定」をクリックします。

⑧「ボタン名」・「開始タグ」・「終了タグ」を設定して、一番右のチェックボックスをクリックします。

⑨変更を保存ボタンをクリックします。

⑩投稿ページで文字に蛍光ペ(ラインマーカー)のタグを選んで完了です。

⑪テキストタブを開くとコードを確認することが出来ます。

⑫プレビューボタンを押してラインマーカーがキチンと設定されたことを確認できます。

HTMLで「任意の文字」にラインマーカーの設定を反映させる

【HTMLの構文】

<b class=“yellow-line”>黄色のマーカー</b>

<b class=「CSSの名前」>「ラインマーカーを設定したい文字」</b>

CSSでラインマーカーの設定をします。

【CSSの構文】

/*黄色の蛍光ペン*/

.yellow-line {background: linear-gradient(transparent 0%, #fff001 0%);}

/*コメント*/

.CSSの名前 {background: linear-gradient(transparent ラインの太さ, カラーコード 0%);}

【設定1　ラインの太さを調整しよう】

ラインの太さ　=　0%が一番太い

0%は、蛍光ペンで塗りつぶしたものと同じです。

70%にすると、細い蛍光ペンで下線を引くのに適しています。

好みによって%の数字を変更変更して使って下さい。

【設定2　ラインの色を設定しよう】

カラーコードを設定すれば、好きな色の蛍光ペンが使えます。

今回は、市販の蛍光ペンによく使われる色を設定しています。

色の設定は、カラー配色のページが便利です。

カラーコードをコピペすると簡単に色を変更できますよ。

【設定3　CSSの名前をつけましょう】

CSSの名前の部分には分かりやすい名前をつけましょう。

今回は、色の名前＋太さの数字を名前に設定しました。

コチラも分かりやすい名前をつけておきましょう。

コピペで使える「タグとCSS」

【投稿ページのテキストタブに書くタグの対応表】

【CSSの蛍光ペン設定対応表】