ホーム / ハック / よく使うjqueryのお洒落な機能まとめ(クラス系・要素生成編)

スマートフォンサイトには、よくPCの表示とスマートフォンの表示を切り替えるボタンがついています。 通常はPC用のURLとスマートフォン用のURLにリンクさせているのですが、レスポンシブWebデザインはそもそもワンソースなので、そのままでは切り替えることはできません。 そこでレスポンシブWebデザインでも使える切り替えボタンをjQueryを使って実装してみました。 仕様 今回実装してみたのはこんな感じのやつです。 このボタンを以下のような仕様で実装します。 「PC」ボタンを押すとPCの表示、「SP」ボタンを押すとスマートフォンの表示に切り替える 最後に表示した状態をCookieに保存し、次のアクセス時も同じ状態で表示させる 実装方法 基本的には、viewportにデバイスの表示幅を指定することで切り替えることができます。 PC用のviewportの記述 <meta name="viewpor

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日テキスト等の簡易な修正を

巨大なティラノサウルスやトリケラトプスに迎えられると、「こんにちは」と 挨拶 （ あいさつ ） せずにいられない。 取材した東京・上野の国立科学博物館には、年間パスで通う。恐竜など約１０００種の学名と、それらに使われる２０００語以上の単語を解説した辞典の著者は、恐竜好きの主婦だ。 「学名のほかすてきな和名がある植物と違い、恐竜は学名が呼び名になっていて、刊行物によって読み方がバラバラで」。好きな語学を役立てようと、執筆を始めた。フランス語の実務翻訳の仕事をこなしてきた経験に加え、５０歳で学び始めたラテン語と古典ギリシャ語が生きた。完成まで５年。研究者が使える水準を目指し、小林快次・北海道大准教授と藤原慎一・名古屋大助教が監修で支えた。 学名にこめられた豊かな情報を読み取るには、正しい理解が欠かせない。 ティラノサウルスは「暴君トカゲ」の意味。だが、古典ギリシャ語で暴君を表す【ｔｙｒａｎｎｏ

「わかる」って、たーのしー！よね 私たちは、地球が球形をしていて太陽の周りを回っていることを幼いうちから教えられている。けれども、地球が丸くて動いているなんて、よくよく考えると直観に反している仮説である。普通に考えれば地面は平らで動いていない。動いているのは太陽のほうだろう。人類で最初に地球が丸いと理解することは、さぞエキサイティングであっただろう。 別に人類で最初でなくったって、直観に反することが事実だわかる過程は素晴らしい体験である。私は大学生のころ、イギリスの進化生物学者であるドーキンスが書いた『利己的な遺伝子』（当時は『生物＝生存機械論』）という本を読んで、動物の行動は「種の保存」のためのものであるという「常識」が間違っていることを思い知らされた*1。貴重な体験であるが、どういう感情なのか説明するのが難しい。ゲームをプレイしたことのない方にはまったく伝わらないたとえで申し訳ないが、

楽天は3月7日、大阪市内のマクドナルド全88店舗において、共通ポイントサービス「楽天ポイント」が利用可能になると発表した。サービス開始は3月8日からで、大阪市内での利用状況などを見て実施店舗の拡大を検討する。 マクドナルドの対象店舗で「楽天ポイントカード」を通して、楽天グループの各種サービスで利用できる「楽天スーパーポイント」が貯められるほか、会計時にポイントでの支払いが可能になる。ポイント付与率は、税込100円の支払いにつき1ポイント。 楽天と日本マクドナルドは、2008年12月に楽天の電子マネー「楽天Edy」で連携を開始。現在、全国2909店舗で楽天Edyによる決済が可能となっている。また、楽天本社がある二子玉川（東京都世田谷区）のマクドナルド店舗では、来店ポイントアプリ「楽天チェック」を導入。楽天の各種サービスを活用した施策を実施している。 楽天では、サービス開始を記念し、対象店舗で

