こんにちは！塩くまです。
やろうやろう、と思っていたスマホ版のデザイン変更。
ようやく数日前に手を付けました。
（今までより見やすくなっているといいのですが…）
今回のカスタマイズで参考にしたサイトなどをまとめてみます。
背中を押したのは超絶素敵ソースを公開されていたこどみすさんのブログ
やろうやろう詐欺だったわたしの背中を押してくれたのがこちらのブログ。
突如現れてすごい人気のある勢いがあるブログなので、ご存じな方も多いかもしれませんが。
もうね、センスと技術がすごくてね…わたしはセンスもなければデザインをいじる知識もないので、本当こういう方尊敬です。
こどみすさんのブログのデザインのコードがまるまる公開されておりまして（しかも無料で）、本当に好みすぎるデザインだったので、今回まるまる使わせていただきました。
テーマ『Codomisu Flat（こどみすフラット）』のスマホ版のような、本当に素敵なデザインです。
まるまる使っているのでデザインはまんまこどみすさんのブログですorz（土下座）※色と細かい部分はちょこっといじっています
まるまる使っているのはさすがにダメでしたらご指摘ください。
当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたが、いろいろと気が変わったので全て無料で公開することにした。
いや、5000円でも買う人いる気がしますよ。
無料なんて太っ腹すぎます。
こどみすさんの気が変わらないうちに、公開されているデザインを使わせていただきました。
ありがとうございます。
こんな感じのデザインにしました
こどみすさんのもともとのデザインはダークグレー＆ライトグレーでカッコイイイメージのデザインでした。
こどみすさんのような、役に立つ知識満載のブログならばっちり合うイメージかと思うのですが、わたしのブログはゆるい雑記…もう少しほわ～んとした（←この頭の悪そうな表現よ）イメージにしたかったので、全体的に薄いオレンジ＆ベージュの色に変更することにしました。
最終的に現在はこうなっています↓
※今後もう少しいじるかもしれませんが
今回参考にしたサイトなど
全体のデザインはほぼ先に紹介したこどみすさんのものをまるまる使っているのですが、色を変えたりロゴを作ったりなどでとても便利だったサイトを紹介します。
ブログ全体の色を決める
わたしは色彩に関して知識もセンスもないので、使いたい色に合う色を提案してくれるサイトを利用しました。
色相環の角度に沿った配色はにぎやかさを、明度・彩度は統一感を作るのに便利です。三属性のどれかに軸をおいてある配色はデザインがまとまります。
「この色をメインに使いたい！」「こういう色が好き！」というものを一色選択すると、その色に合う色を提案してくれて大変参考になりました。
わたしは全体的にやわらかい印象にしたかったので似た感じの色同士を組み合わせていますが、反対色の組み合わせなども提案してもらえるので、「ここは効果的に目立つ色を指定したい！」（例えば文字の下にカラーマーカーみたいにラインを入れるとか）というときも参考になると思います。
しかも、タグを打ち込むときに使う色のコード（＃FFFFFFとか、＃3F3F3Fとかそういうの）を書いてくれているのはもちろんのこと、ペイントソフトなどでその色を使いたいときに便利な色のRBGの数字も書いてくれていて至れり尽くせりなのです!!
わたしはWindows標準搭載の『ペイント』で基本的に自分のブログのロゴやらアイコンやらを作っているので、RBGの数字があると同じ色を作り出せて大変ありがたかったです。
ロゴやアイコンのサイズ変更と透過
最初はブログのタイトル部分、ヘッダーの画像を作って埋め込むつもりだったのです。
でもどうしてもデザインが崩れてしまってうまくいかなくて（←いろいろ直せる知識は持っていない）、結局こどみすさんと同じようなかんじに、背景色＋ロゴ、のシンプルなヘッダーとなりました。
わたしはロゴをペイントで作って透過していますが、その手順は基本的に以前紹介した方法と同じです。
※ちなみに今回のフォントはデジタルっぽくしたかったので『じゃっきーふぉんと』を使ってます。ファミコンっぽいかんじで可愛くて大好きなフォントです！
この手順とほぼ同じなのですが、今回は透過にこちらのサイトを使いました。
わたしはアンチエイリアスオフの文字でロゴを作成したのであまり関係なかったのですが←、こちらだとアンチエイリアスのかかっている文字も透過できるみたいです。（※アンチエイリアス＝単色ベタ塗りではなく、境目をなめらかに見せるために若干にじんだような色が周りに入っているような処理…というかんじのです…表現へたでゴメンナサイ）
サイズはペイント上で調整することもできますが、ペイント使ってなくてサイズど～しよ～ってときはこちらが超便利で最近愛用してます。
JPEG画像をブラウザ上で簡単にサイズ変更したり、トリミングできるのでとっても便利なのです。
こちらのサイトは画像サイズ変更ツールの他にもいろいろ画像をいじる楽しそうなツールが沢山あるので、今度いろいろ試してみたいです。
その他いじってるところや細かい部分について
若干こどみすさんのところのコードをいじってる部分としては、
- 色を変更（先述）
- 記事一覧（トップページ）の、投稿日『○日前』の部分の背景をなしに
あたりでしょうか。。
本当にほぼそのまま使わせていただいちゃっています。
あとは後日、
- スライドメニュー部分のアイコンと項目の編集
- フッターにカテゴリ一覧を追加
- 文字サイズを全体的にもう気持ち大きく
- 強調したい文字にカラーマーカー的な装飾
などをするかもしれません。
あと、今回デザインをいじったのに伴って（？）過去に投稿した記事のリライトを少しずつしています。
リライトした記事と新しく書いた記事についてはサムネイル（アイキャッチ）画像をはてなでもツイッターでも最適（と思われる）サイズにしてみました。
ネットでサムネイル画像のサイズについてはいろいろな方が情報を書いていますが、若干サイズを変えてみてますので今度これについてもまとめておきたいと思います。
今回もありがとうございました！
★この記事を気に入ってくださった方は、ブックマークやツイートをしていただけると嬉しいです！ブログを更新する励みになっています。いつも読んで下さりありがとうございます。
★読者さん・フォロワーさんを大募集中です！もしも気に行って頂ければ、ぜひよろしくお願いします！
☆読者登録→
☆ツイッター→ 塩くま（@vshiokuma）