ブログの内部をいろいろ改善してみました【2017年】

脱jQueryをしようと思っていろいろやってみましたが、自己満足の域をこえてないと思います。ページの読み込みがはやくなるわけでもない感じ。ただ、CSS3だけでいろいろできることが分かったのは収穫かも。

変更点まとめ

■ 見た目の変更
・ブログカード風デザイン
・画像の横幅を600pxにする
■ 内部構造の変更
・IE9以降に対応（IE8以下は捨てる）
・jQueryを使わないように
・CSS3で代用できるものは代用する
・モバイル表示を少し改善
・アイコンは、フォントに置き換え

Lightboxはもう必要ない感じだけど、古い記事の画像がどうなってるのか不明なので形だけでも残しておく

見た目の変更

商品表示とかブログ記事表示とかに、カード形式を採用してみました。



私は使用してませんが、Wordpressなら上記のプラグインを使うと、ブログカードは導入できるようです。



画像のサイズも横幅600pxに変更しました

内部構造の変更

■ メニューボタンで左サイドバーが出てくる部分をCSS3化
■ 検索ボタンで、検索BOXが出てくる部分をCSS3化
■ 検索ボタン、メニューボタンは、フォントに変更
■ パンくずリストに、フォルダのフォントアイコンを表示
■ コメント欄の開く（閉じる）部分をCSS3化

まったく関係なさそうな「ラジオボタン」や「チェックボックス」でアコーディオンメニューが作成できる理由

---

JavaScriptを使わずにCSSだけでアコーディオンメニューを作成できる
スマホ対応も！アコーディオンメニューの簡単な作り方 [ホームページ作成] All About

・隣接セレクタ - CSS | MDN
・:checked - CSS | MDN

上記のCSSセレクタとチェックボックス（or ラジオボタン)を使うとJavascriptなしで実装できます。
:checkedはCSS3なのでCSS3以降のブラウザで動作します。


■ カテゴリーの開く部分
■ アーカイブの開く部分
■ タブメニューの切り替え部分
この部分も同じ原理で、Javascript（jQuery）なしで実装できます。

■ 読み込み中にLAODING表示する（CSS3のみで可能）
■ モバイルの時に記事一覧を自動読みこみする部分をJavascriptで実装


■ LightboxのjQueryを使っていたところを、CSS3+javascriptに変更

・JavaScript不要、HTML/CSSコピペで実現するすごいスタイル10個まとめ - PhotoshopVIP

CSS3で作る汎用的なモーダルウィンドウのところは、上記のリンク先の「Lightbox ライトボックス」の部分を参考。ただし、画像を動的に読むのはCSS3では無理なのでその部分だけJavaScriptで実装

・:target - CSS | MDN

CSSセレクタに:targetを使うのがコツのはず

■ 拍手ボタンを押したときに、「送信中」などのメッセージを表示するように変更

■ ソース表示のCSSを従来の緑色風に変更する
■ モバイル表示の時も、パンくずリストを表示する

jQuery $.ajax()の部分をJavascriptで

var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";
xhr.open(method, url, true);
xhr.onreadystatechange = function () {
        if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
xhr.send();

・XMLHttpRequest.onreadystatechange - Web API インターフェイス | MDN

古いIEを無視してもよい状態なら、上記のようなロジックに置き換えるだけでOK。