ブログをカスタマイズしてみました
ブログの見た目を整えたいなーと思っていましたが、手を出すときっと大変なことになるだろうと触らないようにしてきていましたが、
今日は時間があったので、勇気を出してカスタマイズにチャレンジしてみました。
HTMLもCSSも、右も左も分からない初心者が、
ほぼコピペ(+ほんの少しだけいじる)のみでPCとスマホのデザインをカスタマイズしてみました。
目次
はてなブログのテーマを変更
はてなブログのテーマをDUDEにしてみました。
デモ用のブログ→ DUDE を見て「ぎゃーおしゃれ!」と叫びました。
サイドバーの見出し文字がかっこよかったり、記事のタイトル下に表示される「カテゴリー」のボタンの小ささだったりが、素敵だなーと。
※当ブログはタイトル画像を入れたから、だいぶ印象が変わっていますが・・・。
スマホはこちらを参考に
当ブログは7-8割スマホからご覧いただいているので、スマホのデザインも整えたいなと思っていました。
こちらを参考にしながら、記事一覧の画像の角の丸みを変えたり、日付の背景をミニマリスト日和カラーのパステルグリーンにしたり、見出しの色を変えたりと、
ちまちまいじりました。
スマホの下に固定メニューボタンをつけてみた
スマホで見るとこんな感じになりました。

↑この、一番下のボタンです。
HOMEと人気記事・カテゴリ・TOPが表示されるようになりました。
ちなみに、色はこちらを参考にしました。
PCのトップ画面のフッターを消しました
何もいじらなければ、「続きを読む」の周辺にはてなスターやコメントが表示されていると思います。
トップはすっきりさせたいと思い、これらのものを消しました。
(続きを読むを押して記事のページへ行けば、記事の最後には出て来ます。)
「続きを読む」ボタンを設置
何もいじらないと、文字に下線がついている状態になっています。
続きを読む
↑こんな感じなので、ボタンを設置してみました。
写真付きの関連記事

↑これです。
写真付きで表示されると、見ていてワクワクするかなと思って設置。
Milliard関連ページプラグインについて | シスウ株式会社
記事下に設置しているのですが、
本文を読んでいる間にゆっくり生成されて、読み終えた頃には表示されてる、という感じです。(これは以前から設置していました)
やらなきゃやらなきゃ、と思っていた「カテゴリの整理」に着手
前回似たような記事を書いた時に、どのカテゴリーに入れたっけ?
とすぐに忘れてしまい、無尽蔵に増えて行くカテゴリー。
なんとかせねば!と整理してみました。
それでも多いですが。
今後の課題
・SNSのフォローボタンを小さくて丸っこくてかわいいものにして設置したい
・サイドバーをかっこよくしたい(なんでアバウトな・・・)
というのが今後の課題です。
こんな感じでやり始めたカスタマイズ。
朝の11時に始めて、気付いたら19時になっていました。
目に見えてブログのデザインが変わっていくので、やっていて面白かったです。
新刊『暮らしを見直す10分間』(大和書房)が2024年6月9日に発売になりました!
紙の書籍もKindle版もあります。
片付け本×手帳『おふみさんの捨てログ』(文響社)発売中。
日付フリーなのでいつからでも始められます。
『小さな暮らしは生きやすい』(大和書房)販売中。 紙の書籍もKindle版もあります。
LINEスタンプ発売中






