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

【WordPress】Gravatarを使わずにプロフィール画像を登録する方法［WP User Avatars］の使い方 ワードプレスのユーザー登録時のアバター画像。 デフォルトでは［Gravatar］を経由しないと登録できません。 Gravatarは「Globally Recognized Avatar（グローバリー・レコグナイズド・アバター）」の略で、Wo... 【WordPress】Gravatarを使わずにプロフィール画像を登録する方法［WP User Avatars］の使い方続きを読む →

【WordPress】指定したサイトのスクリーンショットを表示できる［Browser Shots］の使い方 今日紹介する［Browser Shots］は簡単に指定したウェブサイトのスクリーンショット画像を埋め込めるWordPressプラグインです。 投稿や固定ページの編集画面で、ショートコードにURLと画像の横幅と縦幅を指定するだけで利用できます... 【WordPress】指定したサイトのスクリーンショットを表示できる［Browser Shots］の使い方続きを読む →

【WordPress】アイキャッチ画像のURLだけを取得して表示する方法 今日はWordPressのアイキャッチ画像のURLだけを取得・表示させる方法を紹介します。 通常アイキャッチ画像を表示させる際は <?php the_post_thumbnail(); ?> を使いますね。 実践的にはアイキャッ... 【WordPress】アイキャッチ画像のURLだけを取得して表示する方法続きを読む →

WordPressのテンプレートタグやデータベースの情報を外部ファイルから利用する 今日はWordPressで使われているテンプレートタグやデータベースの情報を含めたAPIを、外部のPHPファイルで扱う方法を紹介します。 実は意外と簡単で、ワードプレスのフォルダ内にある「wp-blog-header.php」または「wp-... WordPressのテンプレートタグやデータベースの情報を外部ファイルから利用する続きを読む →

【JavaScript】画像の遅延読み込みを行うライブラリ［Layzr.js］の使い方 画像の遅延読み込みを行うJavaScriptライブラリ［Layzr.js］を紹介します。 ウェブページの読み込み時間短縮のために、ウィンドウの表示領域に入っていない要素や画像を非表示にしておいて、画面スクロールでウィンドウ内に入ってきたタイ... 【JavaScript】画像の遅延読み込みを行うライブラリ［Layzr.js］の使い方続きを読む →

HTML の 〜 内に書くタグの順番にも気を遣ってみた。 今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<h... HTML の 〜 内に書くタグの順番にも気を遣ってみた。続きを読む →

【WordPress】出力されるRSSフィードをカスタマイズしました。 ワードプレスで出力されるRSSフィードをカスタマイズして、アイキャッチ画像とコピーライト表記を追記するように設定しました。 実際に行った処理は以下。 テンプレートファイルの［functions.php］内に次のコードを記述します。 func... 【WordPress】出力されるRSSフィードをカスタマイズしました。続きを読む →

ワードプレスを超高速にする［Jetpack Photon］のデメリット 今回はWordPressプラグイン［Jetpack］の機能のひとつ［Photon］のデメリットを紹介します。 「メリット」ではなく「デメリット」です。 現在オンズのウェブサイトでもPhotonを利用しています。 過去、オンズのウェブサイトで... ワードプレスを超高速にする［Jetpack Photon］のデメリット続きを読む →

【Web Design】華やかな印象の結婚式・ブライダル・ウェディング系のウェブサイト × 11選 ウェディング系の優れたウェブデザインを調査する機会があったのでメモします。 華やかな印象のウェブサイトを11個、集めました。 first film 結婚式の動画制作を行う［first film］のランディングページです。 オフィシャルサイト... 【Web Design】華やかな印象の結婚式・ブライダル・ウェディング系のウェブサイト × 11選続きを読む →

【2016年版】オンズのウェブサイトで実際に使っているWordPressプラグイン × 11個 はじめに 「他のウェブサイトではどんなプラグインを使っているのか？」 WordPressで構築したサイトを運営していると、他のブログでどんなプラグインが使われているのか気になりますよね。 そこで今日は、今アナタがご覧になっているこのブログ、... 【2016年版】オンズのウェブサイトで実際に使っているWordPressプラグイン × 11個続きを読む →

【2016春夏キャンペーン】超一流ブランド［Louis Vuitton］と［Final Fantasy XIII］がコラボ！ あの超有名ブランド［Louis Vuitton］が、2016年春夏キャンペーン「SERIES 4」のモデルとして人気ゲーム「ファイナルファンタジーXIII」の主人公「ライトニング」を起用しています。 FacebookやTwitterなど、S... 【2016春夏キャンペーン】超一流ブランド［Louis Vuitton］と［Final Fantasy XIII］がコラボ！続きを読む →

【WordPress】ユーザーの一覧を表示させる方法。 今日はWordPressで登録されているユーザーの一覧を表示する方法を紹介します。 最も簡単なのはテンプレートタグの「wp_list_authors」を使う方法です。 <?php wp_list_authors(); ?> 本当... 【WordPress】ユーザーの一覧を表示させる方法。続きを読む →

「Extra Light」よりもさらに細い「Extra Thin」ウェイトの超極細日本語フォント 超極細の日本語フォント［Extra Thin］を紹介します。 以下がプレビュー画像。 『「Extra Light」よりさらに細い「Extra Thin」』と謳っている言葉どおり、非常に細いウェイトのフォントですね。 製作者様のサイトでは「清... 「Extra Light」よりもさらに細い「Extra Thin」ウェイトの超極細日本語フォント続きを読む →

