マサトラ

WordPress

【MW WP Form】電話番号・郵便番号の入力時に数字キーボード(テンキー)を起動させる方法

WordPressでサイト制作をする際、かなりの確率でお問い合わせフォームを実装することになるかと思います。MW WP Formは保守中の既存サイト向けとして利用し、導入前にWordPress公式ディレクトリで最新の対応状況を確認してくださ...
CSS

【CSS】スマホではhoverを無効にする方法(PCだけホバーを有効にする)

サイトをコーディングしているとき、ほぼ必ずリンク要素などにホバーアクションを付けるかと思います。ホバーアクションを付与するには、CSSで:hoverを使いますよね。:hoverを付けた要素にPCのマウスカーソルを合わせれば、要素の色が変わる...
CSS

Swiperでページネーションの左右に「前へ / 次へ」ボタンを配置する方法

Swiperを使ってスライダーを作る際に、ページネーション(dots)の左右に「前へ / 次へ」ボタンが並んでいるデザインを実装するケースがたまにあります。例えば、以下のような画像のものです。Swiperのドットの左右に、「前へ/次へ」ボタ...
WordPress

WordPressのURL正規化を.htaccessで行う方法【HTTPS・www・index対応】

同じページが「http/https」「wwwあり/なし」「index.phpあり/なし」で表示されるときは、正規URLを1つに決めて301リダイレクトします。この記事では、Apacheで動くWordPressサイトの.htaccessに記述...
環境開発

Chromeの開発者ツールでAndroid実機の表示を確認する方法

Web制作をしていると、PCではきれいに見えているのに、Androidスマホで確認したらレイアウトが崩れていた、ということがありますよね。特に、余白の見え方、改行位置、固定ボタンの重なり、タップしやすさあたりは、レスポンシブモードだけでは気...
JavaScript

【CSSのみ】Swiperスライダーのページネーションを縦並びにする方法【pagination】

Swiperのスライド方向は横のまま、ページネーションだけを縦並びにしたい場合は、JavaScriptのdirectionオプションではなくCSSで配置を変えます。この記事では、ページネーションをPCでは縦、スマートフォンでは横に切り替える...