Analog Studio

Tips

Web サイト制作に役立つ情報や小技などをまとめています。

全カテゴリ

記事一覧

スマホ用のメニューをどうするか?使いやすいメニューを考える

概要

スマートホンに最適化させた Web デザインを設計する時、メニューをどのように配置しようか悩ましいですよね。 PC と違いスマホでは表示領域に余裕がなくメニューに表示面積を割いてしまうとメインコンテンツが窮屈になってしまいます。 かといってメニューをなくしてしまうとユーザの利便性が低下してユーザが離れてしまう可能性があります。 そこでユーザの利便性を確保しつつメインコンテンツを圧迫しないメニュー例を紹介していきます。

パンくずリストを表示させよう!ユーザにも検索エンジンにも優しいナビゲーション!

概要

「パンくずリスト」というものをご存知でしょうか? Web サイト上で現在のページがどんな階層のどのカテゴリに属するのかを表示したナビゲーションを指しています。 あなたのページに訪れてくれたユーザの方にカテゴリを教えて分かりやすくするだけでなく、実は検索エンジンにも好まれるのです。 いわゆる「SEO 対策」として有効な手段ということです。 そこで今回はパンくずリストの構造と作り方、Wordpress での表示方法についてまとめます。 まだ導入されていない方は是非この機会に導入しておきましょう。

インスタのタイムラインを表示させる方法!「Instagram API」の使い方

概要

Web サイトを制作していると公式インスタグラムのタイムラインを表示したくなります。 しかし、インスタグラムにはタイムラインを簡単に表示できるようなものは用意されていません。 もちろんタイムラインを表示させる仕組みが存在しないわけではないです。 開発者ツールを使ってタイムラインの表示に必要な情報を取得してきて自分で作ることで実現できます。 今回はそんな開発者ツールを使ったタイムラインの表示方法を紹介します。

郵便番号から自動で住所を検索する方法【Javascript】

概要

Web サイトに訪れてくれた方からのお問い合わせにフォームを使うことは多いと思います。 メールクライアントソフトを起動させることなく、ブラウザ上から手軽に送信できる利点は大きいです。 また、必要な項目が予め表示されているので記載すべき内容をユーザが考えなくても良いというところも大事ですね。 さてそんな便利なフォームですが、住所の入力をお願いしたいという管理者の方も多いのではないでしょうか? しかし住所の入力は億劫な方が多いのも事実です。少なくとも私は好きではありません(笑) せっかくお問い合わせしようとしても面倒な項目が必須だと送信を躊躇ってしまうこともあります。 そこで、Javascript も用いて郵便番号から自動的に住所を検索してユーザの利便性を上げる方法を紹介します。 コンセプトは「ユーザの手間を少しでも減らす」です。

Font Awesome 5 Free を疑似要素で使う方法と高速化のヒント

概要

SNS のアイコンなどを文字のように色を変えたり劣化させずに拡大縮小したい時に役に立つものにアイコンフォントがあります。 アイコンフォントは、ここ数年の SNS の浸透で特に浸透してきたように思います。 そんなアイコンフォントの中でも無料で使えて種類が非常に豊富な「Font Awesome 5」(Free 版) について解説します。 基本的な使い方は既に色々な情報がありますので、ここでは疑似要素での使用方法と CSS 読み込みの高速化をハックしていきましょう。

Javascriptでページ遷移せずにPOST送信する方法【非同期通信】【XHR】

概要

データを POST メソッドでサーバなどへ送信する時、HTML の <FORM> 要素を使って送信するとページが遷移しますよね。 でも、場合によってはページ遷移はさせたくないけどデータは POST で送信したいということがあります。 今回は、そんな場合にどのようにすれば良いかをまとめます。 使う手法は、XMLHttpRequest (略して XHR ) という非同期でサーバとブラウザが通信を行う仕組みを利用してます。 フォームに入れたデータを送信する場合とデータは別で用意する場合の2パターンについて解説します。