Sai.です。
はてなブログのデザインテーマをフジグチさんが最近発表された「Cappuccino」にしました。
このメインブログではなくて、イラスト特化のサブブログのほうです。
メインブログは「Minimalism」を使わせていただいていて、愛着もあるし、カテゴリーがゴチャついてるので、ちょっと変える勇気がない…（笑）
一方サブブログは更新滞りまくりで記事数も少ないし、「やるなら今！」って思ったんです。
サブブログ、前は「Undershirt」を使ってました。
これもお気に入りだったんですが、「Cappuccino」のお洒落な雰囲気が素敵で、どうしても使ってみたくて！
カスタマイズは苦手だし、HTMLやCSSがよく分かってない私ですが、こういうのは勢いが必要ですからね。
しかも「Cappuccino」は、素人でもいじりやすいように、「デモサイト」や「フジブロっ！」で、フジグチさんご本人がカスタマイズの方法を載せて下さってるんです。
たぶんこれからもカスタマイズ関連の記事が増えるんじゃないでしょうか？
だからはてなブログのテーマでお迷いの方は「Cappuccino」オススメですよ！
まずはこちらの記事をご参考に！
今回の記事では、いち利用者である私がカスタマイズしたことをまとめます。
グローバルメニューの設置
ヘッダー下のグローバルメニューを設置しました。
この記事にあるCSSとHTMLをコピペするだけです。
スマホで見ると、ハンバーガーメニューが右上に出てくるようになってました。
わ〜！簡単！！！
色を着せ替え
色味を変えて少し可愛い雰囲気にしたかったので、こちらを参考に着せ替えました。
ここにあるコードをそのまま使わせていただきました。
しつこいけど何度も言いますよ。
簡単です。笑。
ヘッダー画像を入れる
これはちょっと時間がかかりました。
以前使っていたヘッダー画像をそのままはめると背景色が上下左右の余白から見えちゃう…。
ヘッダーに画像を入れると、ヘッダー色が透過され背景色が表示されるようです。（フジグチさん曰く）
前使っていた画像は、背景白のjpg画像だったんです。
かといってそれに合わせてブログ全体の背景を白にしたくなかったんですよね。
「Cappuccino」は絶対背景色があったほうが良い！と個人的には思うので…。
ということで背景透過の画像を作り直して配置しました。
ちょと分かり辛いんですが、ベージュの背景が透けてます。
これで一件落着です！
しかしもうひとつ問題が…。
スマホで見るとどうしても端が切れて見栄えが良くない。
ということで、このメインブログ「Minimalism」のカスタマイズの時にお世話になったこちらの記事を参考にCSSを入れてみました。
CSSのpx数をいじったり、画像の大きさを微調整したらできました！
やった〜！満足です！
ちなみに、フジグチさんご本人による正しいヘッダー画像の貼り方はこちらになります。
この記事が出る前に自己流でやってしまいました。
あちゃー…笑。
見出しデザインの変更
まずは、もともと装備されている見出しをリセットする必要がありました。
この記事を参考にリセット。
そして、前から使っていた見出しデザインのCSSをそのまま使いました。
見出しのデザインはこちらのサイトを参考にさせていただいてます。
あと、サイドバーの見出しもリセットして変えたのですが…リセットするCSSをどこからコピペさせていただいたかさっぱり思い出せず、自分で考えたものでもないので、ここに載せるのはやめておきます。
フォローボタンのカスタマイズ
これは前から使っていたのですが、こちらのサイトを参考にさせていただいてます。
結構手間取ったのを覚えているので、心と時間に余裕がある時に取り掛かるのがオススメです。
ちなみに、こちらもフジグチさんご本人によるオリジナルカスタマイズ方法がありますよ！
分かりやすい！
まとめ
私がカスタマイズしたことは、以下のとおりです。
- グローバルメニューの設置
- 色を着せ替え
- ヘッダー画像を入れる
- 見出しデザインの変更
- フォローボタンのカスタマイズ
これだけでかなり雰囲気が変わりました！
もとが良いから、そのまま使うのもいいですよね。
私はどうしても女子っぽくしたかったので、（おばさんだけどね）ちょっいじらせてもらいました。
かなりお気に入りです。特にホーム画面！良い！
放置しっぱなしのサブブログですが、記事を更新したい気持ちがむくむく沸いてきました。
お気に入りのテーマを使えば、ブログのモチベーションがあがりますよ〜。
お迷いの方は是非試してみてくださいね。
テーマを作られたフジグチさん、そして影の立役者である奥様のうとうとさらさん、本当にありがとうございました。
では、また。