photo credit: Jason Mulligan via photopin cc
さすがにデフォルトのままではアレなので…
Stinger5は非常によく出来たテーマで、ユーザも多いです。
デフォルトのままでも機能的には十分なのですが、ブロガーの端くれとしては、少しは特徴を出したいのが正直なところです。
しかし僕はエンジニアと言っても、フロントエンドにはあまり詳しくありません。
CSSがちょこっと弄れる程度です。
そしてデザイナーではありませんので、画像を作ってデザインをすることが出来ません。
フォトショ、イラレ、もちろん持っていませんし、スキルもありません。
そこでCSSをちょこっと弄るだけで、少しでもデザインがそれっぽくなるようにしてみました。
その道にプロの方に見られては恥ずかしくて死にたくなるような稚拙なものですが、少しでも誰かのお役に立てれば幸いです。
あ、ちなみに弄った後のstyle.cssをここに置いておきます。
まあこんなもの参考にする方はいらっしゃらないとは思いますが…。
[sdm_download id=”2434″ fancy=”0″]※ダウンロードしたCSSの適用は、自己責任でお願い致します。
テーマカラーを決めた！
まずはこのブログのテーマカラーを決めることにしました。
ブログに限らず、テーマカラーと言うのは非常に大事です。
イメージカラーと言い換えてもよいでしょう。
SUBARUの青なんかが有名ですよね。
（某所ではキモオタブルーとか言われていますが…。）
考えた結果、このブログのテーマカラーは#0bdに決定しました！
何でだ？と聞かれても困るのですが…強いて言うならば青系が好きだからです。
そしてあくまでも差し色として使う方針としました。
全体が青系だと眩しいですｗ
おまけに一昔前のホームページのようになってしまってダサかったのです。
トップページをご覧頂くとわかるのですが、テーマカラーと言いつつごく一部にしか使っていません。
ロゴ、サイドバーのタイトル、サイドバーのSNSリンク、最下部のページ番号部分のみです。
あくまでも差し色です。
基本は薄いグレーや白系の方が記事は読みやすいです。
記事を黒枠で囲った！
これが意外と良かったと思います。
記事が読みやすくなりました。
今までは記事の背景が白、その外側が薄いグレーだったので、記事とそれ以外の部分の境界がはっきりしていませんでした。
それが線で区切ることによって、ここからここまでが記事本文！というのが明確にわかるようになりました。
（PCで観た場合のみです。スマホの方は特に変更していません。）
その他もちょこっと！
メニュー（カテゴリ）のフォントサイズを大きくしました。
今までは非常に小さく、そもそもカテゴリの存在すら気付かれていなかったのではないかと思います…。
だいぶわかりやすくなったはずです。
SNSアカウントのリンクをプラグインでまとめました。
サイドバーに各種SNSアカウントへのリンクを貼ってあります。
今まではSNS毎の標準のボタンを貼っていたのですが、デザインに統一性が無く、見た目が最悪でした。
今回、「Lightweight Social Icons」というプラグインを使って、デザインを統一しました。
このプラグインは対応しているSNSが多く、デザインや配置も柔軟に変更できるのでオススメです。
まとめ
ワタクシが出来るのはここまで！
よりスタイリッシュにするには、本職のデザイナーさんにお願いするしか無いかなと思います。
まあ、デザインが全てではありません。
ブログはあくまでも、良質な記事があることが第一です！
僕が偉そうに言えることではありませんが…。
皆さんもちょこっと弄ってみては如何でしょうか。
今回は以上！
ਅਲਵਿਦਾ！！
