今やWebサイトやブログにとってSNSでページや記事をシェアしてもらう事はとても重要なことになっていますね。 当記事では、クリックするだけでページや記事を各SNSでシェアしてもらえるSNSリンクの作成方法を記します。対象SNSはFacsbook、Twitter、LINE、はてなブックマーク、ピンタレストとなっております。 <!-- Facebook --> <a href="//www.facebook.com/sharer/sharer.php?u=シェアするページのURL&t=" target="_blank" rel="nofollow noopener noreferrer"> Facebook </a> <!-- Twitter --> <a href="//twitter.com/intent/tweet?url=シェアするページのURL&text=" target="_bla
jQueryプラグイン「yycoutdown」は、現在日時または指定日時から指定終了日時までのカウントダウンを表示するjQueryプラグインです。誰でも簡単に使えます。 また、見た目は簡単にCSSで変更できますので、どのようなサイトでも利用しやすくなっています。
wordpressでサイトを構築中、jQueryを使ったコードを書き込むことがよくあるかと思います。 でも、動かない・・・。 ネットで「このコードをコピペしたら動くよ」っていうのを参考にきちんとやっているはずなのに。 でも、動かない・・・。 そんな時に役立つ「Google Chrome」を利用した原因の特定方法と、一般的な「$の別名定義」エラーに起因するトラブルの解決方法を紹介します。 １．エラー原因の特定 何はともあれコードが実行されない原因の特定を行います。Javascriptのエラーは「Google Chrome」のデベロッパーツール Developer Toolsを利用すると簡単に調べることができます。 以下の手順でエラーをチェックしてみてください。 (1) Developer Toolsを表示する jQueryのコードが実行されないページを表示した状態で、「F12」キーを押します
11月18 jquery.validate.jsでチェックボックスを必須化して、最低ひとつはチェックしないとエラーがでるようにする カテゴリ:jQueryjavascript Tweet フォームを作ってると必ず出てくるのが「必須」ってやつ。 必須項目を入力しなかったらエラーになるってやつね。 そこで便利なのが、jquery.validate.jsだ。 落としてくるにはこちら 使い方はいろいろ検索して探してもらうとして、問題はチェックボックス。 チェックボックスを複数並べて、「少なくとも1つはチェックをいれてね」っていうパターンのアンケート式のフォームを作りたいことはよくあると思う。 其の用途では、jquery.validate.jsでは直感的に、そのままでは使えないので、そのやり方を書くよ。 ①チェックボックスのnameは配列にするんだよ チェックボックスが複数並ぶ場合、nameの中身を
タグ 保湿DNS子供ブラックサンタIDCFクラウドMastodonClamAVりべるら仕事猫インストールExcel大分研修クリスマスMuninGeoIPCentOS7熊本KubernetesSWX2300Laravel求人躾アンチウィルスGitAnsibleConoHa VlanWindows ServerEC-CUBERTX1200海外貧困教育バグトラッキングDrupalLarabelgoofysthinkpad x240 修理現場猫ジェネリック家具、ＤＦＶロードバランサイエモンSIMフリーSESVPNAWS CLIRTX1100DoSひったくり開発THE YELLOW MONKEY機種変更ACMYAMAHA RTXFuelPHPMySQLPercona XtraBackup放火ELB小技ALB地震セミナー日本工学院OpenCVApacheRTX1210XAMPPゆるいハッキングセミナー
今年も残すところあと数日。 今日が仕事納めというところも多いのではないでしょうか。 気がつけば今月は全然ブログを書いてない。 いかんなぁ〜… ということで最近気づいたことを備忘録を兼ねてメモメモ 〆(._.) レスポンシブ Web デザインでイメージマップを使うとき… このあいだ久しぶりにイメージマップ（クリッカブル・マップ）を使った。 私が関わっている仕事ではあまり使う機会がないんですけど、皆さんはよく使うのでしょうかね？ で、そのイメージマップを使う案件がちょっと前にあったのですが、その時にふと疑問が… その疑問というのは、『レスポンシブ Web デザインだと座標がズレるのでは？』という疑問。 あまりイメージマップを使う機会がないので今まで気がつかなかっただけで、皆さんにとっては周知の事実なのかも知れませんが、ちょっとお付き合いを… 🙂 イメージマップは、画像ファイルの左上を原点とし
2011年4月12日 wordpressで、Contact Form 7＋jQueryを使って、セレクトボックスの項目を動的に生成させる方法。 「当ブログで一番好きな記事はどれですか？」という質問を作る場合 wordpressのプラグイン「ContactForm7」は、記事内からショートコードでフォーム全体を呼び出すため、セレクトボックスの項目を動的に生成させようと思うと、Javascriptなどを使って、フォーム表示部分とは別にコードを追加する必要があります。 今回は例として、「一番好きな記事はどれですか？」という質問に対して、ブログの記事タイトル一覧から選択できるようなフォームを作る方法を説明します。 ContactForm7側の設定 ContactForm7の設定画面で、とりあえず、フォーム内にドロップダウンリストを、名前を「favorite」、ID名を「select-title」、
jQuery プラグイン ImageMapster で、イメージマップのロールオーバーを変化させる このサンプルは、jQueryベースの「ImageMapster」というプラグインを使っています。 画像を最低2種類（ノーマル、ロールオーバー用）だけ用意すれば良いので簡単です。 「九州」のみ、リンクを外部サイトにしています。（他はこのページの下部にリンク） ★イメージマップは本来「target="_blank"」が設定できますが、「ImageMapster」を使うと無効になるようです...。 サンプルを修正しました（2013年4月） このサンプルは「リンクできない」というご指摘をいただき、ソースを修正しました。 ご迷惑をおかけした方々、申し訳ございませんでした。 解決のソースを送信してくださった中村様、ありがとうございました！！ 以前のソースはこちら。 ロールオーバーで japan2.gif
数時間前に、フォントサイズ変更の保持を「jQuery Cookie」と「jQuery Text Resizer」というプラグインで実装したけど、この2つのプラグインが結構古いというのもあり、プラグインに依存しない簡潔な実装に変えたい。 たしか、調べている時に「ローカルストレージで保持できる」みたいな記事があり、「jQuery Cookie」を使わなくても良さげだったので、その辺を参考にして試してみる。 ローカルストレージとは 最近のブラウザには、サイトごとのデータを保持できるローカルストレージというものがデフォルトで備わっている。基本的には文字列を記録。store.jsというライブラリを使うとオブジェクトの保管もできるとか。 実装されているか分からないけど、Webアプリの作業データや、ネットショップの閲覧履歴などの記録に使われているのではないだろうか。 ここに、文字サイズ変更を記録する。
Hoverify Bootnav 1.0.0 Bootstrapのナビメニューにアニメーションを付けてかっこ良くする「Hoverify Bootnav」 ナビゲーションメニューに様々なアニメーションを付けることが出来ます。 関連エントリ 画面サイズ目一杯使えるレスポンシブなナビゲーションメニュー実装「okayNav」 ナビゲーションとコンテンツが同期して分かりやすいナビ実装「NavSync」 レスポンシブで階層的なスライダーナビゲーション実装jQueryプラグイン「yohoho.slyder」 ページサイドにセクションのナビゲーションを自動生成する「Section Scroll」 CSS、jQueryでレスポンシブな高品質サイドバーナビゲーションを作成するデモ
前に作ったフォントサイズを変更するjQueryのスクリプトの改良版です。元々はフォントサイズ切替用のスタイルシートを作るのがメンドイので作ってみました。改良点は画像でもテキストでも使えるし、クリックするとアクティブ用のクラスが付くのでCSSを適応できます。さらにロールオーバー画像のオンオフも切り替えれます。おまけにフォントサイズの段階（標準・大とか小・中・大みたいな）もいくつでも設定できます。ちなみにプラグイン風？に作りました。もちろん自己満の為です。 画像タイプDemo テキストタイプDemo 対応ブラウザ Google Chrome Safari4~ Firefox3~ Internet Explorer6~ Opera11 ※Windowsのみの確認です。 ※IE6はテキストタイプの場合、a要素を使用していない為ホバー機能が効きません。a要素を追加しても問題ないかと思いますが、リンク
ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景に画像や動画のスライドショーを実装できる「Vegas」 背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。 また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。
コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できるスクリプトを紹介します。 ↓区切り線がぽちゃんたぷんっと波立ちます。 Raindrop.js ヘッダやフッタあたりに少し適用するのはいい感じですね。 Raindrops.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="js/jquery-1.9.1.min.js"></script> <script src="js/raindrops.js"></script> </body> Step 2: HTML 水面のアニメーションを適用する要素を用意します。 <div id="example1"></div> Step 3: JavaScript 適用する要素
コンセプト当サイトはWEB製作に役立つ情報を見やすく、分かりやすく、遊び心をもって整理します。 コンテンツ現在はjQueryプラグインのみを整理しています。 整理するjQueryプラグインは、基本的には最新Verで動くものを基準に選択しています。 また、現時点で整理しているものの中に古いものが多く含まれていますが、これから随時新しいものも追加していく予定です。 対応ブラウザ「WEBの為に鐘は鳴る」はchrome、safari、 FireFoxの各最新版、IE10+での動作、レイアウトを保証しています。 それ以外のブラウザでは動作不備、レイアウト崩れが起こる可能性があります。 スマホ、タブレットには現時点では最適化していません。 ※サイトで整理しているプラグイン自体の対応ブラウザとは関係ありません。 jQueryプラグインの見方サムネイルにマウスを乗せると、プラグインの動作をgifアニメーシ
twitter facebook hatena google pocket 昨今インスタグラムがいたるところで叫ばれるようになっています。 そこで、jQueryプラグインでサクッと表示させます。 Instafetchです。 sponsors 使用方法 Instafetchからファイル一式をダウンロード。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="instafetch.js"></script> <script type="text/javascript"> $(function() { //表示処理 var displayInstaBlocks = function(response
写真やイラストなどの画像をズラリと並べる際に、様々な縦横比をキレイに高さを揃えて表示する jquery のプラグイン Justified Gallery を紹介します。 Googleの画像検索、Flickr ような画像レイアウトです。 画像間のマージンが一定なのが地味に嬉しいです。 そのために、画像の一部が隠れることになりますが、それもほんの僅か。（というか数ピクセル程度） 詳しくは Justified Gallery の Important configurations を確認できます。 どういう理屈で実装されているのか図解付きで説明してくれています。 行ごとにローディングアニメーションまでやってくれるので、手軽に高品質なギャラリーが作りたいなら是非！ Demo デモを作成してみました。 DEMO （JewelSaviorFREE – http://www.jewel-s.jp
デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。 今必要とされるさまざまな機能を備えています。 「Pro」がついてるから有料？って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。 Slider Pro Slider Pro -GitHub Slider Proの特徴 Slider Proのデモ Slider Proの使い方 Slider Proの特徴 Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。 デフォルトの5タイプのスライダー 機能は非常に豊富です。 さまざまなデバイスのスクリーンに対応 デフォルトで完全にレスポンシブ対応（デモ全て） タッチ・スワイプ操作に対応（デモ全て） ブレイクポイント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く