そして今回は解説はWordPressではなく、静的サイトの場合になります。 ページごとにヘッダーに別々のclassを書けば条件分岐の必要はないかも知れませんが、そうなるとヘッダーが共通になりません。 実案件では『ヘッダーは共通でお願いします』と言われる事があるので、静的サイトでの条件分岐も覚えておきましょう。
【jQuery】URLによって条件分岐させる方法
そして今回は解説はWordPressではなく、静的サイトの場合になります。 ページごとにヘッダーに別々のclassを書けば条件分岐の必要はないかも知れませんが、そうなるとヘッダーが共通になりません。 実案件では『ヘッダーは共通でお願いします』と言われる事があるので、静的サイトでの条件分岐も覚えておきましょう。
jQuery Cookieの保存する期間を日時や時間で設定するいろいろ｜BLACKFLAG
jQuery Cookieで保存期間を指定するには、オプションの「expires」を使用しますが、保存日数や保存時間、また保存する時間を使用しているデバイスの日時設定を基準とするかサーバの時間を基準にするか、といった保存方法にはいくつかパターンがあるのでそれぞれ紹介してみます。 「expires」オプションで日数指定 まずは基本となるjQuery Cookieのオプション「expires」を使って保存日数を指定する方法です。 ※jQuery Cookieの基本的な使用方法は省かせていただきます。 $.cookie('名前', '値', { expires: 1 }); Cookieを保存するための「名前」と「値」を指定した後の{ expires: 1 }の値が保存する日数になります。 ここで「1」を指定すればCookieの保存期間は1日、「2」を指定すれば保存期間は2日になります。 「ex
【jQuery】ローディングを初回のみ表示 (ページ遷移や2回目以降は表示しない)｜WEB CREATES
今回はサイトを最初に訪れた時のみ、ローディングを表示する方法をjQueryで作成する方法を共有しようと思います。 動きが確認できるデモサイトは下記になります。 ローディング デモページ ローディングを初回のみ表示 (ページ遷移や2回目以降は表示しない) jQueryを追加（全ページ共通の場所） <div class="loading"></div>用のHTML/CSSがあります。 下記は、クラス「.loading」にクラス「.active」を追加すると、loadingが非表示になるということを前提として作成しています。 $(function () { var webStorage = function () { if (sessionStorage.getItem('access')) { /* 2回目以降アクセス時の処理 */ $(".loading").addClass('is-act
【jQuery】アコーディオン実装サンプル10選 | 125naroom / デザインするところ（会社）です。
<div class="accordion_one"> <div class="accordion_header">アコーディオン、シンプル版 <div class="i_box"><i class="one_i"></i></div> </div> <div class="accordion_inner"> <div class="box_one"> <p class="txt_a_ac">アコーディオンの中身です。</p> </div> </div> </div> $(function(){ //.accordion_oneの中の.accordion_headerがクリックされたら $('.s_01 .accordion_one .accordion_header').click(function(){ //クリックされた.accordion_oneの中の.accordion_head
セレクトボックスをモーダルウィンドウで選択できるjQueryプラグインを作成 | キノコログ
前回に、iOSのセレクトボックスが使いづらい問題についてまとめました。 iOSブラウザのセレクトボックスUIが使い辛すぎ問題 僕の作ったサイトでは、iOSのユーザーが70%を超えるほど多く、かつプロフィールの送信では<select>を多用していたため、どうにかしたいと思っていました。 そのため、デバイス問わず、セレクトボックスをモーダル選択に置き換えるプラグイン「selmodal.js」を作成しました。 iOSデフォルトのセレクトボックスとプラグイン導入後の比較です。 後者のほうがサクサク入力を完遂できることが見て分かると思います。 主にiOSブラウザのユーザービリティ向上のための対策用プラグインなため、iOSユーザーの割合を見て導入を検討してみてください。 <head> <!-- プラグインのCSSを読み込む --> <link href="css/selmodal.css" rel="
jQuery で複数行対応の自動省略三点リーダー「...」付与修正版 - Qiita
はじめに jQuery で複数行対応の自動省略３点リーダーを付与します。わざわざプラグイン使うまでもないので、書いておきます。CSS でも可能ですが、:before や :after を使って右端に余白を設けて固定で「...」を書くなど、ちょっと見た目がださかったのでやめました。参考リンクを貼っておきますが、参考リンクの内容はウィンドウサイズを縮めたときにしか使えないですし、拡大したときに文章が枠内に収まったとしても「...」が残るなど、いろいろ未完成だったので修正しました。 参考 文字列を省略して「...」を付与する方法 意外と需要がある（泣）文字数を省略して「...」にしたい。複数行のとき！ 準備 jQuery を入れてください。 コード <script type="text/javascript"> $(function () { $(document).ready(function
339a8ea673c1917c6b59
意外と需要がある。。忘れた頃にやってくるこの仕様 1行のときはtext-overflowプロパティを使用すれば問題ありません！ 問題は複数行の時。 解決方法（jQuery） 高さを指定して高さを超えたら(改行されたら)「…」に書き換える。 // ▼文字列を省略して「…」を付与 jQuery(function($) { $('.js-text-overflow').each(function() { var $target = $(this); // オリジナルの文章を取得する var html = $target.html(); // 対象の要素を、高さにautoを指定し非表示で複製する var $clone = $target.clone(); $clone .css({ display: 'none', position : 'absolute', overflow : 'visibl
レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
WordpressでjQueryが動かない場合の書き方は”＄”を変える - デザイナーのタネあかし
WordPressのテーマではWordPress本体からjQueryを読みこんでいるものが多く、それと併せてjQueryプラグインや簡単なプログラムを追加して活用しようとする場合が多いかと思います。 でも、実際にjQueryを使ってみたもの動かない！となったことがありませんでしたか？ 今回はWordPress本体のjQueryを使うに必要なチョットしたコツをお伝えします。 WordPress本体のjQueryにはコンフリクト対策の追記がある WordPressではjQueryのほかにもprototype.jsなどのJavaScript ライブラリを利用する場合があります。 そのためWordpressのjQueryには他のライブラリとコンフリクト（競合、衝突）しないように.noConflict() が追記されています。 この記述があることで＄関数がjQueryで使えなくなっていたのでした。
【意外と便利！】特定の子要素を持つ親要素にcssスタイルを適用する方法
【意外と便利！】特定の子要素を持つ親要素にcssスタイルを適用する方法 Web2017年3月27日 「特定の子要素を持つ親要素にcssを適用したい」というケースはしばしばありますが、css3を駆使してもこれを実現するセレクタは存在しません。そこで、jsを使って実現する方法を本記事ではご紹介いたします。jQueryでもVanilla JS（生のjavascript）でもどちらでも可能ですので、サイト環境に合う方法をどうぞお使いください。 サンプルコード html <ul class="hoge"> <li><p>特にスタイルを当てる必要なし</p></li> <li><p>特にスタイルを当てる必要なし</p></li> <li><p class="moge">これの親要素liにだけcssを適用したい</p></li> <li><p>特にスタイルを当てる必要なし</p></li> <li><p
【css】「background-attachment:fixed;」がiphoneのsafariで効かない | web関連 | 二色人日記。
jqueryで指定した要素が範囲内に入った時のみ表示 <script> jQuery(function($){ $(window).on('load scroll resize', function() { // 「section.test02」が存在したら発火 if($('section.test02').length){ add_class_in_scrolling($('section.test02')); } }); // スクロールで要素が表示されている時にclassを付与する function add_class_in_scrolling(target) { // 指定した要素の次の要素 var nextElement = $('section.test03'); var winScroll = $(window).scrollTop(); var winHeight = $(
jQueryでタブメニューを簡単に自作する2つの方法
jQueryでプラグインに頼らず、簡単にタブメニューを実装する方法のご紹介です。 プラグインを使わなくても意外と簡単に実装できますので、ぜひ試してみてください。 CSSでデザインする方法と、画像を使う方法の2パターンをご紹介します。
【jQuery・CSS】タブの切り替えメニューを実装する方法｜複数箇所の場合も
今回はjQuery・CSSで、タブメニューを切り替えてコンテンツの内容を変更する機能を実装する例となります。 【jQuery・CSS】タブの切り替えメニューを実装する例以下の例では、「Tab-A」「Tab-B」「Tab-C」のいずれかを選択して変更すると、その下のコンテンツの内容も変更します。 See the Pen Tab Switching jQuery by yic666kr (@yic666kr) on CodePen. HTMLの簡単な説明HTMLのマークアップの簡単な説明となります。 以下の箇所では、タブとタブを切り替えて表示するコンテンツの要素を、それぞれ3つ作成しています。 デフォルトでは、現在のタブがclassにis-activeをもつ「Tab-A」となり、コンテンツの要素は「Content-A」を表示しています。 「Content-A」の要素は、classをis-sho
HTML5 × CSS3 × jQuery – #20 文字をランダムでカシャカシャ動かしながらテキストを表示させるプラグインを作る | DevelopersIO
リリィ・シュシュのすべて という映画をご存知でしょうか？2001年に公開された岩井俊二監督の作品で、当時は結構好きで何度も観返したものでした。 劇中にて文字がカシャカシャとランダムに動きながら文章が表示されていくエフェクトがあるのですが、これを JavaScript で作ってみました。Flash 全盛のころから Web コンテンツにはよく取り入れられてるエフェクトではありますが、使い所さえ間違えなければ今でも充分に通用するカッコよさを持っています。 今回は jQuery を使わずに素のJavaScript (Vanilla JavaScript) だけでプラグインを作りました。このシリーズの趣旨から大きく外れてますが、そこは仕方ないね。 LetterTicker - 文字をランダムでカシャカシャ動かしながらテキストを表示させる Step.1 | とりあえず動くものを作ってみる まずは動くも
.matchMedia()でJSでもメディアクエリを使って条件分岐する | SPYWEB
if (matchMedia('(max-width: 798px)').matches) { // ウィンドウサイズが798px以下のとき } else { // それ以外 } .matchMedia() を使うことでCSSのメディアクエリのように条件分岐することができます。しかし、この記述だと ページが読み込まれた時 にしか実行されません。CSSのメディアクエリはウィンドウサイズを変更したらスタイルが適用されますよね。 var mediaQuery = matchMedia('(max-width: 798px)'); // ページが読み込まれた時に実行 handle(mediaQuery); // ウィンドウサイズが変更されても実行されるように mediaQuery.addListener(handle); function handle(mq) { if (mq.matches)
スクロールでふわっと現れるフェードインの動きをjQueryで実装
この記事の結論 すぐに実装したい方はこちら フェードは雰囲気作りや強調に使うのが効果的。 ブログは文章がメインなのであまり適していない。アイキャッチなどを強調するならOK ホームページでよく見かける スクロールすると要素がふわっとフェードする動きありますよね。 具体的には以下のような感じ。 あーこれか。見たことあるな。なんかオシャレっぽいやつな どうやらフェードがこの記事にも実装されているようですね。 ぶっちゃけブログだと見づらいよね。 文章読みたいだけなのに何フェードしてんだよっていう このようなふわっとした動きは、 jQueryのプラグインを使えば簡単に実装することは出来るのですが、 今回は備忘録も兼ねて1から作ってみました。 コメントも入れているので、 jQueryを勉強中の方は是非参考にしてみてください。 完成コード まずは今回作ったコードを先に載せておきます。 そのままコピペで動
【jQuery】超簡単jQueryスライダー［bxSlider］の使い方。
今日紹介する jQuery プラグイン［bxSlider］はレスポンシヴ・デザインにも対応した高性能なコンテンツ・スライダーです。 まずはサンプルをご覧ください。 jQuery bxSlider：サンプル・デモ 特徴は初心者でも簡単に設置できること、ファイル容量が小さい軽量設計、レスポンシヴ・デザイン対応で、各種スマートフォンやタブレットでも横幅に合わせてコンテンツのサイズを自動的に調整してくれること、また、画像だけでなく動画も含めた表示が可能、そしてオプション機能が豊富に用意されていることも大きな魅力の１つです。 実装方法は以下のとおり。 ［bxSlider］の設置方法最初に［bxSlider］の本体ファイルをダウンロードします。 リンクは以下より。 bxSlider：ダウンロード フォルダの中にいくつかのファイルが含まれていますが、基本的に必要なのはスクリプトの［jquery.bxsl
pagePiling.js plugin | Create a stack of scrolling pages
jQuery plugin Pile your sections one over another and access them scrolling or by URL!
実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【楽に解決！】WordPressのjQueryを使う方法と動かない時の解決策！プラグイン導入方法も
