株式会社オンズのブログ記事一覧

【jQuery】超軽量フリック対応スライダー［Swipeshow］を紹介します。 タッチデバイスのフリック入力にも対応したシンプルなスライドショーを実装できる jQuery プラグイン［Swipeshow］を紹介します。 このプラグインは jQuery 1.8 以上に対応。容量も軽く、サクサク動きます。 まずは Swip... 【jQuery】超軽量フリック対応スライダー［Swipeshow］を紹介します。続きを読む →

【PHP】現在開いているページの URL をウェブページ上に表示する方法。 クライアント様からのちょっと特殊な依頼で、WordPress で構築しているサイトで、現在表示しているページの URL を表示させる必要に迫られました。 実はコレ、かなり需要があるんですよね。 例えばFacebookやTwitterなどのS... 【PHP】現在開いているページの URL をウェブページ上に表示する方法。続きを読む →

【HTML5】figure 要素。 figure 要素は、HTML5 から新たに追加されたタグで、図表であることを示す際に使用します。 ここでいう図表とは、本文から参照されるようなイラスト、図、写真、ソースコードなどのこと。 本文に影響を与えることはなく、別ページなどに切り離... 【HTML5】figure 要素。続きを読む →

【WordPress】新しく記事が公開されたときに「New」と表示する方法。 現在製作中のサイトで、クライアント様から「記事が公開されたときに『New』のサインを表示させて欲しい」との依頼がありました。 もともと WordPress で構築していたサイトだったので比較的簡単に実装できたわけですが、今日はその際に使った... 【WordPress】新しく記事が公開されたときに「New」と表示する方法。続きを読む →

【WordPress】特定のプラグインによって自動的に追加される不要な CSS や JavaScript を読み込ませなくする方法。 WordPressには便利なプラグインがたくさんあって、あれもこれもと多く入れてしまいがちです。 一部の画面に表示させるタイプのプラグインでは、独自のスタイルシートを読み込んでいるケースがよくあります。 プラグインごとにファイルを分ければメ... 【WordPress】特定のプラグインによって自動的に追加される不要な CSS や JavaScript を読み込ませなくする方法。続きを読む →

