どうも！ムコパパです。
さて今日は、文章の蛍光ペン表示に尋常じゃないくらいハマった、こわ～くてとっても恥ずかしいお話をしようと思います。
蛍光ペン表示、挑戦したけどできない！
なんて人がいたらぜひとものぞいっていって下さい。超・超・超レアケースですが、ヒントになるかもしれませんよ。
増えるアクセス、変わらないデザイン
本ブログ、「溺れる魚の絵空note.」も20記事を超え、アクセス数も順調に伸びております。
先日、ついに初の300PV/日を突破しました！
心より感謝、本当にありがとうございますm(__)m
毎日(自分の中では)沢山の人達に見に来てもらっているのに、デザインや記事の見やすさにはまだ力を入れておらず・・・。 来てくださる人に申し訳ないと思い、重い腰を上げてようやくCSSなんかにも手を出し始める溺れる魚です。
なーに、PCなんて小学校から触ってるし、学生時代にも一通りプログラミングやらなんやらは学んできたつもりや。デザインなんてチョイチョイのチョイやろ！(何故か大阪弁)
と、ナメてかかったのもつかの間。
30分後には・・・
ハマってました(ドーン)
1つ解決しないと気になってなかなか先に進めない性格の溺れる魚、結局これを解決するのに3日かかりました。
こんなにハマったなら記事にしてしまえぃ！同じ悩みを持っている人がいるかもしれない！と思いたち、キーボードを叩き始めました。どうぞ最後までお付き合いください。
CSSを使った蛍光ペン表示がどうしてもできない！
やりたかったのは、見やすいサイトがみんな使っている「蛍光ペン表示」というやつ。
こういうやつです。←苦心の末出来るようになった。
サンプルのCSSとHTMLは以下のように記載されていました。敢えてそのまま載せますが、決してそのまま使わないでくださいね。
【html】<strong class=”pink_line”>テキスト</strong>
【CSS】.pink_line {background:linear-gradient(transparent 60%, #ffdfef 0%) ;}
【CSS】の方を ダッシュボードの デザイン > カスタマイズ > デザインCSS に貼り付けて・・・
【HTML】 の方を記事の中にコピペで埋め込めばいいだけ。
簡単！のはずが・・・できない・・・
察しの良い方はすでに気づいているかもしれませんが、どうか最後までお付き合いください。ここで気づけた方はIQ120以上であることを認定します(溺れる魚の独断と偏見です)。
これから私が試したことを逐一全てご説明いたします。笑ってやって下されば少し浮かばれます。
解決に向けて試したこと
ありがたいことにとても丁寧に解決法をまとめてくれている方がおりました。こういう人を巷では神と呼ぶのでしょう。
6つも解決策があるなら必ずどこかでヒットするだろうと思い、このサイトに書いてある順に沿って試していくことにしました。
1.コード入力の確認
先ず確認したのがコード入力の誤り 。
タグ・クラス・スペースなど丁寧に見ていきますが、特におかしなところは見つからず問題なし。
次へ進みます。
2.半角でコーディングされていることを確認
次に確認したのが全角半角のチェック です。
コピペして使用しているので、意外なところに全角スペースなどが入っているかもしれない。
入念に確認するも、問題なし。
3.記述する場所の変更
CSSの記述をファイルの最後に追加するのではなく、初めに持ってきてみました が、これもダメ…。問題なし。
確認事項もあっという間に半分を超えてしまいました。残り半分で、原因が見つかるのかどうか…不安がよぎります。
4.キャッシュを消しても、プラグインを無効にしてもだめ
ブラウザのキャッシュが残っているために、変更が反映されていない可能性がある、というのを信じてキャッシュを消してみるもやはりダメ。
プラグインを無効にしてみましたがこれも意味なし。
5.サーバーはいじることができないので無関係
サーバーやwordpressを使っているなら以下のような方法でも解決策を探ることが出来るようです。
エックスサーバーの設定の中に「mod_pagespeed 」というものがあります。
この機能はサイトの高速表示をサポートするありがたいもの。
ページ表示に時間がかかると離脱者が増えてしまうため嬉しい機能ですね。
出典 : CSSの変更が反映されない時の6つの対処法、教えます！ | ムクッといこう
ご存知の通りここははてな帝国。サーバーなんていじりようがありません。
見事全滅・・・どうしたら・・・
さて、問題解決の糸口も見えないまま6つの解決策を終え、途方に暮れてしまいました。 溺れる魚はこれからどうするのでしょう。
問題解決の糸口を見つけるため、溺れる魚はCSS・HTMLコードの深部へとどんどん潜っていきます。
CSSの linear-gradient()表記に対応していないブラウザがある？
色々と調査を続けていると、蛍光ペンの表示に用いる"linear-gradient()"という関数はCSS3で登場した割と新しい機能 とのこと。
そのため、古いブラウザだと対応していなかったり、特別な処理を行わないとうまくスタイルが反映されないことがあるらしい。
まさかこれが原因！？
溺れる魚に指した僅かな光。
この光の先、ブラウザのバージョンを調べてみると・・・
しっかりと対応してました。
ためしにベンダープレフィックスを付けてみる
linear-gradient()関数は対応していても、 各種ブラウザ(mozilla系(Firefox等)、webkit系(Chrome等))ごとに対応したベンダープレフィックスというオプションを以下のように指定しないといけないらしいです。
background: -moz-linear-gradient();
background: -webkit-linear-gradient();
background: linear-gradient();
段々と手が込んできたな…と思いながら付けて見るも、やはり表示されず。
この辺から溺れる魚の頭には湯気が上がってきます。
さぁ困った…誰か助けて…
Phrase Expressが良くない？
手入力が面倒くさいのでPhraseExpressなるものを使っています。簡単に言うと複数行に渡る辞書登録ツールのようなものです。
例えば、
m_yellow;
と入力すると
<span class="yellow_line"></span>
と自動的に変換してくれる超便利ツールなのだ。
(何をどう変換するかは自分で設定ができる)
溺れる魚はこのツールで変換が行われる際に変なゴミが入っているのではないか と疑いました。
試しに手入力してみると・・・
できた
！？！？！？
なんで！？！？！？
もう一度試してみると・・・
やっぱりできた
設定しているものと手書きを比べてみる・・・
■Phraseexpress に登録されていた文字列
【html】<strong class=”pink_line”>テキスト</strong>
■手書きで入力した文字列
【html】<strong class="pink_line">テキスト</strong>
・・・おわかりいただけただろうか？
・・・せっかくなので画像でもご確認いただこう
■Phraseexpress に登録されていた文字列
■手書きで入力した文字列
"
と
”
「"」となるはずが見事に「”」なのでした。
こんなの気づきます！？
全世界から
「気づいてないのはあなただけよ♡」
という声が聞こえてきそうですが、本当に気づきませんでした。
散々悩んだ挙げ句、原因は、散々調べた(はずの)「全角入力」だったのでした。
サンプルとして使わせていただいていたソースを確認しに行くと、やはり全角表示になっていました。
うーんこれは罠。全然コピペでOK じゃないやん！
これ以上被害者を増やしてはいけないと思い、管理人さんにはしっかりと誤りを丁寧に指摘しておきました。
今回の失敗からの教訓：すべての可能性を疑え
今回は溺れる魚のお恥ずかしい失敗談にお付き合いいただきました。ここまで目を通してくださった方、ありがとうございます。
まさかコピペ元のサイトに罠が仕掛けられているとは思わず・・・
あらゆることを疑う大切さを学ぶことができました。
そして、今回の経験を機に
メガネを買おうと思います！
という雑な締めで今回はおしまいにしたいと思います。
皆さんもCSS・HTMLの記述には、全角・半角にくれぐれも気をつけて！
ではでは