WEB MEMO LOG

  • WordPress

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

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

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

  • WordPress

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

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

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

  • WordPress

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

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

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

  • Web

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

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

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

  • Web

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

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

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

  • Web

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

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

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

  • JS

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

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

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

  • CSS

【CSS】iOSで横スクロールがカクカクするのを滑らか(スムーズ)にする方法

【CSS】iOSで横スクロールがカクカクするのを滑らか(スムーズ)にする方法

iOSで横スクロールをする際、カクカクとぎこちない感じになります。それを解決する方法をメモメモ。

  • JS

【JS】jQueryでブラウザの画面サイズで処理を判定する方法

【JS】jQueryでブラウザの画面サイズで処理を判定する方法

レスポンシブサイト等で、スマホのときには特定の処理をして、PCの場合は処理をしたくない場合がありますよね。 例えば、スマホではアコーディオンでクリックしたら詳細を表示するけど、PCの場合はアコーディオンを使用せず、詳細を常に表示状態にするなど・・・。 そんなときのための、ブラウザの画面サイズによって、処理をする方法をメモメモ。 ▼読み込み時とリサイズ時の画面サイズによって処理を判定する ▼リサイズ・・・

  • WordPress

【WordPress】メディアの最大アップロードファイルサイズを変更する方法(レンタルサーバ・マルチサイトの場合も)

【WordPress】メディアの最大アップロードファイルサイズを変更する方法(レンタルサーバ・マルチサイトの場合も)

WordPressのメディアでファイルをアップロードする際に、最大アップロードファイルサイズがアップロードするファイルサイズより小さいため、アップロードできないということがありました。 その解決方法をメモメモ。 ▼php.iniで変更する方法(※下記では30MBに設定) ▼.htaccessで変更する方法(※下記では30MBに設定) 【参考】WordPressの最大アップロードファイルサイズを変更・・・

  • CSS

【CSS】BODY内で外部CSSを読み込む方法

【CSS】BODY内で外部CSSを読み込む方法

<head>内を変更できない場合、<body>の中で<link>を使ってCSSを読み込んでも動作しますが、文法的にNG、今後不具合が起こる可能性もあるとのことで、JSを使って<body>内で外部CSS等を読み込ませる方法をメモメモ。 ▼「style.css」を読み込ませる方法