WEB MEMO LOG

【JS】ブラウザの高さを自動で取得しCSSに設定する方法

フル画面やファーストビューでブラウザの高さいっぱいにビジュアルを表示したい場合、幅は「width:100%;」で設定できますが、ブラウザの高さを取得して、その値をCSSに反映する方法をメモメモ。 【参考】【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定 | Webデザインラボ

【WordPress】Smart Custom Fieldsで作成したカスタムフィールドをMW WP Formの選択項目に使用する方法

普段よくお世話になっているWordPressプラグイン、繰り返しのカスタムフィールドを作成できる「Smart Custom Fields」、柔軟なカスタマイズが可能なフォームを簡単に作成できる「MW WP Form」。 クライアント側でフォームの選択項目を編集したいという要望があり、「Smart Custom Fields」で作成したカスタムフィールドの値を「MW WP Form」の選択項目で使用・・・

【WordPress】httpからhttpsへ常時SSL化する方法（シングルサイト・マルチサイト対応）

Googleが常時SSLを推奨しており、ChromeのアドレスバーにおけるWebサイトの安全性表示の内容が変更になると発表しています。 それに伴い、WordPressで構築されているサイト（シングルサイト・マルチサイト）を常時SSL化することが多くなりまして、方法をメモメモ。 ■シングルサイトの場合 ●「設定」⇒「一般」の[WordPress アドレス (URL)][サイトアドレス (URL)]を・・・

【WordPress】優先度付きのサムネイル画像の表示方法（アイキャッチ・記事の最初の画像）

WordPressで記事のサムネイル画像を表示したいとき、アイキャッチがあれば、アイキャッチを表示、なければ記事の最初の画像（自動リサイズ・絵文字を除外）、それもなければあらかじめ設定した画像を表示する方法をメモメモ。 【優先度】 [1] アイキャッチ [2] 記事の最初の画像 　・画像サイズが大きい場合でも自動的にリサイズ 　・画像より先に絵文字（GIF）を使用した場合でも、絵文字をサムネイルと・・・

【WordPress】プラグインなしでFacebook、TwitterのOGPを設定する方法

今やSNSでの拡散等を考慮すると、必須設定事項のOGP（Open Graph Protocol）ですが、WordPressでプラグインを利用せずに設定する方法をメモメモ。 ▼下記のように表示（参考：Facebook・TwitterのOGP設定方法まとめ｜ferret [フェレット]） ▼WordPressでのOGP設定 設定ができ公開が完了したら、どのように表示されるか確認してみましょう。 ■Fa・・・

【WordPressプラグイン】「EWWW Image Optimizer」で使用する画像を自動で圧縮・リサイズ

WordPressで画像を登録する際に毎回リサイズが面倒だったり、必要以上の画像サイズで登録されてしまったりとするケースがあるかと思います。 そこで、プラグイン「EWWW Image Optimizer」を使って画像を登録する際に自動でリサイズ、しかも圧縮してくれる方法をメモメモ。 【1】プラグイン「EWWW Image Optimizer」をインストール https://ja.wordpress・・・

【XAMPP】任意のディレクトリをバーチャルホストにする方法

Cドライブ直下にXAMPPをインストールした場合は、 C:\xampp\htdocs にデータを保存するとPHP等の確認はできますが、 任意のディレクトリでも確認したい場合のメモメモ。 【手順1】 フォルダパスとドメイン名の設定 C:\xampp\apache\conf\extra\httpd-vhosts.conf 【手順2. アクセス権付与】 C:\Windows\System32\Drive・・・

【Sass(SCSS)】よく使う便利なコード

Dreamweaver CC 2017でSassにも対応し、ますます広がっていくのかなというSass。 よく使う便利なコードをメモメモ。 ▼変数 ▼インターポレーション ▼Compassで「引数を使った@mixin」を駆使する ▼Media Queries ※コメントに日本語を使うとエラーが出る場合 1行目に下記を記載 【参考】Sassを極める！デザイナーがすぐ実践できる基本テクニック12連発 【・・・

【FONT】自分のPCにインストールされているフォントを一覧表示する方法

イメージに近いフォントがあるか確認したい時等、自分のPCにインストールされているフォントサンプルを一覧で表示する方法をメモメモ。 ■wordmark.it - helps you choose fonts!

【JS】子要素に特定のクラスがあった場合に親要素にクラスを追加する等、jQueryでよく使うメソッド

クリック時にクラスを追加するなど、よく使用するjQueryのメソッドをメモメモ。 ▼CSSの操作 ▼クリック時の処理 ▼クラスを追加 ▼画像名の変更