Web Design Leaves

MAMP を使ってローカル環境にマルチサイトの WordPress を構築した際に気づいたことのメモ。WordPress のローカル環境へのインストール、MAMP のインストールや基本的な設定は色々なところで書かれているので省略。 MAMP のインストールや基本的な設定等に関する参考サイト 「MAMP を使ってお手軽にローカル WordPress 環境を構築…

続きを読む

WordPress と jQuery Mobile で構築したサイトで Infinite Scroll を使ってコンテンツを読み込むと、何故か読み込まれたコンテンツのリンク（a 要素）が認識されなかったのでその解決方法に関するメモ。 現象 読み込まれたコンテンツのリンク（a 要素）の色が反映されない。 リンクにマウスオーバーしてもカーソルはデフォルトのままで…

続きを読む

WordPress と jQuery Mobile で構築したサイトで Infinite Scroll を使ってみた際のメモ。 WordPress で構築したサイトで Infinite Scroll を使うのとそれほど違いはないが、いくつか気づいた点。 Infinite Scroll の読み込みと記述 Infinite Scroll のインストール：「Wor…

続きを読む

HTTP ヘッダ（Expires ヘッダ）を追加して、ファイルをブラウザにキャッシュさせるように .htaccess にキャッシュの期限を指定しているのに、YSlow の評価を見ると何故か JavaScript だけがキャッシュされていなかったのでその解決方法のメモ。 結論としては、ExpiresByType での JavaScript のファイルタイプの指…

続きを読む

WordPress のバックアップ用プラグイン「UpdraftPlus」を使用していたところ、ホスティングプロバイダ（レンタルサーバー）より「20~30のバックアップが同時に作成されそうになっていたため、UpdraftPlus を無効にしたので、必要であればマニュアルでバックアップを取るように」との連絡が来たのでメモ。 原因として考えられるのは、WordPr…

続きを読む

WordPress で Infinite Scroll を使った際のメモ。 Infinite Scroll には WordPress 用のプラグインもあるが、それは使わず jQuery のプラグインを使用。使用したページはカスタム投稿タイプのアーカイブページ（archive-xxxx.php や taxonomy-xxxx_cat.php）でページネーション…

続きを読む

いつも忘れてしまうのでメモ。詳細は以下のサイトで。 参考にさせていただいたサイト：hail2u.net「floatで並べたリストのセンタリング」 以下のように、li 要素をフロートさせた場合、それらを中央寄せするには、「text-align: center;」や「margin: 0 auto;」ではうまくいかない。 以下のようにすると中央寄せできる。 ul …

続きを読む

スクリーンサイズに合わせてフォントサイズを変更方法のメモ。（2018/1/20 更新） 以下もよろしかったらご覧ください。 「レスポンシブ Web デザイン 作成資料」 文字のレスポンシブ対応 レスポンシブ・タイプセッティング 画面幅（ウインドウサイズ）によって文字サイズを変化させる手法をレスポンシブ・タイプセッティングと言います。レスポンシブ Web デザ…

続きを読む

以下の情報の方が新しいものになりますので、よろしかったらご覧ください。 「レスポンシブ Web デザイン/レスポンシブイメージ」 スクリーンサイズに適した画像を読み込む方法のメモ。 １つの大きな画像をフルードイメージ（下記）で表示する場合、スマートフォンでもデスクトップ用の大きな画像を読み込むことになり表示が遅くなる。 フルードイメージによる画像の調整 フル…

続きを読む

文字周り（タイポグラフィ）の基本設定 html 文書全体の font-size, font-family, line-height を記述する。 ほとんどのブラウザーのフォントサイズは標準で「16px」なので html 文書全体の font-size は100% を指定 日本語のテキストでは一般的にフォントサイズの1.5倍が読みやすい行の高さとされている。 …

続きを読む