hatebu.meThis domain may be for sale!
【はてなブログ】カテゴリーを階層化する方法
検索で調べると、ある定番のスクリプトを外部から読み込む方式で導入している人しかいなかったので自前で作ってみました。 当記事の方法を導入すると、上記のような表示になります。 ・ブログ運営 ・ブログ運営-カスタマイズ ・ブログ運営-収益 カテゴリー名を上記のようにつけることで、疑似的に２階層カテゴリーを実現しています。 ・「-」＝ハイフンの半角です ・スペースは入れないでください 導入方法 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function sub_cat(str){ (function($) { $(function() { $(str).each(f
レスポンシブサイトでクリッカブルマップを使う時に超便利な「jQuery RWD Image Maps」
業務メモ。 最近はかなり減りましたが、Webサイト作成時たまに使用せざるを得ないあいつ。そう、クリッカブルマップ。 画像の好きな場所にリンクを仕込めるのは便利ですが、レスポンシブの案件ですとリンクエリアが指定した座標からずれてしまうため困っちゃう。 jQuery RWD Image Mapsはそんな悩みを一発で解決してくれる便利なjQueryプラグインです。 使い方 使い方は非常に簡単。まずはstowball/jQuery-rwdImageMapsからjsファイルをDL。適宜アップロードします。 HTML [html] <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.rwdImageMaps.js"></script>
jQuery でイメージマップ：ほんっとにはじめてのHTML5 サンプル
jQuery プラグイン ImageMapster で、イメージマップのロールオーバーを変化させる このサンプルは、jQueryベースの「ImageMapster」というプラグインを使っています。 画像を最低2種類（ノーマル、ロールオーバー用）だけ用意すれば良いので簡単です。 「九州」のみ、リンクを外部サイトにしています。（他はこのページの下部にリンク） ★イメージマップは本来「target="_blank"」が設定できますが、「ImageMapster」を使うと無効になるようです...。 サンプルを修正しました（2013年4月） このサンプルは「リンクできない」というご指摘をいただき、ソースを修正しました。 ご迷惑をおかけした方々、申し訳ございませんでした。 解決のソースを送信してくださった中村様、ありがとうございました！！ 以前のソースはこちら。 ロールオーバーで japan2.gif
よく使うjqueryのお洒落な機能まとめ(クラス系・要素生成編) | クロジカ
ホーム / ハック / よく使うjqueryのお洒落な機能まとめ(クラス系・要素生成編)
【レスポンシブ】デバイスの横幅で画像を切り替える方法
2024年04月06日非レスポンシブのサイトをレスポンシブ化いたしました。2024年04月05日テーマファイルが編集できない不具合を解消いたしました。2024年04月04日WordPress、テーマ、プラグイン、のバージョンアップを担当いたしました。2024年04月03日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。2024年04月02日お問い合わせフォームを再構築いたしました。2024年04月01日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。2024年03月31日サーバー移管に共に表示されなくなったサイトを表示される状態まで復旧いたしました。2024年03月30日WordPressの操作方法をサポートいたしました。2024年03月29日サイドバーに人気記事を表示させる仕組みを導入いたしました。2024年03月28日テキスト等の簡易な修正を
【デモページあり】ブログに雪を降らせる WordPress プラグイン 3 選 - Naifix
クリスマスシーズンにブログに雪を降らせてみませんか？ 本記事では以下の WordPress プラグインをご紹介しています。 WP Snow Weather Effect Christmasify! 番外編として、CSS のみで雪を演出するサンプルコードも載せています（本ページ上部で使っているコードです）。 雪を降らせる WordPress プラグイン 以下の環境で実際に検証しました。 WordPress 6.4.2 テーマ：Twenty Seventeen 各プラグインの動作デモページつきでご紹介します。 WP Snow WP Snow – Best Snow Effect Plugin 「WP Snow」は、有効化しただけでサイト全体に雪を降らせてくれるシンプルなプラグイン。 ［設定］>［WP Snow］で雪の大きさや色、適用したいページの指定ができます。 Font Awesome アイ
楽天（楽天トラベル）の管理サイトでiframeを使い、その高さを自動調整する試み : kagzugiの備忘録
楽天トラベルの管理サイトで、テンプレートで作るページの他に、HTMLを直接記述してある程度自由にページを作る機能があるのですが、作成は16ページまで、公開はそのうち8ページまでと言う素敵な仕様です。 もっと表示させたいデザイナーさんと打ち合わせした結果、iframeを使って切替えようということになりました。 個人的にはiframeはページの一部（お知らせとか）位にしか使ってこなかったのですが、ページの大部分をiframeを使って表示させるのは初めてでした。 iframeは中に表示させるページよりも大きくして、スクロールバーを表示させないように（iframeを意識させないように）作り始めました。 いろいろ問題が出てきました。 まずは、iframe内のページではアンカーを使ったページ内リンクが使えないと言うことです。 よく考えると、iframe内にスクロールバーが出ていないので当然です。 また
スマホで擬似的にhoverを実装する - しるてく
スマホで :hover を使うと、タップを話した後も色が変わったままだったりしてしまうので、class名をあてて擬似的にhoverを実装する必要があるようだ。 jQueryを使う場合 $( 'a' ).bind('touchstart', function(){ $(this).addClass( 'hover' ); }).bind('touchend', function(){ $(this).removeClass( 'hover' ); }); jQueryを使わない場合 var pseudoHover = function() { var elm = document.getElementsByTagName('a'); for(var i = 0, l = elm.length; i < l; i++) { elm[i].addEventListener('touchstart
ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
2023.02.11 【2023年最新】ECサイトの構築方法を徹底比較。おすすめのショッピングカートシステムとは？ 本記事では以下のECサイト構築に関する疑問やお悩みに対する解決策をご提案いたします。 ECサイトの新規構築や移管にあたり、どの方法が自社に最適であるか？を調べたい。 現在EC運用中のプラットフォームが陳腐化しており、常に最新化を維持できるシステムに切り替えたい。 ECサイトのセキュリティを強化したい。セキュリティに強いECサイト構築方法を調べたい。 自社ECでは独自のサービスを展開しておりカスタマ […] 2022.12.15 EC-CUBEからクラウド型ASPカートシステムへの移行(リプレイス)方法を徹底解説 EC-CUBEは、ECサイト構築に特化したオープンソースのCMS(コンテンツ・マネジメント・システム)です。ECサイト上で独自性の高い販売方法やサービス提供を展開した
CSSだけでメニューが開いたり閉じたりするアコーディオンを作る！javascript不要 | 9ineBB
jQueryを使うと簡単にアコーディオンを実装する事が出来るのですが、CSSでもアコーディオンの作成が可能です CSSだけでアコーディオンを作成 HTML コード <div class="menu"> <label for="Panel1">ボタン1</label> <input type="checkbox" id="Panel1" class="on-off" /> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> <label for="Panel12">ボタン2</label> <input type="checkbox" id="
jQueryでレスポンシブサイトでPC画面とスマートフォン画面の切り替えスイッチを実装する実験｜BLACKFLAG
これらの設定値を変更することでもろもろ調整が可能になっています。 「jquery.cookie.js」を使用しページ遷移した際でも viewportの値（レイアウト状態）は引き継がれるようになっています。 ボタンにはそれぞれアクティブ時にクラスがつくようになっていますが PCで閲覧している場合はボタンをクリックしてもレイアウトは変わらないので ボタンの装飾を変えると違和感が出てしまうこともあります。 （切り替えボタン自体をiPhone、iPad、Androidの時のみに表示する、 みたいな構成にするのが理想的かもしれません。） iPhone／iPad／Android以外はボタン非表示サンプルを別枠で表示 ※サンプル画面はスマートフォンでご確認ください。 実際、あまり使う機会はないかもしれませんが レスポンシブレイアウトで構築したWebページでスマートフォンでもPC画面を表示させたい、 とい
【修正のお願い】Facebookシェアボタンのシェア数がカウントされない問題への対処法 - いつ俺〜いつから俺ができないと錯覚していた？〜
こちらのシェアボタンのコードを使っている方へ連絡です！ Facebookのシェア数カウントAPIが古いバージョンのものが利用できなくなったようです。 そのため、シェア数がカウントできず、以下のように0になってしまっています。 そのため、次の修正をお願いします。 修正コード 修正するのは、上の記事中にある「シェア数を数えるJQueryコード」になります。 こちらの23行目にある、「result.shares」を「result.share.share_count」に変更してください！ 修正後の全体のコードはこちらになります。 <!--JQueryを使用--> <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <!--シェア数の取得--> <script> //はてな
jQueryが動かない（動作しない）理由を考察！スクリプトのどの箇所にミスがあるかを調べる裏技も紹介 | 誰かのためのホームページ制作
jQueryが動かない時の悲しさ。筆者も幾度となく経験している。 だが今となっては、粘り強く原因を究明し対応できるようになった。 本稿ではjQueryが動かない主な原因について紹介するとともに、どのように対応し動かせばよいのかの解説もつけてみた。実際のところ対応方法はケースバイケースなので、詳細のアドバイスはなかなか難しいが、トラブル解決のヒントに役立てていただければ幸いだ。 jQueryが動かない原因を考察 jQuery本体を読み込んでいない あるある度：★☆☆☆☆ jQuery本体を読み込んでいないと、スクリプトを書いても動かない。プラグインも動かない。ここは基本中の基本なので、忘れている人は少ないだろう。 jQuery本家サイトにて本体をダウンロードしファイルを読み込むか、GoogleのCDNを読み込もう。後者の方法を推奨する。 <script type="text/javascri
ページトップに戻ろうと上にスクロールしたその時に！ナビゲーションを表示して快適に誘導する方法。 | Strata
常に表示される「ヘッダメニュー」や「トップに戻るボタン」は画面を圧迫 ファーストビューより下にスクロールすると「トップに戻る」ボタンや、カテゴリーメニューが常に表示されるようになるUIは親切で便利です。でもこれは余白が十分に取れるレイアウトなら良いですが、コンテンツエリアが圧迫され邪魔になることがよくあります。元々画面の小さいスマホではなおさらですね。 上に戻ろうとスクロールした時と、一番下に当たった時にだけナビゲーションを表示 最近見かけるようになった、上に戻ろうとスクロールした時に初めてボタンやメニューが表示されると、順当にコンテンツを読み進めているユーザーを邪魔せずに、ナビゲーションできそうなので、このサイトにも実装してみました。 ちなみにiOS 7のSafariでは、スクロールを始めると「戻る」「進む」などのフッタメニュー表示が隠れて、さらに大きな領域でコンテンツが楽しめるようにな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
