シカゴぼっち

シカゴ郊外に在住。夫に息子ふたりの4人家族。

ブログのデザイン変更!私がしたことまとめとリンク【2019年】

すでにお気付きの方もいらっしゃる?と思いますが、最近ブログのデザインを変更しました。自らの忘備録として、変更したこと、参考にしたサイトをまとめました(^^)

 

 なぜ前のではダメなのか?

飽き性の私が単純に飽きたから。そして「ピンクが好きではないから」です。じゃあ、なんで2年もブログがピンクだったのか?…それは著作権フリーのピンクの水彩バナー素材を見つけたから。ただ、それだけです💦笑   
てか、ピンクのものなんて何も持ってないのにあのデザインを2年ほど使っていたことをむしろすごいと思うわ、自分。w


今回の色は、私の色のイメージを夫に聞いた結果「オレンジかエメラルドグリーン」と返ってきたからです。オレンジも緑も好きな色なので、今回は薄い緑にしましたが、まぁ私が飽き性なのでこの色に飽きたら次はオレンジかな…

 

そして参考にさせて頂いたサイトへのリンクもあります。
「お前のページにリンクなんか貼るんじゃねーよ(# ゚Д゚)」という場合は、お手数おかけしますが、ご一報お願い致します。リンク外しますので。。

 

前置きが長くなりましたが、さぁ、ではまとめです。

まずは、私の使用テーマは最初の数か月を除いてずっと「Innocent」です。カスタマイズがしやすいので飽き性の私でも長く使い続けられて、気に入っています😊

 

 

色の変更

今回は大幅に色を変更したので、色の配色は色のバランス帖を参考に、いろいろ試行錯誤しました。

今回は全然使いませんでしたが、ここも有名ですよね😊

www.colordic.org

さらに海外のサイトですが、気にいったサイトの使っている色を知りたいとき、分析してくれる優れもののやつです。http://webcolourdata.com/

ナビゲーションバー

前回のデザインからナビゲーションバー(メニューバー)のデザインは色以外は変更していません。しかし、色を変えたことによりメニューバーの字が読みにくくなってしまいました。なので、メニュー文字色を変更してみたものの…なぜかスマホでの色が変わらない…!

色々探して試した結果、はるなぴログさんのこの記事から抜粋して”.menu-toggle, .main-navigation a { color: #1e50a2 }”と適切な場所にいれたら解消されました!はるなぴさん、ありがとうございます!(色は変えています)

はてなブログテーマInnocentに色の統一感を出すカスタマイズ - はるなぴログ

 目次の変更

デフォルトのままの目次では少し味気なかったので、これも少しカスタマイズ。
あまり使わないですけどね(;'∀')

参考にしたのはオヨミヨさんのところを参考にしました。オヨミヨさん、とても面白いです。そして説明も丁寧なので、私のような初心者でも簡単にカスタマイズできました。ありがとうございます!!

「永久保存版!」はてなブログの目次デザインを自分好みにカスタマイズする方法 - オヨミヨ

そして中見出し、子見出しを目次から消すなどの細々したCSSは、ゆきひー さんのCSSを使いました。ありがとうございます。

www.yukihy.com

見出しの変更

↑大見出し

中見出し

小見出し

 見出しデザインは、もう足を向けて寝れない。サルワカさんのところを参考にしました。サルワカさんのところにはほかにも決められないくらいたくさんのcssが無料であるのです。こんな太っ腹な方、ほかにいらしゃいます?いや、いない。きっと。

 CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

太字に蛍光ペン

これ、斜字にするか太字にするか悩んだんですが、とりあえず太字にしています。
Headタグはこちらを参考にしました。

mu2in.hatenablog.com

そして細かい調整はこちらの説明を読んで、少し調整しました。

www.thoughts-make-things.com

どうだ!!!!

 

「続きを読む」を左寄せに

これこそ自己満。ただただ左側がいいと思ったから。ww ほんと、大したことじゃない...けど満足です😊 下のCSSを続きを読むのCSSの中に追加しました。

float: right;

参考にしたのはこちらです。

CSS float の使い方:左寄せ、右寄せ配置の指定 - ウェブランサー

SNSシェアボタン

とてもわかりやすい手順で、私にでもコピペで問題なくできました!ゆきひーさん神!

【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 - Yukihy Life

 スマホ画面も変更

スマホへのレスポンシブ対応のテーマを使っていますが、今回思いきってスマホ用にカスタマイズしました。

参考にしたのはこちら。

www.ituore.com

さらにカテゴリはこちらの情報を丸々コピペさせていただき、色のみ変更いたしました。

www.cucumberking.com

 本当はこれもやりたい

フォントの変更

これは今回は重くなりそうだったので、様子見です。
やはりフォントを変えているブログを見ると「おっ」と思うので、わたしもしたい!( *´艸`)

ヘッダ 

ヘッダね、ずれているんですよ、中心から。それがすごく気持ち悪い…(;´・ω・)なので、気力がわいたら、それも直したい…今はいいかな、とりあえず。。w

スマホ画面のメニューを直したい

今はその場しのぎとしてカテゴリのやつで手を打っていますが、本当はもう少しちゃんとしたPC版と同じようなメニューをスマホ画面にもつけたいのです。今回はうまくいかなかったので、断念しました。

 

いや~。ブログのカスタマイズはです。沼。お金のかからない沼ですが、ふと気が付くと時間もたちすぎていてビビるし、目も疲れます。なんなら肩も凝るし、運動不足になる(長時間座るから)

でも、ハマりすぎて、独身時代ならわたし、ごはんも食べず、寝ずカスタマイズしていたかも(;'∀') 息子たちと夫が邪魔しなければいなければずっとやっていた気がします。
むしろ邪魔してくれてありがとう…!

 

ここまでやってから書くのもなんですが、夫に言われたように

そんなん誰も気にしてない」と思うんです💦爆  たしかにコレいじってるあいだに記事5つ以上余裕で書けるだけの時間を費やしています😱😱ここまでこだわるよりもきっと記事を書いたほうがPVも上がりそう😂

だけどいいのです。PVはあれば嬉しいけど、でも自分が1番目にするものだから、自分が気に入っている方がいいです🤩(あくまで私は)

とりあえず力尽きたので今回はここまで。またこれに飽きたら(←えww) デザインいじり出そうかと思います🤪🤪