トップ   >   記事表示

(追記あり)【お知らせ】ブログの見た目を全体的にちょこちょこ改修しました。

URL: http://tech.kimihiko.jp/article/185299577.html

このエントリーをはてなブックマークに追加
(追記あり)【お知らせ】ブログの見た目を全体的にちょこちょこ改修しました。

■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サイトに近づけたと思います。

まぁ今までが似ても似つかないかんじではありましたが…。
(修正できないもんだと思ってた部分もあったので。)



主な変更点は以上です。
ほか、細かい調整を行いました。


なるべく見ていて
気持ちのよいブログサイトにしたいなと思っています。

いじょう。


関連する記事(広告含む)
コメントを書き込む
名前 ※ご自由に

メールアドレス ※ご自由に

ホームページ ※ご自由に

コメント ※必ず

  • コメントがうまくできない場合などはこちらをご確認ください。