うるちです！
あたうる興業【ブログ版】では、はてなブログのテンプレート「Palette」ピンクストライプを長年愛用してきました。
しかし今回思い立ってブログデザインをリニューアルし、テーマカラーを緑系の色に変更したのですよ。うちのマスコットキャラクター「またわれ」大根をイメージしています。
「Palette」のテンプレにはいくつかバリエーションがあるんですが、このストライプデザインはピンクとブルーの二種類しかない。ので、自力でCSS書き換えて色を変えました。
CSSの知識はあまりないんですが、どうにかうまい事できたので備忘録を兼ねて色の変え方を書き残しておこうかと思います。カスタマイズの参考にしてみてください。
「Pallet」で使われている色を知る
まずはPaletteで使われているカラーを調べましょう。Paletteピンクストライプでは背景色の白と合わせて5色が使われています。
- ブログの背景色（白）→#ffffff
- ブログタイトル下や記事を区切るブラウンの線の色→#7a443b
- タイトル部分のストライプに使われている薄いピンク→#ffeff4
- 記事の日付部分の枠に使われているやや濃いピンク→#ffbdce
- 記事の日付に使われている一番濃いピンク→#fc7ea1
カラーコードを入れ替える
背景色以外の4色を、任意のカラーコードに入れ替えることで色の変更を行いました。まずは変えたい色を4色選んでカラーコードを用意しましょう。
色を決めたりカラーコードを調べるには、こちらのサイトがおすすめです。
カラーコードをメモしたら、次にデザインCSSを開きます。開き方は［ダッシュボード］→［デザイン］→［カスタマイズ］→［｛｝デザインCSS］の順番です。
そして書かれているカラーコードを使いたい色のコードに置き換えていきます。
- 線の色を変える→#7a443bと書かれている部分のコードを変える
- タイトル部分のストライプ色を変える→#ffeff4と書かれている部分のコードを変える
- 日付部分の枠の色を変える→#ffbdceと書かれている部分のコードを変える
- 日付の色を変える→#fc7ea1と書かれている部分のコードを変える
同じコードが書かれている部分は全部変更しておくと、統一感を保ったままうまく色を変えることができます。
終わりに
ちょっとしたメモ書き程度の短い記事ではありますが、こういう情報は思い出そうとしても忘れてる事がよくあるので忘れる前に書いておきました。
頻繁にCSSをいじったり勉強してる人なら忘れないのかもしれないけど、私はそこまでブログカスタマイズに時間かけるほうじゃないのですよ。
「まさに今同じような事で困ってた！」というあなたの、解決の手助けとなれば幸いです。
以上、うるちでした！
気に入っていただけたら、クリックよろしくお願いします！
