うとうとさらの テンパり育児

心配性のワーママがおすすめの育児グッズや暮らしに役立つ情報をご紹介します

はてなブログテーマのおすすめカスタマイズ「Cappuccino」編

 本ページはプロモーションが含まれています

 

こんにちは、うとうとさらです。

夫が先日作成した2つのデザインテーマ【Cappuccino】と【Neumorphism】どちらも多くの方にインストールして頂けて本当に嬉しいです。

更にブログ仲間さん達が使用してみての感想等を記事にして下さるので、通知が来るたびに毎回感謝の舞を踊っています。(夫は冷静なので、私だけw)

下記記事で「私はまだ変えません」と宣言していたのですが、やっぱり気が変わって当サイトも【Cappuccino】に変更しました!

宣伝部長として広報活動するためには、まずは自分からやらなくちゃだめだよね!ということで(笑)

今回は私が実際に使用している、おすすめのデザインテーマ【Cappuccino】カスタマイズをご紹介します。

 

▼テーマリリースの記事はこちからから読めます。

www.utoutosara.com

www.utoutosara.com

はてなブログ テーマ おすすめ カスタマイズ Cappuccino

はてなブログテーマ【Cappuccino】に変更しました

実は2020年10月に「Haruni」から「UnderShirt」へテーマ変更して新装開店したばかりでした。夫に色々とカスタマイズを頼んで気分も新たに頑張ろうと意気込んだものの・・・更新が滞ってばかりでした。

気に入ってはいるのに、どうもしっくりこない。(=やる気でない)

というか、多分原因はアイキャッチのセンスのなさのせいなのですが(笑)、トップページに統一性がなくて自分で見ても疲れてました。そんな当サイトのBefore・Afterはこちらです。

Before

うとうとさらのテンパり育児


カラフルポップで元気なイメージを作ろうとしていましたが、正直統一感があんまりないですね。

After

うとうとさらのテンパり育児

ポップな感じを残しつつ、少し色味を抑えてみました。まだまだ修正したいところが沢山あります!

うとうとさら
あれ?パッと見そんなに変わってなくない?(汗)
 

 正直PC版だとそこまで変化が感じられないですね・・・スマホ版では結構雰囲気変わったと思うのですが、Beforeのキャプチャ画像を取り損ねました。。。

 

効果

トップページを変更した一番の効果は、ズバリ自己満足です!(笑)

ヘッダーやらおすすめ記事のアイキャッチを数回作り直して、何とか今のかたちに落ち着きました。何回も作ってるとどれがいいか分からなくなってくるので、夫が「なんかサイトの雰囲気が暗い」など率直なダメだしをしてくれるので助かります。

でもヘッダー画像はイマイチ気に入ってません。センスがない・・・こうなってくるとプロへの外注もありですね。

あとは、一時的な効果としてアクセス数アップに繋がりました!

理由は、テーマストアの「利用中のブログ」の一番上にバーンと鎮座していたからです~!(残念ながら今は消えてしまいました。)

はてなブログ テーマストア

 

おすすめカスタマイズまとめ

実際に私がカスタマイズを行った項目についてご紹介します。

ヘッダー画像

ヘッダー画像はCanvaを使って作成しました。(デザインは納得いってないけど)

はてなブログ ヘッダー 余白

余白の調整と背景色の変更を行うことで、PCでもスマホでも見切れることなく同じように配置することが出来ます!

詳しい手順は夫のサイト「フジブロっ!」の記事を参照してください。

フジブロをみる

www.fuji-blo.com

 

グローバルメニュー

ヘッダーの次はグローバルメニューの追加です。PC版だとこの部分です。

はてなブログ グローバルメニュー

私は前テーマでもメニューを設置していましたが、スマホ版でデザインが重複したりしたので入れ直しました。

CSSは組み込まれているため、「ヘッダー」にコードを入れるだけで簡単に表示できます。

スマホ版だと、このような「ハンバーガーメニュー」が登場します。

はてなテーマ カプチーノ カスタマイズ

 

当サイトのスマホ版では、「ボトムメニュー」としてホームへ戻るボタンやフォローボタンも入れており、より一層操作性が向上します。

はてなブログ ボトムメニュー

この「ボトムメニュー」のデザインは夫が作成してくれました。気になる方はぜひ「ココナラ」でご相談ください!(←広報活動も入れつつ(笑)

ココナラで相談する

カスタマイズのご相談はここからどうぞ☆

ココナラでフジグチに相談

 

おすすめ記事の設置

「おすすめ記事の設置」を行うと一気にブログの印象が変わるので本当におすすめです。ヘッダー、記事下、サイドバーなどお好きな場所に組み込めます。

ヘッダーに設置

ヘッダー部分に以前はスライダー式のおすすめ記事を設置していたのですが(夫へカスタマイズ発注)、何せアイキャッチに統一感がないためにちょいダサい感が否めませんでした(笑)なので、ここは一番変えたかった部分でもあります。

はてなブログ おすすめ記事

今回はヘッダー下に4つのおすすめ記事を設置して、記事そのものではなく「カテゴリ」に飛べるようにしてみました。カテゴリは「子カテゴリ」へ飛べるようにすることで、さらに記事を探しやすくしてみました。

記事下に設置

記事下へは、スライダー式でおすすめ表示していた記事を設置しました。記事下に組み込むことでブログ内の回遊率をアップさせることが出来ます。

一度設置してしまえば、あとはいつでも簡単に記事を差し替えられるのでとても便利です。

はてなブログ テーマ おすすめ 

※アイキャッチ画像のひどさはそのままなのですが、追々修正していきます。(はてなブログのデザインテーマコンテストへの参加賞で「CanvaのPRO」が使えるようになるのでちょっと楽しみにしてます☆(笑)

▼おすすめ記事の設置は 【Cappuccino】と【Neumorphism】共通でこちらのコードが使えます。

 

まとめ

はてなブログ テーマ おすすめ 

実際に両テーマをインストールしてくださったみなさんが次々と素敵な記事をアップしてくださったので私があえて記事にすることもなかったのですが、せっかくなので書いておきました。

テーマ変更は着手するまでが本当に億劫ですし、その後の微調整などにも時間がかかる大変な作業ですがやってしまえば楽しいです。

ご興味がある方、お時間があるときに試してみてくださいね。

本日も、最後までお付き合い頂きましてありがとうございました。