赤兎馬おじさんの足跡~経験値のお裾分け~

赤兎馬おじさんの足跡 ~経験値のお裾分け~

オヤジの嗜み・愉しみ・ぬか喜びを日々発信していく、ややゆるいブログ。     今日も「おやじライフ」を満喫中。

【失敗談】無料はてなブログでCSSが反映されなくなった原因と解決した方法

「無料版はてなブログCSS編集しても反映されなくなった失敗談と、その問題を

原因究明し、解決した方法」をご紹介します。

 

当ブログにお立ち寄り頂きまして、ありがとうございます!m(_ _)m

こう見えて実は、「CSSだって? 『C=こんなの S=それがしには S=サッパリでござる』

の略だろう?」って、半ギレしかかったほどアナログ派な赤兎馬おじさんです。

 

え?違うんですか?(; ・`д・´)

 

CSSを弄ったらこのブログも見易くなって、わかり易くなって、カッコよくなって、

要するにイケてるブログの仲間入りができるんじゃないか?って企んでいた次第でして

ロクな知識も持たず、見よう見まねで無謀に果敢に挑戦したんですね。

 

ネットで拾ったコードをコピペするだけですが。(´・ω・)

 

パクれるものはパクるのが赤兎馬スタイルでして、まあいろいろ試していたんですが、 

ある時、反映されるものと反映されないものがあることに気付いたんですね。 

 

今回は、そんな問題と私にもできた解決方法をご紹介します。

 

 

f:id:sekitoba1007:20200504161746j:plain


 

 

目次

 

そもそもCSSとは?

 

大事な事なのでちゃんと調べてみましょう。

 

はい、ググったら出てきましたね。

 

Cascading Style Sheets、カスケーティング・スタイル・シート」と言うそうでし

て、ウェブページのスタイルを指定するための言語の事だそうです。

 

つまり、ウェブページをどのようなスタイルで表示・出力・再生するか、色・サイズ・

レイアウトなどを指定することなんですね。

 

 

どんな失敗・不具合だったか?

 

f:id:sekitoba1007:20200504161059j:plain

 

 

私のブログのCSSには複数の要素を取り込んでおり、メニューバーのデザイン設定から

はじまり、ブログトップページへリンクするボタン(記事の最下部に設置)を押したとき

の表示デザインなんかも取り込んでいたんですが、前者はちゃんと表示されていたのに

それ以外は全部機能していない状態になりました。(;^_^A

 

その他にも、記事内の写真を左端でなく中央に表示させるコードや、箇条書きにした箇

所を枠線で囲むといったコードも取り込んでいましたが、どれも機能せず。

 

無料版だから反映されないだけ?(´・ω・)

メニューバーは先頭のコードだから、最初の1個だけしか読まない?

 

という程度でしか思っていませんでしたが、なんとも府に堕ちませんでしたから私、

Twitterでこのことを呟いてみたんですな。

 

調べてわからんことは、Twitterでツイートしてみるもんです。(^^♪

 

迷える子羊に救いの手を差し伸べてくれる心優しい方っていらっしゃるもんです! 

 

CSSが反映されない症状

 

f:id:sekitoba1007:20200504152132j:plain

CSSが反映されない状態の画面

この、赤枠で囲ったっ部分が該当の箇所なんですがね、いくつかのサンプルをもとに

貼り換えてみたんですがどれも反映されず。

 

 

CSSが反映されなかった原因

 

諦めかけていたんですが、よく考えると私、コードを張り付ける時に必ずあることを

していたんです。

 

いつしかどこかで覚えた技、その名もコメントアウトの術」でございます。

 

コードって、英数字ばっかりのプログラムで素人にはわからないじゃないですか?

私、こう見えて実は工業高校時代にBASICやC言語を学んだはずなんですがね、CSSての

はそれと違うだろうし、百歩譲って一緒だとしたってわかりゃしません。(; ・`д・´)

 

なので、どこかから拾ってきたコードをCSSやらHTMLやらに貼り付ける時は、それが

何のためのコードなのか後でわかるように、コードの前後にコメントアウトという

コードに影響がでない覚え書きを追記していたんですね。

 

<!-- コメントアウト -->

 

これです。

上記の「コメントアウト」って文字のところを編集して、メモしてるんですね。

 

