ブログのテーマを新しくしました！　遅ればせながらレスポンシブになりました

本当に今更なんですが、ブログのテーマをレスポンシブで再作成しました！　できるだけ見た目が変わらないように作ったのでマイナーアップデート感強いですがw、コードとしてはイチから作り直したので私的にはメジャーアップデートです！

あまり見た目は変えませんでした

このブログはExcelとかMSOffice系の記事を読みに来る方が多いので、ガラっと雰囲気変えちゃったら違うサイトだと思われちゃうかな、そういうクラスタの方ってあんまりそういう変化は好まないんじゃないかな…、などと思ったりして、見た目はほぼ同じになるように作りました。まぁあと、なんだかんだ気に入ってるからということもあります。

最後に大きく手を加えたのってこの記事だったので、5年くらい使ってましたね…、、ながい…ですね…。。（そうは言ってもちょこちょこ手は加えていましたが。）

あっ、あと、今回IE8以下は全く対応してません！　アクセス解析見ても1%以下でしたので、バッサリいかせていただきました、すみません！　IE9も若干アウトな部分もあります！　趣味のサイトなのでそのへんはもう対応しないスタンスで行きます！

従来/PC

まあこんなかんじでした。スプライト画像とか使ってたんだぜ…！

新規/PC

こんな感じになりました！　アイコンフォントすごい！！　めっちゃ便利！！！　もう戻れない！！！　付箋のCSSはこちらのサイトを参考にさせていただきました！　ありがとうございます！！

• CSS3だけでつくる付箋紙(Post it)風Box | 制作ノート |Himpotan web – ヒンポタンウェッブ –

あと、私はブログで子カテゴリって作っていなくて、大分類がカテゴリ、中分類がタグ、という使い方してるんですよね。そのあたりもうちょっと上手に使えないかなーと思っていて、今回「そのカテゴリで使われているタグ一覧」というものが出るようにしてみました。こちらはまた別途記事にしたいと思っています。

新規/タブレット

今までタブレットの方にはPCレイアウトでご覧になっていただいていたのですが、今回新たにタブレット用レイアウトも実装しました！

従来/スマートフォン

• Multi Device Switcher — WordPress プラグイン

今までは別テーマを用意して、こちらのプラグインを利用してテーマを振り分けていました。それと、メニューはボタンタップで上から降りてくるパターン。

新規/スマートフォン

ヘッダー画像を出し分けて、メニューボタンをスクロールしても追従するように。今度は右から出てきます！　このへんはアゼガミさんのブログからめちゃめちゃ勉強させていただきました！　いつもありがとうございます！！！

• 【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS) | UNORTHODOX WORKBOOK | Blog
• JSを使わずにアニメーションしながら展開するドロワーメニュー(スライドメニュー)の実装方法 | UNORTHODOX WORKBOOK | Blog

コンテンツ比較

全体的に、スッキリ＆ゆったり、みたいな感じに。OS違うと見た目違うと思いますが…。（こちらはWin+Chromeのキャプチャです。）

その他、いろいろ

フッターのカラム切替とか、adSenseをレスポンシブにしたのでその調整とか。ページネーションも見た目が切り替わるようにしてあります。まだまだ確認しきれてない部分もたくさんあって、しばらく動作確認しながらの微調整が続くかと…。いろいろやってみた部分はまた記事にしてみたいと思っています！

レスポンシブって私のような古代遺産のWeb技術しか知らない人間は本当に踏み出すのが怖くて、だいぶ長いこと足踏みをしていたのですが…、、何ヶ月もちょっとずつちょっとずつ進めて、やっと公開にこぎつけることができました。

自分しか使わないブログでこんなに大変なのに、配布テーマを作ってる方は本当にすごいです。自分で作ってみることでそのすごさって実感できるので、すごい！　素晴らしい！　という気持ちを、もっともっと表明していきたいですね。

というわけで心機一転、またよろしくお願いいたします。