「たらハコ」ブログデザインをリニューアル!改良ポイント9をざくっと紹介!「動きのある」改良を加えました!

たらハコ新テーマ始動

今回はなかなか動きのある面白いデザインになったと思ってます!

よっひー(@yosiakatsuki)です。

2014年の夏が始まった頃からちょっとづつ作ってきたニューテーマを一旦完成とさせました!

まだいろいろとやりたいことはあるんですけど、今回のオリジナルテーマリニューアルのポイントを紹介したいと思います!

この記事の後にさらにテーマ変更されています↓

2014年夏「たらハコ」オリジナルテーマ リニューアル!

今年の夏の始め頃から着手したテーマリニューアルのポイントを紹介してみようと思います!

今回のポイント!

今回の変更点はざっくり以下の感じ!

  1. アイコンフォントからSVGへ!
  2. ナビゲーションのRWD調整
  3. Facebook風メニューの追加
  4. リンクをふわっと化
  5. Facebookコメントの追加
  6. Google AdsenseのRWD化
  7. サイドバーから新着記事を削除
  8. 記事とカテゴリ一覧では同一カテゴリの人気記事を表示
  9. サイドバー追従を廃止

ホントざっくりあげてみたつもりですが、思ったより変更点が多かったです…

詳細は個別に記事にしたいと思いますが、まずは概要だけ紹介していきます!

アイコンフォントからSVGへ!

一番やりたかったことは「SVGスプライト」!

今まではアイコンフォントを利用していましたが、アイコン表示までちょっともっさりしてたのが気になってたんです…

まずは今までアイコンフォントを使っていた部分をSVGに置き換えました。

アイコンフォントをSVGに変更!

Feedlyのアイコンだけは公式のpngを使う形なので、時々もっさりしますが、他の部分はSVGのコードをHTMLに埋め込む形になるので表示がなかなか高速になった気がします。

余談ですが、たらハコはCDNやキャッシュプラグインを使ってないので、表示の高速化はできる範囲で気を使っているつもりです。

ナビゲーションのRWD調整

ナビゲーションも今回のこだわりポイント!

PCで見てる方はぜひブラウザのスクリーンサイズを変えてみて頂きたい!

たらハコはBloggerで運営していた時からレスポンシブウェブデザイン(RWD)で作っています。

変更前のテーマでは「なるべく出たり消えたりしない。シンプルにいこう」って感じで作ってたのですが、今回はかなり「出たり消えたり」させました。

スクリーン横幅が小さくなると、幅に合わせてナビゲーションの表示が変わるようになってます!

ナビゲーションはスクリーンサイズによって変わる
スクリーンサイズが小さくなれば、ナビゲーションも変化する

最終的には横幅320pxでそれなりにしっくりくるようにしています。

Facebook風メニューの追加

ここはjQueryの勉強も兼ねてがんばりました!

前からFacebook風の横から「ぬーん」って出てくるメニューを作ってみたかったんです!

ぬーんと現れるFacebook風メニューを実装!

調べてみると、世間には便利なjQueryのライブラリが出回ってるようですが…

「そんなん使ってたら勉強にならん!!」

ってことで、自力でコーディングしました!

後ほど個別記事でどうやったかは紹介したいと思います!

ちなみに、メニューの中身もスクリーンサイズによって変わるようにしています。

リンクをふわっと化

リンクにカーソルを当てた時、文字色を変えたり、背景色を変えたりってことは前々からやっていたのですが、今回、リンクのホバーで色が変わるのを「ふわっと」させました!

リンクにカーソルを合わせると、ふわっと文字色や背景色がかわる

「ふわっと」はjQueryなどは使わず、CSSのみでやってます。

別に「かわいい」テーマにするつもりはないんですけど、だんだん「かわいい」テーマになってきた気がする…

ブログ全体を「ふわっ」とさせるカスタマイズはこちら↓

Facebookコメントの追加

これまではコメント欄のなかった「たらハコ」。

今回からはFacebookのコメント欄を追加して、コメント受付するようになりました!

Facebookコメント入力欄を追加

コメントするのにはFacebookへのログインが必要だったりと、「気軽さ」はないのですが、コメントいただけると大変喜びます。

Google AdsenseのRWD化

今までちょっと中途半端になってたGoogle Adsenseのレスポンシブ対応…

ようやく今回から3つ全てをレスポンシブにしました。

マルチスクリーン対応完了かな?

サイドバーから新着記事を削除

今回、サイドバーに置くコンテンツを少し見直して、サイドバーに置いていた新着記事をなくしました。

理由は「「わー!新着記事だー!」って見る人はいないでしょ。」って思ったからです。

きっと新着記事を見たかったらブログトップからみると思うんですよね。

そんな考えから新着記事は廃止しました!

記事とカテゴリ一覧では同一カテゴリの人気記事を表示

サイドバーに表示していた全体の人気記事と週間の人気記事は今回廃止しました。

人気記事より、関連する記事が表示されていた方が読者にとっては有用だと思うんですよね。

これも、考えをあとで記事にしてみようと思います。

ちなみに、個別記事とカテゴリ一覧以外は人気記事を表示しています!

サイドバー追従を廃止

今まで、「なんとなく」でサイドバーを追従させていましたが、今回はなくしました。

サイドバー追従も結構こだわってjQueryでコーディングしたんですけどね…

追従させたコンテンツが合ってなかったのかもしれませんが、今回は思い切って廃止です!

やりたいことはいろいろあるけど、一旦の区切りってことで!

まだまだやりたいことや、実際にiPhoneで見てみたら「あ。ここまだダメだ…」って部分はあるんですが…

ひとまずは区切りを入れて、本番リリースとしました。

今後はなるべくちょっとづつパワーアップしていこうかな…

その方が記事にもしやすいですしね!

今後の更新にも乞うご期待です!

よっしーのひとこと

よっひー

ブログを始める前は「CSSってなんぞや?」って感じだったんですけど、いつのまにやらSASSまで使うようになってました。

今後はjQueryとかもっとプログラミングチックな事に挑戦していこうと思ってます!

一応プログラマーなので、ロジカルな部分には多少強い自信があるし、やっぱコーディングしてるのが結構楽しいんですよね!

モブログツールの開発もいろいろ手を出したいかな!

ではまた。