ブログデザイン変えましたーー！
これが以前のデザイン
シンプルでとっても見やすくて重宝してます！！
今もベースはBrooklynです。ありがとうございます＞＜
タイトルだけ画像に変えたいなぁと思って、画像作って配置してみたら全体的に修正した方がいい感じになって…
色々いじってたら結果的にこうなりました。
ピンク！！！！
目がチカチカするわ！！！ってね。
デザイナーさんがいたら「ブログって文章読んでもらうのが目的だよね？文字以外のアイテム目立たせてどうするの？」とか怒られそうな感じに仕上がりましたが、これでしばらく運用していく所存です。
私自身が「目がチカチカするわ！」ってなったらやめます。。 笑
だんだんと薄いピンクになっていくかもしれない…
スマホデザイン変更の参照サイト
そういえば、やんわり今月から”はてなブログプロ(有料版)”になってます私！てへぺろ。
やっぱりスマホのデザインを綺麗にしたくて…。
スマホのどこをいじろうか…？って時に参考になったのがこちらのサイト
すごく助かりました。。
ありがとうございます！！！
とっても参考にしたサイト
見出し、SNSシェアボタン、グローバルメニュー、目次はこちらから！
とてつもなく参考にしました。
ありがとうございます！！！
細かいコード修正は自力で
あとの細かい部分が結構困りました。
ググっても見つからないんだもん！！
例えば…サイドバーの吹き出しの色ってどうやって変えるんだろー？…とか、この線もっと太くしたいけどどうすればいいの…？とか。。
超ググった。ググったけれど見つからない……
探したけれど見つからないなら……
一緒に踊りませんか？
みたいな現実逃避をし始めたところで気づきました。
自分で書けばいいんだーーー！！って。
ーーいつから僕らは与えられることに慣れてしまったんだろう。
はい。ちなみにワタクシ前職IT企業ですが企画職です。
htmlちょっと触れる。CSSは怖い。そんな感じです。
そんな感じだけどカスタマイズできたので、その方法を書いておきますね。
んでも需要あるのか分からないし…
超雑に説明するね！！
ブラウザはChrome使ってるよ！
サイドバーの吹き出しをカスタマイズしてみよう
修正したい部分を右クリックして「検証」を選択したら↓こんな画面になるよ！
今回はサイドバーの吹き出しの色を変えてみようね。
※画像が小さかったらクリックしてね（PC限定）
そしたら、右下の部分↓にCSSのコードが出てくるの。
この「.hatena-module-title」ってやつがサイドバーの吹き出しのことを指してるの。
吹き出しの中の文字色を変えたい場合は「color: #F00C95;」を修正する。
#F00C95の部分をクリックすると入力できるようになる。
あ、この状態でコードをどう変更しようが、自分のブラウザ上でしか反映されないから安心して好き勝手いじって大丈夫。リロードしたら元に戻るよ。
#以降の数字を変えたい色の文字コードに修正するよ。
黒のコード（#111）にしたらこうなる。
「プロフィール」とか「人気記事」の文字色が変わったよね！
ちなみに、色以外を変更したい場合は…
色変更はcolorって書いてるとこ修正すればイイんだろうなって分かりやすいけど、それ以外で困ったら、やりたいこと＋CSSでググって、どの部分修正すればいいのか調べるといいよ！
吹き出しの線の色を変えたい場合は「border: 2px solid #F00C95;」の#以降を変えたい文字色のコードにするよ。
はい。線が黒くなりました〜！！
めでたしめでたし！
「あれれ〜？三角の部分だけ色が変わってないよ〜？」
…勘のいい子供が紛れ込んでたみたいです…
はい。そうですね。。
三角部分だけは別に指定する必要があるみたいなので、この部分を探します。
右上のゾーンで「hatena-module-title」（これは吹き出しを指してる）の下にある「before」が怪しい気がします。
怪しい部分を押すと↓のような感じになる。
↑この三角部分に注目。
なんか三角が指定されてる感出てるよね！出てる出てる！
ってことでこの部分を修正したいなら右下ゾーンの「.hatena-module-title:before」を修正すれば良いと分かります。
ここの「border-top-color: #F00C95;」をさっきと同じように色コード修正すれば…
はい！吹き出しの色が変わったね！
めでたしめでたし…
じゃなくて、この状態だとただ一時的にブラウザの表示を触っただけだから、
はてなブログに登録しないといけないです。
修正した部分をコピーする必要があります。
コピーするのはここ！
つまりこれ↓
.hatena-module-title:before {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0;
height: 0;
border-width: 12px;
border-style: solid;
border-color: transparent;
border-top-color: #111;
}
変更した部分だけでもいいけど面倒なので全部コピーする！！
コピーしたらこれを
管理画面のデザインカスタマイズのCSSのところに貼ってください。
これだけだと三角部分しか色が変わらないから、
吹き出し部分の「.hatena-module-title」の修正したやつもコピーして貼り付けてね！
以上！！！
こんな感じで、変えたい部分を右クリックして「検証」して、CSS見てポチポチ自分で変更したら探し回るより楽だったよ！！！
超雑に説明しましたが、、何かしらのお役に立てると幸いです。。
【こんな記事アルヨ】
