Web Tips：注目

WordPressの検索機能をプラグイン無しで拡張する

WordPress標準の検索機能は、タイトルと本文を対象としたキーワード検索です。機能を拡張するプラグインも存在しますが、ここではプラグインを使わずに、カスタムタクソノミーとカスタムフィールドを検索対象として追加する実装方法を解説します。

スマートフォンサイトにアコーディオンメニューを実装する

メニューが開閉するアコーディオンメニューはスマートフォンサイトでよく見かけます。プラグインもたくさんありますが、それらを使わないでもシンプルなコードで実装できますので、基本的な作成方法を解説します。

Fluid Image 対応のフリックで動作するスライドショーを実装する

スマートフォンサイトでよく採用されているフリックで動作するスライドショーですが、レスポンシブWebデザインや端末の向きにかかわらず対応するため、画像がスクリーンサイズの100%に伸縮するよう実装してみます。

スマートフォンとPCをユーザーエージェントで振り分ける

スマートフォン用にサイトを用意した場合、ユーザーからのアクセスをPCサイトとスマートフォンサイトに振り分けるにはユーザーエージェントで判別します。.htaccess、PHP、JavaScript それぞれでユーザーエージェントを判別し振り分ける方法を解説します。

CSS3 animationプロパティでアニメーションを実装する

CSS3のanimationプロパティは、transitionプロパティに比べて複雑なアニメーションを実装するのに適しています。リピート再生や、キーフレームを定義することによりアニメーション中の動作を細かく設定することが可能です。

CSS3 transitionプロパティでアニメーションを実装する

CSS3のtransitionプロパティは、要素に設定したCSSプロパティが古い状態から新しい状態へ変化する際の動作を規定します。変化にかかる時間や途中段階での速度を指定することにより、アニメーション効果を実現します。

アイコンフォントの具体的な使い方 - IcoMoon App

アイコンフォントを利用する上で便利なサイト「IcoMoon App」でフォントファイルを作成し、ダウンロードしたフォントファイルからWebページにアイコンを表示するまでの具体的な手順について解説します。

アイコンフォントの基本的な使い方

アイコンを含んだWebフォント(アイコンフォント)を利用すると、画像を使わずにアイコンをWebページに表示することができます。フォントファイルをGPLやMITライセンスで提供しているサイトもたくさんあり、現在では簡単に利用できるようになっています。

スマートフォンを考慮したフォント指定の検討

Webページで使用するフォントはCSSでfont-familyプロパティに指定します。PCサイトの場合はWindowsとMac OSを対象にしますが、スマートフォンで閲覧することも考え、iOSとAndroidも含めた指定を検討してみました。

XAMPP環境でLAN内の他PCからWordPressサイトにアクセスする

XAMPPでローカルに開発環境を構築している場合、LAN内の他のPCからWordPressで作ったWebサイトにアクセスする方法を解説します。これによりWi-Fiで同じネットワークに接続したスマートフォンなどからもサイトを閲覧できるので、デバッグする時に便利です。

Google ウェブマスターツールでこれだけはチェックする

ウェブマスターツールではWebサイトに発生している問題を指摘してくれます。また基本的なアクセス解析データも確認できます。サイト運用時に、ウェブマスターツールで定期的にチェックするべき項目について解説します。

Chrome デベロッパーツールの使い方概要

Chrome デベロッパーツール(Chrome Developer Tools)は、Google Chromeに組み込まれたWeb開発者向けのツールです。WebページやWebアプリの制作・デバッグ、サイト運用に活用できます。この記事ではデベロッパーツールを使う際の基本的な事項を説明します。

Web制作者がおさえておくべきmeta要素プロパティの種類

meta要素(メタタグ)は、ユーザーエージェント(ブラウザ、クローラーなど)がWebページを読み込んだ時の動作を決めるために使用されます。meta要素のプロパティ(設定項目)にはたくさんの種類がありますが、Web制作者として最低限知っておくべきものを解説します。

WordPressサイトをローカル環境から本番サーバーへ移行する

WordPressで制作したサイトを、本番サーバーへ移行する手順を解説します。
ローカルの開発環境としてXAMPPを前提としていますが、開発用に別サーバーを立てている場合も同様の手順で移行可能です。

phpMyBackupProによるMySQLデータベースの自動バックアップ

Webサイトを運用するには、データベースも定期的にバックアップしなければなりません。
MySQLを自動でバックアップしてくれるツール「phpMyBackupPro」をサーバーへ設置する方法を解説します。

コピーライトの年表示を自動更新する

ホームページの下のほうにある著作権表記ですが、コピーライトの年を示す表示が古いままになっているサイトがかなりあります。
年が新しくなったら自動更新するように設定しておく方法をいくつか紹介します。

Chromeデベロッパーツールでモバイルをエミュレートする

Chromeに標準搭載されているデベロッパーツールには、モバイルをエミュレートする機能が豊富に備わっています。デバイス、ユーザーエージェント、画面解像度の指定ができるだけでなく、タッチスクリーンのエミュレートも可能です。

Qdmail/Qdsmtpを使ったメール送信フォーム作成

Qdmailは、日本語に対応したメール送信ライブラリです。PHP標準のmb_send_mail()で発生しがちな文字化けを回避してくれます。Qdsmtpとともに使用すると、標準のmail()関数が使えない環境でも手軽にメール送信を行うことができます。

WordPressマルチサイト機能でWebサイトを構成する

WordPressではマルチサイト機能といって、複数のサイト(ブログ)を一括して管理することができます。インストール時の設定方法が単独サイトの場合と若干異なりますので、マルチサイトでWordPressをインストールし、Webサイトを構成する方法を解説します。

クリッカブルマップ(イメージマップ)で１枚の画像に複数リンクを設定する

クリッカブルマップ(イメージマップともいう)は、画像の一部分だけをリンクエリアにしたり、１枚の画像に複数のリンクエリアを設ける手法です。HTMLコードの記述だけで、四角形、円形、多角形と様々な形状のエリアを簡単に設定できます。

Pleiades All in Oneによるローカル開発環境の構築方法

動的なWebサイトをPHPプログラムで構築する場合やWordPressを使う場合は、ローカルに開発環境を整えると効率的に作業を進めることができます。EclipseとXAMPPが含まれている「Pleiades All in One」というパッケージを使った開発環境の構築の仕方を解説します。

入力した文章の文字数をカウントする方法各種

Webページを制作していると、meta descriptionに入力する文章の文字数を制限したいなど、何かと文字数をカウントしたい場面があります。Terapad、Excel、Word、フリーソフトを使った文字数カウント方法を紹介します。