「Tips」の記事一覧

ウェブサイトを構築するにあたって調べたことや学んだことを書き連ねています。

PhotoSwipeで画像を拡大した時に表示される残像
拡大画像とサムネイルの比率が違う場合

Tips

「PhotoSwipeで画像を拡大した時に表示される残像」サムネイル

CORESERVERのSPFレコード
Gmailが届かない場合の対処

Tips

「CORESERVERのSPFレコード」サムネイル

記事中の画像を全て取得してリンク付きで表示
サイト運営の記録を眺めて自己満足

Tips

「記事中の画像を全て取得してリンク付きで表示」サムネイル

あらゆるtransitionが効かなくて焦った話
メディアクエリ「prefers-reduced-motion」の設定

Tips

「あらゆるtransitionが効かなくて焦った話」サムネイル

地理院地図とGoogleマップを切り替えるブックマークレット
自宅で猟場候補の雰囲気を掴む

Tips

「地理院地図とGoogleマップを切り替えるブックマークレット」サムネイル

Gutenbergで「decoding="async"」
Helper Lite for PageSpeedプラグインを利用

Tips

「Gutenbergで「decoding="async"」」サムネイル

動的サイトの静的化
CMSで静的サイトを構築

Tips

「動的サイトの静的化」サムネイル

フォントサイズの指定を楽にするmixin
固定(pxとrem)とレスポンシブ(vw)で指定

Tips

「フォントサイズの指定を楽にするmixin」サムネイル

PhotoSwipeを画像へのリンクタグなしで使う
サイトのコーディングを修正せずに使う方法

Tips

「PhotoSwipeを画像へのリンクタグなしで使う」サムネイル

「position: sticky;」だけで下に固定するときの注意
JavaScriptで高さを計算

Tips

「「position: sticky;」だけで下に固定するときの注意」サムネイル

CSSだけでサイドメニューの固定
「position: sticky;」が効かない場合

Tips

「CSSだけでサイドメニューの固定」サムネイル

埋め込んだiframeのサイズを調整
transformで拡大縮小

Tips

「埋め込んだiframeのサイズを調整」サムネイル

Amazonアソシエイトのレスポンシブ対応バナー
メディアクエリで見せたいものだけ見せる

Tips

「Amazonアソシエイトのレスポンシブ対応バナー」サムネイル

function.phpでアソシエイトリンクを生成
Associates Link Builderの代替案

Tips

「function.phpでアソシエイトリンクを生成」サムネイル

Associates Link Builderで情報が表示されない
行儀よくない解決方法

Tips

「Associates Link Builderで情報が表示されない」サムネイル

スマホで大きな画像を見せる方法を模索
はみ出した画像を非表示にして、フリック(スクロール)で動かせるようにする

Tips

「スマホで大きな画像を見せる方法を模索」サムネイル

WordPressで投稿の最初の画像を抽出
アイキャッチ画像の指定もめんどくさい場合

Tips

……イキャッチ画像がサムネイルになるように、function.phpに手を入れてみた。 imgタグを抽出する正規表現はかなり簡素なものにしているので、利用状況によってはうまく抽出できないかもしれない。その時はもっと正しい正規表現を使えば大丈夫だと思う。 使いたい場所で「catch……

ショートコードに自動で付加されるpタグを削除
function.phpでカスタマイズ

Tips

…………

トップページに特定のカテゴリーを表示させない
function.phpでカスタマイズ

Tips

……ery -> is_home()」の「is_home()」を変更することで、検索結果やアーカイブなど他のページにも使用可能。 ……

is_preview()
記事が下書き状態が調べる

Tips

……広告を表示するようにした。 ……

.htaccessでリダイレクトする時にクエリを削除
QUERY_STRINGでクエリを指定

Tips

……RLに見せてくれる、大変便利なモジュールです。 例えば「hoge.html」というページを「fuga.html」にリダイレクトさせる場合、.htaccessには以下のように記述します。 「RewriteEngine on」はお約束。ちなみに「R=301」は、「ページは恒久的に移動……

Fancyboxでiframeを表示する際の高さを自動調整
ページ読み込み後の処理

Tips

……x」です。 この手のプラグインはLightboxが発表されてからいろいろ派生してきましたが、Fancyboxはオプションで調整できることが多くとても便利です。 唯一と言っていい不満が、iframeを使って別のページを表示させるときの高さ調整。場合によってははみ出したりするので、「画像は自動でち……

jQueryで外部リンクに「target=”_blank”」を自動付加
時代に合わせたサイト管理

Tips

「jQueryで外部リンクに「target=”_blank”」を自動付加」サムネイル

CSSでIEに疑似要素を指定する時の注意点
classの擬似要素は理解できないIE

Tips

「CSSでIEに疑似要素を指定する時の注意点」サムネイル

Google Appsでフォーム経由のメールを受信
Value Domainの場合

Tips

……フォームから送信されるメールが届きません。 Google Appsのヘルプページ「自分のアカウントにメールを送信するフォームをウェブサイトに配置したが機能しない」によると、それは正しい動作だそうです。 簡単な解決方法は、フォームの送り先メールアドレスをそのサイトのドメインとは別のメールアドレス……

Geocoder
Google Mapsで緯度と経度を測定

Tips

「Geocoder」サムネイル

Value DomainでGoogle Apps
よく見るValue Domainの設定画面と違う場合

Tips

「Value DomainでGoogle Apps」サムネイル

Windows IEでoverflowを有効にする
IEだけにスタイルを適用させる

Tips

……の羅列とかで起こったりします。))。CSSには「overflow」というプロパティがあり、指定した要素の幅や高さが、親要素の範囲を超えた場合に、どのように振る舞うかを以下の5つから指定できます。 visible:表示するhidden:隠すscroll:スクロールバーを表示するauto:自動(ブ……