WordPress「STORK」超初心者がするカスタマイズ③マーカーの変更、表示されない!

LINEで送る
Pocket

今回は、マーカーと下線のカスタマイズをしました。
今まではSTORK公式サイトでダウンロードできるショートコードファイルに入っているものだけ使っていました。
こちらはAddQuicktagプラグインのインポート用ファイルで、ダウンロードするとわざわざ入力しなくともAddQuicktagに登録され、すぐに使えます。
非常に有り難いものですが、慣れてくると不満が出てきます。
マーカー類は、赤系のみでした。
みなさん使っているような、もっとやわらかい色に変更したかったので、またまたコピペOKの親切なブロガー様方からいただきました。

ただ、サイトによってはコピペがうまく反映されませんでした。
原因はあると思いますが、今の私には、そこをいじるより、他の方のもので満足出来るならそちらに変更しました。
どうしても使いたいものが出てくればもう少し頑張って調べようと思います。

なので、不相性なのか、ただ私の操作が間違っているのか、うまくいかないものもあるかも。ってことです。

自分がカスタマイズしておきた問題点について書いております。
カスタマイズ方法については簡単に記述しているのみになります。

マーカーの変更

CSSとHTMLコードの記述

マーカーはやわらかい印象の基本的な3色を取り入れました。
これは見出しをカスタマイズするのと同じくらい早く変えたかったです。

何種類かコピペ方法を見ましたが、色、太さがこれくらいがちょうど良いです。
と言っても後からもっと変更出来ますが。
あと、上記にも書いたようにうまくいかないものもありましたが、こちらはスムーズに出来ました。

黄色マーカーのコード
/* マーカー強調カスタマイズ黄色 */
.marker1 {
background: linear-gradient(transparent 30%, #ffffbc 30%);
}

ピンク色マーカーのコード
/* マーカー強調カスタマイズ桃色 */
.marker2 {
background: linear-gradient(transparent 30%, #ffdfef 30%);
}

水色マーカーのコード
/* マーカー強調カスタマイズ空色 */
.marker3 {
background: linear-gradient(transparent 30%, #cce5ff 30%);
}

CSSコードを貼り付けて保存します。

・「transparent 30%」はマーカーの幅(高さ)
・「#ffffbc」はカラーコード(色)
・最後の「30%」はグラデーションの幅

次に、HTMLの記述です。
多用するものは「AddQuicktag」というプラグインを使用します。
AddQuicktagの設定画面を開いたら、以下の通り入力します。

蛍光イエロー:<span class="marker1"></span>
蛍光ピンク :<span class="marker2"></span>
蛍光ブルー :<span class="marker3"></span>

入力が終われば「変更を保存」をクリックします。

後は、記事を書く際に、テキストエディタの場合はマーカーを付けたいところに希望のマーカーのボタンを選べば、HTMLが表示されます。

これは問題なく出来ました。

下線の変更

なぜか反映されない

これもマーカーですが、いわゆる下線というものです。
今考えると、上記のマーカーの設定を変えれば簡単だったのかも。
でも同じ内容で、違う設定は無理そう。
CSSコードに対応するHTMLが必要なのでは。。

そこで今回は違うサイトからお借りしました。

黄色マーカーのCSSコード
/* マーカー線・黄色 */
.marker7{
background:linear-gradient(transparent 75%, #fff799 75%);
font-weight:bold;
}

水色マーカーのCSSコード
/* マーカー線・青 */
.marker4{
background: linear-gradient(transparent 75%, #c1e0ff 75%);
font-weight: bold;
}

赤色マーカーのCSSコード
/* マーカー線・赤 */
.marker1{
background:linear-gradient(transparent 75%, #ffadad 75%);
font-weight:bold;
}

HTMLは

黄色  <span class="marker7"></span>
水色  <span class="marker4"></span>
赤色  <span class="marker1"></span>

と、ここまで来て投稿画面で確認すると。。。
黄色マーカーが、赤色下線用マーカーの表示になっていました。
なぜか、黄色マーカーも赤色下線用マーカーどちらもmarker1だから、赤色の方に反映されてしまった?

原因追及か、コードの再記述か

赤色コードを消してみました。
それでも反映されず、今度は黄色マーカーのCSSコードを消してみました。
変わらず、赤色下線が残っており。。
一度保存して開き直したりしましたが、変化はありませんでした。

marker1が原因だとしたら違うコードにしようと、ピンク色のコードを記述しました。
そうすると、ピンク色も黄色マーカーも表示されず。

というか、よく見たら、赤色が、私の指定している色なのかな?
もしかしたら、大元の、ショートコードの赤色下線が原因か、と思い、HTMLのショートコードを消してみました。
ショートコードを消した所で、何も変わらないと思うのですが。。
今まで頑なに変わってくれなかったマーカーの色がすんなり全て指定通りになりました。

一からやり直しが最短手段だった

???
色々やり過ぎて、どこが原因だったか分らなくなってしまいましたが。
とりあえず、全部CSSコードもHTMLコードも消して、一からやり直しました。
marker1が被っているのは良くないような気がするので、そこは、marker13のピンクに変更しました。

結局使ったのはこちら
黄色マーカーのCSSコード
/* マーカー線・黄色 */
.marker7{
background:linear-gradient(transparent 75%, #fff799 75%);
font-weight:bold;
}

水色マーカーのCSSコード
/* マーカー線・青 */
.marker4{
background: linear-gradient(transparent 75%, #c1e0ff 75%);
font-weight: bold;
}

ピンク色マーカーのCSSコード
/* マーカー線・ピンク */
.marker13{
background:linear-gradient(transparent 75%, #ffc1e0 75%);
font-weight:bold;
}

HTMLは

黄色  <span class="marker7"></span>
水色  <span class="marker4"></span>
ピンク <span class="marker13"></span>

で、きれいに反映されました。
この後、元から入っていた、赤色下線のHTMLコードを戻してみました
が、特に何も変更されませんでした。

ということで、
・まず、コードのclass名が被っていないか
・変更した記述は反映されているか

今回の場合は反映されていない、というより更新されていない?

もし本当に反映されていない場合は、
・他のスタイル指定より優先順位が低い
・文法ミスがある
・キャッシュが残っている

などそれぞれ確認方法があります。

色々細々触ったので、とりあえず一度白紙に戻したのがよかったかな。
原因解明には至らずすみません。。表示できるようになっただけで一安心。

なぞの黄色ボックスも

今回のカスタマイズまで、ダウンロードしたショートコードの黄色ボックスが反映されていませんでした。
入力されていたコードは

[box class="yellow_box" title="ラベル名"](テキスト)[/box] これを
[box class="yellow_box" title="ラベル名"](テキスト)[/box]

と、変更すると表示出来るようになりました。
半角1マス分スペースが余分にあるため、表示されていません。
間違えてなにか触ったかな?でもダウンロードした時点でコードはAddQuicktagに登録されており、テキストエディタにも表示されていました。
なので、もし同じように表示できない方がいたら確認してみてください。
AddQuicktagの入力画面で確認出来ます。

まとめ

初心者すぎて、意味不明なことでつまづきます。
こんなことで困っている人はいなさそうですが、もしマーカーをうまく変更出来ない人がいたら一度白紙に戻して一から確認してみてください。

LINEで送る
Pocket

コメントを残す

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