上の画面写真のコードも、よ~く見るとわかるんですが書いてあります。

 

 

実はこれが原因でした。(笑)

 

 

お手本のコードって、どれを見てもコメントアウトなんて書いてないことに気付き、

試しにこのコメントアウトの行を思い切って削除してみたんです。

 

そしたら、ちゃんと表示されました!(; ・`д・´)

 

ただ、これだけ。(笑)

 

 

CSSが反映されない問題を解決した後 

 

 

f:id:sekitoba1007:20200504153734j:plain

 

はい!箇条書きの範囲が枠線で囲まれて表示されました~(・∀・)イイネ!!

 

凄い凄い!

自分のブログじゃないみたいで、バエます♪(死語?死語自体が既に死語?)

 

ただし、目次の部分にも同時に適用されるようで、この上下に枠線を追加するタイプ

ですと、変なところに線が入ってしまい、上手くありません。

 

そこで、いろいろ試してみたらありましたよ!

私のブログデザインにも綺麗に表示される適切なコードが!

 

 

f:id:sekitoba1007:20200504155000j:plain

 

水色のストライプのタイプで、これで目次箇条書き自動的にハイライトしてくれ

ますから、自分で編集やHTMLのコード追記などしなくても反映されます。

 

f:id:sekitoba1007:20200504155018j:plain

 

良いですねぇ!

まずは、イケてるブログへ一歩近づいたはずです。(・∀・)イイネ!!

 

こうなると、黄色蛍光ペンの下線は要らなくも感じますが、文中の太文字に自動で下線

を追加してくれるように仕組んであるので、これはまた後日検討していくことにしま

しょうね。(笑)

 

今回、私が採用したのは下記のコードです。


/*ストライプの背景の枠*/
.entry-content ul{
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
padding: 10px 30px;
}
  

 

最上段にありますが、この「/*ストライプの背景の枠*/」 というのが、コメントアウト

の様にコードとして認識させない覚え書き用の部分なんですね!

 

 

まとめ

 

f:id:sekitoba1007:20200504161856j:plain

 

今回は、ほんのちょっとしたミスが原因で上手くできなかった不具合を修正・改善でき

ましたが、プログラムの世界ではこのように僅かな先入観が起因していることって多々

あるかと思います。

 

ほんのちょっとでも入力を間違えていたら、機能しませんからね。(;^_^A

 

解決してしまえば、「なんだ、これだけのことか」と簡単に片づけがちですが、私と

同じように困っている方がいたらヒントになるかと思い、発信します。

 

はい、結構良い人なんです、私。

 

 

今回の教訓

 

  • <!-- コメントアウト -->はCSSに使っちゃダメダメ!
  • どうしても解決できない悩みは、Twitterで発信するとワンチャンあるかも!

 

 

ただ、ブログデザインによっては上手く機能するものとしないものがあるようですから

自分で試してみるとわかると思います。

 

ただし、自己責任ですから慎重にやるべきですね。(^^)/

 

こうやって少しずつ躓いては起き上がり、遊び感覚で覚えていくことが成長に繋がり

ますからね、自分にはこういう実践型の経験値が最も吸収しやすいので、今後も挑戦

していこうと思います。

 

イケてるブログ、目指してます!(゚Д゚)ノ

 

 

あわせて読みたい!関連記事のご紹介 

 

今回私がCSSを弄ってハマって困っていたとき、そっとアドバイスを送って下さった

しょこちゅん (id:shokochun)さんに感謝の意を込めてご紹介させて頂きます。

 

こちらの花太郎BLOGでは、はや太郎さんとしょこちゅんさんのご夫婦で運営されて

らして、不動産管理のお話やグルメ関連記事なども発信されています。

 

私個人的にはブログの見易さにも注目しています。

 

自分のブログも読みやすくしたい!綺麗にしたい!というあなた、ヒントを見つける

なら花太郎BLOGを覗いてみると話が早くて宜しいかと(・∀・)イイネ!!

www.hanataroublog.com

 

動画編集もなさっていて、YOUTUBEにもアップされています。

www.hanataroublog.com

 

はやたろうさん、この度はありがとうございました!m(__)m

 

 

 

 

 

 

 

最後までお読みいただき、ありがとうございました。