カテゴリー "開発ブログ" 616件の記事
URLの「www」の有無を統一してドメインを正規化する方法ウェブサイトを公開したとき、多くの場合ドメインはデフォルトで以下のように、wwwのアリ・ナシ、どちらでもアクセスできてしまいます。 http://example.com http://www.example.com 一部のサーバーではwwwの有無を自動で正規化して統一してくれる場合もありますが、稀なケースなので、通常は...URLの「www」の有無を統一してドメインを正規化する方法続きを読む →- ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法ブラウザの「戻る」ボタンを押したとき。通称「ブラウザバック」と呼ばれる画面遷移が行われたときに、強制的にページを再読み込みさせる方法です。 window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } }...ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法続きを読む →
- お知らせ5月1日： オンズのウェブサイト制作、料金プランのページを用意しました。 オンズ料金表 : https://on-ze.com/price 2月20日： グローバルIPアドレスを簡単に確認できるページを用意しました。 ぜひご利用ください。 グローバルIPアドレス確認ツール : https://on-ze.com/too...お知らせ続きを読む →
【WordPress】ユーザーのプロフィール情報で改行を有効化する方法通常、ワードプレスのユーザーのプロフィールをテンプレート内で出力する際には、次のようなコードを使用します。 <?php the_author_meta('description'); ?> ユーザーを指定する場合は引数内にユーザーIDを追記します。 <?php the_author_meta('des...【WordPress】ユーザーのプロフィール情報で改行を有効化する方法続きを読む →
【jQuery】テキストにアニメーションを施す［textillate.js］の使い方テキストにアニメーションを追加するjQueryプラグイン［textillate.js］の使い方を紹介します。 まずはサンプルをご覧ください。 textillate.js : http://textillate.js.org エフェクト部分は［animate.css］に依存しているため、アニメーションの種類が豊富に指定で...【jQuery】テキストにアニメーションを施す［textillate.js］の使い方続きを読む →
【jQuery + CSS】レスポンシブでヌルヌル動く［Expanding Column Layout］を使ってみました。先日CODEPENで「何か使えるテクニックはないかな〜」とネットサーフィンしながらイロイロと物色していたところ、「Expanding Column Layout」というスタイルシートのテクニックを見つけました。 以前、本ブログで「CSS3 Flexbox Accordion」を紹介しましたが、その進化版といった感じです...【jQuery + CSS】レスポンシブでヌルヌル動く［Expanding Column Layout］を使ってみました。続きを読む →
【jQuery】指定したアニメーションでモーダルウィンドウが表示される［animatedModal.js］の使い方指定した様々なアニメーションでモーダルウィンドウを表示するjQueryプラグイン［animatedModal.js］の使い方を紹介します。 まずはサンプルをどうぞ。 DEMO : https://on-ze.com/demo/jquery-animatedmodal.js/ ポップアップするモーダルウィンドウ部分は基本...【jQuery】指定したアニメーションでモーダルウィンドウが表示される［animatedModal.js］の使い方続きを読む →
【JavaScript】ツールチップを表示させる超軽量ライブラリ［Tippy.js］の使い方今日ご紹介する［Tippy.js］は、jQueryやZeptoなど他のリソースに依存せずに、単体で簡単に使えるJavaScriptのライブラリです。 特定の要素にマウスカーソルを合わせると、シンプルなアニメーションと共にツールチップが表示されるようになります。 サンプルは以下より。 Tippy.js : https:/...【JavaScript】ツールチップを表示させる超軽量ライブラリ［Tippy.js］の使い方続きを読む →- 【WordPress】ループ処理の最初と最後で違う出力をする方法ワードプレスのテーマファイル「index.php」や「archive.php」などで、投稿をループして表示させる際に、最初の投稿または最後の投稿で違う処理をする方法を紹介します。 ループの最初だけ違う処理 ワードプレスのデフォルトの機能「$wp_query」オブジェクトに格納されている変数「current_post」に...【WordPress】ループ処理の最初と最後で違う出力をする方法続きを読む →
【CSS】重なり順（z-index）の値が下の要素をクリックする方法ウェブサイトを装飾する目的で、要素の重なり順をz-indexで指定したときに、装飾目的の要素が前面になり、クリックさせたいボタンなどの要素が背面になってしまうケースがあります。 このままだとボタンがクリックできずに困るので、なんとかして前面の要素を無視して背面にあるボタンをクリックできるようにしたい。 この問題、「Ja...【CSS】重なり順（z-index）の値が下の要素をクリックする方法続きを読む →- 【jQuery】ページのスクロールに応じて要素を表示する［Scrolla］の使い方Webページのスクロールに合わせて要素を表示させるjQueryプラグイン［Scrolla］を紹介します。 同様の機能を持つプラグインでは［ScrollReveal］や［jquery.inview］または［WOW.js］などが有名ですが、これらと肩を並べて秀逸なので自信を持ってオススメできます。 実際に使ってみたサンプル...【jQuery】ページのスクロールに応じて要素を表示する［Scrolla］の使い方続きを読む →
- 【jQuery】テキストで背景を切り抜く［TextHoler.js］の使い方今回ご紹介する［TextHoler.js］を使うと、テキストで背景画像をマスキングして切り抜き表示してくれます。 まずはサンプルをご覧ください。 DEMO : https://on-ze.com/demo/jquery-textholer.js このサンプルのように、画像形式はGIFも指定できるので動きのある表現も可能...【jQuery】テキストで背景を切り抜く［TextHoler.js］の使い方続きを読む →
【ICON】使いやすいSVGアイコンセット［Zondicons］が便利そう。ジャンルを問わず様々なWebデザインに使えるSVGアイコンセット［Zondicons］が便利そうです。 公式サイトでは、ポートフォリオ、マップ、アプリ、テキストエディタなどでの使用例が紹介されています。 クセがないので汎用的に使えそうですね。 データはSVG形式なので拡大縮小しても美しいデザインを保てます。 現時点では...【ICON】使いやすいSVGアイコンセット［Zondicons］が便利そう。続きを読む →
【iPhone】標準ブラウザのSafariでネット接続できない時でもウェブサイトを閲覧する方法今日はiPhoneがオフラインや圏外の状態でネット接続できない場合でもWebページを閲覧できる便利なテクニックを紹介します。 利用するのはSafariのリーディングリストの機能。 コレ、かなり便利なんですが、ご存知ですか？ リーディングリスト機能の使い方 まずはiPhoneのSafariでオフライン時でも見たいページを...【iPhone】標準ブラウザのSafariでネット接続できない時でもウェブサイトを閲覧する方法続きを読む →
【ADS】挑戦と勝利。最強と戦場。Twitter界隈で話題になっていた面白い広告を見つけたので紹介します。 本日、1月24日〜1月29日に開催される『GI全日本王者決定戦』のポスター広告。 こちらは「挑戦」という文字が中央に大きく描かれていますが、上下を逆にして見てみると……。 なんと「勝利」という文字に変わります。 こちらは「最強」という文字ですが、...【ADS】挑戦と勝利。最強と戦場。続きを読む →
エックスサーバーでWordPressを「http」から「https」にSSL化する手順既にご存知の方も多いかと思いますが、エックスサーバーでは独自SSLを無料かつ無制限で利用できるようになっています。 嬉しいサービスですよね。 XSERVER : https://www.xserver.ne.jp 今日はそのエックスサーバーにて、WordPressサイトを「http」から「https」にSSL化する手順...エックスサーバーでWordPressを「http」から「https」にSSL化する手順続きを読む →
Ads by Google