Sai.のマイペース4人暮らし

家族4人暮らし。子育て、イラストについて書いてます。

【はてなブログ】テーマ「Cappuccino」カスタマイズしたこと

Sai.です。

はてなブログのデザインテーマをフジグチさんが最近発表された「Cappuccino」にしました。

今ご覧いただいてるメインブログ「Sai.のマイペース4人暮らし」ではなくて、イラスト特化のサブブログ「Sai.のイラスト」のほうです。

 

f:id:sai_kurashi:20201212190333p:plain

トップ画面です。
※自己都合で現在非公開になっています。

 

メインブログは「Minimalism」を使わせていただいていて、愛着もあるし、カテゴリーがゴチャついてるので、ちょっと変える勇気がない…(笑)

一方サブブログは更新滞りまくりで記事数も少ないし、「やるなら今!」って思ったんです。

サブブログ、前は「Undershirt」を使ってました。

これもお気に入りだったんですが、「Cappuccino」のお洒落な雰囲気が素敵で、どうしても使ってみたくて!

カスタマイズは苦手だし、HTMLやCSSがよく分かってない私ですが、こういうのは勢いが必要ですからね。

しかも「Cappuccino」は、素人でもいじりやすいように、「デモサイト」「フジブロっ!」で、フジグチさんご本人がカスタマイズの方法を載せて下さってるんです。

たぶんこれからもカスタマイズ関連の記事が増えるんじゃないでしょうか?

だからはてなブログのテーマでお迷いの方は「Cappuccino」オススメですよ!

まずはこちらの記事をご参考に!

www.fuji-blo.com

www.utoutosara.com

今回の記事では、いち利用者である私がカスタマイズしたことをまとめます。

 

 

グローバルメニューの設置

ヘッダー下のグローバルメニューを設置しました。

この記事にあるCSSとHTMLをコピペするだけです。

cappuccino.fuji-blo.com

スマホで見ると、ハンバーガーメニューが右上に出てくるようになってました。

わ〜!簡単!!!

 

色を着せ替え

色味を変えて少し可愛い雰囲気にしたかったので、こちらを参考に着せ替えました。

www.fuji-blo.com

ここにあるコードをそのまま使わせていただきました。

しつこいけど何度も言いますよ。

簡単です。笑。

 

ヘッダー画像を入れる

これはちょっと時間がかかりました。

以前使っていたヘッダー画像をそのままはめると背景色が上下左右の余白から見えちゃう…。

f:id:sai_kurashi:20201113065301j:plain

前使っていたヘッダー画像

ヘッダーに画像を入れると、ヘッダー色が透過され背景色が表示されるようです。(フジグチさん曰く)

前使っていた画像は、背景白のjpg画像だったんです。

かといってそれに合わせてブログ全体の背景を白にしたくなかったんですよね。

「Cappuccino」は絶対背景色があったほうが良い!と個人的には思うので…。

ということで背景透過の画像を作り直して配置しました。 

f:id:sai_kurashi:20201212191607j:plain

この画像に変更

ちょと分かり辛いんですが、ベージュの背景が透けてます。

余白の無くし方が分からないから、苦肉の策で余白を生かしたヘッダーにしました。

苦し紛れにやった割には良い感じにまとまって満足です。

 

しかしもうひとつ問題が…。

スマホで見るとどうしても端が切れて見栄えが良くない。

う〜ん、どうしよう…と思っていたら、フジグチさんが正しいヘッダー画像の貼り方を記事にしてくださいました。

www.fuji-blo.com

ということで、こちらからレスポンシブ対応のCSSをお借りしました。

f:id:sai_kurashi:20201212190304p:plain

スマホ画面です

これで出来上がりです!

冷静に考えると、大人しく待ってさえいれば、余白云々で迷うことなく好きなようにヘッダーを作れたのに…。

ついつい先走ってしまいました。

私のやり方はちょっと自己流なので、正しくは上記のフジグチさんの記事をご参考になさってください。

 

見出しデザインの変更

見出しを変更する場合、もともと装備されている見出しをリセットする必要があります。

この記事を参考にリセット。

cappuccino.fuji-blo.com

 

そして、前から使っていた見出しデザインのCSSをそのまま使いました。

見出しのデザインはこちらのサイトを参考にさせていただいてます。

saruwakakun.com

 

あと、サイドバーの見出しもリセットして変えたのですが…リセットするCSSをどこからコピペさせていただいたかさっぱり思い出せず、自分で考えたものでもないので、ここに載せるのはやめておきます。

f:id:sai_kurashi:20201212190319p:plain

こうなりました!

 

プロフィールのカスタマイズ 

サイドバーにあるプロフィールをカスタマイズしました。

こちらのCSSコードを拝借。

www.fuji-blo.com

これは本当にオススメです。

一緒にフォローボタンまで配置することができました。

ぐんとお洒落に!!!

f:id:sai_kurashi:20210207022148j:plain

プロフィールはこうなりました!

 

シェアボタンのカスタマイズ 

記事の上下に、はてなブックマーク、Facebook、Twitter、Pocketのシェアボタンを配置してます。

これは以前から使っており、こちらのサイトを参考にさせていただいてます。

www.notitle-weblog.com

 

ちなみに、こちらもフジグチさんご本人によるオリジナルカスタマイズ方法がありますよ!

分かりやすい!

www.fuji-blo.com

 

まとめ

私がカスタマイズしたことは、以下のとおりです。

  • グローバルメニューの設置
  • 色を着せ替え
  • ヘッダー画像を入れる
  • 見出しデザインの変更
  • プロフィールのカスタマイズ
  • シェアボタンのカスタマイズ

これだけでかなり雰囲気が変わりました!

もとが良いから、そのまま使うのもいいですよね。

私はどうしても女子っぽくしたかったので、(おばさんだけど)ちょっいじらせてもらいました。

かなりお気に入りです。特にホーム画面!良い!

放置しっぱなしのサブブログですが、記事を更新したい気持ちがむくむく沸いてきました。

お気に入りのテーマを使えば、ブログのモチベーションがあがりますよ〜。

お迷いの方は是非試してみてくださいね。

テーマを作られたフジグチさん、そして影の立役者である奥様のうとうとさらさん、本当にありがとうございました。

では、また。