株式会社オンズのブログ記事一覧
-
【WordPress】User-Agent を判定してモバイル用コンテンツを表示する方法。 最近のWebデザインのトレンドとして、レスポンシブデザインが普及し、iPhoneやiPad、Android端末等、各モバイル・デバイスへの対応が当たり前になってきました。 実際に、現在当サイトへのアクセスも、PC(Windows / Mac... 【WordPress】User-Agent を判定してモバイル用コンテンツを表示する方法。続きを読む →
-
【WordPress】リンク無しのタグを出力する方法。 WordPress のテンプレートタグ[the_tags]は、記事に紐づけられたタグをリンク付きで出力します。 タグは出力したいけれど、そのリンクは不要な場合は、[the_tags]は使わず、代わりに[get_the_tags]を利用し、さ... 【WordPress】リンク無しのタグを出力する方法。続きを読む →
-
【PhotoShop】各ソーシャルメディア用PSDテンプレートが無料で配布されています。 各ソーシャルメディアで使われるプロフィール写真、カバー写真などのアートワークを自由にカスタマイズできるテンプレートPSD素材[Social Media Design Templates Pack]が無料で配布されているので紹介します。 どれ... 【PhotoShop】各ソーシャルメディア用PSDテンプレートが無料で配布されています。続きを読む →
-
【WordPress】ワードプレスから送信されるメールのアドレスと名前を変更する方法。 サイトにコメントが投稿されたときやユーザー登録された際、WordPress にはメールを送信して通知してくれる機能があります。 このとき、デフォルトのままだと、差出人の名前が「WordPress」、メールアドレスは「wordpress@ex... 【WordPress】ワードプレスから送信されるメールのアドレスと名前を変更する方法。続きを読む →
-
【jQuery】画像のリンク切れに備えるための簡単なjQueryコード。 画像の引用が多いサイトで使える便利なコードを紹介します。 たった1行で、画像のリンク切れを回避できる jQuery のコードです。 画像が読み込まれないときに代替画像を表示 <head>〜</head> 内に以下を記... 【jQuery】画像のリンク切れに備えるための簡単なjQueryコード。続きを読む →
-
【jQuery】可変グリッド・レイアウトの超有名プラグイン[Masonry]を紹介します。 ウィンドウサイズに合わせてレイアウトがアニメーションしながら可変する[Masonry]は、言わずと知れた超有名 jQuery プラグインです。 「Masonry」とは直訳すると「石造建築」の意味。レンガ造りの壁をイメージすると、その特性が理... 【jQuery】可変グリッド・レイアウトの超有名プラグイン[Masonry]を紹介します。続きを読む →
-
【iOS】リンクをタップしたときのカラーを変更する方法。 iPhone、iPad等、iOS デバイスでは、ウェブサイトのリンクをタップした際に、薄いグレーがハイライト表示されます。 これはデフォルトの仕様ですが、CSS で[-webkit-tap-highlight-color]というプロパティを... 【iOS】リンクをタップしたときのカラーを変更する方法。続きを読む →
-
イギリス政府のWeb担当者が[デジタル・デザインの原則10か条]を策定しています。 イギリス政府のWebサイトなどを担当する[政府デジタルサービス(GDS)]の部署が「デザイン原則の10か条」を公開しています。 これは「良いデジタルサービスを制作・運営していく」ためのポイントをコンパクトにまとめたもので、イギリス政府のサイ... イギリス政府のWeb担当者が[デジタル・デザインの原則10か条]を策定しています。続きを読む →
-
【JavaScript】onmouse属性を使った簡単なロールオーバーの作り方。 JavaScriptを使った初歩的なテクニック。マウスオーバーした際に画像を切り替える方法を紹介します。 使用するのはJavaScriptの[on mouse]属性です。 今回は[onmouseover]と[onmouseout]を使い、そ... 【JavaScript】onmouse属性を使った簡単なロールオーバーの作り方。続きを読む →
-
【Font】Google と Adobe が共同開発した高品質フォント[Noto]が無料で公開されています。 「Google と Adobe が共同開発した…」なんて聞くと、ダウンロードせずにはいられません。 高品質フォント[Noto]が公開されたので紹介します。 Googleの発表では「クセがなく大きさが揃ったひらがな・カタカナは、様々なデバイス... 【Font】Google と Adobe が共同開発した高品質フォント[Noto]が無料で公開されています。続きを読む →
-
【ADS】ベイビーレイズって、1人ダンス下手クソな子いるよね? 5人組アイドルユニット「ベイビーレイズ」が、2014年度末までに日本武道館でのワンマンライブを実現させなければ解散するそうです。 で。以下のような自虐的なポスター広告を展開していました。 ベイビーレイズって、1人ダンス下手クソな子いるよね?... 【ADS】ベイビーレイズって、1人ダンス下手クソな子いるよね?続きを読む →
-
【JavaScript】ラジオボタンにリンクを設置する方法。 ラジオボタンにリンクを設置する方法 フォームのラジオボタンにリンクを設置して、クリックした際に指定した URL に移動させる方法を紹介します。 以下、簡単なコードで実装できます。 ラジオボタンに JavaScript の[onclick]要... 【JavaScript】ラジオボタンにリンクを設置する方法。続きを読む →
-
【JavaScript】クリックでもタップでも快適に動作する[LightBox]の進化版スクリプト[Intense Images]を紹介します。 画像を拡大表示させるお馴染みの jQuery スクリプト[LightBox]は、その便利さと使いやすさから一気に普及しましたが、今日紹介する[Intense Images]は更なる進化を遂げたスクリプトです。 デスクトップのクリック操作や、... 【JavaScript】クリックでもタップでも快適に動作する[LightBox]の進化版スクリプト[Intense Images]を紹介します。続きを読む →
-
【CSS3】最新の単位[vw][vh][vmin][vmax]の解説。 通常 CSS で要素の幅や高さを指定する際は px や % といった単位が一般的に使われますが、最近のブラウザでは、この他に vw、vh、vmin、vmax という単位がサポートされています。 Viewport パーセンテージ 「vw」の「... 【CSS3】最新の単位[vw][vh][vmin][vmax]の解説。続きを読む →
-
【WordPress】固定ページでも[抜粋]の機能を有効にしたい。 WordPress の便利な機能の1つに「抜粋」があります。標準では投稿記事にのみ使用可能で、テンプレート内では <?php the_excerpt(); ?> で表示させることができます。 サイトをデザインする上で非常に便利で... 【WordPress】固定ページでも[抜粋]の機能を有効にしたい。続きを読む →
-
【JavaScript・jQuery】ボックスの中の要素を自動でスクロールさせる方法 jQuery、または JavaScript を使って、ボックスの中の要素を自動でスクロールさせて、テキストが流れているように見せる方法を紹介します。 実装したサンプルは以下。 ボックス・スクロール:サンプル・デモ HTML の記述サンプルは... 【JavaScript・jQuery】ボックスの中の要素を自動でスクロールさせる方法続きを読む →
-
【WordPress】特定のカテゴリーにだけ対応する特殊なテンプレートファイル WordPress テーマには、[index.php]、[header.php]、[footer.ph]、[sidebar.php]などの基本的なテンプレートファイル以外にも、用途に合わせて様々な機能を持つテンプレートを実装することができま... 【WordPress】特定のカテゴリーにだけ対応する特殊なテンプレートファイル続きを読む →
-
【CSS 3】border 要素にグラデーションを施す方法。 通常これまでは、1px のボーダーのグラデーションを実現する際、背景画像を用意して[background-image]プロパティを利用するのが一般的な方法でした。 しかしレスポンシヴ・デザインやスマートフォン対応のWebサイトの構築などによ... 【CSS 3】border 要素にグラデーションを施す方法。続きを読む →
-
[CSS]だけでオンズのロゴを作ってみた。 ちょっとした遊びゴコロを発揮して CSS だけでオンズのロゴマークを作る方法を模索してみました。 もともと比較的簡単な構成のロゴマークなので、それほど難しくはないと思っていましたので、ちょっとハードルを上げるために1つのルールを定めました。... [CSS]だけでオンズのロゴを作ってみた。続きを読む →
-
【CSS3】JavaScriptを使わずにコピーを禁じる方法 JavaScriptを使って右クリックを無効にして、コンテンツのコピーを防止するテクニックがあります。 今日はCSSだけでコピーを禁止する方法を紹介します。 具体的にはCSS3から実装された「user-select」を利用することになります... 【CSS3】JavaScriptを使わずにコピーを禁じる方法続きを読む →
-
【CSS】html に記述した[br]タグを無効にして改行させない方法。 通常、html内に<br>タグを記述すると、ブラウザでは半ば自動的に改行されて表示されます。 CSSSでの指定で、この<br>タグの働きを無効にして、任意の箇所で改行させないようにする方法を紹介します。 br { d... 【CSS】html に記述した[br]タグを無効にして改行させない方法。続きを読む →
-
【PHP】今日の日付と時間を表示する方法。 PHP を使って、ウェブページにアクセスしたときの日時を表示させる方法を紹介します。 基本的には[date関数]を使えばOK。 <?php echo date('Y年m月d日 H時i分s秒'); ?> date関数で使われる主な... 【PHP】今日の日付と時間を表示する方法。続きを読む →
-
【CSS】ボックスを[height:100%;]で画面全体に表示させる方法。 CSSを使ってボックスを画面全体に表示させたいとき、通常は[height:100%;]と指定するだけなのですが、なぜか思いどおりの高さにならず、1時間近くもハマってしまいました。 ウェブ制作者ならば誰もが一度は陥るであろうこの問題の解決策を... 【CSS】ボックスを[height:100%;]で画面全体に表示させる方法。続きを読む →
-
【PHP】シンプルなアクセス・カウンターを設置する方法。 今日紹介するのは PHP で作るシンプルな[アクセス・カウンター]です。 インターネットが普及し始めた2000年代に随分と流行した記憶がありますが、当時は CGI を使って動かすのが一般的だったと思います。 その後アクセスカウンターの存在意... 【PHP】シンプルなアクセス・カウンターを設置する方法。続きを読む →