前回の記事で牛若納豆を紹介しましたが「牛若があれば弁慶なんてのもないかなー」と漠然と考えていたのですが ありました、弁慶納豆。 この納豆、なんと和歌山県産なのですね。知らなかった。「日本全国納豆の旅」の和歌山はこちらにしたほうが良かったか…。わたしの検索力もまだまだです。 ひさひざの更新です。ご無沙汰しております。 今回はちょこちょこしたものを、ちょこちょこご報告したいと思います。 とはいえ、更新自体は約4カ月ぶり、ドラマなら1クールで1本終わっています。自分でもあきれるほどの更新の空きっぷりです（笑） 空きずに読んでくれている方には感謝です。ほんとに(^^) ではでは、本文です。 （2020年2月15日、記事をリライト） 弁慶納豆 じつは、買ったのは昨年12月だったりします。 購入場所は、そう、そごう神戸だったはずです。製造元は碓井商店さんです。 味は昔ながらの素朴な味わい（だった気がし

「ブロックされすぎww」「Twitterの鍵付きを覗くツールあるって知ってた？」など、思わずクリックしてしまう文言を悪用し、意図しないURLを自動ツイートするTwitterスパムが出回っている。スパムアプリを認証させた後、無害な別アプリのサイトを表示することで、無害なアプリに偽装しているのが特徴だ。 スパムアプリによる偽装被害にあっているアプリの1つが「ぶろるっく」だ。制作者の「おさ」さんのまとめによると、2月末から3月上旬だけで74ものスパムアプリを確認したという。 最近出回ったのは「ブロックされすぎｗｗ あなたは×人にブロックされています」「Twitterの鍵付きを覗くツールあるって知ってた？」など、Twitterユーザーが気になる内容や、「これ分かる人いる？難し…」「視力だけじゃできない #スマホ視力テスト」など診断テスト系、「スマホで5分クリックしてるだけで日給5万超えたなう(´・

オリジナルのアイコンを作るシンプルで簡単なデザインテクニックを紹介します。 円や矩形などの基本的な形を組み合わせたり、変形させたりして、さまざまなアイコンを作成します。 作業に慣れてしまえば、どれも1分もかからずにアイコンを作成できます。 The Super Simple Guide to Iconography 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 目のアイコンの作り方 矢印のアイコンの作り方 バッテリーのアイコンの作り方 箇条書きリストのアイコンの作り方 クラウドのアイコンの作り方 次に進むのアイコンの作り方 ファンネルのアイコンの作り方 プレイ・ポーズのアイコンの作り方 位置矢印のアイコンの作り方 位置ピンのアイコンの作り方 サウンドのアイコンの作り方 ウェーブのアイコンの作り方 Toptalのアイコンの作り方

筆記体フォントは、当サイトでも人気の高い素材のひとつです。特に新しく公開されている新作素材を中心に集めてみました。 海外デザインブログTextuts.comで、デザイン性に優れた筆記体フリーフォント素材45個をまとめたエントリー「45 Best Free Script Fonts 2013」が公開されていたので、今回はご紹介します。アルファベット順で羅列していますので、お気に入りの筆記体デザインを探してみてはいかがでしょう。 今回のフリーフォント最大の魅力は、個人利用に限らず、商用利用にも対応しているという点です。デザイン制作に活用したくなる、高品質フォント素材を中心に、これまでにまとめた筆記体エントリーと、あまりかぶらないようにチョイスしています。 詳細は以下から。 デザイン力をアップする、人気筆記体フリーフォント素材まとめ 2013年版 Alako-Bold ※　個人、商用利用可能 A

前回、レスポンシブWEBデザインテンプレートを使って、PCサイトからモバイルフレンドリーサイトにする方法をご紹介しましたが、今日は「PCとスマホで広告サイズを切り替える方法」をご紹介したいと思います。 アドセンスをお使いなら、「レスポンシブ」広告ユニットを使うだけで、PCやスマホ、 タブレットなど、デバイスによって最適なサイズの広告が選択されるのでとても便利なのですが、エーハチネットやバリューコマースなどのアフィリエイトサービスには、現在のところ「レスポンシブ」広告がありません。 468×60サイズの広告など貼ったりすると、スマホで見ると横に大きくはみ出してしまいとても格好が悪い・・・。妥協して300×250サイズの広告を一つ貼るという手もありますが、“帯に短したすきに長し”といった感じは否めません。 なので、CSSを使ってPCとスマホでの広告表示切替をする必要があります。 480px以下

