「webP(ウェッピー)」を使用して画像サイズを縮小。
画像を多用することで遅くなっているWEBサイトの表示速度を「webP（ウェッピー）」を使って改善す…
小金井にあるWEB制作会社の備忘録
MEMORANDUM数多くのホームページをご依頼いただいている中で、実際に株式会社衆が制作に携わった案件の中で使用している手法や、基礎知識に関しての備忘録を掲載。
自社でホームページの制作やシステム開発を行われる際の参考例として、またはホームページをご依頼される際の予備知識としてお役にたてれば嬉しいです。
-
その他
-
WordPress
「All in One SEO Pack」使用時に投稿記事のタイトルタグに所属カテゴリーを自動で追加。
「All in One SEO Pack」では専用の入力項目から各記事のタイトルタグを自由に設定で…
-
PHP
PHPの「preg_replace」を使って文中のURLを自動認識してリンクに変換
テキストエリア等で入力した文字の中にURLを含んでいた場合に、自動で認識してリンクタグを設置するも…
-
javascript / jQuery
ページスクロール時にコンテンツを左右交互にスライドイン
jQueryを使用したページスクロールアクション（パララックス）の一つ。対象コンテンツの直前で、コ…
-
javascript / jQuery
jQuery「datepicker」を使ってフォームの入力項目にカレンダーを設置
レンタルサービスのサイト制作に携わった際に使用した、jQuery用プラグイン「datepicker…
-
その他
「aguse」を使用してURLから使用中のサーバーを調べる
ホームページ制作をしていると、競合会社のサービスを参考にして構築を考えたい場合や、依頼元（相談元）…
-
javascript / jQuery
jQueryでスマホの場合にのみ電話番号を自動リンク
電話番号を記載する際にPCの場合は番号の記載のみで問題ありませんが、スマートフォンの場合は直接電話…
-
PHP
PHPの「filter_input」関数を使って簡易バリデーション（入力チェック）を実装
フォームの入力値やURLのパラメータ等、文字列や数値を受け取る際に正規表現を利用してバリデーション…
-
PHP
PHPでホームページに表示される画像をリサイズ
レスポンシブ対応での作成がメインとなり、大きな画像を使う機会が増えてきています。本来であれば機種に…
-
PHP
PHPで動画をバイナリデータに変換してMySQLに保存
動画ファイルをCMS化して保存するときに、多くの場合はファイルパスをデータベース（MySQL）に保…
-
WordPress
WordPress（ワードプレス）でプラグイン有効時にデータベースに独自テーブルを追加
WordPress（ワードプレス）のプラグイン作成時にカスタム投稿を利用せず、独自のテーブルを作成…
-
その他
画像圧縮サイト「TinyPNG」を使ってサイトの表示スピードを改善
サイト全体に大きく画像を表示する表現がメインになり、見やすくて印象的なサイトが増えてきた半面、使用…
-
PHP
PHPの「preg_replace」関数を使って特定のHTMLタグ（要素を含む）を削除
HTMLファイルを外部読み込する必要がある場合などで、不要なタグを削除して読み込みたい時に指定のタ…
-
javascript / jQuery
jQuerで要素のランダム表示を実装
「東洋堂」のランディングページ制作に携わった際に使用したランダムでの画像表示の実装方法をメモ。アク…
-
PHP
PHPの「pathinfo」関数を使ってファイル情報（拡張子、ファイル名）を取得
バリデーションチェックで添付されたファイル情報を取得する際に、便利な「pathinfo」関数の使い…
-
PHP
WordPress（ワードプレス）に登録されているデータを外部ファイルで利用する。
WordPress（ワードプレス）を使用してホームページの制作を行う際、全てのページを同一ディレク…
-
CSS
youtube（iframe）の埋め込み動画をレスポンシブ対応にする
youtube動画をホームページに掲載する機会も増えてきました。動画サイズを固定するのであれば、埋…
-
WordPress
WordPress（ワードプレス）でカスタム投稿タイプを追加
カスタム投稿タイプは、独立したコンテンツを作りたい場合に便利なワードプレスの追加機能。Wordpr…
-
CSS
CSS「object-fit」を使って画像を表示枠に合わせてトリミング
画像を表示枠いっぱいに表示する場合に、背景画像や「position」等で対応していたけど、「img…
-
PHP
WordPress（ワードプレス）でショートコードを作成
Wordpress（ワードプレス）のカスタマイズ時にテンプレートにコードを直書きするのでも表示はで…
-
PHP
WordPress(ワードプレス)でセッション（SESSION）を使用する
Wordpress(ワードプレス)の開発時にセッションを利用することがあるが、初期状態ではセッショ…
-
PHP
PHPでクッキー（$_COOKIE）を使用する
ログインキーなど一時的なデータの保存にはセッション（$_SESSION）を使うことが多いのだけれれ…
-
CSS
CSSの疑似クラスを使ってｎ番目の要素を取得
HTMLコーディングをしているとｎ番目の要素から間隔を空けたり、交互に彩色したりということが多いの…
-
javascript / jQuery
jQuerでフリック（ドラッグ）スライダーを実装
PC、スマホともにフリック（ドラッグ）できる自動送り式のイメージスライダーを実装した時のソースをメ…
-
javascript / jQuery
jQueryでRSSを読み込んで表示
wordpress（ワードプレス）の投稿記事を別サイト（同一ドメイン）で読み込みで表示したという相…
-
javascript / jQuery
jQueryで親要素・子要素・兄弟要素を取得
jQueryで一定の要素を基準に、上の下層や下の階層の値を取得したり、クラスを変更したりする場合が…
-
CSS
CSS「calc」を使って計算式で実装する
表示する画面幅に合わせて可変するデザインを制作する際に「display:flex」を使ってレイアウ…
-
WordPress
WordPress(ワードプレス)オリジナルテーマの作り方
wordpress（ワードプレス）を使ってテーマを自作した際に使用した、最低限知っておきたい基本的…
-
javascript / jQuery
jQueryで料金のシミュレーション（計算）を実装
「電気会社」のキャンペーンページを作成した際に使用した、電気料金のシミュレーション機能の制作方法を…
-
CSS
CSS「display:flex」で「clearfix」を使わずに要素を並べる。
創業時（2010年頃）にお世話なっていた「clearfix」。当時は要素を横に並べると言えば定番だ…