ふくさぎの知恵

過去の自分を踏み台にして前に進むためのブログ

ブログデザインにこだわらないと言ったけど、あれは嘘だ!!【Smooth】

数日前にこんな記事を書きました↓↓

hukusagi.hatenablog.com

ここで私は「ブログデザインにこだわる時間あるなら記事を書く」的なことを高々と宣言しました。でも、やっぱりオシャレに時間かけたいっス!!

前言撤回します!ごめんなさいでしたー!!

他の人のブログを見に行く危険性

なんか最近、急に読者登録がガンガン来てお返しに「ブログ見に行こ〜」って、楽しくブログサーフィンしてました

そしたら、めっちゃ良い感じのブログがいっぱいあって…

思わず「羨ましい〜」て、なんか悔しくなりました

隣の芝生は青く見えると言うけど、いざ自分ちに このブログ 帰ってくると物凄く見劣りを感じるんですよね。それでモチベーションもだだ下がりです

文章力乏しくて、ブログ始めたばかりで完成度が未熟な当ブログは、せめてデザインで個性を出さなければ、読者の方に楽しんでいただけません!

と言うわけで、急遽テコ入れ加えてブログに花を添えてやりたいと思います!

うかつにブログ訪問しまくると、自身のモチベーションを削がれる危険性があるので、探索は1日1時間までに止めておきましょう!

ブログカスタマイズのデメリット対策

ブログカスタマイズの最大のデメリットは、なんと言っても記事の更新が止まってしまうことです!

デザインにこだわり始めるとキリがなくなってしまい、記事を書く以上に時間を取られてしまいますからね

なので、私は1度のカスタマイズで1部分しか手を付けないことに決めました。1つ修正できたら1記事書きます

優先すべきは、記事を書くことです!!

また、1度に2部分以上手をつけると、PCやスマホで見たときにデザイン崩れがあちこちで多発することがあります

直してヨシ!する現場ネコのイラスト

しかし、この方法ならそれも予防できます!

そしてトドメに、ブログカスタマイズを記事にすることでブログ更新の停滞もしません!

完璧な計画です!!

ブログテーマは変わらずSmoothを使い続けるので、一緒の方は参考にしてください♪

Smoothテーマ-ヘッダーのカスタマイズ

以前のヘッダーはこんな感じでした

1つ前のheaderデザイン画像
1つ前のheaderデザイン

〜
#blog-title {
background: #fff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
margin-bottom: 2em;
max-width: 100%;
padding: 1% 0 2%;
}
〜

まさにシンプル イズ ベスト!

でも、シンプルすぎて個性は感じられません…

特徴を出すために何か要素を足しましょう。ブログタイトルが”ふくさぎの知恵”と言うことなので、知恵を象徴する果物ーーーリンゴを飾ることにします!

ちなみにリンゴは私の大好物でもあります。はい、どうでもいい情報でしたね!

楽しそうにゆれるリンゴのGIF

美味しそうなリンゴのGIF

さて、リンゴの画像を用意しました。ちなみに、ただのリンゴだと味気ないので美味しそうに揺れるGIFにしてあります

GIF画像は下記のサイトで簡単に制作できます!

無料GIFアニメ作成「AlpacaDouga(アルパカドウガ)」

有名どころのブロガーたちもGIFをよく愛用してますよね

また、リンゴがなっている木をイメージするために葉っぱも生やしてみましょう!

木の葉の画像

木の葉の画像

 でそれらをあわせたCSSがこちらになります↓↓

〜
#blog-title {
background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/h/hukusagi/20210405/20210405223207.gif)-15px 0px no-repeat,
url(https://cdn-ak.f.st-hatena.com/images/fotolife/h/hukusagi/20210405/20210405223158.gif)125px 68px no-repeat,
url(https://cdn-ak.f.st-hatena.com/images/fotolife/h/hukusagi/20210405/20210405223207.gif)45% -20px no-repeat,
url(https://cdn-ak.f.st-hatena.com/images/fotolife/h/hukusagi/20210405/20210405223158.gif)77% 70px no-repeat,
url(https://cdn-ak.f.st-hatena.com/images/fotolife/h/hukusagi/20210405/20210405223207.gif)101% 35px no-repeat,
url(https://cdn-ak.f.st-hatena.com/images/fotolife/h/hukusagi/20210405/20210405223154.png)repeat-x;
margin-bottom: 2em;
max-width: 100%;
padding: .3em 0 2em;
}
h1{margin-bottom: 0;}
#title{font-size: 215% !important;font-weight: bold;}
〜

どうですか?このbackgroundのカオスな感じ...

リンゴのGIF画像を欲張って使いまわしたため、こんなややこしい設定になってしまいました!

実に見にくい!!

しかし、おかげでブログにちょっとだけ個性が実ったような気がします!(リンゴだけに略

これで私のブログモチベーションも回復できました。明日も頑張れそうです!!

やはり自分好みなブログで記事を書けるということは精神的に大切ですね♪

今後もちょくちょくカスタマイズして、その記事を更新しようと思いますのでよろしくお願いします!