【DIVER】黒メインカラーのブログから、白メインカラーに変更しますのご報告

 

こんばんはお久しぶりですウノログです。

更新が滞りすぎました

本当すみません!

忙しすぎて、毎月やってる振り返りさえできていません。汗

 

原因分析

で、何が原因だったのかというと具体的には下記の通り

  • がらっと生活環境が変わってしまった(転職)
  • そもそも「ブログ熱」がなくなってきてしまった

っていうのがあって、

「ブログ熱」に関しては

やっぱり「メインカラー黒」って見づらくね?ということが1年越しに気づくことができて、デザインを一新しようと思います。

 

黒メインカラーのブログでの振り返り

良かったとこ

  • 写真がとにかく映える
  • 目が疲れない
  • 他のブログと差別化できる

が挙げられます。

特に、僕のブログは主に写真メインのブログなので、置くだけでスタイリッシュな雰囲気を作り上げることができました

悪かったところ

  • 所々見づらさを感じる
  • 配色の細かい設定がすごく大変(たぶん30時間ぐらいかけた)
  • 全体的にサイトが重くなる
  • カスタマイズに苦労する(DIVERの無料相談にだいぶ助けられました)

以上です。

 

もっと見やすくして、アクセスアップを狙いたいところ。

 

デザイン振り返り

細かな設定とか

僕が使ってるテーマは「DIVER」です。

いつかメインカラー黒に戻したいと思える日が来るかもだから一応記録しておきます。

※今後メインカラー黒で考えている人は絶対参考になると思います(時間かけてやっとできた配色なので)。

基本カラー

  • 背景色 #303030
  • 文字色 #c6c6c6
  • リンク #ffffff
  • リンク(マウスオン時) #1e73be
  • 投稿内文字色 #c6c6c6
  • 投稿内リンク #5da0e3
  • 投稿内リンク(マウスオン時) #ededed
  • ヘッダー背景 #0a0a0a
  • ヘッダーテキスト #c6c6c6
  • ヘッダーリンク #ffffff
  • ヘッダーリンク(マウスオン時) #6495ED
  • ミニヘッダー背景 #0a0a0a
  • ミニヘッダーテキスト #dddddd
  • ミニヘッダーリンク #fff
  • ミニヘッダーリンク(マウスオン時) #6495ED
  • 固定ヘッダー背景 #0a0a0a
  • 固定ヘッダーテキスト #bcbcbc
  • 固定ヘッダーリンク #0a0507
  • 固定ヘッダーリンク(マウスオン時) #6495ED
  • 独立メニュー背景 #262626
  • 独立メニューテキスト #2d2d2d
  • 独立メニュー背景(マウスオン時) #5d8ac1
  • 独立メニューテキスト(マウスオン時) #fff
  • スクロールメニュー背景 #0a0a0a
  • スクロールメニューテキスト #ffffff
  • ビッグフッター背景 #fff
  • ビッグフッターテキスト #333333
  • ビッグフッターリンク #335
  • ビッグフッターリンク(マウスオン時) #6495ED
  • フッター背景 #3a3a3a
  • フッターテキスト #999999
  • フッターリンク #333355
  • フッターリンク(マウスオン時) #6495ED
  • ウィジェット背景 #1c1c1c
  • ウィジェットテキスト #d8d8d8
  • ウィジェットリンク #d8d8d8
  • ウィジェットリンク(マウスオン時) #6495ED
  • 投稿ブロック背景 #1c1c1c
  • ドロワーメニュー背景 #fff
  • ドロワーメニュー内テキスト #000
  • ドロワーメニュー内ウィジェットタイトル背景 #932914
  • ドロワーメニュー内ウィジェットタイトル文字色 #ffffff
  • フッター固定メニュー背景 rgba(40,40,40,0.8)
  • フッター固定メニューテキスト #333333
  • ページネーションボタン背景 #aaaaaa
  • ページネーションボタンテキスト #eaeaea
  • ページネーションボタン背景(現在) #aaaaaa
  • ページネーションボタンテキスト(現在) #fff

デザイン設定

h2(見出し2)設定

  • 基本色 #dbdbdb
  • 文字色 #000000
  • スタイルリボン

h3(見出し3)設定

  • 基本色 #7f7f7f
  • 文字色 #eaeaea

 

DIVER設定(ヘッダーメッセージ)

  • 背景色 #f2f2f2
  • 文字色 #595959

 

追加CSS

.sc_getpost {
background-color: rgba(255,255,255,0.8);
}
.sc_getpost:hover {
background: rgba(255,255,255,0.7);
}
.sc_frame {
background-color: #000;
   color: #666;
}

.cat-item .count,.widget li a .count {
background: #eee;
color: #666;

 

まとめ やっぱ白のが見やすい

ということで、メインカラー黒から白に変更しますよって記事でした。

随時、メインカラー白に変更していきます。

これを機にPV数も伸びたらいいな。また効報告します!

更新情報は、Twitterで!

ここまで読んでいただきありがとうございます。更新情報は、Twitterでお届けしてますので、良ければフォローお願いします!また会えること楽しみにしてます

 

 

Twitterでフォローしよう

おすすめの記事