【無料版】はてなブログのデザインをCSSとHTMLを利用して変えました
今回はタイトルにあること＋αで色々やりました。
↓参考にさせていただいたサイト↓
(ブログデザインの参考。今回こちらをメインで話をしてます)
(HTMLについて一部参考にさせて頂きました)
↑とても助かりました。ありがとうございましたm(_ _)m↑
１、この記事は○分で読めます。の追加
これはすごく簡単にできました。参考にさせて頂いたブログ通りにやりました。ちゃんと記事始めの右上に出てるかと思います。
はてなブログで読了時間(この記事は何分で読めます)を表示する方法 - Random Life Blog
２、メニューバーの追加
これには結構手を焼きました。
そもそもCSSやHTMLをよく理解してないのにやり始めたのはダメでしたな(笑)
やるにしても全部コピペして良いよっていうのをありがたく使うべきだった……。
CSSとHTMLには参考にさせて頂いたブログ
はてなブログにグローバルメニュー(カテゴリーリンク)を設置する方法 - Random Life Blog
に紹介があった下記のサイトを利用しました。
プレビュー付きで検索できるのでとても使いやすかったです。
今回は「Flexbox Menu Bar」ていうのを選択して作りました。
ただサイトで作ったままのHTMLだとクリックできなかったので、
下の一文に
<a class="item title">Site Title</a>
↓
<a href="サイトのURL" class="item title">Site Title</a>
と追加しました。他の部分も同様にやりました。
HTMLの基礎的なことなのかもしれませんけどね。自分にはわからなかった(笑)
↓出来はこんな感じ↓
結構良い感じ〜
ただメニューバーはプレビューを見ると文字が一部くすんだりしてて思った通りにならなかった。。。
↓
↓
PCで確認すると全部くすんでる(笑)
もう少しCSSとHTMLの勉強をしなきゃですな。
多分ですけど、ブログのテーマ色が水色なので、それがメニューバーの文字にも適用されちゃって、加えて透けて背景の青色と重なっちゃったのが原因ではないかなと思います。
直し方は今の自分にはわからないんだけどね……。
(いろいろいじってたらPC以外でプレビューした時は普通になった、もうよくわからん……。)
３、文字サイズを大きく
これも参考にさせて頂いた方のブログ
はてなブログのフォントサイズを変える方法 最適な文字サイズは？ - Random Life Blog
の方法を利用させて頂きました。
自分は18pxにして利用しています。
４、いろいろな調整
あとは過去の記事でリンクの貼り方が変だったのを直したり、サイドバー編集したりと色々調整しました。
あとカテゴリー欄に全記事をまとめているのを作ってみたので、これなら自分のブログ(無料版)でも擬似的に一覧形式の表示になったので少しは検索しやすくなったかもしれませんな。
────────────────────
今回はとりあえず形にはなったので一旦終わり。
長い闘いだった〜(笑)
結構ブログの印象が変わったので概ね満足しています。
もっと凝れるようになるといいな。
…まあこんなことする前にもっと記事を書けって話なんだけど。
ではまた～
