はてなブックマーク

どうもこんばんは！ jQueryの中でも結構便利なのが 特定の要素以外を操作できる.notや:notです。 今回はそのマトメとして基本的な使い方~便利な使い方までを記しておきます。 指定した最初の要素以外 $(‘#ex1 ul li:not(:first)’).css({‘opacity’:’0.2′}); $(‘#ex4 ul li’).not(‘:first’).css({‘opacity’:’0.2′}); 兄弟関係にある指定した最初の要素以外 $(‘#ex2 ul li:not(:nth-child(3n-2))’).css({‘opacity’:’0.2′}); [/html] <h4 class="hand3">特定のclassを含んだもの以外</h4> <img src="https://zxcvbnmnbvcxz.com/wp/wp-content/uploads/2012

jQuery animiteを無駄に繰り返させない方法です。 animateは結構便利なので使いがちですが 落とし穴もあります。。。 ホバーやクリックを繰り返したら繰り返した分だけアニメーションが実行されたり またscrolltoであっちに行ったりこっちに行ったり…挙動がおかしかったり。 そんな時に役に立つのが animate停止中の要素のみ取り出す$(this).not(“:animated”)の記述です。 例 <script type="text/javascript"> $(document).ready(function(){ $("ul.example li a").hover( function () { $(this).not(":animated").animate({"opacity":"1"},"slow"); }, function () { $(this).anim

どうもこんばんは。Toshikuraです。今回のTIPSは【Wordpress サムネイル画像のURLを取得表示し、任意のclassやサイズに変更する方法】です。URLを出力する事で色々な操作が施せるようになるかと思います。 サムネイル画像のURL出力 <?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, true); ?> <img src="<?php echo $image_url[0]; ?>" class="thumb"> 通常の出力 URLの出力だけですと短いので、通常の出力方法もメモしておきます。詳しくはテンプレートタグ/the post thumbnailをご参照ください。 ・デフォルト <?php the_post_thumbnail()

どうもこんばんは。Toshikuraです。この時期は忙しく久々の更新になってしまいました。今回のTipsは【Wordpress カスタムフィールドが空だった場合の分岐や複数あった場合の出力や分岐方法】です。あまり使う事もないTipsですが…一応備忘録の為に書いておきます。 カスタムフィールドが空だった場合の表示 この記述ではカスタムフィールドが空だった場合に表示されます。 <?php $ctm = get_post_meta($post->ID, ‘カスタムフィールド名’, true);?> <?php if(empty($ctm)):?> 空欄だった場合に表示されます。 <?php endif;?> また以下の記述ではカスタムフィールドが空欄だった場合と記述がある場合での表示切替を行います。 <?php $ctm = get_post_meta($post->ID, ‘カスタムフィールド

$(function(){ $('#slider1').bxSlider({ auto:true, speed:1000, pause:500 }); }); <div id="slider1"> <div><img src="images/new1.jpg"></div> <div><img src="images/new2.jpg"></div> <div><img src="images/new3.jpg"></div> </div> $(function(){ $('#slider2').bxSlider({ auto:true, speed:1000, mode: 'fade', captions: true }); }); <div id="slider2"> <div><img src="images/new1.jpg" title="captions"></div> <di

どうもこんばんは。今回は【jQuery ページや要素の幅に合わせて文字サイズを変更してくれるプラグイン】についてメモしておきます。数行追加するだけで簡単に実装できう上に、iphone等の様々なディバイスにも柔軟に対応してくれます。どこかで試してみても良いかもしれませんね。 SLABTEXT 挙動も安定していて使い勝手も良いです。カスタマイズ性も高そう。パディング等で全体幅からスペースを取ったサイズ調整もできます。span等にはCSSの追加が必要なようです。詳しくはSLABTEXTへ HTML <h1 class="slab">HEADLINES</h1> <script src="jquery-1.X.X.min.js"></script> <script src="jquery.slabtext.min.js"></script> <script type="text/javascrip

/* balloon-1 bottom */ #balloon-1-bottom { position: relative; display: inline-block; padding: 0 15px; width: auto; min-width: 115px; height: 40px; line-height: 34px; color: #19283C; text-align: center; background: #F6F6F6; border: 3px solid #19283C; z-index: 0; } #balloon-1-bottom:before { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -9px; width: 0px; height: 0px; border

どうもこんばんは！ 前回に引き続きBuddypressネタです。 Buddypressは便利なんですが 新しいバージョンほど日本語解説が見当たらなくなります。 せめて使用頻度の高いタグ一覧だけでもここに書いておきます。 お役に立てれば幸いです。 ユーザー関連 ・Wordpress ユーザー名の表示 <?php global $user_identity; echo $user_identity; ?> ・ユーザーリンク <?php echo bp_user_link(); ?> ・マイページへのリンク <?php echo bp_loggedin_user_domain(); ?> ・アバター画像の表示 <?php bp_displayed_user_avatar( ‘type=full’ ); ?> ・ログインユーザー本人のアバター画像(小) <?php bp_loggedin_user

どうもこんにちは、Honma です。今回の Tips は CSS のみで作れる吹き出しのデモです。簡単なツールチップなどにも利用できるかと思います。 CSSのみの吹き出し 5パターン×4方向 CSS は長くなるので全てデモページに記載してあります。 吹き出しの仕組み自体は :before :after 要素に三角形や円を作ることで表現しています。 Balloon 4 がうまく表示されない場合は z-index による可能性が高いので、吹き出しを囲う container の 値を 1 にするなど各自調節してみてください。 また、簡単に吹き出しを作るジェネレーター もありますので参考までに！ 以上になります。

HTML5 audioタグでの音源の再生,停止,ミュート,スキップ,初期化,現在の再生時間取得などのまとめ どうもこんばんは。Toshikuraです。今回のTipsは【HTML5 audioタグでの音源の再生,停止,ミュート,スキップ,初期化,現在の再生時間取得などのまとめ】です。以前「HTML5 audio 音源の拡張子やブラウザの対応状況」という記事でも一部書きましたが、本記事はより具体的な続編です。タイトルでは”等”と省略しましたが、音の再生、一時停止、特定時間への移動、スキップ、リセット、ミュート、再生速度の上げ下げ、再生時間の取得、合計時間の取得、ボリュームの指定、jQueryを使ったオリジナルプログレスバーの設定、はたまた再生中やボリューム変更等のタイミング取得が対象になります。 はじめに まずはじめに、HTML5でのaudioタグの基本的な記述です。このタグにloopやcon

どうもこんにちは。Toshikuraです。今回のTipsは【12種類 CSS3アニメーションで枠線に楽しい動きをつけてみた】です。Flash主流時代にはよく見たので作ってみました。実装は比較的簡単ですのでよろしければ遊んでみてください。まずはデモ（クラス切り替えでの実装）｜デモ（マウスホバーでの実装）を見ていただけると内容が把握できるかと思います。 実装方法 実装には下記HTMLが必要になります。枠線とは書きましたが正確にはそれぞれ上下左右に配置されたDIV要素になります。 HTML <div class="box"> <h1>1</h1> <div class="bd1 bd"> <div class="bdT"></div> <div class="bdB"></div> <div class="bdR"></div> <div class="bdL"></div> </div> </

どうもこんにちは。Toshikuraです。今回のTipsは【Modernizrの基本的な使い方 – ブラウザの機能にあわせて簡単にJS,CSSで分岐させる方法】です。つい先日公開した「jQuery CSS3 transform及びtransitionが動作するかどうかの判別方法 – CSS3アニメーションとjQueryアニメーションの使い分け」という記事でも少し書きましたが、Modernizrはブラウザの機能に併せてJSやCSSを簡単に分岐させる事ができる便利なライブラリです。いまさら!?と言われてしまえばそうなんですが…汗。復習の意味をこめて改めて基本的な部分からメモしていきます。個人的にはHTML5のCANVASが使用できるかの判別やSVGが使えるかの判別で使用する事があります。 はじめに まずは公式ページでライブラリをダウンロードしてきましょう。どの判別/分岐を利用したいか選択する事

どうもこんにちは。Toshikuraです。今回のTipsは【Google Map api v3 スクロールでの拡大縮小の無効やドラッグの無効等の実施方法】です。Googleマップをウィンドウ幅に合わて使う際、地味に困るのがスクロールで地図が反応してしまう事です。今回はマウススクロールでの反応を禁止する方法〜その他たまに禁止させる項目をまとめておきます。 実装方法 マウススクロールでの拡大縮小を無効化 実装方法はmapOptionsの指定に禁止したい項目を追加するだけと至ってシンプルです。マウススクロールの禁止は【scrollwheel: false,】にて実装されています。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="

どうもこんばんは。Toshikuraです。今回のTipsは【jQuery 外部ページでもスムーズスクロールを実装する方法 – 遷移先ページの任意IDへスムーズスクロール】です。通常のスムーズスクロールですとページ内にアンカーを設定しjQueryにて高さ取得&スクロールという手順ですが、本記事ではページ遷移と組み合わせ遷移後に特定箇所へスムーズスクロールさせます。基本的な部分のみですのでこのままでは微妙です、参考程度にご活用ください。 実装方法 実装方法は至ってシンプルです。まずは遷移後にスクロールするサイト（ここではB.html）へのリンクをA.htmlに記述します。 HTML（A.html） <a href="B.html?id=white">LINK</a> <a href="B.html?id=black">LINK</a> <a href="B.html?id=red">LINK<

aリンクを無効にする方法 – JQuery、javascript、[#]リンク等 – How to disable links どうもこんにちは。今日のtipsは【aリンクを無効にする方法 – JQuery、javascript、[#]リンク等 – How to disable links】です。頻度は低いですが何らかの操作のトリガーにリンクを使う際やテストサイトで使う場面がありますのでまとめておきます。 ハッシュ – 無効例 特定アンカーに飛ばす際に使う方法です。ただこの方法ではベージ内で移動してしまいます。 <a href="#">LINK</a> javascript:void(0) – 無効例 javascriptを使う方法です。無効にするだけでしたらこの方法で問題ありませんがマウスオーバー時「javascript:void(0)」が表示されます（※ブラウザ依存） <a href=

手持ちのフォントをWEBフォント用に一括変換してくれるサービス【@FONT-FACE GENERATOR】 – Online Convert to WEBFONT どうもこんばんは。今回のtipsは【手持ちのフォントをWEBフォント用に一括変換してくれるサービス @FONT-FACE GENERATOR】です。正直最近利用しているサービスの中では、ずば抜けて便利なツールのひとつです。PC内の.ttfフォントを.svg、.eot、.woffに変換しさらにフォント指定する為のCSSや表示確認用HTMLも用意してくれます。 @FONT-FACE GENERATOR .ttfから.svg、.eot、.woffへ変換 細かい設定をする場合は【EXPERT】を選択し、フォントをアップロード【Add Fonts】してください。ただご利用の際には、フォント自体のライセンスにはご注意ください。基本的にはすご

どうもこんばんは。Toshikuraです。久しくTipsを書いていなかったのですが地味に便利でしたので【TweenLiteを使用して SVG polygon を任意の形状へ変形（アニメーション）させる方法】をメモしておきます。今回のTipsでは TweenLite（Gsap）を使用します。 SVGのpolygon（もしくはpolyline）はSVG内のXY座標をpoints=”X1,Y1 X2,Y2 …”と指定し、点と点と繋ぐ事で図形を描写しています。 <a id="onChangeByTM" href="#">HOVER</a> <svg viewBox="0 0 158.5 183" width="200px"> <polygon id="poly" points="0,45.8 79.2,0 158.5,45.8 158.5,137.3 79.2,183 0,137.3"/> </s

【40個】CSS3ボタン集 – 3Dアニメーションで動くボタン等、40種類の色々なボタンを作ってみたよ。 どうもこんにちは！Toshikuraです。今回のTipsは【【40個】CSS3ボタン – 3Dアニメーションで動くボタン等、40種類の色々なボタンを作ってみたよ。】です。今回の為に作ってみたというより、つどつど書いたり真似てみて集めたボタンのまとめになります。個人的に毎回書くのも面倒ですし…やはりコピー&ペーストしたいので記事化してみました。 対応ブラウザ Chrome,Firefox,Opera(一部除き),Safari デモページ まずはデモページで動作を確認していただくのが解りやすいかもしれません。基本的な実装方法に関しましては下記【実装方法】をご参照ください。 実装方法 最初に基本となるCSSを記述します。あとは好きな動きに併せてコードを貼付けるだけです。動きのサンプルはデモに

どうもこんばんは。Toshikuraです。今回のTipsは【SVG pathの長さを取得する方法 & アニメーションのデモ – How to get path length.】です。見慣れたタイトルですが備忘として書いておきます。この方法を使えば複数のパスの長さでも取得できて便利です。 <svg viewBox="0 0 500 500"> <path d="M419.8,65.6L81.2…"/> </svg> <script> $(function(){ $('path').each(function(i){ var $this = $(this); var path = this; var len = path.getTotalLength(); // lenがパスの長さです。 }); }); </script> pathのMethods【getTotalLength】を使用します。

どうもこんばんは。Toshikuraです。久しくTipsを書いていなかったのですが地味に便利でしたので【TweenLiteを使用して SVG polygon を任意の形状へ変形（アニメーション）させる方法】をメモしておきます。今回のTipsでは TweenLite（Gsap）を使用します。 SVGのpolygon（もしくはpolyline）はSVG内のXY座標をpoints=”X1,Y1 X2,Y2 …”と指定し、点と点と繋ぐ事で図形を描写しています。 <a id="onChangeByTM" href="#">HOVER</a> <svg viewBox="0 0 158.5 183" width="200px"> <polygon id="poly" points="0,45.8 79.2,0 158.5,45.8 158.5,137.3 79.2,183 0,137.3"/> </s

どうもこんにちは。Toshikuraです。今回のTipsは【Wordpress get_posts()とquery_posts() それぞれでの特定記事を除外した一覧取得】です。記事一覧から特定記事を表示させない場合や詳細ページにて同一カテゴリから現在の記事を除外したい場合に使えますのでメモしておきます。 get_postでは’exclude’を用いて指定した記事を除外します。さらに詳しく知りたい場合はテンプレートタグ/get postsをご参照ください。 記事ID「20」を除外した一覧 <?php $posts = get_posts(array('exclude' => 20,'posts_per_page' => 10));?> <?php if($posts): foreach($posts as $post): setup_postdata($post); ?> … <?php

CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. どうもこんにちは。Toshikuraです。今回のTipsは【CSS 画像やテキスト要素を縦横中央配置する6つの方法】です。CSSの基礎的な記事ですが縦横中央配置には色々な方法がありますのでメモしておきます。うまく使い分けると便利な場面もあったりしますので備忘としてお役に立つかもしれません。 1. display:tableでの実装 CSSのdisplayプロパティによって要素をテーブル化し、vertical-alignで縦方向へ中央配置する方法でレスポンシブ化も容易です。もっとも安定した方法だと思いますがIE7では動作しません。 HTML <div class="table"> <p>p tag p tag p tag p ta