スキップしてメイン コンテンツに移動

投稿

12月, 2013の投稿を表示しています

WordPressのwp_get_archivesで月別リストを生成する際に<li>をカスタムする方法

【About】 WordPressの wp_get_archives('type=monthly') で月別のリスト<li>を生成する際に、特定の年月のアーカイブページを表示した際に<li>に特定のクラス(class="active"など)を設定する方法を記載します。 また、おまけとして、functions.phpによらず、テンプレートで<li>をカスタマイズする方法も記載します。 【通常の書き方】 <WordPress> ーテンプレート <p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul> とすると <HTML> <p>月別アーカイブ</p> <ul>     <li><a href="http://hoge.com/2013/12/">2013年12月</a></li>     <li><a href="http://hoge.com/2013/11/">2013年11月</a></li> </ul> などと生成されます。 これを、ある月を表示しているときに、該当のリスト<li>に class="active" を追加したいとします。 【カスタマイズ方法】 <WordPress> ーテンプレート <p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul> (変更なし) ーfunctions.php functions.phpに以下を追加 <?php ・・・ function my_archives_link($link_html){   $my_month = '/'

IE8でCSS3の「background-size: cover;」対策

【About】 CSS3で採用された「background-size」ですが、「cover」は画像の縦横比を維持したまま、背景領域を完全に覆うよう背景画像を配置(大概は縦か横が切り取られる)してくれるとても素晴らしいスタイルです。 ところが残念なことにIE8では対応していません。 しかしこんな便利なスタイルをたかがIE8のためにゆずるわけには行きません。 デキる子にはベストエフォートを、デキない子には苦労をしてがんばってもらう。(ポリフィルというやつ) その方法を以下に提案します。 【方針】 モダンブラウザでは当然CSS3の「ackground-size:cover;」を指定。 IE8では、JavaScriptで幅に応じたそれぞれの背景画像を動的に変更する。 (IE8用に複数の背景画像を用意する必要があります。) 【HTML】 <!--ヘッダーあたりで--> <script src="/path/to/jRespond.js"></script>・・・※ ・・・ <div id="myArea"></div>・・・ここに背景画像を表示 ・・・ ※ jRespond.js(IE8用に設置) ブレイクポイントを指定して、ブレイクポイント毎の動作を指定できるすぐれもの https://github.com/ten1seven/jRespond 【CSS】(モダンブラウザはこれで表示) #myArea {     background: url(/path/to/image/back.jpg) no-repeat center top;     background-size: cover;     ・・・ } ・・・ @media (min-width: 1200px) {   #myArea {       height:500px;   } } @media (min-width: 992px) and (max-width: 1199px) {   #myArea {       height:400px;   } } ・・・ 【JavaScript】(IE8

PhotoSwipeでテキストリンクから特定の画像のPhotoSwipeギャラリーを起動する方法

【PhotoSwipeとは】 スマホサイトで写真ギャラリーを設置したいときに使えるライブラリ スワイプで画像がめくれて便利! レスポンシブサイトの画像ギャラリーにオススメ。 (optionに、imageScaleMethod: "fitNoUpscale" とすれば画像が最大100%で表示されるのでPCサイトでも使えます。) https://github.com/codecomputerlove/PhotoSwipe 【実現したいこと】 通常は画像サムネイルのクリック(or タップ)でPhotoswipeギャラリーを起動します。 それとは別に、新着情報などのテキストリンクから特定の画像のPhotoSwipeギャラリーを起動したい。 【方針】 var instance = $("#Gallery a").photoSwipe(options); instance.show(0); で、最初のPhotoSwipeギャラリーを起動できることから、テキストリンクに任意の要素(data-swipeとする)と、クラス(.swipe-targetとする)を設置し、.swipe-targetの上から順番にdata-swipeに番号を振ってゆき、.swipe-targetがクリックされたら、data-swipeから番号xを取得し、instance.show(x)で目的のPhotoSwipeギャラリーを起動する。 【HTML】 ヘッダー(もしくはフッター)部分(jQueryバージョンを使用) <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.8.2.min.js"><\/script>')</script> <script src="/js/vendor/klass.min.js">