(追記あり)【お知らせ】ブログの見た目を全体的にちょこちょこ改修しました。
■20190103 改修箇所「右メニュー」を追加
あけましておめでとうございます!
去年からちょっとずつ触っていたのですが、
ブログの見た目を全体的にちょこちょこ改修しました。
リピーターの方は分かると思いますが、
【見た目】がちょこちょこ変わってます。
■■主な変更点
■webフォントの導入
一度やってみたかったってのもあって、
webフォントを導入しました。ブラウザにもよってはアレかもしれませんが、
よく見られているであろうchromeやIEではフォントが変わってると思います。
Google Fonts の Noto Sans JP というのにしました。
Google Fonts
https://fonts.google.com/■ヘッダまわり
ナビゲーションメニューぽいものを設置しました。これも前々からやりたかったことです。、
(過去には一時的に入れたりしてたのは思うんですが…
今まで入れてしっくり来たことはなく…)
ナビゲーションメニューを入れるにあたり、
異常に多いカテゴリを、なるべくかっこよく見せるには
どうすればいいのかなぁと悩んだ末、こんなかんじになりました。
色々考えたんですよね。。
ロールオーバーでサブメニュー出すとかも。。
でも個人的に隠れメニューってあまり好きじゃなくて。
常時見せておきたかった。
代表的なカテゴリのみを並べるかたちになりました。
【代表的】の選定は、今の僕の興味や思い入れの強いもの、
また、現状のトレンドに近いものを選んだつもりです。
さらに、なんとなくグループ化してみました。
デザイン的にも、シンプルやけどなんかカッコいい、というのを
やりたくて、試行錯誤の末、こんなグラデになりました。
CSS3で描画してます。これもちょっとやってみたかった系です(笑)
あとは
ロゴも含めてヘッダをセンタリングにしました。現状の構成だと、デザイン的にしっくりくるのがこれかなって。
センタリングも結構勇気いりました…。
これまでも何度か悩んで試行錯誤していたことがあったんで。
もう一点!
個人的に思いいれも強い、遊び要素の
【ことば】のコンテンツ※は、
ページのどこかに移動しました。(ランダムで一言が出てくるやつです。探してみてください。)
ずっとヘッダエリアに設置してきていたので
この変更も勇気がいったんですが、見た目的には
割といいかんじに収まったかなって思ってます(笑)
※現状PCサイトのみ
■右メニュー(20190103追記箇所)
右のサイドメニューも手を入れました。
かんたんにいうとシンプルにして、不要なもんはとって
バナーエリアを新設しました。
はてぶウィジェットを削除し、
注目コンテンツなどを紹介するバナーエリアを追加してみました。
またバナーエリアは【スクロールに追随するギミック】を入れました。
ただ対応ブラウザは限られます。
ChomeやEdge、firefoxではギミックがはたらきます。
IEは適用外です。
最近よくあるやつですよね。
これもトレンドに乗っかって、やってみたかっただけです。
きちんと実装はできてないです、たぶん。
■モバイルサイト
今まではベタのグリーンカラーの
テンプレートをそのまま使ってました。
が、なんとか手を入れられる部分を触って
PCサイトの見た目に近づけるように改修しました。
利用しているレンタルブログ「さくらのブログ」の制限で、
PCサイトのように、動的な背景の実装はできてないんですが、
雰囲気的には全体的にかなりPCサイトに近づけたと思います。
まぁ今までが似ても似つかないかんじではありましたが…。
(修正できないもんだと思ってた部分もあったので。)
主な変更点は以上です。
ほか、細かい調整を行いました。
なるべく見ていて
気持ちのよいブログサイトにしたいなと思っています。
いじょう。