https://b.hatena.ne.jp/ow_ukeguchi/bookmark ow_ukeguchiのはてなブックマーク (325) http://codepen.io/nxworld/full/OXPovd ow_ukeguchi 2017-05-02T07:16:12Z css 2 <blockquote cite="http://codepen.io/nxworld/full/OXPovd" title="CodePen - demo:CSS Simple Hoverable Dropdown"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fcodepen.io%2Fnxworld%2Ffull%2FOXPovd" alt="" /> <a href="http://codepen.io/nxworld/full/OXPovd">CodePen - demo:CSS Simple Hoverable Dropdown</a></cite><p><a href="http://codepen.io/nxworld/full/OXPovd"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3bbd051f77d68a0064b6eeafd1b6fff1767be483/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fi.cdpn.io%2F251990.OXPovd.da8bdc9b-7307-4ac8-8c14-04efa0f552a6.png" alt="CodePen - demo:CSS Simple Hoverable Dropdown" title="CodePen - demo:CSS Simple Hoverable Dropdown" class="entry-image" /></a></p><p>Article - https://www.nxworld.net/tips/css-simple-hoverable-dropdown.html...</p><p><a href="https://b.hatena.ne.jp/entry/codepen.io/nxworld/full/OXPovd"><img src="https://b.hatena.ne.jp/entry/image/http://codepen.io/nxworld/full/OXPovd" alt="はてなブックマーク - CodePen - demo:CSS Simple Hoverable Dropdown" title="はてなブックマーク - CodePen - demo:CSS Simple Hoverable Dropdown" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/codepen.io/nxworld/full/OXPovd"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://js.crap.jp/book/chapter2/drop-down-menu-effect.html ow_ukeguchi 2017-05-01T07:14:00Z css 12 <blockquote cite="http://js.crap.jp/book/chapter2/drop-down-menu-effect.html" title="CSSで作ったドロップダウンメニューのドロップの動きいろいろ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fjs.crap.jp%2Fbook%2Fchapter2%2Fdrop-down-menu-effect.html" alt="" /> <a href="http://js.crap.jp/book/chapter2/drop-down-menu-effect.html">CSSで作ったドロップダウンメニューのドロップの動きいろいろ</a></cite><p><a href="http://js.crap.jp/book/chapter2/drop-down-menu-effect.html"><img src="" alt="CSSで作ったドロップダウンメニューのドロップの動きいろいろ" title="CSSで作ったドロップダウンメニューのドロップの動きいろいろ" class="entry-image" /></a></p><p>内容を解説した記事に戻る 0.アニメーションなし menu submenu submenu submenu submenu menu submenu submenu submenu menu submenu submenu submenu menu submenu submenu submenu submenu menu submenu submenu submenu submenu 1.広がるように menu submenu submenu submenu submenu menu submenu submenu submenu m...</p><p><a href="https://b.hatena.ne.jp/entry/js.crap.jp/book/chapter2/drop-down-menu-effect.html"><img src="https://b.hatena.ne.jp/entry/image/http://js.crap.jp/book/chapter2/drop-down-menu-effect.html" alt="はてなブックマーク - CSSで作ったドロップダウンメニューのドロップの動きいろいろ" title="はてなブックマーク - CSSで作ったドロップダウンメニューのドロップの動きいろいろ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/js.crap.jp/book/chapter2/drop-down-menu-effect.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://mignonstyle.com/date-tags/ ow_ukeguchi 2016-11-04T13:40:32Z wp 10 <blockquote cite="http://mignonstyle.com/date-tags/" title="mignonstyle.com"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fmignonstyle.com%2Fdate-tags%2F" alt="" /> <a href="http://mignonstyle.com/date-tags/">mignonstyle.com</a></cite><p><a href="http://mignonstyle.com/date-tags/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/7a77ea148424fa2588cad0e570fdd00eb3d88eda/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fmignonstyle.com%2Fwp%2Fwp-content%2Fuploads%2F2013%2F10%2F1021.png" alt="mignonstyle.com" title="mignonstyle.com" class="entry-image" /></a></p><p>This domain may be for sale!</p><p><a href="https://b.hatena.ne.jp/entry/mignonstyle.com/date-tags/"><img src="https://b.hatena.ne.jp/entry/image/http://mignonstyle.com/date-tags/" alt="はてなブックマーク - mignonstyle.com" title="はてなブックマーク - mignonstyle.com" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/mignonstyle.com/date-tags/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://notnil-creative.com/blog/archives/1288 ow_ukeguchi 2016-09-14T04:32:32Z wp 185 <blockquote cite="https://notnil-creative.com/blog/archives/1288" title="WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnotnil-creative.com%2Fblog%2Farchives%2F1288" alt="" /> <a href="https://notnil-creative.com/blog/archives/1288">WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット</a></cite><p><a href="https://notnil-creative.com/blog/archives/1288"><img src="" alt="WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット" title="WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット" class="entry-image" /></a></p><p>WordPressのWP_Queryの使い方を1枚のPHPファイルにまとめたコード・スニペットがgistにアップされていました。WP_QueryはWordPressの根本に関わる機能であると同時に、ここを理解することがWordPressを使ったカスタマイズすべての基礎になります。なのでスニペットがあると非常に便利だと思い、forkして翻訳してみました...</p><p><a href="https://b.hatena.ne.jp/entry/s/notnil-creative.com/blog/archives/1288"><img src="https://b.hatena.ne.jp/entry/image/https://notnil-creative.com/blog/archives/1288" alt="はてなブックマーク - WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット" title="はてなブックマーク - WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/notnil-creative.com/blog/archives/1288"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://gashubq.com/gashubq-view/wordpress/goodbye-livedoorblog-hello-wordpress ow_ukeguchi 2016-06-24T03:02:59Z wp インポート 4 <blockquote cite="https://gashubq.com/gashubq-view/wordpress/goodbye-livedoorblog-hello-wordpress" title="livedoorブログからWordPressへの移行方法をまとめてみた"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgashubq.com%2Fgashubq-view%2Fwordpress%2Fgoodbye-livedoorblog-hello-wordpress" alt="" /> <a href="https://gashubq.com/gashubq-view/wordpress/goodbye-livedoorblog-hello-wordpress">livedoorブログからWordPressへの移行方法をまとめてみた</a></cite><p><a href="https://gashubq.com/gashubq-view/wordpress/goodbye-livedoorblog-hello-wordpress"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/dbd9df4820ca938e6baa2cf51c41a1e8620d11d9/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fgashubq.com%2Fwp-content%2Fuploads%2F2014%2F03%2F20140326_gblbhwp01.jpg" alt="livedoorブログからWordPressへの移行方法をまとめてみた" title="livedoorブログからWordPressへの移行方法をまとめてみた" class="entry-image" /></a></p><p>livedoorブログからWordPressに移行した際、移行手順が少々面倒だったので備忘録的に参考にした記事と移行方法を残しておきたいと思います。思っていたよりも時間がかかったなぁ。 ブログ移行の際の手順を確認 記事データのバックアップを取得する 画像データを取得する 記事データの画像URLを置換する 記事データ＆画像...</p><p><a href="https://b.hatena.ne.jp/entry/s/gashubq.com/gashubq-view/wordpress/goodbye-livedoorblog-hello-wordpress"><img src="https://b.hatena.ne.jp/entry/image/https://gashubq.com/gashubq-view/wordpress/goodbye-livedoorblog-hello-wordpress" alt="はてなブックマーク - livedoorブログからWordPressへの移行方法をまとめてみた" title="はてなブックマーク - livedoorブログからWordPressへの移行方法をまとめてみた" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/gashubq.com/gashubq-view/wordpress/goodbye-livedoorblog-hello-wordpress"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://ritaworks.jp/index.html ow_ukeguchi 2016-01-07T02:22:34Z 参考サイト 10 <blockquote cite="https://ritaworks.jp/index.html" title="リタワークス株式会社｜人が重なり力となる"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fritaworks.jp%2Findex.html" alt="" /> <a href="https://ritaworks.jp/index.html">リタワークス株式会社｜人が重なり力となる</a></cite><p><a href="https://ritaworks.jp/index.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/11af9dae9739662c16d4870a73f038d3622dd89d/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fritaworks.jp%2Fdata%2Fconfs%2F1%2F06b67ec6d500ad89de6947bb61048ee9-1683880220.png" alt="リタワークス株式会社｜人が重なり力となる" title="リタワークス株式会社｜人が重なり力となる" class="entry-image" /></a></p><p>ビジョン あらゆるソーシャルビジネスに挑戦し、 「あしたがよくなる」を実感できる 社会をつくる 私たちリタワークスは、2030年までに実現していく未来として、 あらゆるソーシャルビジネスに挑戦することを宣言し、行動していきます。 現在の大企業の多くが「社会のため」に起業し、様々な課題を解決してきました。 私...</p><p><a href="https://b.hatena.ne.jp/entry/s/ritaworks.jp/index.html"><img src="https://b.hatena.ne.jp/entry/image/https://ritaworks.jp/index.html" alt="はてなブックマーク - リタワークス株式会社｜人が重なり力となる" title="はてなブックマーク - リタワークス株式会社｜人が重なり力となる" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ritaworks.jp/index.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://www.kaja.co.jp/ ow_ukeguchi 2016-01-07T02:21:10Z 参考サイト 34 <blockquote cite="http://www.kaja.co.jp/" title="KAJA"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.kaja.co.jp%2F" alt="" /> <a href="http://www.kaja.co.jp/">KAJA</a></cite><p><a href="http://www.kaja.co.jp/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/fa570ae01ece3d66d920047586e6cbdee5be729a/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.kaja.co.jp%2Fwp-content%2Fuploads%2F2015%2F11%2Fkaja-ogp.png" alt="KAJA" title="KAJA" class="entry-image" /></a></p><p>store KAJA本店 ひとつのフロアに家具も雑貨も並ぶゆとりある空間は、店内を回遊しながら暮らしのイメージをゆっくり膨らませることができます。チーク古材やラタン、ストーンなど自然素材を活かした家具は、手仕事ならではの質感が日常にやさしく寄り添い、照明・アート・テーブルウェア・ファブリックといった多彩なア...</p><p><a href="https://b.hatena.ne.jp/entry/www.kaja.co.jp/"><img src="https://b.hatena.ne.jp/entry/image/http://www.kaja.co.jp/" alt="はてなブックマーク - KAJA" title="はてなブックマーク - KAJA" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.kaja.co.jp/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://iwb.jp/navigation-scroll-fixed/ アンカーの調整 ow_ukeguchi 2015-11-30T02:12:57Z スクロール css jquery 7 <blockquote cite="https://iwb.jp/navigation-scroll-fixed/" title="アンカーリンクのナビを置いてスクロールでfixedに切り替えるときの注意点"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fiwb.jp%2Fnavigation-scroll-fixed%2F" alt="" /> <a href="https://iwb.jp/navigation-scroll-fixed/">アンカーリンクのナビを置いてスクロールでfixedに切り替えるときの注意点</a></cite><p><a href="https://iwb.jp/navigation-scroll-fixed/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b590080ffe61e52160eac2cc82889840ab1ae211/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fiwb.jp%2Fwp-content%2Fuploads%2F2014%2F05%2Fnavigation-scroll-fixed.png" alt="アンカーリンクのナビを置いてスクロールでfixedに切り替えるときの注意点" title="アンカーリンクのナビを置いてスクロールでfixedに切り替えるときの注意点" class="entry-image" /></a></p><p>fixedになるとコンテンツの高さが変わる 最近ナビゲーション部分をウィンドウ上部までスクロールするとposition:fixedに切り替わってスクロール時に上部に配置され追随されるものがあるがWebページ内のナビゲーションがfixedに切り替わるとコンテンツから高さがその分引かれるためナビゲーションがアンカーリンク先への...</p><p><a href="https://b.hatena.ne.jp/entry/s/iwb.jp/navigation-scroll-fixed/"><img src="https://b.hatena.ne.jp/entry/image/https://iwb.jp/navigation-scroll-fixed/" alt="はてなブックマーク - アンカーリンクのナビを置いてスクロールでfixedに切り替えるときの注意点" title="はてなブックマーク - アンカーリンクのナビを置いてスクロールでfixedに切り替えるときの注意点" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/iwb.jp/navigation-scroll-fixed/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://kachibito.net/snippets/simple-tab-menu タブ ow_ukeguchi 2015-11-25T01:09:16Z jquery 3 <blockquote cite="https://kachibito.net/snippets/simple-tab-menu" title="シンプルなタブメニュー - かちびと.net"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkachibito.net%2Fsnippets%2Fsimple-tab-menu" alt="" /> <a href="https://kachibito.net/snippets/simple-tab-menu">シンプルなタブメニュー - かちびと.net</a></cite><p><a href="https://kachibito.net/snippets/simple-tab-menu"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5c6687a6f9d3f527d81477f0f0007f4ac698c6b2/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2024%2F07%2Fsiteimg.png" alt="シンプルなタブメニュー - かちびと.net" title="シンプルなタブメニュー - かちびと.net" class="entry-image" /></a></p><p>Result jQuery $(document).ready(function() { //最初に表示するコンテンツ $(&#39;.area:first&#39;).show(); //class=&quot;active&quot;を追加 $(&#39;.tab li:first&#39;).addClass(&#39;active&#39;); //クリックイベント $(&#39;.tab li&#39;).click(function() { $(&#39;.tab li&#39;).removeClass(&#39;active&#39;); $(this).addClass(&#39;active&#39;); $(&#39;.area&#39;).hide(); $($(...</p><p><a href="https://b.hatena.ne.jp/entry/s/kachibito.net/snippets/simple-tab-menu"><img src="https://b.hatena.ne.jp/entry/image/https://kachibito.net/snippets/simple-tab-menu" alt="はてなブックマーク - シンプルなタブメニュー - かちびと.net" title="はてなブックマーク - シンプルなタブメニュー - かちびと.net" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/kachibito.net/snippets/simple-tab-menu"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://kotori-blog.com/wordpress/acf_output/ カスタムフィールド ow_ukeguchi 2015-11-17T03:39:33Z wpプラグイン wp 71 <blockquote cite="https://kotori-blog.com/wordpress/acf_output/" title="Advanced Custom Fieldsの出力"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkotori-blog.com%2Fwordpress%2Facf_output%2F" alt="" /> <a href="https://kotori-blog.com/wordpress/acf_output/">Advanced Custom Fieldsの出力</a></cite><p><a href="https://kotori-blog.com/wordpress/acf_output/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/85103bfbb6b4299c8ce698b10f74449e383be249/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fkotori-blog.com%2Fwordpress%2Fwp-content%2Fuploads%2Fthumb15.gif" alt="Advanced Custom Fieldsの出力" title="Advanced Custom Fieldsの出力" class="entry-image" /></a></p><p>まえがき この記事ではWordPressのカスタムフィールド系プラグイン『Advanced Custom Fields』の出力にスポットを当てて解説していきたいと思います。 出力タグがAdvanced Custom Fieldsのオリジナルなので初めての人は迷うと思いますがこの記事を読めば大丈夫です。 ↓出力じゃなくて『Advanced Custom Fields』の使い方...</p><p><a href="https://b.hatena.ne.jp/entry/s/kotori-blog.com/wordpress/acf_output/"><img src="https://b.hatena.ne.jp/entry/image/https://kotori-blog.com/wordpress/acf_output/" alt="はてなブックマーク - Advanced Custom Fieldsの出力" title="はてなブックマーク - Advanced Custom Fieldsの出力" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/kotori-blog.com/wordpress/acf_output/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://gallery-lounge.com/wowjs-animatecss/ ow_ukeguchi 2015-11-13T04:54:47Z jquery css3 5 <blockquote cite="http://gallery-lounge.com/wowjs-animatecss/" title="wow.jsとanimate.cssでかんたんアニメーション！ | らうんじ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fgallery-lounge.com%2Fwowjs-animatecss%2F" alt="" /> <a href="http://gallery-lounge.com/wowjs-animatecss/">wow.jsとanimate.cssでかんたんアニメーション！ | らうんじ</a></cite><p><a href="http://gallery-lounge.com/wowjs-animatecss/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2a8dbcff00d3e80e39cf90b187cc5380887ad502/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fgallery-lounge.com%2Fwp-content%2Fuploads%2F2014%2F07%2F639f2fff520aff8f749c0382d80d72cf.jpg" alt="wow.jsとanimate.cssでかんたんアニメーション！ | らうんじ" title="wow.jsとanimate.cssでかんたんアニメーション！ | らうんじ" class="entry-image" /></a></p><p>こちらのページで多用しました。 パララックスともまた違い、要素ひとつひとつをバラバラに自在に動かすことができます。かなりいい感じ。 http://gallery-lounge.com/campaign/ WOW.jsの何が凄いって超かんたん。 まずはWOW.jsとanimate.cssを読み込む。 jsは任意の場所で。ちなみに参考のページでは本家サイトの通り&lt;/...</p><p><a href="https://b.hatena.ne.jp/entry/gallery-lounge.com/wowjs-animatecss/"><img src="https://b.hatena.ne.jp/entry/image/http://gallery-lounge.com/wowjs-animatecss/" alt="はてなブックマーク - wow.jsとanimate.cssでかんたんアニメーション！ | らうんじ" title="はてなブックマーク - wow.jsとanimate.cssでかんたんアニメーション！ | らうんじ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/gallery-lounge.com/wowjs-animatecss/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://increment-log.com/element-horizontal-liquid-layout/ ow_ukeguchi 2015-10-09T04:44:59Z css レスポンシブ 10 <blockquote cite="http://increment-log.com/element-horizontal-liquid-layout/" title="要素の横並びをリキッドレイアウト（%単位）で、ネガティブマージンを使って実装する方法"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fincrement-log.com%2Felement-horizontal-liquid-layout%2F" alt="" /> <a href="http://increment-log.com/element-horizontal-liquid-layout/">要素の横並びをリキッドレイアウト（%単位）で、ネガティブマージンを使って実装する方法</a></cite><p><a href="http://increment-log.com/element-horizontal-liquid-layout/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/dd296f09ed1aae57a27b43fda3a1c1be6a99353a/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fincrement-log.com%2Fwp-content%2Fuploads%2F2014%2F08%2Fcss-list-layout-negative-margin-01.png" alt="要素の横並びをリキッドレイアウト（%単位）で、ネガティブマージンを使って実装する方法" title="要素の横並びをリキッドレイアウト（%単位）で、ネガティブマージンを使って実装する方法" class="entry-image" /></a></p><p>例えばこんなHTMLを横並びにする場合、 &lt;div class=&quot;list-box&quot;&gt; &lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;CSSはこのようになるでしょう。divタグには横幅を指定し、ulタグには横幅を指定しないようにします。 .list-box { overflow: hidden; *zoom: 1; width: 320px; } .list-box ul { margin: 0 -10px 0 0; //...</p><p><a href="https://b.hatena.ne.jp/entry/increment-log.com/element-horizontal-liquid-layout/"><img src="https://b.hatena.ne.jp/entry/image/http://increment-log.com/element-horizontal-liquid-layout/" alt="はてなブックマーク - 要素の横並びをリキッドレイアウト（%単位）で、ネガティブマージンを使って実装する方法" title="はてなブックマーク - 要素の横並びをリキッドレイアウト（%単位）で、ネガティブマージンを使って実装する方法" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/increment-log.com/element-horizontal-liquid-layout/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://kawatama.net/web/752 ow_ukeguchi 2015-09-04T02:19:25Z wordpress 関連記事 8 <blockquote cite="http://kawatama.net/web/752" title="サムネイル付き関連記事(タグ)をプラグインなしで表示させる【wordpress】"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fkawatama.net%2Fweb%2F752" alt="" /> <a href="http://kawatama.net/web/752">サムネイル付き関連記事(タグ)をプラグインなしで表示させる【wordpress】</a></cite><p><a href="http://kawatama.net/web/752"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a3d5021abd4bc92c1ba9a3be6112fd30973c7b72/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fkawatama.net%2Fwp-content%2Fuploads%2F2014%2F03%2Frelated.jpg" alt="サムネイル付き関連記事(タグ)をプラグインなしで表示させる【wordpress】" title="サムネイル付き関連記事(タグ)をプラグインなしで表示させる【wordpress】" class="entry-image" /></a></p><p>#1：関連記事を表示させるためのphpファイル（related.php）を作成 #2：single.phpにrelated.phpを読み込ませる #3：関連記事をサムネイル（アイキャッチ）付きで表示させる #1：関連記事を表示させるためのphpファイル（related.php）を作成 今回は、見ている記事（シングルページ）と同じタグがつけられた記事を表示さ...</p><p><a href="https://b.hatena.ne.jp/entry/kawatama.net/web/752"><img src="https://b.hatena.ne.jp/entry/image/http://kawatama.net/web/752" alt="はてなブックマーク - サムネイル付き関連記事(タグ)をプラグインなしで表示させる【wordpress】" title="はてなブックマーク - サムネイル付き関連記事(タグ)をプラグインなしで表示させる【wordpress】" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/kawatama.net/web/752"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.nxworld.net/12-css-hamburger-menu-active-effect.html ハンバーガーメニュー ow_ukeguchi 2015-08-28T00:59:12Z css 514 <blockquote cite="https://www.nxworld.net/12-css-hamburger-menu-active-effect.html" title="CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.nxworld.net%2F12-css-hamburger-menu-active-effect.html" alt="" /> <a href="https://www.nxworld.net/12-css-hamburger-menu-active-effect.html">CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld</a></cite><p><a href="https://www.nxworld.net/12-css-hamburger-menu-active-effect.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f6ff2d8ee63b7e1e09d9ed6c66658bdece89dc34/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2F12-css-hamburger-menu-active-effect.png" alt="CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld" title="CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld" class="entry-image" /></a></p><p>ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめまし...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.nxworld.net/12-css-hamburger-menu-active-effect.html"><img src="https://b.hatena.ne.jp/entry/image/https://www.nxworld.net/12-css-hamburger-menu-active-effect.html" alt="はてなブックマーク - CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld" title="はてなブックマーク - CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.nxworld.net/12-css-hamburger-menu-active-effect.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.softel.co.jp/blogs/tech/archives/demo/auto_adjust_height 高さ自動調整 ow_ukeguchi 2015-08-26T00:50:56Z css 1 <blockquote cite="https://www.softel.co.jp/blogs/tech/archives/demo/auto_adjust_height" title="コンテンツの高さの自動調整｜デモ｜softelメモ｜株式会社ソフテル"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.softel.co.jp%2Fblogs%2Ftech%2Farchives%2Fdemo%2Fauto_adjust_height" alt="" /> <a href="https://www.softel.co.jp/blogs/tech/archives/demo/auto_adjust_height">コンテンツの高さの自動調整｜デモ｜softelメモ｜株式会社ソフテル</a></cite><p><a href="https://www.softel.co.jp/blogs/tech/archives/demo/auto_adjust_height"><img src="" alt="コンテンツの高さの自動調整｜デモ｜softelメモ｜株式会社ソフテル" title="コンテンツの高さの自動調整｜デモ｜softelメモ｜株式会社ソフテル" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/www.softel.co.jp/blogs/tech/archives/demo/auto_adjust_height"><img src="https://b.hatena.ne.jp/entry/image/https://www.softel.co.jp/blogs/tech/archives/demo/auto_adjust_height" alt="はてなブックマーク - コンテンツの高さの自動調整｜デモ｜softelメモ｜株式会社ソフテル" title="はてなブックマーク - コンテンツの高さの自動調整｜デモ｜softelメモ｜株式会社ソフテル" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.softel.co.jp/blogs/tech/archives/demo/auto_adjust_height"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://nakazilab.com/jquery-scrollinturn/ ow_ukeguchi 2015-08-20T06:48:26Z jquery スクロール 3 <blockquote cite="https://nakazilab.com/jquery-scrollinturn/" title="スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができる「jquery-scrollInTurn.js」 | NAKAZI LAB.（ナカジラボ）"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnakazilab.com%2Fjquery-scrollinturn%2F" alt="" /> <a href="https://nakazilab.com/jquery-scrollinturn/">スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができる「jquery-scrollInTurn.js」 | NAKAZI LAB.（ナカジラボ）</a></cite><p><a href="https://nakazilab.com/jquery-scrollinturn/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f750a77cffd158241e9a8804fad99199fd00f7b8/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fnakazilab.com%2Fwp%2Fwp-content%2Fthemes%2Fnakazilab%2Fthumbnail%2Fthmb_jquery-scrollinturn.png" alt="スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができる「jquery-scrollInTurn.js」 | NAKAZI LAB.（ナカジラボ）" title="スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができる「jquery-scrollInTurn.js」 | NAKAZI LAB.（ナカジラボ）" class="entry-image" /></a></p><p>「jquery-scrollInTurn.js」は、スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができます。 スクロールして指定要素より上に戻った時、再びフェードイン表示させる・させないの指定も可能です。 デモページ JavaScript (function($){ $(function() { $(&#39;#parent&#39;).scrollI...</p><p><a href="https://b.hatena.ne.jp/entry/s/nakazilab.com/jquery-scrollinturn/"><img src="https://b.hatena.ne.jp/entry/image/https://nakazilab.com/jquery-scrollinturn/" alt="はてなブックマーク - スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができる「jquery-scrollInTurn.js」 | NAKAZI LAB.（ナカジラボ）" title="はてなブックマーク - スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができる「jquery-scrollInTurn.js」 | NAKAZI LAB.（ナカジラボ）" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/nakazilab.com/jquery-scrollinturn/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://tympanus.net/Development/CreativeLinkEffects/ ow_ukeguchi 2015-08-20T05:19:11Z css css3 179 <blockquote cite="https://tympanus.net/Development/CreativeLinkEffects/" title="マウスオーバーエフェクト　Creative Link Effects"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftympanus.net%2FDevelopment%2FCreativeLinkEffects%2F" alt="" /> <a href="https://tympanus.net/Development/CreativeLinkEffects/">マウスオーバーエフェクト　Creative Link Effects</a></cite><p><a href="https://tympanus.net/Development/CreativeLinkEffects/"><img src="" alt="マウスオーバーエフェクト　Creative Link Effects" title="マウスオーバーエフェクト　Creative Link Effects" class="entry-image" /></a></p><p>If you enjoyed these effects you might also like: Creative Button Styles Simple Icon Hover Effects</p><p><a href="https://b.hatena.ne.jp/entry/s/tympanus.net/Development/CreativeLinkEffects/"><img src="https://b.hatena.ne.jp/entry/image/https://tympanus.net/Development/CreativeLinkEffects/" alt="はてなブックマーク - マウスオーバーエフェクト　Creative Link Effects" title="はてなブックマーク - マウスオーバーエフェクト　Creative Link Effects" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/tympanus.net/Development/CreativeLinkEffects/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.nxworld.net/sample/css-only-caption-effect/ ow_ukeguchi 2015-08-20T05:10:52Z css css3 36 <blockquote cite="https://www.nxworld.net/sample/css-only-caption-effect/" title="Page Not Found - NxWorld"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.nxworld.net%2Fsample%2Fcss-only-caption-effect%2F" alt="" /> <a href="https://www.nxworld.net/sample/css-only-caption-effect/">Page Not Found - NxWorld</a></cite><p><a href="https://www.nxworld.net/sample/css-only-caption-effect/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/571044177eebe5db11722e2f8127354aa6033fb7/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.nxworld.net%2Fimages%2Fogp.png" alt="Page Not Found - NxWorld" title="Page Not Found - NxWorld" class="entry-image" /></a></p><p>Page Not Found Where are you going to fly? You seem to have followed a route that does not exist.</p><p><a href="https://b.hatena.ne.jp/entry/s/www.nxworld.net/sample/css-only-caption-effect/"><img src="https://b.hatena.ne.jp/entry/image/https://www.nxworld.net/sample/css-only-caption-effect/" alt="はてなブックマーク - Page Not Found - NxWorld" title="はてなブックマーク - Page Not Found - NxWorld" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.nxworld.net/sample/css-only-caption-effect/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://fotorama.io/ ow_ukeguchi 2015-08-20T00:42:41Z スライダー jquery 46 <blockquote cite="https://fotorama.io/" title="Fotorama — Simple and Powerful Responsive jQuery Image Gallery"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ffotorama.io%2F" alt="" /> <a href="https://fotorama.io/">Fotorama — Simple and Powerful Responsive jQuery Image Gallery</a></cite><p><a href="https://fotorama.io/"><img src="" alt="Fotorama — Simple and Powerful Responsive jQuery Image Gallery" title="Fotorama — Simple and Powerful Responsive jQuery Image Gallery" class="entry-image" /></a></p><p>Set upJust copy and paste the snippets below to integrate Fotorama. 1. This goes to the &lt;head&gt; of your page: &lt;!-- jQuery 1.8 or later, 33 KB --&gt; &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;!-- Fotorama from CDNJS, 19 KB --&gt; &lt;link href=&quot;/ajax/libs/fot...</p><p><a href="https://b.hatena.ne.jp/entry/s/fotorama.io/"><img src="https://b.hatena.ne.jp/entry/image/https://fotorama.io/" alt="はてなブックマーク - Fotorama — Simple and Powerful Responsive jQuery Image Gallery" title="はてなブックマーク - Fotorama — Simple and Powerful Responsive jQuery Image Gallery" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/fotorama.io/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://webkcampus.com/201411/838/ タブ ow_ukeguchi 2015-08-04T06:55:56Z jquery 1 <blockquote cite="https://webkcampus.com/201411/838/" title="(K)jQueryでスマホでも実装可能なサイズ可変型タブパネルを作成 | web(K)campus|WEBデザイナーのための技術系メモサイト"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwebkcampus.com%2F201411%2F838%2F" alt="" /> <a href="https://webkcampus.com/201411/838/">(K)jQueryでスマホでも実装可能なサイズ可変型タブパネルを作成 | web(K)campus|WEBデザイナーのための技術系メモサイト</a></cite><p><a href="https://webkcampus.com/201411/838/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6d7d6cd0833a70ba52b824019ec2aa09a1a40ffc/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwebkcampus.com%2Fwp-content%2Fuploads%2F2014%2F11%2Fsp_tab_top.jpg" alt="(K)jQueryでスマホでも実装可能なサイズ可変型タブパネルを作成 | web(K)campus|WEBデザイナーのための技術系メモサイト" title="(K)jQueryでスマホでも実装可能なサイズ可変型タブパネルを作成 | web(K)campus|WEBデザイナーのための技術系メモサイト" class="entry-image" /></a></p><p>スマホは少ない領域で必要な情報を表示させるため、ファーストビューに何を持ってくるか悩みます。仮に「新着情報」と「STAFブログ」を同じレベルで表示したい場合はドキュメントを切り替えて表示する「タブ」機能を使うのが有効的です。 PCではさんざん使用してきましたが、スマホサイトの作成の際にスマホ対応のタブ機...</p><p><a href="https://b.hatena.ne.jp/entry/s/webkcampus.com/201411/838/"><img src="https://b.hatena.ne.jp/entry/image/https://webkcampus.com/201411/838/" alt="はてなブックマーク - (K)jQueryでスマホでも実装可能なサイズ可変型タブパネルを作成 | web(K)campus|WEBデザイナーのための技術系メモサイト" title="はてなブックマーク - (K)jQueryでスマホでも実装可能なサイズ可変型タブパネルを作成 | web(K)campus|WEBデザイナーのための技術系メモサイト" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/webkcampus.com/201411/838/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>