株式会社オンズのブログ記事一覧
指定の月に投稿された 23件の記事を表示中
-
【jQuery】ページを開いた際にエフェクトを表示する［IntroTzikas］の使い方 ページを読み込む際に、ローディング中であることを示すエフェクトを表示させているウェブサイトは数多くあります。 これまでは主に Flash を使う方法が主流でしたが、既に Flash は廃れた技術。 そこで、同様のことを jQuery で実現... 【jQuery】ページを開いた際にエフェクトを表示する［IntroTzikas］の使い方続きを読む →
-
【PHP】正規表現で、入力された数値が郵便番号かどうか判別する方法。 PHPの正規表現を使って、入力された数値が郵便番号かどうかを判別する方法を紹介します。 正規表現で、入力された数値が郵便番号かどうか判別する方法： デモページ 日本国内では、郵便番号は「xxx-xxxx」と、3桁の数字＋4桁の数字で表すよう... 【PHP】正規表現で、入力された数値が郵便番号かどうか判別する方法。続きを読む →
-
WordPressの［404.php］などに設定しておくと便利な各種リダイレクトの方法。 WordPressのテンプレート「404.php」、または「header.php」に記述しておくと便利な、「htmlリダイレクト」の方法を紹介します。 基本的な方法は［header.php］の中、<head>〜</head... WordPressの［404.php］などに設定しておくと便利な各種リダイレクトの方法。続きを読む →
-
-
-
【CSS】マウスカーソルの形状を変える。 CSS の［cursor］プロパティで、マウスカーソルの形状を変更する方法を紹介します。 マウスカーソルの形状 通常「cursor」プロパティには以下の値を指定できます。 auto default pointer crosshair mov... 【CSS】マウスカーソルの形状を変える。続きを読む →
-
【CSS3】電光掲示板を再現するテクニック。 昨日の記事で紹介した［CSS3 Marquee］を改造して、電光掲示板を再現する方法を紹介します。 百聞は一見に如かず。 まずはデモページをご覧ください。 →CSS3 電光掲示板 基本的な作り方は［CSS3 Marquee］と同じです。 :... 【CSS3】電光掲示板を再現するテクニック。続きを読む →
-
【CSS3】全ブラウザ対応！ CSS3 で作る marquee の実装。 HTML5からは非推奨（廃止？）となり、今となっては懐かしい<marquee> タグ。 内包する要素をスライドさせて表示することができるこのタグは、一時は廃れたかのように見えましたが、最近再び見直されるようになり、同じ動作をする... 【CSS3】全ブラウザ対応！ CSS3 で作る marquee の実装。続きを読む →
-
【PHP】リンク元の URL を表示する方法。 リンク元のページのURLを取得する方法を紹介します。 使いどころとしては、例えばページ内に「元のページへ戻る」リンクを設置する場合。 通常であれば javascript:history.back(); を使えばいいだけですが、もしユーザーが... 【PHP】リンク元の URL を表示する方法。続きを読む →
-
-
【jQuery】Simple News Ticker の使い方。 シンプルな News Ticker を探していたところ、条件にピッタリ合ったプラグインを見つけたので紹介します。 「Webサイト上の限られたスペースを有効活用できる」ことがウリの News Ticker は、複数にわたる情報を表示させたいと... 【jQuery】Simple News Ticker の使い方。続きを読む →
-
CSSの［text-rendering: optimizeLegibility;］は指定しないほうが無難かも。 WordPress のデフォルトのテーマファイル「Twenty Fourteen」のスタイルシートを眺めていたところ、［text-rendering: optimizeLegibility;］という見慣れないプロパティがあったので調査してみ... CSSの［text-rendering: optimizeLegibility;］は指定しないほうが無難かも。続きを読む →
-
【jQuery】超軽量フリック対応スライダー［Swipeshow］を紹介します。 タッチデバイスのフリック入力にも対応したシンプルなスライドショーを実装できる jQuery プラグイン［Swipeshow］を紹介します。 このプラグインは jQuery 1.8 以上に対応。容量も軽く、サクサク動きます。 まずは Swip... 【jQuery】超軽量フリック対応スライダー［Swipeshow］を紹介します。続きを読む →
-
【PHP】現在開いているページの URL をウェブページ上に表示する方法。 クライアント様からのちょっと特殊な依頼で、WordPress で構築しているサイトで、現在表示しているページの URL を表示させる必要に迫られました。 実はコレ、かなり需要があるんですよね。 例えばFacebookやTwitterなどのS... 【PHP】現在開いているページの URL をウェブページ上に表示する方法。続きを読む →
-
-
【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編）続きを読む →
