やっと！ブログ記事内を華やかにすることができました！【初心者がぶつかる壁、CSSとHTML】

また変なタイトルつけやがって。
と思ったでしょ？(笑)

タイトル何にしよ〜っと思い悩むこと数分(短っ)
そのまま書こ〜！ってことになりました！

ひねって難しいことを書くより、そのまま書くほうが伝わりやすいってこともきっとあると信じて🙏

みなさんこんにちは。現役看護師ブロガーのれいです。
お気づきでしょうか？私のブログ、少し前からHTMLを取り入れてすこーしだけ見やすくなった(気がする)と思います！

6/18にブログを開設してからここまでくるの長かった〜！
それもこれも私が機械音痴の超初心者だからです😥

ブロガーさんたちのブログは、ラインが引いてあったり枠で囲んであったり、とにかく見やすい！
真似したかった私はそもそも【CSSと HTML】という機能すら知らなかった！

そうです！ラインを引いたり枠で囲ったりするには【CSSと HTML】をどうにかしないといけないんです！

今日はそんな私の経験から、超初心者がぶつかる壁と疑問に答えながら、ブログを華やかにするHTMLの盛り込み方をお伝えします！！

既に楽々こなしているプロブロガーさん達には初級すぎて涙が出るほどおかしいと思いますが、どうか温かい目で見守ってください(笑)

HTMLとCSSってなに？

わかりません！！！

詐欺だ！ヘッダーに理解したって書いてるくせに！これは詐欺だ！

違いますよ！語弊がありますが、全くわからないわけじゃないんです！

CSS→デザインCSSにはりつける
HTML→ブログ内にはりつける

てことはわかりました！

理屈はわかりません！

声を大にしていいます。

理屈は全くわかりません！

自信持って言うことじゃない、、、

でもわからなくてもいいんです！
だって私はわからないけれど、こうやってブログに取り入れることができてるから！

HTMLとCSSの理屈は時間がある時に勉強しよう！

と思ってます(笑)
このブログを読んでくださっている、超初心者さんたちもそのぐらいの気持ちでいいと思います。

幸いにもHTMLとCSSについて書かれた記事は沢山あります。私も最初は理屈を理解しようと思い勉強してみたものの、、、

頭が痛くなる\( ˆoˆ )/眠気に襲われる\( ˆoˆ )/

という副作用が出たためやめました。

時間の無駄だったね😂

結局どうしたらいいの、HTMLとCSS

「前置きなげーよ」「カスタマイズ方法はよ」なんて声が聞こえてきそうなので、本題に。

まず自分の編集モードを確認してください。

超初心者のみなさんは「みたままモード」が多いと思います。
とりあえずそれ、変更してください。
「はてな記法モード」か「Markdownモード 」にできると思います。超初心者は「はてな記法モード」をオススメします。なぜなら扱いやすいから！

その次にカスタマイズしたいものを探します。

私のCSSは全てさるわかさんです⬇️
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

わかりやすく見出しを例にいくと、

h1 {
/*線の種類（実線） 太さ 色*/
border-bottom: solid 3px black;
}

これをデザインCSSにコピペしてください。
必ず追加したら変更を保存ボタンも忘れずに！

そしてHTMLの出番です。

< h1>見出しの内容< /h1>(わざと空白入れてます、コピペする時は消す)

これを本文中にコピペしてください。

はい！しゅーりょー！
これだけです！

⚠️スマホで書くときに上の方に出るスライドできるやつ(説明下手ですいません)#見出しを一回押すと「*」がでてくるので、これに続けて書いてもOKです🙆‍♀️二回押すと「**」となり中見出しを意味します。

はてなブログの落とし穴

「ちゃんと言われた通りにしたけど反映されてない〜！！」て人、ちらほらいると思います。

本当に素直に私のやり方を実践してくださった人だと思います🙏

なんで反映されなかったかって？？？

はてなブログの見出しはh3から始まるから！！

超初心者さんは意味がわかりませんよね(笑)
わからなくて大丈夫です！説明します！

ブログの中で見出しはh○という記号で表されます。
見出しは、大見出し・中見出し・小見出しとあり本来ならば、大見出し(h1)・中見出し(h2)・小見出し(h3)となります。

