【WordPress】縦長の画像の幅を自動で調整する方法 | ろぐろぐみー | 人生備忘録ブログ
ワードプレスに画像を投稿した際に、横長の画像だとブログのレイアウトにぴったりとフィットするけど、縦長の画像だと大きすぎちゃうよな〜ってことがあります。 こんな感じで。 基本width:100%;だけど縦長の時は50%くらいに調整したい。 ということで画像を読み込んだときに横長の時はwidth100％、縦長の時はwidth幅を調整するコードを書きました。 画像が縦長の時はwidth幅を調整する方法 以下のコードをJavascriptに追加してください。 // 投稿した画像が縦長か横長かを判定しクラスを与える window.onload = function() { var images = document.getElementsByTagName('img'); for (var i = 0; i < images.length; i++) { var img = new Image();
SlickのcenterModeで中央に2枚配置する方法｜toya
スライダーを作成するためのプラグイン「slick」のcenterModeを使って、実装イメージのように中央に2枚配置し、画像の余白を不均等にすることが一筋縄ではいかなかったので、その備忘録です。 <実装イメージ> 1.問題点・centerModeでは中央に配置する枚数は奇数値推奨。 ・centerModeでは画像間の余白は均等になるようになっている。 ・中央配置された時に付与されるclass、slick-active / slick-center / slick-currentを余白の調整に活用したいが、スライドが切り替わった後に付与されるため、見た目の調整はできるがスライドがガタつく。 ※コールバック関数「beforeChange」との組み合わせもチャレンジしてみましたが、部分的にガタつく... 2.解決策と実装サンプル#2-1.centerModeを使用するための基本設定「slick」
JavaScript製のCAPTCHAで簡単スパム対策
サイトにメッセージフォームを設置このサイトを作って２週間ちょっと経ちましたが、この度はサイトにお問い合わせフォームを設置してみました。このフォームはHTMLとJavaScriptだけで出来ていて、送信したメッセージはGoogleフォームに届くようになっています。 せっかくフォームを作ったら、やっぱりスパム対策に何か欲しいと思いますよね。最初はGoogleのreCAPTCHAを使おうかと思ったんですけど、ページが重くなるのが嫌でやめました。そこで色々と探した結果、JavaScript製で軽量な画像認証スクリプトを見つけたので、それを使ってお問い合わせフォームを設置してみたというわけです。 この記事では備忘録も兼ねて、私のやったことを書いておきます。 概要Jcap.jsJavaScript製でHTMLに簡単なCAPTCHA（画像認証）を埋め込むことができる。最終更新日が2008年で公式サイトも
素のJSとSwiperでモーダル内にスライダーを表示する方法 | WebDev Tech
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>JS Modal & Swiper DEMO</title> <!-- Swiper CDN読み込み --> <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> <!-- CSS読み込み --> <link rel="stylesheet" href="
GSAPでこんなこともできる！途中から横にスクロールするページを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアになりたてのぼこです。 この記事ではGSAPというアニメーションライブラリを使って、ページが途中から横にスクロールするような表現を実装してみたいと思います。 GSAPを知らない方にも読んでいただけるよう、導入方法から説明します。 技術系の記事を書くのは初めてなので至らない点が多いかとは思いますが、どなたかの助けになれば幸いです。 2022/1/28追記 画面リサイズに対応するためデモを修正、解説を追記しました。 今回作るデモ さっそくですが、今回紹介するデモがこちらです。 実際の操作はただ下へ下へスクロールしているだけですが、二つ目のセクションではスクロールに対して真横にページが動いているかと思います。 GSAPを使えばこんなことも簡単にできてしまうんですね。 ではでは解説に参ります。 GSAPってなに まずはGSAPとはそもそも何なのかについてです（デ
スクロールが特定のエリアに入ったかどうかを検知するjQuery | HPcode（えいちぴーこーど）
スクロールが特定のエリアに入ったかどうかを検知するjQuery 以下のような、スクロールがセクション3に入った時にヘッダーの色が赤に変わる例を作ってみました。 HTMLとしては、以下のようなものを用意しました。 対象となるエリアに対して.target-areaを指定してあげます。 <div class="section section1"> <div class="section-content">セクション1</div><!-- /section-content --> </div><!-- /section --> <div class="section section2"> <div class="section-content">セクション2</div><!-- /section-content --> </div><!-- /section --> <div class="sec
body-scroll-lock.js「すべてのブラウザでスクロールのロックしたるで」←こいつ超有能 - Qiita
この記事に書いてあること JavaScriptプラグインのbody-scroll-lock.jsの使い方について サイトリンク GitHubリポジトリ npmサイト body-scroll-lock.jsとは？ ターゲット要素（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです 対象ブラウザ iOS Mobileおよびタブレット、Android、デスクトップSafari/Chrome/Firefox どんな時に使うか？ 例えばモーダルを表示した時に、背景を固定したいといった場合に使うことができます。 モーダルの中だけスクロールを有効にして、背景固定を実現するなんてことも簡単に実装可能です。 なぜ使うの？ スクロールのロックは簡単そうに思えて、実は結構面倒くさい処理内容です。 例えば、 overflow:hidden
【デモあり】Swiperでプログレスバーを実装する方法 - 株式会社TANE-be｜大阪にあるWebサイト制作
こんにちは、TANE-beエンジニアです。 今回はスライダーとプログレスバーを実装してみたいと思います。 スライダーにはSwiper.jsを使用します。 まずはデモページをご覧ください。 画像の下で動いている黄色のバーがプログレスバーです。 プログレスバーを実装すると、現在見えていないコンテンツが存在し切り替わることがわかりやすくなります。スライダー内容を見せるために速度を落としたい箇所や、スライダーとわかりにくい箇所に実装すると効果的です。 同じ効果をもつ仕様としては、左右のコンテンツを示すボタンや、ページナビゲーションのドットなどを実装することもありますね。 ボタンやページナビゲーションはデフォルトに機能で実装が可能なことが多いですが、プログレスバーは少し自分でコードを書く必要があります。今回はその実装をご紹介していきます。 簡単に実装できるので、ぜひ試してみてください。 swiper
JavaScriptのプラグイン「perfect-scrollbar.js」を使ってみる
スクロールバーをカスタマイズできるプラグイン「perfect-scrollbar.js」を使ってみます。 ※今回はバージョン1.2.0を使っていますが、バージョン1.0未満は使い方が違うようです。 詳しくは公式のドキュメントでご確認ください。 使い方 GitHubからダウンロードします。 ダウンロード後、必要なファイルを読み込みます。 cssはcssフォルダ、jsはdistフォルダに格納されているので、それぞれコピーして使ってください。 <link rel="stylesheet" href="perfect-scrollbar.css" /> <script src="perfect-scrollbar.js"></script> #sampleのスクロールバーを変更するようにしてみます。 HTML <div id="sample"> <p>君も事実いったいこの前後っ放しというのの ..
ページ内リンクでURLを変えたくない時の対処法｜assassin@Web屋
ロングページのユーザビリティを手軽に向上してくれるページ内リンク（目次やTOPへ戻るetc.）は便利なものですが、常に気なっているというか、気持ち悪いなーと思っていた点がありました。それは… #リンクをクリックした直後 、URLが変わってしまうこと です。なんだそんなこと？…と思われた方はスルーして下さい。 とりあえず、今回はページ内リンクをスムーズスクロールしつつ、URLに「＃」が付かないスクリプトを見付けたので備忘録としてメモ。 この事象に対応するスクリプトは探せば色んなものがありますし、個人的にも色々試してみましたが、どのようなページであっても概ね問題なく機能するのが以下の方法です。 準備jQueryを使用するため、ページ内に以下コードを追加。 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jq
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ GitHub wavifyは jQuery のプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVG コードを用意すれば OK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/
慣性スクロールとパララックスエフェクトのVanilla.jsプラグイン「Luxy.js」作ってみた | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちはアートディレクターの奥田です。 最近は娘の成長を見るのがとても楽しみで、寝返りしたと思えば次の日にはずりばいの練習をしていたりと日々成長していく姿に感動しております。 さて、Webサイトに高級感を与える慣性スクロールとパララックスエフェクトのVanilla.jsのプラグインを作ってみました。 サイト制作にぜひ役立ててみてください。 Table of contentsインストール使い方オプション補足さいごにインストールnpmで簡単にインストール可能です。 npm install luxy.js --saveまたは、ページにスクリプトを含めることで使用できます。 <script src="path/to/luxy.js" charset="utf-8"></script>プロジェクトにluxy.jsを含めて以下のように初期化してください。 <script charset="utf-8
【Javascript】CSSアニメーションがつらいのでanime.jsを試してみた | Wood-Roots:blog
アニメーションをCSSで書くようになって数年になりますが、凝ったアニメーションを書こうと思うと年々つらくなってきました。 CSSアニメーションのつらみ イージングがつらい transitionならcubic-bezierを書くだけでいいですが、@keyframesでイージングを書こうと思うとつらい。 というか人力で書けるものなのだろうか。 完了を検知して連続したアニメーションを実装するのがつらい transitionend/animationendでクラスを足していってそのクラスに対してアニメーション…つらい。 transitionend/animationendではなくX秒のアニメーションAが終わったらX秒のディレイ後にアニメーションB…とやれば多少は楽ですが、妥協感と将来的に破綻する未来が見える。 CSSファイルがつらい 単純に行数が増えてつらい。 …この状況を打開するために、JSで制
ページ遷移時のページ内リンクのスムーススクロール - Qiita
2021.05.29 修正 codepenのサンプル内からのリンクを別タブで開くと警告されるようになったので、 別でサンプルHTMLを準備しました よく出回ってるhoge.html?id=sec01など、URLのクエリパラメータでIDを指定するようなURLでページ内アンカーをさせるやり方はアクセシビリティ、マシンリーダブルの面では疑問です。 JavaScriptをOFFにされてもきちんと動作し、またGoogleなどのbotにも適切な箇所にリンク先を指定できるページ内アンカー(#id)で指定する方が好ましいと個人的に考えてます。 ✕悪い例 <a href="hoge.html?id=sec01"> ◎良い例 <a href="hoge.html#sec01"> なので素直にハッシュ(#)でID指定してページが自動スクロールするJavaScriptをjQueryで書きました。 Sample h
高機能JavascriptアニメーションライブラリTweenMax.jsの使い方！ | SONICMOOV LAB
いやぁ、寒い。 寒いですね。 これを書いている今は、なんか寒波がどうだのこうだのらしくって寒い日ですよ。 指が冷えてて、キーボード打つスピードが平常時の75%くらいですよ。 歳かな・・・・ 2014年ももうすぐ終わりですね。 今年は年末豪華連休を狙っているんですが、案件状況的にどうでしょね。 怪しいところです。 豪華連休狙っても、大抵（いや、全部）上手くいかない。 しょうがないね…（´・ω・｀）… さてはて、今年は僕もソニックムーブ Advent Calendar 2014に参加すべく重い腰を上げたわけなんですよ、えぇ。 14日目の今日は、前回（JavascriptアニメーションライブラリTween.jsの紹介）予告した通り、TweenMax.jsを紹介します。 TweenMax.jsは、かなり高機能なjavascriptアニメーションライブラリになっているので、これを使えるようになってし
画像ローディング中にLoadingアニメーションを表示するjQueryプラグイン「How to Create an Awesome Image Preloader 」｜BLACKFLAG
最近ではWebページ上に多くの画像を表示するような場合には、 読み込むまでにLoadingアニメーションを表示してユーザーのストレスを軽減させる手法をよく見かけますが、 それを簡単に組み込むことができるjQueryプラグイン 「How to Create an Awesome Image Preloader 」が便利そうだったので紹介してみます。 ≫How to Create an Awesome Image Preloader | Nettuts+ ≫DEMO：Image Preloader デモ画面上で動作を確認すると以下の様な感じに。 DEMO：Image Preloader 単純に画像ロード中にLoadingアニメーションを表示するだけでなく 完了後は画像が順々にフェードインしてくる加減が気持ちいい。 Loading中は該当要素に対して「.preloader」のクラスを付加して、
Masonry系の最強スクリプト、レスポンシブ対応のレイアウトが簡単に実装できる -Muuri
カードやパネルをレンガ状に配置し、ドラッグして配置をアニメーションで変更、ソートやフィルタリング機能も可能なグリッドレイアウトが簡単に実装できるスクリプトを紹介します。 マウスで操作しても、タッチデバイスで操作しても、非常に快適です。 Muuri Muuri -GitHub Muuriのデモ Muuriの使い方 Muuriのデモ デモはモダンブラウザ、IE9+でご覧ください。スマホやタブレットでも動作します。 ※スマホだと各パネルが大きいので、操作しにくいかも。
JavaScript/フォーム/自動計算フォームAタイプ（消費税あり） - TAG index
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 var tax = 10; // 消費税率 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.
Mojik - 日本語文章の可読性を向上させるJavaScript
Webにおける日本語はちょっとした工夫が読みやすくなります。例えば日本語と英単語の間には半角スペースを空けた方が良いでしょう。また、全角括弧を使うと間が空きすぎてあまり良くないのですが、半角では詰まりすぎるといった具合です。 そうした日本語の文章におけるちょっとした問題を解決してくれるのがMojikです。和文の文字組を上手にコントロールしてくれます。 Mojikの使い方 適用前と適用後の文章です。括弧が連続した時に隙間を狭めています。 別な例。英数字の前にスペースが空いているのが分かるでしょうか。 小さな隙間を使うことで可読性がぐっと向上します。書籍や雑誌では文字組は微妙に調整しますが、Webの場合はデフォルトのまま使われがちです。Mojikを使えば改善できるでしょう。 MojikはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Mojik terke
position:fixedでヘッダ固定時のページ内リンクのずれを解消したい ｜ Tips Note by TAM
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