【Font】超カワイイ丸文字フリーフォント［Arciform］がオススメです。 カワイイ丸文字に一目惚れ。 無料で利用できるフォント［Arciform］を紹介します。 アルファベットのみの英文フォントで日本語は収録されていませんが、ロゴなどに有効活用できそうです。 大文字 こちらは大文字のリスト。特に「S」や「Y」が個... 【Font】超カワイイ丸文字フリーフォント［Arciform］がオススメです。続きを読む →

【jQuery】メニューが横からスライドして表示される［Drawer］の使い方。 ボタンをクリックすると横からスライドして現れるドロワーメニュー。特に最近のレスポンシブ対応ウェブサイトで多用されてきているので、もうお馴染みですね。 今日は、そんなドロワーメニューを実装する jQuery プラグイン［Drawer］の使い方... 【jQuery】メニューが横からスライドして表示される［Drawer］の使い方。続きを読む →

【JavaScript】スワイプ操作にも対応したスライド式メニュー［Snap.js］の使い方 今回は［Snap.js］を使って左右にスライドするタイプのメニューを作成する方法を紹介します。 まずはサンプルをご覧ください。 Snap.js : オンズのサンプル これ、正式名称が不明確なんですが、巷では「スワイプ・メニュー」や「ドロワー... 【JavaScript】スワイプ操作にも対応したスライド式メニュー［Snap.js］の使い方続きを読む →

【2016年版】ウェブ制作者にオススメのiOSアプリ × 11選。 ウェブ制作者なら必ず押さえておきたいiOSアプリを厳選して紹介します。 普段はPCをメインに使っているアナタも、これから紹介するアプリを活用すれば iPhone & iPad で簡単な作業を引き継いで業務をスムーズに進行できるように... 【2016年版】ウェブ制作者にオススメのiOSアプリ × 11選。続きを読む →

【WordPress】初心者向けのプラグイン［Show Current Template］が意外と便利です。 ワードプレスをベースにしてウェブサイトを構築しているときに「このページはどのテンプレートを使ってるんだっけな？」と疑問を抱くことがありませんか？ これ、特にワードプレス初心者の方は頻繁に躓いてしまうポイントだと思います。 今日は、そんな疑問... 【WordPress】初心者向けのプラグイン［Show Current Template］が意外と便利です。続きを読む →

【JavaScript】ページのスクロールに合わせて要素を動かす［ScrollReveal］の使い方（4.0.9対応） ページをスクロールさせて、非表示だった特定の要素がウィンドウ内に入ってきたときに、指定したアニメーションエフェクト付きで表示させるスクリプト［ScrollReveal］を紹介します。 以下の公式配布サイトのデモを見れば何が起きているのか一目... 【JavaScript】ページのスクロールに合わせて要素を動かす［ScrollReveal］の使い方（4.0.9対応）続きを読む →

【jQuery】背景色をスムーズにグラデーション変化させる［Spectrum］の使い方 指定した複数の背景色をスムーズにグラデーション変化させるjQueryスクリプト［Spectrum］を紹介します。 SPECTRUM : http://www.andreacrofts.codes/spectrum/ 背景色がどのように切り替... 【jQuery】背景色をスムーズにグラデーション変化させる［Spectrum］の使い方続きを読む →

【WordPress】各カテゴリー毎のRSSフィードを出力する方法 ワードプレスで構築しているサイトで、各カテゴリー毎のRSSを出力する方法を紹介します。 まずは基本的なRSSの出力方法を復習しましょう。 ワードプレスのRSSフィードの配信方法 普段ワードプレスでRSSフィードの配信をする際は、テンプレート... 【WordPress】各カテゴリー毎のRSSフィードを出力する方法続きを読む →

新年のご挨拶です。2016年度もよろしくお願いします。 あけましておめでとうございます。 株式会社オンズの原一勢です。 今年は一部のクライアント様宛に、↑上に掲載した年賀状を送らせていただきました。 実はもう何年も年賀状を送るのを止めていたのですが、昨年度は個人事業だった『オンズ』を法人化して『... 新年のご挨拶です。2016年度もよろしくお願いします。続きを読む →

2015年総集編！オンズも掲載されている国内のウェブデザインのギャラリーサイト × 11選。 ウェブデザインの制作で頭を悩ませているとき、優れたサイトを眺めているだけでインスピレーションの源になります。 レイアウトやカラーパレット、導線や特殊な動きなどなど、学ぶことが多く自分の引き出しも増えていきますからね。 ウェブデザイナーの方な... 2015年総集編！オンズも掲載されている国内のウェブデザインのギャラリーサイト × 11選。続きを読む →

【jQuery】プログラムの実行のタイミングを遅らせる［setTimeout］の使い方 なんらかのJavaScriptの関数をタイミングを遅らせて実行したいとき。 そんなときに使えるjQueryメソッド［setTimeout］を紹介します。 ［setTimeout］メソッドで処理を遅延実行 基本的な使い方は以下のとおり。 $(... 【jQuery】プログラムの実行のタイミングを遅らせる［setTimeout］の使い方続きを読む →