こんにちは。 北海道池田町の地域おこし協力隊かつ駆け出しボルダラー、kuro隊員です。 無知なりにblogをカスタマイズ この記事をPCから読んでいる方はお気付きでしょう。昨日～今日にかけて色々デザインをいじっています。 上の画像が旧デザインですが、顔に似合わず爽やかな水色を背景色に設定してごまかしごまかしで3か月半。 正直な話、デザインはやっつけ仕事です。というか真剣に取り組んでもたかが知れているド素人なので「まぁこれでいいや」なんて思ったりもしていました。 しかしアクセス数が伸びない今、聖域なき改革が必要。 いきなり全部改革しようとすると3日間くらいblog更新できないくらい手こずるので、ちょいちょい変わっていく当blogのデザインをお楽しみ下さいませ。 無知なりにblogをカスタマイズ こんなに簡単だった目次の作り方 デザイン（テーマ）変更 スマホ対応テーマ（レスポンシブ） html

13/11/20:jQueryプラグイン版を追加しました。 14/10/22:jqueryscript.netに紹介されました。 IMGタグのALT属性は本来、画像を表示しないブラウザが画像の変わりに表示する文字列です。 しかしながら場合によっては画像の脇にそれを表示したいことがあります。 例えば画像を表示しない場合（RSSなど）に出すと文が不自然になるので必要がなく、画像を表示する場合だけ補足としてに出したい場合です。（本来の目的とは逆ですが） ブラウザによってはではCSSを使いimg:afterでaltの内容を出すことができるのですが、これはHTMLの構成的におかしい(IMGの外にテキストが要素で囲まれずに追加される）ので、これを表示しないブラウザも多いです。 ここではJavascriptを使った方法を紹介します。 HTMLのIMGタグのALT要素を画像に並べて表示するjQueryプラ

どうも。俺だ。景虎だ。 キミは違うかもしれないけれど、俺は基本的に人に何かをお願いするのが苦手なタイプの人間なのである。それゆえに、すべての事柄を自分で解決しなくてはならないと考えてしまうことがよくあるのだ。 デザインであれば資金も人脈もない俺にとってはもう自分でやるしかない事柄になってしまっていたのである。 しかし、実際にデザインセンスが良いのかどうかという部分については、「素人以上新人デザイナー以下」というレベルのものだったろうと思ってやまないのだった。 キミも個人で活動しているから仕方がなく自分でやっていたけれど、正直『デザインに関しては』自信がないと思っていたりするかもしれない。 もしそうなのであれば、この「デザイン入門教室」という本は絶対に読んでおいた方がいいと言えるだろう。 読むと言うよりかは、一冊買って「実際にデザインが必要になったときに使って」みてほしいと思ってやまない一冊

http://d.hatena.ne.jp/jun-jun1965/20160914 先ごろツイッターで、高橋昌一郎が『理科の探検』とかいう季刊雑誌に書いた文章を引いて私をバカにしたものが出ていて、その『理科の探検』のアカウントらしいものがそれをＲＴして「小谷野敦氏のレベル」とだけ書いた。 調べると、この『理科の探検』（rika tan）というのは、法政大教授の左巻健男という人が編集長である。図書館では新刊だからまだ中央から回ってこないし、駅前の本屋にもない。そこでＳＡＭＡ企画という方南町にある事務所らしいところへ電話をしたら、息子の左巻光晴という人が出た。だが、ツイッターアカウントのことは知らないと言う。この息子は41歳だというが、何をしている人なのかと不思議に思ったが、夜になれば左巻が帰ってくるのかと訊いたら、それはないと言う。そこで法政大のほうを調べると、学部から「教科教育センター」

（朝日文庫・６７０円） 「無」でなく、確固として生きている 文庫本ではあるが、日本人男性の平均余命に達した人間が、こうしたタイトルの書物を開くのは、確かに僅かながら勇気が要る。本書は、老いる、と加齢の区別に始まって、まずは動物は「老いない」あるいは「老いた」動物はいない、というテーゼを出発点にする。「え？」と訝（いぶか）しく思う方もおられようが、日高さんは「老いる」は「死」を前提にした概念である、と定義するから、自然にそうなる。通常動物は「老いた」ら、即「死ぬ」のである。だから、自然界で「老いた」動物に出会うことは普通ないのである。そのことを前提にした次の言葉に凝然としない読者は、至って若いか、想像力が欠如しているからだろう。「十分に老いているのに死なない人もたくさんいる。それをわれわれは高齢化社会と呼んでいる」 「老いた」動物は自然界には存在しないと書いた。そんなはずはない、我が家のイヌ

今回はレストランや小売店といった店舗経営者の方向けに、VisaカードやJCBカードといったクレジットカード決済を導入する「加盟店契約（かめいてんけいやく）」の方法と、そのメリットをまとめてみたいと思います。 自店舗にカード決済を導入したいけれども、加盟店になるにはどうしたらいいの…と悩んでいる方は是非、参照ください。 クレジットカード加盟店になる方法： １．モバイル決済を導入する： 加盟店手数料も低い： ２．カード会社と直接契約をする： デメリットは加盟店審査が厳しい点： ３．取引のある銀行に相談する： 銀行側にもメリットは多い： ４．カード決済の代行業者を探す： すぐにカード決済導入が必要な時の対処法： １．モバイル決済を利用する： 電子マネー決済導入も早い： ２．インプリンターを使う： Amazonなら販売価格は2,000円程度： カード会社や銀行に頼むと貰える： ３．導入が早い業者に

思いついたけど記事にするには浅いかもしれない、ただ記憶を記録する。 エモーショナルライティングが少し前から流行ってるね。まだ過去形ではないよね？　私は著者さんのセミナーを受けたのでけっこう印象に残っていて、また本を読み返しつつあるんだけど。 このエモーショナルライティングについて、「それを具体的にどうするか」について自分なりに掴んでない人が多い、て北九州出身の某Sさんが言ってた。 （エア言及すみません） そのツイートを読んで以来、私はどうだろう？と考えている。 うーん。 「具体的にどうするか」が「自分なりに掴むもの」である点にとても同意。最適解は人によって違うだろう。キャラによるし、読者を持っていきたい方向による。 だからこそ、「具体的に」なんて誰も教えてくれない。教えられない。 自分はエモいのか問題 他にも「エモい」について書いている人がいて、色々と思った。あとドラマ見た時にも思った話。

レスポンシブWebデザインでiframe要素のサイズ比率を維持した状態で縮小させる方法を紹介します。 (1) iframe要素にdiv要素（親）を囲む (2) 親、iframe要素にpositionプロパティを指定、親にはrelative、iframe要素にはabsolute (3) 親の要素にpadding-topプロパティ（bottomでも可）に画面比率を算出して指定 ※画面比率の算出方法 16:9の場合（横幅は100%） 100 / 16 9 = 56.25% 4:3の場合（横幅は100%） 100 / 4 3 = 75% デモ（リンク） ※デモは4:3の場合です。 CSS .iframe-content { position: relative; width: 100%; padding: 75% 0 0 0; } .iframe-content iframe { position

突然ですが、まずは下記の味気ないダミー画像をご覧ください。 これらは、Googleアドセンスやアフィリエイトバナーの表示確認用に作ったダミー画像です。 ただのダミー画像表示ではなく、一工夫してあります。 画像自体は、placehold.itというダミー画像生成サービスから拝借しているのですが、ただ単にimgタグで記述して表示しているのではなく、一工夫してあります。 IFRAMEで取得しており、CSSも指定しています。 理由があります。 例えばレスポンシブデザインでの構築を見越している場合などにおいて、img {maw-width: 100%;}とすることで、画像がエレメントの横幅に応じて伸縮するよう設定することも珍しくありません。 (私はほぼ常にその設定をしています。) その場合、imgタグで取得するともちろんダミー画像も伸縮します。 するとここで問題が。 アドセンス広告などは、(