投稿日：2021年11月25日 更新日：2021年12月6日 CSS, JavaScript 1671文字：約3分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/9030 ウェブサイト制作時。初心者のかたにありがちですが、「知らないうちに横スクロールバーが発生したけど消し方がわからない！」という問題があります。 そんな意図しない横スクロールが発生しているとき、問題となっている要素を一瞬で特定するテクニックを紹介します。 「CSSを使う方法」と「JavaScriptを使う方法」の2種類があります。 「JavaScriptを使う方法」は具体的にはブラウザのデベロッパーツールのConsoleを使う方法になります。 問題の原因と解決方法は？そもそもブラウザで意図していない横スクロールが発生するのは、CSSで横幅の計算を間違えて表示領域を超えてしまうこと

ワードプレスでカスタムフィールドを扱うときは100%ほぼ必ず「Advanced Custom Fields」を使っています。 Advanced Custom Fields (ACF) その［Advanced Custom Fields］で「フィールドタイプ：Wysiwyg エディタ」を指定できます。 ちなみに「Wysiwyg」は「ウィジウィグ」と読むそうです。 私も最近知りました。 この「Wysiwyg エディタ」はワードプレスのデフォルトの投稿や固定ページの本文を入力する機能と同じものを追加することができて、とても便利です。 しかしながら、何も考えずにthe_field();でフツーに出力すると「the_content();」や「the_excerpt();」と同じ扱いになり、整形されて<p>タグや<br>タグが自動で挿入されます。 今日はこの「p」と「br」が挿入される自動整形を無効化

【 jQuery】プラグイン無しで［Contact Form 7］にjQuery Datepicker（カレンダー機能）を追加する方法 ワードプレスプラグインの［Contact Form 7］使用時に、日付選択でカレンダー機能を追加する場合、4〜5年前までは［Contact Form 7 Datepicker］を利用するケースがほとんどでした。 しかしながら［Contact Form 7 Datepicker］はクロスサイトスクリプティング（XSS）の脆弱性が発覚し、すでに開発が終了しています。 公式ディレクトリからも削除されていますね。 同じ機能の代替プラグインとしては［Date Time Picker for Contact Form 7］が存在します。 Date Time Picker for Contact Form 7 もし［Contact Form 7 Datepicker］を

投稿日：2020年7月30日 更新日：2021年12月2日 HTML, jQuery 1859文字：約4分 Issey Hara 原 一勢 ONZE https://on-ze.com/archives/8136 ウェブサイトで音声ファイルを再生したい場合、HTML5で単純にaudioタグを使うだけで実現できますが、今回はさらにJQueryを利用して再生と停止をコントロールする方法を紹介します。 まずはHTMLの記述です。 <audio src="sample.mp3" id="audio" pause="pause" loop="loop"></audio> <button id="btn" type="button"><span>再生</span><span>停止<span></button> ここではわかりやすく、audioファイルにid="audio"を、制御するためのボタンを配置

画像の縦・横のサイズをループ内で動的に取得、表示する必要があり、その方法を調べたのでメモします。 PHPのgetimagesizeを使って簡単に実装できました。 基本的な使い方は以下のとおり。 <?php $file = "sample.png"; ?> <img src="<?php echo $file; ?>" <?php getimagesize($file)[3]; ?>> getimagesize("画像のURL"); とすることで、画像の情報が配列にセットされます。 具体的には次のようになります。 getimagesize($file)[0];　：　width=”XXX”getimagesize($file)[1];　：　height=”YYY”getimagesize($file)[2];　：　画像の種類getimagesize($file)[3];　：　width=”XX

通常、ワードプレスのカスタムメニューを出力するときは wp_nav_menu を使います。 一例を挙げると次のように記述しますね。 <ul> <?php wp_nav_menu ( array('menu'=>'header-navi', 'container'=>false, 'items_wrap'=>'%3$s', 'fallback_cb'=>'') ); ?> </ul> これで出力されるHTMLは、概ね次のようになります。 <ul> <li id="menu-item-2851" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item menu-item-2851

ブラウザの「戻る」ボタンを押したとき。通称「ブラウザバック」と呼ばれる画面遷移が行われたときに、強制的にページを再読み込みさせる方法です。 window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } }; 「window.onpageshow」は以下の条件ときにイベントが発生します。 最初にページを読み込んだとき 同じウィンドウまたはタブの中で、他のページからそのページへ移動してきたとき モバイル OS で凍結されたページを復元したとき ブラウザーの進む、戻るボタンを利用してこのページに戻ったとき 「event.persisted」はキャッシュが有効化されているとき。 「window.location.reload()」でブラウザリロードを実行します。 ※追記：上記の方法で