はてなブログはちがいます！！

大見出し(h3)・中見出し(h4)・小見出し(h5)と表記されます。

え。じゃあ(h1)・(h2)はどこいったの？

実はh1はトップ画面のブログダイトル、h2はブログタイトル下のサブタイトルに反映されるようになっています。

これがはてなブログの落とし穴です。
私は見事に落ちました(笑)

これさえわかれば後は簡単！
先程コピペしたCSSとHTMLのh1の表記のところをh3に変えましょう！

どうでしょうか、反映されたとおもいます。

これができたあなたは、中見出し(h4)・小見出し(h5)も簡単に変更できます。
先程と同じく、好きな見出しを選びCSS・HTMLをコピペしたら、h1の表記をh4またはh5に変更するだけです！

見出しでつまずく初心者

初心者が見出しでつまづくのはこれだけじゃないですよね！

反映されたけどなんか変

あるあるです。

ブログデザイン自体をカスタマイズしていると元の見出しデザインが優先され、ごっちゃごちゃになってしまいます。
そんなときは、既存見出しの無効化！

そもそも反映されない

そうそう、そんなこともあります。
そんなときは、キャッシュの無効化！

やっぱり反映されない

そんなときは、CSSを入れ直す！

なんどもキャッシュを無効化にしたし、既存見出しの無効化もした。だけど全然反映されませんでした。

イライラした私はCSSを全削除！！
一からやり直した！！
なぜか反映された！！！

おおよそ、CSSが間違っていたのでしょうね(笑)

初心者がぶつかる壁は本当に多い

ちなみにわたしは配色やら形やら考えるの疲れて、今はブログデザインの見出しをそのまま使ってます！

こんなに熱弁してたのにw

初心者はアンダーラインでも、、、

はい、つまずきます！w

アンダーラインもさるわかさんのを使っています⬇️
【CSS】文字に色々なデザインの下線を引く（点線・波線・二重線・蛍光ペン風など）

敗因は、そのまんまコピペしたこと！

え？なんで？コピペするだけって書いてあるじゃん。
そうです。これが超初心者の考え方です。

たとえばこのCSSだと

.under {
background: linear-gradient(transparent 50%, #a8eaff 50%);
}

HTMLは

< span class="under">○○< /span>

これで大丈夫です。そう、1色なら初心者でもできる！

さらにもう1色追加したい！てとき初心者はそのままコピーします！！

はい、アウトー。

もう一色追加したいときは
CSSのunderをunder1に変更しましょう。(数字はなんでもいいです、むしろアルファベットでもいいです)

そしてHTMLのunderも同じくunder1に変更しましょう。

これであなたのブログは2色のアンダーバーを使えます！

【番外編】吹き出しで会話風に

絶対難しいから、もっと使いこなしてからにしよ！と思っていたのですが、見出しやアンダーバーを使いこなせるようになってから欲がでました👈

参考にしたのはこちらの記事⬇️
https://www.ruiblog.work/entry/2019/06/17/193513

なぜかこれはうまくいった(笑)1時間ぐらいかかったけど(笑)

画像のURLとか諸々めんどくさかったけど、これは仕方ない！楽する方法はない！やるしかない！

最後に一言。

< h3>○○< /h3>☞太字

引用+太字+大サイズ☞見出し

超初心者のわたしはブログの書き方すらままならずこうしてました(笑)お恥ずかしい(笑)

CSS、HTML云々の前に、ちゃんとそれぞれの用途によってあった使い方をしましょうw

見出しに関しては本当にバカの思考回路で、引用を使うとプレビュー上では左ラインが出ます。これは見出しっぽいと思ったわたしはインパクトをつけるために太字にしました。それでもまだ足りないとおもい大サイズにしましたw

つまりこんな見出し

もうわけがわかりません😂😂

本当にあった怖い話w

この他にも初心者がぶつかる壁はたくさんあります！

初心者がぶつかる壁は無限大！
だけど、
初心者の可能性も無限大！！
と言い聞かせて自分を奮い立たせてます👈

以上！【CSSと HTML】初心者がぶつかる壁と疑問でした！！

最後まで読んでいただきありがとうございました！