ミニマリスト日和

ミニマリスト日和

夫婦でミニマリスト。スッキリだけど落ち着く部屋を目指して。

初心者がほぼコピペのみでブログをカスタマイズしてみた。

\2017年12月13日、新刊出ます/

ブログをカスタマイズしてみました

ブログの見た目を整えたいなーと思っていましたが、手を出すときっと大変なことになるだろうと触らないようにしてきていましたが、

今日は時間があったので、勇気を出してカスタマイズにチャレンジしてみました。

HTMLもCSSも、右も左も分からない初心者が、

ほぼコピペ(+ほんの少しだけいじる)のみでPCとスマホのデザインをカスタマイズしてみました。

 

目次

 

はてなブログのテーマを変更 

はてなブログのテーマをDUDEにしてみました。

tsukuruiroiro.hatenablog.com

 

デモ用のブログ→ DUDE を見て「ぎゃーおしゃれ!」と叫びました。

サイドバーの見出し文字がかっこよかったり、記事のタイトル下に表示される「カテゴリー」のボタンの小ささだったりが、素敵だなーと。

※当ブログはタイトル画像を入れたから、だいぶ印象が変わっていますが・・・。

 

スマホはこちらを参考に

当ブログは7-8割スマホからご覧いただいているので、スマホのデザインも整えたいなと思っていました。

こちらを参考にしながら、記事一覧の画像の角の丸みを変えたり、日付の背景をミニマリスト日和カラーのパステルグリーンにしたり、見出しの色を変えたりと、

ちまちまいじりました。

tsukuruiroiro.hatenablog.com

 

スマホの下に固定メニューボタンをつけてみた

www.yukihy.com

スマホで見るとこんな感じになりました。

f:id:mount-hayashi:20160322191016j:plain

↑この、一番下のボタンです。

HOMEと人気記事・カテゴリ・TOPが表示されるようになりました。

 

ちなみに、色はこちらを参考にしました。

WEB色見本 原色大辞典 - HTMLカラーコード

PCのトップ画面のフッターを消しました

www.yukihy.com

何もいじらなければ、「続きを読む」の周辺にはてなスターやコメントが表示されていると思います。

トップはすっきりさせたいと思い、これらのものを消しました。

(続きを読むを押して記事のページへ行けば、記事の最後には出て来ます。)

 

「続きを読む」ボタンを設置

georges.hatenablog.jp

何もいじらないと、文字に下線がついている状態になっています。

 続きを読む

↑こんな感じなので、ボタンを設置してみました。

 

写真付きの関連記事

f:id:mount-hayashi:20160322200152j:plain

↑これです。

写真付きで表示されると、見ていてワクワクするかなと思って設置。

Milliard関連ページプラグインについて | シスウ株式会社

記事下に設置しているのですが、 

本文を読んでいる間にゆっくり生成されて、読み終えた頃には表示されてる、という感じです。(これは以前から設置していました)

 

やらなきゃやらなきゃ、と思っていた「カテゴリの整理」に着手

前回似たような記事を書いた時に、どのカテゴリーに入れたっけ?

とすぐに忘れてしまい、無尽蔵に増えて行くカテゴリー。

なんとかせねば!と整理してみました。

それでも多いですが。

 

今後の課題

・SNSのフォローボタンを小さくて丸っこくてかわいいものにして設置したい

・サイドバーをかっこよくしたい(なんでアバウトな・・・)

というのが今後の課題です。

 

こんな感じでやり始めたカスタマイズ。

朝の11時に始めて、気付いたら19時になっていました。

目に見えてブログのデザインが変わっていくので、やっていて面白かったです。