ワードプレスのテーマファイル「index.php」や「archive.php」などで、投稿をループして表示させる際に、最初の投稿または最後の投稿で違う処理をする方法を紹介します。 ループの最初だけ違う処理 ワードプレスのデフォルトの機能「$wp_query」オブジェクトに格納されている変数「current_post」には、ループの回数に関する情報が入っています。 これを利用して、次のようなコードで「最初の投稿」を分岐させることができます。 <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <?php if ($wp_query->current_post == 0) { ?> // 最初だけ違う処理 <?php } ?> // 通常の処理 <?php endwhile; ?> <?php end

ウェブサイトを装飾する目的で、要素の重なり順をz-indexで指定したときに、装飾目的の要素が前面になり、クリックしたいボタンなどの要素が背面になってしまうケースがあります。 このままだとボタンがクリックできずに困るので、なんとかして前面の要素を無視して背面にあるボタンをクリックできるようにしたい。 この問題を解決するために、「JavaScript等を使う必要があるか……？」と考えてしまいそうになりますが、実はスタイルシートだけで解決できます。 使用するのは「pointer-events」属性。 例えば次のようなHTMLで、前面にある要素「class=”sample”」のクリックやタッチ操作を無効にしたい場合。 <div class="sample">デザイン要素</div> <button class="button">button</button> スタイルシート側で前面にある要素に対

Webページのスクロールに合わせて要素を表示させるjQueryプラグイン［Scrolla］を紹介します。 同様の機能を持つプラグインでは［ScrollReveal］や［jquery.inview］または［WOW.js］などが有名ですが、これらと肩を並べて秀逸なので自信を持ってオススメできます。 実際に使ってみたサンプルは コチラからどうぞ。 Download : https://github.com/maximzhurkin/jquery-scrolla 導入方法は以下より。 ［Scrolla］のアニメーション部分は［animate.css］に依存します。 つまり必要になるファイルは3つ。 animate.css jquery.js scrolla.jquery.min.js これらのファイルを予め読み込んでおきます。 <link rel="stylesheet" href="animat

ジャンルを問わず様々なWebデザインに使えるSVGアイコンセット［Zondicons］が便利そうです。 公式サイトでは、ポートフォリオ、マップ、アプリ、テキストエディタなどでの使用例が紹介されています。 クセがないので汎用的に使えそうですね。 データはSVG形式なので拡大縮小しても美しいデザインを保てます。 現時点では270以上のアイコンが公開中。 ライセンスは個人でも商用でも無料で利用可能。 入手は以下の公式配布サイトより。 Zondicons : http://www.zondicons.com

【JavaScript】指定した要素がビューポートに表示されたことを［Emergence.js］で検出する。 指定した要素がブラウザの可視領域に入ったことを検出するJavaScriptのライブラリ［Emergence.js］を紹介します。 ブラウザをスクロールして、指定した要素が特定の範囲に入ったときにアニメーションを実行させることができる便利なプラグインです。 サンプルのデモサイトは以下より。 デモ : https://xtianmiller.github.io/emergence.js/ こちらのサンプルでは、丸、四角、三角の要素が、スクロールに伴ってピンク色の背景内に来ると、そのタイミングでアニメーションと共に拡大されるようになっています。 さらにスクロールしてピンク色の背景から外れると、今度は縮小して元のサイズに戻ることを確認できるはずです。 ［Emergence.js］の実装方法

スタイルシートだけでウェブページの背景にストライプ状の模様を施すテクニック［CSS3 Background Stripes］を紹介します。 まずは実際のサンプルをご覧ください。 CSS3 Background Stripes : https://on-ze.com/demo/css3-background-stripes/ 使用したコードは次のようになっています。 body { background-image: linear-gradient( -45deg, #f5eeed 25%, #f4e2de 25%, #f4e2de 50%, #f5eeed 50%, #f5eeed 75%, #f4e2de 75%, #f4e2de ); background-size: 40px 40px; background-attachment: fixed; } 仕組みを解説します。 通常「bac

【CSS3】アニメーション曲線を定義する transition-timing-function の「cubic-bezier()」の値をまとめてみた。 ご存知のとおり、CSS3の「transition-timing-function」では時間毎のアニメーションの変化を指定することができます。 標準では次の値が用意されています。 ease … 初期値 linear … 一定 ease-in … ゆっくり始まる ease-out … ゆっくり終わる ease-in-out …ゆっくり始まってゆっくり終わる cubic-bezier() … カスタムで指定可能 今日はこの中の「cubic-bezier()」に焦点を当てて、指定できる値をまとめてみました。 正弦曲線（Sine Curve） sineEaseIn（jQueryEasing : easeInSine） $easeInSine: cub

画像を使わずに、スタイルシートだけで実装するローディングのアニメーションを考えてみました。 まずはサンプルをご覧ください。 サンプル：https://on-ze.com/demo/css3-loading/ クルクル回るローディングのアニメーションは、多くの場合GIF画像を使って実装しますが、上のリンク先で紹介しているのは完全にCSSのみで動かしています。 具体的には次のような HTML ＋ CSS で再現しています。 HTML <div class="loading"> <i><i><i><i><i><i><i><i><i><i><i><i> </i></i></i></i></i></i></i></i></i></i></i></i> </div> ここでは「i」要素を12個並べていますが、これが点滅する1つ1つの楕円を構成しています。 .loading { font-size:48

Masonry風のグリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ［Macy.js］を紹介します。 まずは動作サンプルをご覧ください。 Macy.js : 動作サンプル ウィンドウサイズの変えると、その横幅に応じてカラム数が増減します。 jQyeryなどの外部ファイルは一切不要で、単体で動作するスグレモノ。 実装方法は以下より。 プラグイン［Macy.js］の使い方 早速ですが、まずは公式サイトから、必要なファイルをダウンロードしてきます。 Macy.js : 公式サイト 最低限必要なファイルは「macy.js」または１つだけ。あらかじめ圧縮されているのでダウンロードしたものをそのまま使いましょう。 htmlファイルの適当な個所で読み込んでおきます。 <body> <script src="macy.js"></script> </body> 続いて［Macy.j

Ｑ 質問：ボックス要素をCSSだけでクリッピングできるのか？ Ａ 回答：できます！ ……というワケで、スタイルシートの記述だけでボックス要素をクリッピング（切り抜き表示）する方法を紹介します。 使用するのは「clip-path」プロパティ。 実はCSS2でも使えましたが、最新のCSS3ではかなり便利な使い方ができるようになっています。 例：円に切り抜く .box { -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); } 例：菱形に切り抜く .box { -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)

