プラスないん!

暇を持て余していた理系大学院生から社畜になったないんのブログ

ブログのデザインを一新しました。

 

 

f:id:plusnines:20180605161820p:plain

 

 

こんにちは。

世間はもう梅雨入りしたらしいですね。

大学まで徒歩だと20分弱かかってしまう私としては、鬱々とした気分です。

 そんな気分も相まってか、以前から違和感を抱いていたブログのデザインを思い切って一新してみました。

 

アイコンを変えました。

以前のアイコンはただの⑨でした。

そんなに凝ることはできないので、「9」はそのままでフォントと色合いを変えました。

f:id:plusnines:20180604170500p:plain

 

ブログタイトルの画像を変えました。

以前のデザインはこんなのでした。

 

f:id:plusnines:20160312223528p:plain

 

これもこれで自分でも頑張ったほうであり、作った当時は納得してたんですけどね。

他の方のブログを見比べてみると、なんか白が多い気がする…。

あと最近特に株の取引の記事を上げてないので、株取引をイメージした絵はどうなのかと。

もっとシンプルに、緑を全面に出すような感じにしてみました。

 

f:id:plusnines:20180605161820p:plain

 

私にしては頑張ったほうだと思います。

デザインとかはまったく学んだことがないので。

 

色合いに関して、「マテリアルデザイン」というのの定めたカラーコードをブログに使うといいっぽい。(?)

 下の便利なサイトで色一覧が見れるので貼っときます。

www.materialui.co

 

テーマを変えました。

以前はどのテーマを使っていたのか忘れてしまいましたが、問題が発生したので思い切って変えました。

背景緑のタイトル画像を作ったのに、背景が緑にできない。

タイトルの欄を全部緑一色にしたい。

他のブログでもそういうのがかっこいいなと思っていたので、濃い背景に白文字というブログタイトルを夢見ていました。

画像貼って、CSSで背景も同じコードにすればできるやろ!と思っていたんですが、なぜか変わらない。

どうがんばっても、変わらない。

 

一日頑張って、テーマが原因だという考えに到達したので、テーマを変えました。

いままで使っていたテーマを変更するのは少し勇気がいることでしたが、よりよい見た目にするためにと思い変えちゃいました。

今回採用させていただいたテーマがこれです。

Haruni - テーマ ストア

 

最初からタイトルに背景色が設定できそうだったので採用しました。

ただbodyの背景に色を設定しているせいか、開くときに一瞬画面が緑になります。

まあこの程度ならいいかと思いますが。

 

CSSカスタマイズもリセットされたので、全部一新しました。

 

見た目のカスタマイズ。

トップページの背景をドット柄にしました。

なんとなく真っ白だと、光が強くて目に優しくないかなと思ったのでそうしました。

心なしか、見やすくなったように感じます。

余談ですが、「パワポを作成するときは、背景が白だとスクリーンが焼けるから白っぽいグレーとかにしろ」と注意してきた人がいました。

ほんとかどうかは知りません。

 

上に戻るボタンをちゃんと作りました。

いちおう以前もあったんですが、一番下に行かないと現れないという謎仕様だったので、ちょっとでもスクロールしたら出現するようにしました。

 

カテゴリーを減らした。

ムダなカテゴリーを整理しました。

記事数が一個しかないのとか意味がないので消して、統合しました。

カテゴリーは増えすぎるといけないと思います。

 

細かいけど、アイコンフォントを使ってみた。

記事の上にあるカテゴリー表示にアイコンフォントを使ってみました。

特に意味はないですが、ちょっとした見た目の工夫です。

 

関連記事を消しました。

記事下の関連記事を消しました。

自動で関連記事を探してきてリンクを貼る機能ですが、邪魔なだけなので。

貼りたいときは自分で貼りますし。

 

ソーシャルボタンを消しました。

特にいまのところ、ブログ用のツイッタやインスタを作るつもりはないので消しました。

というか、今までなかったのになぜボタンがあったのか疑問です。

今後つけるかもしれませんが、その時につくればいいと思いました。

自己顕示欲を満たすのは読者になるボタンだけでいいです。

 

2018/07/31 追記

勘違いして投稿用のボタンだと思っていなかったので復活させました。

はずい。

 

まとめ

ざっと全部変更するのにまる2日くらいかかってしまいました。

素人がCSSとかHTML触ると時間がかかるので注意です。

たしかにブログカスタマイズの参考になるサイトがいくつもありますが、自分の思い通りにカスタマイズしようと思うと落とし穴にハマります。

ですが、一応は納得できるデザインになってよかったです。