無料版はてなブログの見出しに苦戦！ど素人の私が知りたかったこと
HTHLもCSSもよくわかっていないど素人な私が、今さらながら始めたブログ制作で最初に困ったこと・その解決策をメモります。
制作環境
- はてなブログ(無料版)
困ったこと-その1-
見出しのデザインがシンプルすぎて寂しい
標準で備わっている見出しの設定をしても、ちょっと太くなるだけで目立たなくて寂しい感じ。思ってたのと違う…
そこで「見出し」を使わずに制作を開始したのですが、いろいろ調べてみると、見出しって結構大事みたい。
よくわからないけど、SEOとかにも影響があるとか(?)
そこで解決策を探しました！
やってみた解決策-その1-
デザインCSSを書き加えてみた
詳しく説明してくださっている他サイトさんのアドバイスどおりに、CSSとやらをコピペしてみました。
ちなみにこのコピペをするだけでも私は時間がかかりました。コピペといってもどこに貼り付ければ良いかわかりませんでした。。
■コピペの場所■
【デザイン】→【カスタマイズ】→【デザインCSS】
デザインCSSの枠の中に既にコードがチョロっと書いてありました。
- もともと書いてあるコードを消すべきか
- それとも書くべき位置が決まっているのか
- 順序のルールがあるのか
またネットで調べました。調べた結果、次のように解釈しました。(ど素人の解釈ですので間違えてるかもしれません…)
正しいか、わかりませんよ！でもとりあえず、もともとのコードを残してその下に貼り付けてみたんですよ。
その結果、
ん⁈あれ⁇変わらない。やっぱり違うのか。
期待してたのに変化がない。。所詮、ど素人にブログなんて無理なんだよ…って思いながらガチャガチャいろんなとこをクリックしてたら、単純なことで解決！
表示モードを「編集見たまま」ではなく「プレビュー」にしないと反映されないのね。
プレビュー表示にしたら、とってもオシャレで見やすい見出しに様変わり！ここまでに数時間かかってたので正直、感動しました！
でもね…新たな課題を発見…
ー広告－
困ったこと-その2-
スマホ版で見たら例のシンプルな寂しいやつだった
スマホ版にはオシャレなデザインが反映されないのか…この日は諦めて寝ました。
やってみた解決策-その2-
- デザインテーマを公式テーマではなく「テーマストア」からレスポンシブ対応のデザインを選んだ
- スマホ版を「レスポンシブデザイン」にした
いろいろなサイトを調べるなかで混乱のタネだったのは、無料版と有料版(Pro)とで方法が違うことです。
有料版(Pro)はスマホ専用の設定ができるらしく、私のような悩みは無用とのこと。でも、私は今のところ有料版にするつもりはないので、無料でできる方法を探しました。
これだけの時間をかけたのに、実はとても簡単に解決する話でした。
レスポンシブ対応のデザインを選ぶ
■設定方法■
【デザイン】→【デザインテーマ】→【テーマストアでテーマを探す】
ポイントはレスポンシブ対応と書いてあるデザインを選ぶことです。
私が利用させていただいているテーマはこちらです。本当にかっこいいです!!悩みも吹っ飛びましたし、寝る時間も増えました!!ありがとうございます!!
スマホ版を「レスポンシブデザイン」にする
■設定方法■
【デザイン】→【スマートフォン】→【詳細設定】→【レスポンシブデザイン】にチェックを入れる
チェックを入れると、スマホ版でもパソコン版と同じデザインで表示されるのです！
この解決策-その2-は、次のブログを拝見して知りました。本当にありがとうございます！大変お世話になりました。こちらのブログに出会えなかったら、私はいまだに探し続けているか、既にブログをやめているでしょう。
ということで、ようやくスタートラインに立った感じがします。ただし、肝心の記事を書かないことにはブログにならないですよね。調べてばかりで記事を書くことに気が回りませんでした。
でも、この数日のあいだ悩んでいたことが解決してスッキリ！今まで未経験のことにチャレンジするのは疲れる。。でも製作中は疲れを感じないほど楽しいですね！
