おっすおっす。
misopotaです。
久しぶりのブログの更新ですね。
今月は鬱っぽい気分が2週間以上続いたり、情緒不安定になったりと大変でした。
そのため、更新が遅れてしまいました。
すみません。
さて、今回のブログのテーマは、ずばり「はてなブログのデザインを変更する方法」。
こんな風に思ったことがある人も多いでしょう。
私も、せっかくHTMLとCSSの基礎を学んだので、はてなブログでいろいろカスタマイズして覚えていきました。
今回のブログでは、簡単にできるはてなブログのデザインの変更方法をご紹介していきます。
HTMLとCSSを使って自分でデザイン変更したい方は、ぜひ参考にしてみてください。
【基本】はてなブログのHTMLとCSSのデザインの追加方法
はてなブログでのHTMLとCSSを使い、デザインを反映させる方法は次の通りです。
※ちなみに、デザイン編集やカスタマイズはPC版しか対応していないので、要注意です。
「デザイン」部分を選択する
まず、はてなブログにログインをし、ダッシュボードを開きます。
そのあとに、画面左下にある「デザイン」の部分をクリックしましょう。
「カスタマイズ」→「デザインCSS」を開く
「デザイン」アイコンをクリックすると、上のような画面が出てきます。
画面真ん中にある「カスタマイズ」アイコンをクリックしたら、「デザインCSS」が一番下に出てくるはずです。
ここに、CSSを記述します。
デザインCSSにCSSを記述する
ちなみに、上に書いてあるCSSはこのブログでもちょくちょく使うマーカーやボックス等を記述しています。
どこから書いてもOKなので、適当な場所にCSSを記述しましょう。
書き終わったら、「変更を保存する」ボタンを押して、HTML編集画面に移ります。
ブログの新規記事で「HTML編集」を選び記述
CSSを反映させるには、新規投稿→HTML編集の部分でHTMLを記述する必要があります。
ここに、h2やh3など反映させたいHTMLタグを書きましょう。
マーカーやボックスなど、複雑なデザインの場合は<div class="クラス名">テキスト</div>という風に記述をします。
※クラス名は、必ずデザインCSSで設定したものを書くようにしましょう。
今回は、簡単にできるh2タグをHTMLに設定しました。
では、実際にプレビュー画面でデザインが反映されてるか確認しましょう。
プレビュー画面で反映されている確認する
CSSがきちんと反映されているかどうかは、プレビュー画面で確認できます。
プレビューに、指定したデザインが反映されていればOKです。
もしデザインがうまく反映されない時は、次のようなことが起こっていないかチェックしてみましょう。
- スペルミスをしていないか
- クラス名が間違っていないか
- デザインCSSがきちんと保存されているか
基本的にデザインが反映されない場合、上記が原因であるケースが多いです。
ぜひチェックしてみてください。
ブログでデザイン変更したもの
このブログも、模写コーディングの勉強ついでに適当にデザインを変更しました。
今表示されているブログのデザイン（はてなブログで公開されている無料テーマ）に合わせて、それっぽい見出しやボックスデザインなど一通りのことはできました。
最初はかなり苦労しましたが、今では簡単なものであればいじれます。
ちなみに、見出しやボックス・マーカーのデザインはこちらのサイトを参考にしました。
色々なデザインが載っているだけでなく、プロパティやタグなど基礎的な部分の解説もしてくれているサイトです。
始めたての頃はお世話になりました。
まとめ
というわけで、今回ははてなブログのデザイン編集方法についてご紹介していきました。
かなり乱雑になってしまいましたが、この手順でやっていけばデザイン変更は可能です。
見出しのデザインや、おしゃれなボックスやマーカーを追加したい方はぜひ今回のブログを参考にしていただければと思います。
では、また次のブログでお会いしましょう。
