精進備忘録

ブログのテクニックなどの備忘録

デザインカスタマイズを行う際の便利なサイト集

デザインをカスタマイズする際には、色々と参照したい場面があります。

私が使っているサイトを一覧にしておこうと思います(随時更新)

 

HTMLとCSSの編集

HTMLクイックリファレンス

HTMLやCSSの基本から参考コードの参照まで、構文を忘れてしまった時などに

はてなブログのidとかclassとか - kyabana's blog

はてなブログの構造。この部分の色を指定したい!というときなどに便利。

配色の参考

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

色見本を見ながらコードをコピーできる便利なサイト

Color Picker Tool | 0to255

直感的に色を選んで、カラーコードを参照できる。こちらもおすすめ!

Happy Hues - Curated colors in context.

サイトの配色例が示されているので、参考にしたり、丸々採用したりできます。

Colourcode - Color palette

一つ色を選ぶといくつか配色パターンを示してくれます。こちらも直感的に選ぶことができて便利。

 

 

 

ブログのデザインについて

ブログをやり始めるとこだわりたくなるのがデザイン。

はてなブログでは様々なテーマが用意されていて、インストールすることで初心者でも簡単にブログのデザインを変更することができます。

テーマは初期に表示される数十種類のほかに、テーマストアで無数にある中から選ぶこともできます。

知識のある方なら一から開発することも可能ですが、多くの方にとって、デザインで個性を出すのであればテーマをインストールした上でカスタマイズする方が現実的だと思います。

 

私も自分一人で作れるほどの知識も根気もあるはずもなく、カスタマイズ性に優れていると評判のMinimalismを入れてみました。

5万回以上インストールされている超人気テーマですが、非常にシンプルな見た目で、入れただけでは無個性そのもの。

これから勉強していきつつデザインをいじっていきます。

 

なお、流石人気一位なだけあって、「Minimalism カスタマイズ」などと検索すれば、コピペで使えるコードが山ほど出てきます。

 

気になる方は、まずは作者さんのサイトをご覧になってみてください。

https://hitsuzi.hatenablog.com/entry/minimalism

 

カスタマイズの記録や、コードを公開しているこれらのサイトが参考になりそう

www.kurasitotonoe.com

www.karochoa.com

uni-ism.com

 

また、デザインを一から作れるような詳しい方はこちらが使えるのかも

https://github.com/hatena/Hatena-Blog-Theme-Boilerplate

 

 ゆるりと続けていきます。