それでもつづく!

学生です。楽しい文章を書きたい。

“それでもつづく!”

はてなブログのPCデザインをリニューアル。クール色で統一してみた

f:id:kmartinis:20171112193559p:plain

 

PCのデザインを一新しました。

(PCオンリーです。スマホは触っていません)

 

以前のデザインは黒を基調にした、クールなデザインでしたが、今回のデザインは、クールかつ可愛い感じのデザインに仕上がりました。

 

 

変更した点

変更した点説明していきます。

学校卒業のために睡眠時間を確保しているので、時間がありません。この記事ではすごく簡潔にいきます! 

その前に

saruwakakun.com

 

素人でもいい感じのデザインに仕上がったのは、サルワカさんのこちらの配色ツールのおかげだと思っています。

皆さんもぜひ、ブログのデザインを変更する際は、まず初めに訪れてみてください。

 

トップページを変更 

f:id:kmartinis:20171112182359p:plain

 

こんな感じの、ビッグカードのようなデザインになりました。

 

www.foxism.jp

 

orefolderさんのこの記事を参考にさせていただきました。

ブログ「FOXISM」は毎度参考にさせていただいています。

 

この場を借りてお礼申し上げます。

 

レビュー記事にしろ、日記記事にしろ、写真が素敵で気に入っているので、今後の更新も楽しみにしています!

 

ヘッダーを変更

f:id:kmartinis:20170712192833p:plain

こちらが旧デザイン。

これが、

f:id:kmartinis:20171111150100p:plain

こうなりました。

白で背景とかぶっちゃってますけど、いい感じになったかと。

 

www.soredemotbc.com

ちなみに今回もこちらのツールを使って編集させていただきました。

 

 

ブログタイトルの下にある英文は、ゲーテの言葉です。

「焦らず、休まず」っていう。

 

自分のできることを、長いスパンでコツコツやろうよっていう。まあこれはどんどん変えてったりするかもしれません(その度にヘッダーを編集する必要があるので、多分実行しないに10000ペリカ)

 

本当は、心を解き放て、みたいなことを書きたかったんですけど、ふと「どこかでみたような…」と思って探していたら、コトリさんでした。

 

漫画・アプリ・エンタメ系情報メディア -『心に火を、指先にペンを』

 

知らない間にワープレ移行されてましたw

 

ちなみに「心を解き放て」、でググったら、映画マトリックスに登場する台詞で有名なんですね。アジカンが「All Right Part 2」って曲で(いい歌です。聞いてみて)「心を解き放て」ってフレーズを歌ってたので、「アジカンのかっこいいフレーズ」と認識してました。(ちなみにチャットモンチーの橋下絵莉子サンとのコラボ曲です)

 

記事内リンクの色を変更

これに関してはずっと変えたいと思ってたんですけど、ちょうど今のテーマに合いそうなので変えました。

 

八木仁平のオフィシャルブログ(旧やぎろぐ)で用いられているリンク色がずっと気に入ってたので、同じものを使わせてもらいました。

 

変更に当たって、リンク色を変えたいだけなのに、やたらといろんな箇所の色が変更してしまって手こずったんですけど(何も勉強しないとこうなります。CSSくらいそのうち勉強したいw)、ごちゃごちゃいじってたら出来ました。

(色に関しては、Chromeを使っていれば、右クリック→検証で一発で色がわかります。)

 

f:id:kmartinis:20171112181614p:plain

 

こんな感じのリンクが

 

f:id:kmartinis:20171112181646p:plain

 

こうなりました。明るくなって、よりはっきりしたと思います。

今のテーマ色にもぴったりなのでよかった。

 

フォローボタンを変更

f:id:kmartinis:20171112183702p:plain

 

↑真ん中のやつです

 

こちらも気に入っています。そういえばインスタグラムのフォローボタンをずっとつけておきながら、アカウントは作っていなかったので、そのうち作ろうと思います。

 

english-apple-diy.hatenablog.com

こちらの記事を参考にさせていただきました。

 

et cetera…

シロマさんのシェアボタンに変更。センタリングして使わせていただきました。

www.notitle-weblog.com

 

見出しはこちらを、

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld

追尾型の目次はこちらを、

サイドバーに現在位置を表示して追尾する目次を設置する【目次記法対応版】 - Twilyze blog

 

参考にさせていただきました。

 

タイトル・見出しの文字色、太字の文字色、関連記事のデザイン、トップページのはてなスターの削除など、細かいところをあげたらもう少しあると思うんですが、今日はこの辺りにしておきます。

 

感想

クールかつ可愛い感じでだいぶ気に入ってます。

寒い時期になったので、より一層寒く感じてしまうデザインかもしれませんね。

 

テーマは変わらず、シロマさんの「Brooklyn」なんですが、人気すぎるあまり他の方のブログとデザインが似通ってしまいがち。そこを多少は改善できたのではないでしょうか。

 

カスタマイズに当たって、なんせ知識がないので、うまくいかないところは!importantのゴリ押しでなんとかなってる状況です。(そもそもあんまり理解できてないけど)

大学進学後、勉強できればと思ってます。

 

また、このデザインの大半は、あらかじめwebにコードを残しておいてくれた方のものをそのまま利用しています。感謝しなければですね。

 

というわけで今日はこの辺で。それではっ