ワードプレスで構築したウェブサイトで、ちょっと変わった機能を実装したいとき。非常に多くのケースで［Advanced Custom Fields］（以下「ACF」）が役に立ちます。 今日は［ACF］での全フィールドタイプの出力方法を紹介します。 フィールドタイプ：基本 テキスト <?php if( get_field('text') ) { ?> <p><?php the_field('text'); ?></p> <?php } ?> テキストエリア <?php if( get_field('textarea') ) { ?> <p><?php the_field('textarea'); ?></p> <?php } ?> 数値 <?php if( get_field('number') ) { ?> <p><?php the_field('number'); ?></p> <?php

今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。 機能が豊富で、ざっと紹介すると以下のとおり。 レスポンシブ対応 フルスクリーン化OK ページネーション設置 縦方向のスライド カルーセル・モード 各スライドの位置を固定しない「フリーモード」対応 複数行のスライドに対応 縦方向・横方向の「入れ子」に対応 マウスのドラッグ操作に対応 スクロールバー表示 ナビゲーションボタン表示 無限ループ対応 フェードイン・フェードアウトによるスライドの切り替え 3D キューブ・エフェクト 3D カバーフロー・エフェクト キーボード・

【WordPress】「wp_head();」で自動的に出力される余分なタグを削除する方法。（WordPress 4.4 対応） ワードプレスで wp_head(); を記述した際に、head内にmeta name="generator"やlink rel="wlwmanifest"などの必要がないHTMLが出力されることがあります。 これはデフォルトで用意されている関数「remove_action」を使って綺麗に成形することができます。 例えばhead内に出力されるタグには以下のようなものがあります。 meta name=”genarator” link rel=”alternate” link rel=”EditURI” link rel=”wlwmanifest” link rel=”prev” link rel=”next” link rel=”canonical” link re