【CSS】先頭の文字を大きく表示する。 洋書でよく見かけるこの表現。 これは p:first-child:first-letter プロパティを使うことで、一番始めのパラグラフの一番始めの文字だけに指定することができます。 p:first-child:first-letter {... 【CSS】先頭の文字を大きく表示する。続きを読む →

【CSS】番号リストの表示を変更する方法。 通常は ol ＋ li 要素を使って番号付きのリストを表示させることができますが、「第１章、第２章…」や「１問目、２問目…」など、数字と一緒に他の単語も表示させたい場合は counter-increment プロパティを使い、:before... 【CSS】番号リストの表示を変更する方法。続きを読む →

【CSS3】テキストに蛍光ペンでマーカー線を引いたような効果を加えるには？ テキストに、単に背景色を加えるだけなら background でしていできますし、下線を引くなら border-bottom や CSS3 の text-decoration-line で実装できます。 今回はもっとグラフィカルに、蛍光ペン... 【CSS3】テキストに蛍光ペンでマーカー線を引いたような効果を加えるには？続きを読む →

【CSS3】マウスオーバーした際に画像を拡大させるCSSテクニック。 当サイトでも随所で多用使っている、マウスオーバーした際に画像を拡大させるCSSテクニックを紹介します。 まずはこちら。CSSの設定です。 img.grow { -webkit-transition:0.2s ease-in-out; -mo... 【CSS3】マウスオーバーした際に画像を拡大させるCSSテクニック。続きを読む →

【PHP】重複しない複数の要素をランダムに表示する方法。（PHP編） さて。昨日紹介した『重複しない複数の要素をランダムに表示する方法 jQuery編』に引き続き、今日は同じ処理を PHP で実現させる方法を紹介します。 PHPで重複しないランダムな要素を表示させるには、配列をシャッフルして任意の数だけ要素を... 【PHP】重複しない複数の要素をランダムに表示する方法。（PHP編）続きを読む →

【jQuery】重複しない複数の要素をランダムに表示する方法。（jQuery編） 例えば「1」〜「10」までの要素の中から３つだけランダムに抽出して表示させたい場合があります。 この際、抽出した要素が重複することなく、さらに順番も含めてランダムに表示させるにはどうしたらいいでしょうか？ 今日は、そんなときに重宝する便利な... 【jQuery】重複しない複数の要素をランダムに表示する方法。（jQuery編）続きを読む →

【HTML5】b 要素。 HTML4 以前では、<b>タグはテキストを太字にするために使われてきました。 HTML5 では、文書内のキーワードや製品名など、他と区別したいテキストを表す際に使用します。重要性や強調といった役割はありません。 <p&g... 【HTML5】b 要素。続きを読む →

【HTML5】a 要素。 ウェブサイトでリンクを設定する <a> タグですが、HTML5 ではいくつか仕様が変更になりました。 target 属性が非推奨ではなくなった。 name 属性が廃止になった。 アンカーリンクの使い方が変更になった。 リンクを設... 【HTML5】a 要素。続きを読む →

【HTML】iPhone やスマートフォン等で、ウェブサイト観覧時に電話番号が自動検出＆リンクされるのを防ぐ方法。 iPhone をはじめ、一部のスマートフォンでは、ウェブサイト上で電話番号らしき数列を見つけると自動でリンクを設置する機能が働きます。 これにより、ユーザーは電話番号をワンクリックするだけで電話をかけられるようになります。 ただし、ブラウザ... 【HTML】iPhone やスマートフォン等で、ウェブサイト観覧時に電話番号が自動検出＆リンクされるのを防ぐ方法。続きを読む →

【ADS】空想の世界が舞台の［Mitsubishi Strakar L200］のプロモーションが男心をくすぐります。 一昔前の広告ですが、三菱のトラック［Strakar L200］のプロモーションが秀逸だったので紹介します。 過去、地球上に存在したとされる空想の国が舞台となっており、冒険好きな男の子の心をくすぐる素敵な画像に仕上がっています。 まずはこちら... 【ADS】空想の世界が舞台の［Mitsubishi Strakar L200］のプロモーションが男心をくすぐります。続きを読む →

【WordPress】自動アップグレード機能を無効化する方法。 WordPress 3.7 から自動アップグレード機能が導入されました。 あまり頻繁にログインすることがないサイトや初心者の方には非常にありがたい機能だと思います。しかし諸事情により自動更新だと何かと不都合な場合もあります。 そこで、自動ア... 【WordPress】自動アップグレード機能を無効化する方法。続きを読む →

【HTML5】cite 要素。 HTML4以前では人の名前にも使われていた cite 要素ですが、HTML5では作品のタイトル（本、新聞、小論、詩、楽譜、楽曲、脚本、映画、テレビ番組、ゲーム、彫刻、絵画、演劇、オペラ、ミュージカル等）を表すようになり、使用範囲がさらに限定... 【HTML5】cite 要素。続きを読む →

【CSS3】フォントサイズは「rem」で指定するのが最適解。 CSSでフォントサイズを指定するとき、通常は「em」、「%」、「px」あたりを使って指定することが多いと思いますが、CSS3から利用可能になった「rem」という新しい単位が非常に便利なので、その使い方を紹介します。 「rem」とは「root... 【CSS3】フォントサイズは「rem」で指定するのが最適解。続きを読む →

【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。（改訂版） ウェブページ読み込み時に「フワっ」とした感じのエフェクトでフェードインしながら表示させる方法です。 ここでは「これ以上簡単にはできないよ！」というくらい、ほんの僅かなコードで実装するテクニックを紹介します。 まずは HTML の記述方法から... 【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。（改訂版）続きを読む →

特殊なフランス語のHTML表記。 某フランス料理店のホームページ制作で、メニューをフランス語でも表記することになりました。 そこで「アクサン グラーヴ」「アクサン テギュ」「トレマ」など、フランス語の特殊文字をHTMLで表示するコードを一覧にまとめましたので紹介します。 名... 特殊なフランス語のHTML表記。続きを読む →

【CSS】2行目以降を1文字下げる［text-indent］の使い方。 箇条書きや注意書きの文章を書く場合に、文章の先頭に「・」や「※」などの記号を記述することがよくあると思います。 しかし、2行目以降がその記号の下に回り込んでしまうことが気になっている方も多いのではないでしょうか。 手作業で地道に改行を入れた... 【CSS】2行目以降を1文字下げる［text-indent］の使い方。続きを読む →

【Download】大量のアイコンをSVG、PNG、Web Font 等でダウンロードできるサイト。 大量のアイコンをAIやSVG及びPNGとしてダウンロードできるサイトをいくつか紹介します。 flaticon http://www.flaticon.com iconmonstr http://iconmonstr.com 40 tiny ... 【Download】大量のアイコンをSVG、PNG、Web Font 等でダウンロードできるサイト。続きを読む →

【HTML5】small 要素。 小さい文字を表すのに使われていた<small>タグは、HTML5では免責条項・警告・法的制約・著作権表記などを説明するための要素へと変更になりました。 これまで同等の意味（著作権表記等）に使っていた<address>... 【HTML5】small 要素。続きを読む →

［お名前.com］を退会するのがエラい大変だった件！ クライアント様からのご依頼でドメインの移管を代理で行ったのですが、その際［お名前.com］を退会するのがエラい大変だったという、タイトルどおりのお話です。 ホントに大変でした。 2014年1月某日。 新年早々舞い込んだホームページ制作のリニ... ［お名前.com］を退会するのがエラい大変だった件！続きを読む →