東京・小金井市のWEB制作会社の豆知識

フォーム投稿で画像をアップロードする際に、追従式のメールフォームを作成し、コンテンツの途中の段階で送信が送れる仕組みを作成していたのだけれど、PHPでそのまま実装すると再読み込みが発生してしまい、再度コンテンツを読んでいた位置まで進める必要が出てきたので、Ajaxと組み合わせ実装した際の方法をメモ HTML <form action="" method="post" enctype="multipart/form-data" id="entryform"> <textarea name="text"></textarea> <input type="file" name="newimage"> <button type="submit" id="submit">登録する</button> </form> <div id="result"></div> jQuery $(function(){ $('form').on('submit', function(event) { event.preventDefault(); // フォームのデフォルト送信を防止 var $form = $('#entryform'); var formData = new FormData($form.get(0)); $.ajax({ type: 'POST', url: 'save.php', data: formData, processData: false, contentType: false, dataType: "json", success: function(response) { if (response.status === "success") { $("#result").html("アップロード成功"); } else { $("#result").html("エラー: " + response.message); } }, error: function() { $("#result").html("エラーが発生しました。"); } }); }); }); save.php（PHP） if($_SERVER['REQUEST_METHOD'] === 'POST'){ $uploadDir = "uploads/"; $file = $_FILES["image"]; $fileName = basename($file["name"]); $targetFile = $uploadDir.$fileName; $text = filter_input(INPUT_POST, "text", FILTER_SANITIZE_STRING); if (!$text) { echo json_encode(["status" => "error", "message" => "テキストが無効です"]); exit; } if (isset($_FILES["newimage"])) { $finfo = new finfo(FILEINFO_MIME_TYPE); $mimeType = $finfo->file($file["tmp_name"]); $validMimeTypes = ["image/jpeg", "image/png", "image/gif"]; if (!in_array($mimeType, $validMimeTypes)) { echo json_encode(["status" => "error", "message" => "画像の種類が正しくありません"]); exit; } // 画像サイズの制限（2MB） if ($file["size"] > 2 * 1024 * 1024) { echo json_encode(["status" => "error", "message" => "画像サイズは2MB以下にしてください"]); exit; } // 画像を保存 move_uploaded_file($file["tmp_name"], $targetFile); } }

「自社のホームページを作りたい」と思ったとき、どの方法を選べばよいのか迷ったことはありませんか？ホームページ制作には、大きく分けて「ノーコード」「WordPress」「スクラッチ開発」という3つの方法があります。どの方法を選ぶかによって費用・時間・自由度が大きく変わるため、目的に合った手段を選ぶことが大切です。本記事では、それぞれの特徴を独自の表現で解説し、あなたに合ったホームページ制作の方法を見つけるお手伝いをします。 ノーコード（No Code）とは？ ノーコードとは、プログラミングの知識がなくても簡単にホームページを作成できる方法です。あらかじめデザインや機能が用意されているため、直感的な操作でテンプレートを選び、簡単なカスタマイズをするだけでホームページを作ることができます。 これを料理で例えると「インスタント食品や冷凍食品」に似ています。 特徴 誰でも簡単に早く作れる ある程度のバリエーションはあるが、完全にオリジナルにはできない デザインや機能を自分好みにカスタマイズするのは難しい ホームページのデータはノーコードのサービス事業者が所有 代表的なノーコードツールには、以下のようなものがあります。 Wix（ウィックス） Jimdo（ジンドゥー） STUDIO WordPress（ワードプレス）とは？ WordPressは、世界中で最も利用されているホームページツールです。カスタマイズには専門知識を必要とするものの、特別な知識がなくても、文章を書いたり写真を入れたりして、自分だけのサイトを作ることができるため、企業サイトやブログサイトなど、多くの用途で使われています。 ノーコードツールと異なり、自社のサーバーに導入して使用できるため、基本的な枠組みは用意されているものの、プラグイン（専用の追加オプション）を追加したり、デザインを調整したりすることで自由にカスタマイズもできます。 これを料理で例えると 「料理キット」のようなものです。 特徴 必要な機能が予め用意されている プラグイン（追加機能）を活用すれば、カスタマイズが可能 制作に時間はかかるが、ゼロから制作するほど大変ではない 独自ドメイン・サーバーを利用でき、運用の自由度が高い スクラッチ開発とは？ スクラッチ開発とは、HTML、CSS、JavaScript、PHP などのプログラミング言語を使い、ゼロからオリジナルのホームページを作る方法です。時間はかかるものの、完全オリジナルなデザインでサイトを作ることができ、機能も自由に決めることができます。 「ノーコード」や「ワードプレス」と比較されることも多いので、ホームページ制作の方法としてのみ捉えられがちですが「ノーコード」や「ワードプレス」をも作っている手法で、勤怠管理の仕組みや、お問い合わせ管理（顧客管理）のシステムの作成でも使用した経験があります。 これは、料理で例えると 「一からすべて手作りの創作料理を作る」 ことに似ています。 特徴 仕様変更や拡張が自由自在で、完全オリジナルのデザイン・機能を実装できる 開発コスト・時間がかかる プログラミングスキルが必要 ホームページに限らず、各種システムの作成も可能 まとめ：目的に合わせたホームページ制作を選ぼう！ ホームページ制作には、ノーコード・WordPress・スクラッチ開発 の3つの方法があり、それぞれ料理の作り方と似ています。 ノーコードワードプレススクラッチ開発料理例インスタント食品料理キット完全手作り料理専門性◎ 簡単○ ある程度の知識が必要× 専門知識が必要カスタマイズ性△ 限られる○ プラグインやカスタマイズ可能◎ 自由自在データ× 提供者が所有◎ 自社で保有◎ 自社で保有時間と手間◎ 最短○ 中程度× 長時間費用◎ 低価格○ 中程度× 高額目的すぐにホームページを作りたいある程度自由に作りたい完全オリジナルのサイトを作りたい どの方法を選ぶかは、目的・予算・必要な自由度 によります。まずは「どんなホームページを作りたいのか？」を明確にし、最適な方法を選択しましょう！

ワードプレスを使用する際に、新たにカスタム投稿を追加をせずに投稿を「新着情報」として使用することが多いですが、そのままの名前で運用すると分かりにくいとお声をいただいた際に対応したメニューの名称（ラベル）の変更方法をメモ。 functions.php（PHP） 「functions.php」に以下の内容を追記します。 function change_my_post_menu_label() { global $menu; global $submenu; $menu[5][0] = '新着情報'; $submenu['edit.php'][5][0] = '新着情報一覧'; $submenu['edit.php'][10][0] = '新着情報追加'; $submenu['edit.php'][15][0] = '新着情報カテゴリー'; //カテゴリを変更する場合は追記 $submenu['edit.php'][16][0] = '新着情報タグ'; //タグを変更する場合は追記 } function change_my_post_object_label() { global $wp_post_types; $labels = &$wp_post_types['post']->labels; $labels->name = '新着情報'; $labels->singular_name = '新着情報'; $labels->add_new = '新規追加'; $labels->add_new_item = '新着情報の新規追加'; $labels->edit_item = '新着情報の編集'; $labels->new_item = '新規新着情報'; $labels->view_item = '新着情報を表示'; $labels->search_items = '新着情報を検索'; $labels->not_found = '新着情報が見つかりませんでした'; $labels->not_found_in_trash = 'ゴミ箱に新着情報は見つかりませんでした'; } //カテゴリを変更する場合はこちらも追記 function change_my_category_object_label() { global $wp_taxonomies; $labels = $wp_taxonomies['category']->labels; $labels->name = '新着情報カテゴリー'; $labels->add_new_item = '新着情報カテゴリーを追加'; $labels->edit_item = '新着情報カテゴリーの編集'; $labels->all_items = '新着情報カテゴリー一覧'; $labels->search_items = '新着情報カテゴリーを検索'; $labels->not_found = '新着情報カテゴリーが見つかりませんでした'; } //タグを変更する場合はこちらも追記 function change_my_tags_object_label() { global $wp_taxonomies; $labels = $wp_taxonomies['post_tag']->labels; $labels->name = '新着情報タグ'; $labels->add_new_item = '新着情報タグを追加'; $labels->edit_item = '新着情報タグの編集'; $labels->all_items = '新着情報タグ一覧'; $labels->search_items = '新着情報タグを検索'; $labels->not_found = '新着情報タグが見つかりませんでした'; } add_action('init', 'change_my_post_object_label'); add_action('init', 'change_my_category_object_label'); add_action('init', 'change_my_tags_object_label'); add_action('admin_menu', 'change_my_post_menu_label');

以前、画像を使用したループスライダを紹介していましたが、今回は見出し等の表記文字をCSSで無限ループさせる場合の実装方法をメモ。 HTML <div class="loop__wrap"> <div class="loop__text"><span>CSSを使って無限ループさせる文字を記載</span></div> </div> CSS @keyframes textscroll { from { transform: translateX(0%); } to { transform: translateX(-100%); } } .loop__wrap { overflow: hidden; } .loop__text { display: flex; } .loop__text span { white-space: nowrap; animation: textscroll 10s infinite linear both; } jQuery if($('.loop__text').length){ var looptxtSize = $('.loop__text span').width() + 〇px; $('.loop__text span').css({'width':looptxtSize + 'px'}); $('.loop__text').css({'width':looptxtSize * 2 +'px'}); $('.loop__text').find('span').clone().appendTo('.loop__text'); } CSSセレクター「.loop__text span」の箇所で幅を直に設定することでもループスライダーの実装可能ですが、文字数や文字サイズが変わった場合でもそのまま使えることと、同じテキストを複数回記載する必要もなくなるようjQueryを使用しています。

弊社で作成したホームページや、依頼主の方が別で管理されていたりするホームページに関して、ご自身で更新されることもあるのですが、その際にご相談いただく事の多かった事例と解決方法をメモ。 ご相談事例 文字の頭に不要な余白が表示される。 HTMLの半角・全角スペースを見直す。 HTMLタグを記載される際に囲まれている範囲を分かりやすくするため、文字の字下げ（インデント）を行われる方に多いのですが、字下げの際に半角スペースに混じって「全角スペース」を打ち込まれていて余分なスペースが発生していることがあります。タグ間の頭の半角スペースは文字（余白）と認識しませんが、全角スペースは文字として認識されます。見た目では判断しにくいのですが、一文字づつ入力し直す事で解決できる事があります。 //問題のあるコード <p>私たちのホームページ制作会社には営業専門の担当者がおりません。<br> ＿_お打ち合わせの段階から制作の知識のあるものがお伺いし、ホームページの構成や仕様、コンテンツの内容、今後の更新に至るまで、様々な可能性を考慮したうえで、最適なホームページをご提案しています。</p> //改善後のコード <p>私たちのホームページ制作会社には営業専門の担当者がおりません。<br> ___お打ち合わせの段階から制作の知識のあるものがお伺いし、ホームページの構成や仕様、コンテンツの内容、今後の更新に至るまで、様々な可能性を考慮したうえで、最適なホームページをご提案しています。</p> 参考例では分かりやすくアンダーバー(_)を記載しています。 ボタンが見えているのにクリックできない CSSの「z-index」を使用して階層の順序を見直す。 CSSでネガティブマージン（マイナス方向への余白）や「position」プロパティを使用して配置されている場合に発生することが多いです。HTMLは下の行に書かれているものが上の階層として配置されます。背景色に透明なオブジェクトを使用している場合、分かりにくいのですが、ボタンの上に別の対象物が重なり、ボタンをクリックできない状態になっていることがあります。ボタンに「z-index」を付与して階層を上にすることで問題を解決できることがあります。 <div class="btnarea"> <a href="○○○○">ボタン</a> </div> <div class="lead"> <p>私たちのホームページ制作会社には営業専門の担当者がおりません。<br> お打ち合わせの段階から制作の知識のあるものがお伺いし、ホームページの構成や仕様、コンテンツの内容、今後の更新に至るまで、様々な可能性を考慮したうえで、最適なホームページをご提案しています。</p> </div> //問題のあるコード .btnarea { text-align: center; } .lead { padding: 1rem 0; position: relative; } .lead::before { content: ""; display: block; background: url(○○○○); width: 100%; height: 1rem; position: absolute; top: -1rem; } //改善後のコード .btnarea { text-align: center; position: relative; z-index: 1; } .lead { padding: 1rem 0; position: relative; } .lead::before { content: ""; display: block; background: url(○○○○); width: 100%; height: 1rem; position: absolute; top: -1rem; } CSSを設定しているのに色が正しく反映されない CSSの優先順位を見直す。 CSSの反映には「ID（id）　＞　クラス（class）　＞　要素（タグ）」の優先順位があり、更にその中でもCSSファイルの後の位置に書かれたものが有効となります。指定先の要素の色やサイズなどが競合した場合に優先順序を間違わなければ、希望通りに反映されることができるのですが、分かりにくいものとして「クラス内の要素　＞　クラス」が生じる場合もあります。この場合は対象のタグにIDを付与するか、または対象タグの親要素にクラスを指定した形で記載する事で解決できる場合があります。「!important」を用いて強制的に順位を高める方法もありますが、乱用すると制御が難しくなるのでお勧めはしません。 <div class="comment"> <p>私たちの<span>ホームページ</span>制作会社には<span class="style01">営業専門</span>の担当者がおりません。<br> お打ち合わせの段階から制作の知識のあるものがお伺いし、<span>ホームページ</span>の構成や仕様、コンテンツの内容、今後の更新に至るまで、様々な可能性を考慮したうえで、最適な<span>ホームページ</span>をご提案しています。</p> </div> //問題のあるコード .comment span { color: #00f; } .style01 { color: #f00; } //改善後のコード .comment span { color: #00f; } .comment .style01 { color: #f00; } まとめ：HTMLとCSSの課題をスムーズに解決するために HTMLとCSSに関する問題は、初心者から経験者まで誰もが直面するものです。弊社でも解決に向けてサポートしておりますが、より効率的なコーディングができるようになるために、この記事が課題解決に少しでもお役立てますと幸いです。

画像を使用する際に、曲線等の特殊な形で実装したい時があります。マスク済みの画像を用意する方法もありますが、動的に呼び出すコンテンツ等の場合は都度作成が難しい場合もあるため、CSSでマスキングする方法をメモ。 マスク用の画像を用意する マスクしたい形の画像（マスク用画像）をPNG形式やSVG形式で用意します。この時、画像を残したい（有効にしたい）方に色を付け、削る方を透明にします。 コードの実装 HTML <figure> <img src="画像のurl" class="image__mask"> </figure> CSS .image__mask { -webkit-mask-image: url(マスク用画像のURL); mask-image: url(マスク用画像のURL); mask-size: 100% auto; mask-position: bottom; mask-repeat: no-repeat; } サンプル .image__mask { -webkit-mask-image: url('https://web.syu-u.com/blog/wp-content/uploads/mv_mask.png'); mask-image: url('https://web.syu-u.com/blog/wp-content/uploads/mv_mask.png'); mask-size: 100% auto; mask-position: bottom; mask-repeat: no-repeat; } CSS マスキング mask-image の使い方

アクセス制限を設けるWEBページを作成する際に、ログイン機能を設けることは一般的ですが、更に同時にアクセスできる人数まで制限したい場合の実装方法をセッションIDを利用した方法でメモ。 同時アクセス人数制限の実装方法 実装したい内容を整理するとログイン処理時に、既にログインしていユーザーの人数をカウントして、上限数を超える場合はアクセスできなくする。といった処理になります。 参考例は、100人を最低1時間の利用で制限。データベースに「tbl_login 」というテーブルを作成し、そこに「ユーザーネーム（username）」「セッション情報（loginkey）」「セッションの生成時間（logindate）」のカラムを用意しています。 HTML <form action="login.php" method="post"> <dl> <dt>ユーザーネーム</dt> <dd><input type="text" name="username"></dd> <<dt>パスワード</dt> <dd><input type="password" name="password"></dd> </dl> <ul> <li><input type="submit" name="submit" value="ログイン"></li> </ul> </form> login.php（PHP） session_start(); $max = 100; //1時間よりも前に生成されたセッション情報を削除 $pastdata = date('Y-m-d H:i:s', strtotime('-1 hour')); $delsql = $db->pdo->prepare('DELETE FROM tbl_login WHERE logindate < :logindate'); $delsql->bindParam(':logindate', $pastdata, PDO::PARAM_STR); $delsql->execute(); //ログイン処理 if(!empty($_POST['submit'])){ foreach($_POST as $key => $value){ $dt[$key] = $value; } //入力エラー処理省略 if(empty($err_msg['error'])){ //パスワード照合処理省略 if($set_password != $dt['password']){ $err_msg['error']['login'] = error01; }else{ //ログインしている人数をカウント $count_list_sql = $db->pdo->query('SELECT * FROM tbl_login); $count = $count_list_sql->rowCount(); if($count <= $max){ session_regenerate_id(true); $user_key = session_id(); $login_date = date('Y-m-d H:i:s'); //cookieに保存 setcookie('user_key', $user_key, time()+60*60*24*7); //セッション情報をデータベースに保存 $addsql = $db->pdo->prepare('INSERT INTO tbl_login(username, loginkey, logindate) VALUES(:username, :loginkey, :logindate)'); $addsql->bindParam(':username', $dt['username'], PDO::PARAM_STR); $addsql->bindParam(':loginkey', $user_key, PDO::PARAM_STR); $addsql->bindParam(':logindate', $login_date, PDO::PARAM_STR); $addsql->execute(); $dt = array(); header("location: ○○○○"); //ログイン完了ページに遷移 exit; } } } } まずは、ログイン処理時に保存しているセッション情報から対象外となるもの（今回は時間制限で1時間以上経過したもの）を削除し、そこから最大件数に満たない場合はセッション情報を追加するようにしています。 入力処理やパスワードの認証処理（暗号化処理を含む）、データベースへの接続に関する記載は、今回は省略しています。 logincheck.php（PHP） session_start(); $value = $_COOKIE['user_key']; //ログインチェック $check_login_sql = $db->pdo->prepare('SELECT id FROM tbl_login WHERE loginkey = :loginkey'); $check_login_sql->bindParam(':loginkey', $value, PDO::PARAM_STR); $check_login_sql->execute(); $check_login_count = $check_login_sql->rowCount(); if(!isset($value) or $check_login_count < 1){ header("location: ○○○○"); //ログインページに遷移 exit(); }else{ //セッション情報（時間）を更新 $login_date = date('Y-m-d H:i:s'); $updatesql = $db->pdo->prepare('UPDATE tbl_login SET logindate= :logindate WHERE loginkey = :loginkey'); $updatesql->bindParam(':logindate', $login_date, PDO::PARAM_STR); $updatesql->bindParam(':loginkey', $value, PDO::PARAM_STR); $updatesql->execute(); } 次に、ページを遷移する度にログインチェックを行うと同時にセッション情報の更新を行います。これを怠ると時間制限により、他の方がログイン処理を行った際に自動的にログアウトされています。 logout.php（PHP） session_start(); $value = $_COOKIE['user_key']; //セッション情報を削除 $delsql = $db->pdo->prepare('DELETE FROM tbl_login WHERE loginkey　= :loginkey'); $delsql->bindParam(':loginkey', $value , PDO::PARAM_STR) $delsql->execute(); //クッキーの削除 setcookie('user_key', '', time()-60); header("location: ○○○○"); //ログインページに遷移 exit(); 最後にログアウト処理の記載です。そのままにしておいても時間制限でセッション情報は削除されてしまいますが、不正アクセスや個人情報の流出から自身を守るといった安全面や、他の方の利用を制限している可能性があることを考えると自発的に削除できる機能は必要不可欠となります。

「ワードプレスがなんだか遅い…」そんな悩みを抱えたことはありませんか？サイトの表示速度は、訪問者の満足度やSEOに直結する重要な要素です。ページの読み込みが遅いと、訪問者がすぐに離脱してしまい、ビジネスに悪影響を及ぼす可能性があります。この記事では、ワードプレスが遅いと感じた時の主な原因と、その解決策をメモ ワードプレスが遅い時の主な原因 ワードプレスの速度低下にはいくつかの要因があります。ここでは、特に初心者が見落としがちなポイントを挙げてみます。 原因1: 画像が大きすぎる ワードプレスにアップロードする画像が、撮影時のサイズのままだとページの読み込みに時間がかかる場合があります。特に高解像度の画像を使用している場合、ページ全体の容量が増大し、結果として表示速度が遅くなるのです。 原因2: 使用中のプラグインが多すぎる 便利だからといってプラグインを多用していませんか？プラグインが増えると、サーバーへの負荷が高まり、サイト全体のパフォーマンスに悪影響を及ぼします。また、同じ機能を持つプラグイン同士が競合することで速度低下を引き起こすこともあります。 プラグインの使用で重くなる理由 CMSでの入力内容はデータベースに保存されます。通常であれば「入力値」のみを保存すれば良いところを、プラグインでは入力項目自体の登録から必要になるため、入力項目、入力値、左記二つを関連付けるための登録と最低でも3つの内容の登録が必要となるためです。 原因3: 投稿履歴（リビジョン）が蓄積している ワードプレスは投稿やページを編集するたびに「リビジョン」と呼ばれる履歴を保存します。これにより、編集内容を遡ることができますが、リビジョンが蓄積されすぎると、データベースが肥大化し、読み込みの処理が遅くなる原因となります。 ワードプレスの遅さを解消するおすすめの解決策 解決策1: 画像の最適化 画像圧縮ツールやプラグインを活用して、ファイルサイズの削減が可能です。既に投稿済のものを編集する場合は「EWWW Image Optimizer」のプラグインを使うのがお勧めですが、プラグインの多用も遅延の原因となるらめ、これからアップロードするものに関しては「TinyPNG」等のブラウザサービスを使用して事前にファイルを圧縮する方が望ましいです。 EWWW Image Optimizer TinyPNG – Compress PNG images while preserving transparency 解決策2: 不要なプラグインを削除 定期的にプラグインを整理し、長らく使っていないプラグインや重複機能を持つものを削除。必要最小限のものだけを使いましょう。 解決策3: リビジョンの管理 既に作成れているリビジョン（投稿履歴）を「WP-Optimize」などのプラグインを使用して不要なリビジョンを削除します。一度設定を行うと定期的にサイトを最適化してはくれますが、事後処理となり、追加されるリビジョンの数の制限まではできないため、事前に追加をさせない場合は別途処理が必要です。 WP-Optimize WordPress（ワードプレス）でリビジョン（投稿履歴）を制御する それでも改善できない場合に考えること 前述の方法で改善が難しい場合はデータベースの設計を見直す必要があるかもしれません。 データベースとはWEB上で情報を保存しておくもので、エクセルファイルのようなものと考えてもらえるとわかりやすいかもしれません。エクセルファイルでデータを取り扱う場合、多くの方は情報の種類に合わせてシート（またはファイル）を分けて保存されていると思いますが、ワードプレスの投稿内容（メディア情報含む）のほとんどは1組のシートに目印をつけながら保存されている状態になっています。当然ながら情報量が多くなり過ぎると目的のものを探す処理に時間がかかるようになってきます。 その場合は、データベースの設計を見直し、保存されるテーブル（シート）を適切に分けて保存できるよう改修することも必要です。 まとめ：サイトを継続的に改善する姿勢が大切 ワードプレスの表示速度を向上させるには、基本的な設定からデータベースの見直しまで幅広い対策が必要です。ただし、一度にすべてを完璧にしようとする必要はありません。まずは、簡単な画像の圧縮やプラグインの見直しから始め、徐々に高度なデータベースの最適化に取り組むと良いでしょう。 適切な対策を講じて快適なサイト運営を目指しましょう！

管理画面等を使用して店舗を追加していく際に、一つづつ確認しながら地図を埋め込むことも可能ですが、入力した住所から動的に地図を生成する方法を実装していた際のコードをメモ。 Geocodingを使用した緯度経度の取得方法 実装する前にAPIキーを取得する googlemapの「geocoding」機能を使用するためにはAPIキーを取得する必要があります。google APIキーは「Google Cloud Platform」よりプロジェクトを作成して取得、更にAPIライブラリの中から「Geocoding API」を有効化。他サイトで利用できないよう認証情報ページで使用サイトと使用APIを制限します。 ヘッドにAPIキーを記載する 取得したAPIキーを、対象ページのヘッド内に下記を記載。 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> ジオコーディングを実装する HTML <form id="addressForm"> <table> <tr> <th>住所</th> <td> <input type="text" name="address" id="address" value="" onblur="initialize(this)"> <input type="hidden" name="latitude" id="latitude" value=""> <input type="hidden" name="longitude" id="longitude" value=""> </td> </tr> </table> <button type="submit" name="submit">送信</button> </form> javascript function initialize(obj){ var geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var address = document.getElementById('address').value; geocoder.geocode({'address': address},function(results,status){ if (status == 'OK') { var latlng = results[0].geometry.location; document.addressForm.latitude.value = latlng.lat(); document.addressForm.longitude.value = latlng.lng(); }else{ alert('Geocode was not successful for the following reason: ' + status); } }); } 後は用途に応じてフォームから取得した値をPHP等を使用してデータベースに保存します。

ホームページ制作を行っていると、稀に検索エンジンにヒットさせたくないファイルが出てくることもあります。サーバーから削除するのが確実ではありますが、諸事情もあるため削除せずにクロールをさせない実装方法をメモ。 robots.txt User-agent: * Disallow: *.pdf$ 上記はファイル（拡張子）対象とした方法。ディレクトリを指定する場合は下記 User-agent: * Disallow: /pdf/ 「robots.txt」はホームページのディレクトリ直下に設置します。

ご依頼されたホームページの確認をお願いすると、「変更を加えたページが更新されていない」という連絡を受けることがあります。こちらの原因の多くはブラウザが保存している「キャッシュ」にあります。この記事では、ホームページの更新が確認できない時の「スーパーリロード」やり方について解説します。 ページの更新を妨げる「キャッシュ」と強制的に更新する「スーパーリロード」 キャッシュとは？ キャッシュは、ブラウザが一度表示したウェブページのデータ（画像やスタイル情報など）を保存しておく仕組みです。これにより、再訪時のページ読み込みが高速化されるメリットがあるのですが、同時に古い情報を表示してしまうというデメリットもあります。 スーパーリロードとは？ スーパーリロードとは、通常の更新ボタン（F5キーなど）とは異なり、ブラウザに保存されているキャッシュを無視してウェブページを再読み込みする操作です。これにより、サーバーから最新のデータを取得できます。 スーパーリロードのやり方 スーパーリロードの操作はブラウザによって異なりますが、基本的にはキーボードの操作となります。以下に主要なブラウザごとの手順を紹介します。 WindowsMacGoogle ChromeCtrl + F5または Ctrl + Shift + RCommand + Shift + RFirefoxCtrl + Shift + RCommand + Shift + RMicrosoft EdgeCtrl + F5または Ctrl + Shift + RSafariCommand + Option + R スマートフォンでスーパーリロードは可能？ スマートフォンのブラウザではスーパーリロードを行うことができません。各種ブラウザの設定から閲覧履歴を削除してから、再読み込みすることで同様の効果を得ることが可能です。 まとめ: スーパーリロードを活用して快適なウェブ体験を スーパーリロードは、ブラウザキャッシュを無視して最新のウェブページを読み込む便利な機能です。初心者の方でも簡単に操作でき、ページが更新されない問題を迅速に解決できます。 WEB制作や管理の場面で役立つだけでなく、日常的なウェブブラウジングにも応用可能です。ぜひスーパーリロードを活用して、快適なウェブ体験を実現してください！

ホームページに訪れた方のサイト内の滞留時間を高めるために、関連のある記事へのリンクを設置するのは有効な手法。ワードプレスの投稿機能を使用時に閲覧している記事の下部に前後の記事へのページネーションを実装する方法をメモ。 single.php // 前の記事を取得 $previous_post = get_previous_post(); // 次の記事を取得 $next_post = get_next_post(); if($previous_post){ echo('<a href="'.get_permalink($previous_post).'">前の記事: '.get_the_title($previous_post).'</a>'); } if($next_post){ echo('<a href="'. get_permalink($next_post).'">次の記事: '.get_the_title($next_post).'</a>'); } 同一カテゴリーに限定する場合は「get_previous_post」「get_next_post」の引数に「true」を指定します。 WordPressでの前後の記事へのページネーション実装方法

サイト内で見かけるパスのアニメーション。あまり使う機会がないのだけれど、必要の際に思い出せるようにCSSとSVGを使用して実装方法をメモ。 HTML <div class="path__wrap"> <svg xmlns="http://www.w3.org/2000/svg" width="79.82" height="33.09" viewBox="0 0 79.82 33.09"> <path d="M953.39-90.53c-19.23,6.84-17.13,12.21-12.87,15.74,10.57,8.76-18.56,19.12-21,16-3.21-4.07,35.73-29.34,38.74-21.15.3.83,0,1.88-2.21,5.62-2.46,4.19,8.68,3.25,14.57-5.57,0,0-14,18.49-16.47,19.57-3.08,1.34-3.12-1.88.73-3.47,2.65-1.09,19.22-9.88,26.36-16.1,0,0-8.48,6.77-4.09,7.86s12.82-7.08,13.6-7.37c0,0-5.92,8.05,2.17,3.78a17.61,17.61,0,0,0,5.48-4.61" transform="translate(-918.88 90.92)" /> </svg> </div> CSS .path__wrap { width: 90%; margin: 0 auto; } svg { width: 100%; height: auto; } path { stroke: #0099d9; stroke-width: 0.2px; fill: none; stroke-dasharray: 300; /* パスの全長を設定 */ stroke-dashoffset: 300; /* アニメーション開始時にパスを非表示 */ animation: draw 2s linear infinite; } @keyframes draw { to { stroke-dashoffset: 0; } } 「stroke-dasharray」を使用して線が全て埋まるまでの数値（パスの全長）を指定。次に「stroke-dashoffset」を使用して上記パスの開始位置が0になるまでオフセット（パスの全長と同じ値を指定）。こうすることで初期状態ではパスが全く描かれていない状態になります。この状態から「animation」プロパティを使用してオフセットを0まで変化させることでパスが描かれていくようなアニメーションになります。 プロパティ公開strokeパスの色を指定するstroke-widthパスの太さを指定するfillパスで囲まれた面の色を指定する。パスアニメーションの場合は無色にする場合が多いstroke-dasharrayパスの間隔を指定する（破線にする）stroke-dashoffset破線のオフセット（打消し量）を後ろから指定する サンプル .path__wrap { width: 90%; margin: 0 auto; } svg { width: 100%; height: auto; } path { stroke: #0099d9; stroke-width: 0.2px; fill: none; stroke-dasharray: 300; stroke-dashoffset: 300; /* アニメーション開始時にパスを非表示 */ animation: draw 2s linear infinite; } @keyframes draw { to { stroke-dashoffset: 0; } } 尚、パスのアニメーションの方向が反対になった場合の対処法と、書き出したSVGの形式がポリライン（polyline）だった場合の対処法は下記になります。それぞれイラストレーターでの「パスの方向反転」、「複合パス作成」で解決可能です。 MacのSafariとスマホだけSVGのpathアニメーションが逆再生されるときの原因と解決方法 たったこれだけ！SVGのpolylineをpathに変換する方法

ご相談を受けてから、ご要望をお伺いし、お見積りを作成した時点で「思っていたよりも費用が…」という事は意外とあります。そんな時に費用を抑えるために弊社でご提案している内容をご紹介。 ホームページ制作費用の内訳を理解しよう 費用を抑えるためには、まずホームページ制作の費用がどのように構成されているのかを知ることが重要です。 項目名内容価格単位ディレクション費用お打ち合わせ、調査、構成案の作成・提案、進行管理等に発生する費用作業日数デザイン費用ホームページのデザインを行うための費用ページ数コーディング費用ホームページをインターネットで確認できるようにするための作業費用ページ数システム開発費用お問い合わせフォームや新着情報等、利用者が操作できるプログラムの開発費用開発日数モーション開発費用画像スライダーやサイト内フェードイン・フェードアウト等の動きを作成する費用開発日数ドメイン・サーバー費用ホームページを公開するスペースやURLの使用料金契約内容 ※上記は弊社の例、写真や動画の撮影、記事の作成等が必要な場合は別途費用が発生します。 費用を抑えるための3つのポイント 情報（ページ数）を整理する ホームページ制作では、ページ数が増えるほど費用が上がる傾向があります。情報量が多くなく、カテゴリーの類似した項目の場合はページを分けずにまとめることをご提案しています。 参考例 代表メッセージ、会社概要、沿革、アクセスを「会社情報」として1ページにまとめる 複数ある事業を個別で紹介せずに「一覧表示」でまとめて紹介する 実績、お客様の声、よくある質問等は制作せずに、後日情報が揃った時点で追加制作する 機能（システム開発やモーション開発）を見直す ホームページ制作費用は、どれだけの機能を実装するかでも大きく変わります。特に自社での更新を可能にするCMS（ワードプレスなど）の導入は便利ではありますが、頻繁に更新する予定がなければ導入しなくても問題はありません。初めての制作では、「本当に必要な機能だけ」に絞ることをご提案しています。 参考例 新着情報が不要、サイトの更新頻度が低いようならCMSを導入しないで、都度追加で変更依頼する お問い合わせフォームも必要がなければ設置しない サイト内検索機能は記事が増えてから実装する 画像にスライド機能を使用せず一覧で表示する LP（ランディングページ）での制作も検討する ランディングページは1ページ内に全ての情報を収めた特集などによく使われるページ。情報提供よりも申し込みに特化したページではありますが、ターゲットを明確にした小規模ホームページとしても利用は可能です。全体的にコンテンツの量が少ないようであれば、構成自体を変更してしまうこともご提案しています。 まとめ：初めから完璧なホームページに仕上げる必要はありません ホームページは一度作って終わりではなく、運用していく中で適切に調整していくことが重要です。訪問者の反応や事業の成長に合わせて、デザインや機能を追加・変更することで、より効果的なサイトへと進化させることができます。 弊社のホームページも制作当初はトップページのみの簡易的なサイトでした。まずは「作ること」に集中し、必要最低限のページと機能でスタートするのをお勧めしています。

背景画像のぼかし処理や、モーダルウィンドウの背景などを実装する際に、画像処理や、透過画像等で対応していた部分をCSSのみで解決できる方法があったのでメモ。 CSS .bg__image { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } ぼかし以外にも色変化のようなグラフィック効果を適用することもできます。指定した要素の背後にあるすべてに適用されます。 関数名効果値blurぼかし0px 〜 10pxbrightness明るさ0%～contrastコントラスト0%～drop-shadow影grayscaleモノクロ0% ～ 100%hue-rotate色相回転0deg ～ 360deginvert階調0% ～ 100%opacity透過0%～sepiaセピア0% ～ 100%saturate彩度0%～ backdrop-filterの使い方解説！CSSでグラスモーフィズムを実装！

ワードプレスのリビジョン機能は過去の投稿を履歴として残しておく機能です。誤ってブラウザを閉じてしまったり、違えた内容で保存してしまった際に、過去の投稿内容に復旧できるため、とても便利なのですが、そのままにしておくと延々と履歴が溜まり、サイト自体の表示が遅くなることもあるため、制御方法をメモ。 wp-config.php（PHP） define('WP_POST_REVISIONS', 5); 末尾の数値を残しておきたい履歴数を設定。サーバーによっては「wp-config.php」ファイルの書き込みが禁止されているものもあるため、その場合は各種FTPソフト等でパーミッションを「600」に変更して書き込みを許可したのち、元に戻します。 尚、設定前に作成されたリビジョンは上記のコードでは消えないため、別途データベースを編集するか、プラグインで対応する必要があります。

生成AIの利用で多くの事が実現できるようになってきました。弊社でも部分的に利用していることがあるのですが、中でもコンテンツ生成（運営サイトでの特集記事作成）の部分での利用に興味を持たれたことがあったので弊社なりの利用方法をメモ。 ChatGPTを使用したコンテンツ生成方法 ChatGPTは、対話形式でAIが人間の質問に回答する生成系AIのひとつ。アカウントを作成すると無料で利用（一部制限有）できるため、2022年11月にリリースされて以降、多くの方に利用されているサービスです。今回はこちらを利用したコンテンツ生成の流れを紹介していきます。 テーマの決定 まずは、テーマの決定です。書きたい事柄が決まっている場合は良いのですが、そうでない場合はいくつかのアイデアを出してもらい、その中から選択しています。 ○○がコンテンツSEOを行う場合に関心の強いコンテンツを列挙してください ○○の特集記事のテーマを探しています。日本人になじみのあるものをいくつか考えてください キーワードの選定 上記のアイデアを基にテーマが決定したら、次はテーマに即したキーワードを選定していきます。ターゲットや目的を具体的に指定する方がより効果的に思えます。 初心者に向けて「○○」に関しての記事を作成したと考えています。コンテンツマーケターとして検索ボリュームが多く、難易度は低いキーワードをいくつか提案してください ○○になるための通信講座の募集記事を作成したいと考えています。コンテンツマーケターとして検索ボリュームが多く、難易度は低いキーワードをいくつか提案してください タイトルの決定 上記キーワードを基に、記事タイトルを決定します。選択肢を増やしたいので具体的に数字を入れて指示をします。 上記キーワードを考慮したタイトル案を20案考えてください 気に入ったものがない場合は更に20点追加で提案してもらい、納得のいくまで行います。 記事の構成を決定 タイトルを選定したら、次に記事の構成を提案してもらいます。 ブログライターとして「○○」というタイトルで記事を作成する場合の構成を考えてください 構成案を確認し、満足がいかない場合は方向性を具体的に指示したり、入れたい内容を追加で指示したりして納得のいくまで行います。 ○○に関心をもってもらえる内容で考えてください 「○○」に関する内容を追加して考えてください 修正を行う中で、当初の目的や流れからずれてきたと感じた時は、追加で修正指示を出すのではなく、ずれる直前の指示内容を書き換えて、スレッドの流れを変える方がうまくいくように思います。直前の指示をキャンセルするのは説明が大変です。 記事の作成 構成が決まったら、実際の記事を作成します。具体的に数字を記載することで希望のボリュームに合わせた記事を作成してもらえます。 ブログライターとして上記の構成にならって、2000文字程度で文章を作成してください 記事を確認し、満足がいかない場合は気になる部分を具体的に指示していきます。 ○○　の文章を　△△　に関する内容の文章に差し替えてください ○○　の文章のボリュームを増やしてください 修正のキーワードとなる部分はスペースを設けたり括弧でくくるとAIも判別しやすいように思います。 最終確認 最後は文章に間違いがないか、言い方や書き方が統一されているか等の確認を行います。一般論的な内容であれば問題ない部分も多いですが、固有名詞や具体的な数字、技術等が記載されている場合には注意が必要。誤情報の可能性もありますので検索エンジンを使用して事実確認を行っていきます。 まとめ：生成AIで文章作成を効率化しよう 内容にオリジナリティを求めるのは難しいようですが、効率よく文章は作成できるので雛形作りには十分役に立つように思います。 尚、毎回、新規にスレッドを作成するよりも、用途（ライティング、マーケティング、翻訳、コーディング等）に合わせたスレッドを用意して、同じスレッドを使い続ける方が、過去の指示を引き継げることもあって精度が上がるようです。この辺りは同じ人に依頼した方が、意図をくみ取りやすくなってくれるのと似ています。

WordPress（ワードプレス）の投稿編集からタグを指定する際に、初期状態（デフォルト設定）だとテキスト入力形式となっていて間違いやすいため、カテゴリーと同様にチェックボックスでの選択形式に変更した際の実装方法をメモ。 function.php（PHP） function change_post_tag_to_checkbox(){ $args = get_taxonomy('post_tag'); $args -> hierarchical = true; //Gutenberg対応 $args -> meta_box_cb = 'post_categories_meta_box'; //Classicエディタ対応 register_taxonomy('post_tag', 'post', $args); } add_action('init', 'change_post_tag_to_checkbox', 1); 上記を「function.php」に追記。「グーテンベルク」と「クラシックエディタ」とで記載方法が異なるようなので注意

背景等で斜線や格子柄を実装する際に、以前は画像を作成して処理していたのですが、CSSのみで実装できる方法があったのでメモ。 CSS //斜線 background: repeating-linear-gradient(135deg, #f00, #f00 6px, #fff 6px, #fff 18px); 「repeating-linear-gradient」は反復処理を行ってくれるので、パターンを指定することで斜線や格子が実装できます。 上記の斜線は角度135度、1色目（#f00）を0から6px、2色目（#fff）を6pxから18pxの間隔で繰り返します。角度を0度、90度にすることで罫線（横線・縦線）の実装も可能です。二重指定も可能なので、組み合わせることで格子状にもできます。 CSS //格子状 background: repeating-linear-gradient(90deg, #000 , #000 1px, transparent 1px, transparent 32px), repeating-linear-gradient(0deg, #000 , #000 1px, #fff 1px, #fff 32px); 格子状の際には上位レイヤーの2色目に使用する色に透明色（transparent）を指定。こちらを使用しない場合は下位レイヤーのパターンが塗りつぶされます。

ホームページの話をしていると「SNSやブログ、各種情報サイトへの掲載で集客できているからホームページは必要ない。」と言われることがあります。確かに、SNSやブログは低コストで始められ、手軽に情報発信ができる便利なツールですが、それでもホームページを持たれる企業は多いです。そこで、SNSやブログを活用していてもホームページを持つ理由を考えてみます。 意外と見落としがちな3つの重要ポイント 訪問者の信頼は『公式ホームページ』で決まる SNSやブログはリアルタイムの情報発信に優れていますが、それだけでは会社の公式情報を十分に伝えきれません。例えば、あなたの会社のサービスや商品情報、住所、連絡先がSNSの投稿やブログ記事の中に埋もれてしまっていると、訪問者は簡単に探すことができませんし、新規訪問者にとっては、そのアカウントが「正式なものなのか？」という疑念を抱かれる心配もあります。 利用者の多くは情報を調べる際に、ホームページを確認しますし、「この会社は信頼できるのか？」の判断基準のひとつが公式ホームページの有無です。公式サイトを持つことで、会社の信頼感を一段と高めることができます。 プラットフォームの変化に依存してしまう SNSやブログは便利ですが、その利用はプラットフォームに依存していることを忘れてはいけません。仕様や利用価格の変更、突然のサービスの終了など、会社の状況とは全く関係のないところで情報発信ができなくなってしまうリスクもあります。 ホームページはSNSやブログ、各種サービスと異なり、外部の都合に左右されることはありません。ホームページを「会社の資産」として持つことで、安心して情報発信ができるようになります。 集客の幅が制限されてしまう SNSは、既存のフォロワーやアカウントを持つ人との接点を強化するには効果的ですが、サービスに登録していない人はコンテンツを見ることができないケースもあります。 一方で、ホームページを見るのにアカウントは不要です。インターネットの使える環境であれば、誰でも見ることができますので、SNSを利用しない層へのアプローチも可能になります。 まとめ：SNSやブログとホームページの両立が鍵 SNSやブログだけでも十分便利ですが、それだけに依存するのはリスクが大きい時代です。ホームページを情報発信の「拠点」として持ちながら、SNSやブログと連携させて運用することが安心して運営を行える方法のように思えます。

WordPress（ワードプレス）でページごとにタイトル（title）やディスクリプション（description）タグを変更する場合、「all in one seo」等のプラグインを使用されることが多いのだけれど、プラグインの多用はサイト遅延の原因にもなるので、phpを使用して直接記載する方法をメモ。 function.php（PHP） //タイトルタグの設定 function custom_document_title($title) { if(is_home() || is_front_page()) { $title = get_bloginfo('name'); }elseif(is_single()) { $title = get_the_title().'｜'.get_bloginfo('name'); }elseif(is_page()) { $title = get_the_title().'｜'.get_bloginfo('name'); }elseif(is_category()) { $title = single_cat_title('', false).'｜'.get_bloginfo('name'); }elseif(is_tag()) { $title = single_tag_title('', false).'｜'.get_bloginfo('name'); }else if(is_archive()){ $title = '投稿一覧｜'.get_bloginfo('name'); }else{ $title = get_bloginfo('name'); } return $title; } add_filter('pre_get_document_title', 'custom_document_title'); //ディスクリプションタグの設定 function custom_meta_description() { global $post; $description = ''; if(is_home() || is_front_page()) { $description = 'カスタムホームページディスクリプションを記載'; }elseif(is_single() || is_page()) { // 抜粋がある場合 if(has_excerpt($post->ID)) { $description = strip_tags(get_the_excerpt($post->ID)); }else{ $description = 'カスタムホームページディスクリプションを記載'; } }elseif(is_category()) { $description = 'カテゴリー: '.single_cat_title('', false).'に関する記事一覧ページです。'; }elseif(is_tag()) { $description = 'タグ: '.single_tag_title('', false).'に関連する記事一覧ページです。'; }elseif(is_archive()) { $description = '投稿記事一覧ページです。'; }else{ $description = 'カスタムホームページディスクリプションを記載'; } // ディスクリプションタグを出力 echo('<meta name="description" content="'.esc_attr($description) .'">').""; } add_action('wp_head', 'custom_meta_description'); 「header.php」内に既に「title」タグが記載されている場合は、「title」タグの削除が必要です。

ホームページ内に動画を掲載する場合、youtube等のサービスを利用する場合は問題ないのですが、公開条件等によって既存のサービスが使用できない時に、canvasとjavascriptを使用して表示時に動画（videoタグ）のサムネイル（ポスター画像）を自動で生成した方法をメモ HTML <video id="myVideo" onclick="this.play();" controls="" controlslist="nodownload" playsinline> <source src="video.mp4" type="video/mp4"> </video> <canvas id="myCanvas" style="display:none;"></canvas> javascript document.addEventListener("DOMContentLoaded", function() { var video = document.getElementById("myVideo"); var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 動画データが読み込まれた後に実行 video.addEventListener("loadeddata", function() { // video の幅と高さを canvas に合わせる canvas.width = video.videoWidth; canvas.height = video.videoHeight; // 0.5秒後のフレームを取得 video.currentTime = 0.5; }); // 指定フレームが読み込まれたら canvas に描画 video.addEventListener("seeked", function() { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // canvas を画像データに変換してポスターに設定 var posterDataUrl = canvas.toDataURL("image/jpeg"); video.setAttribute("poster", posterDataUrl); }); }); 尚、iOSでは機能制限があるようなので、読み込み時の自動取得は不可。再生ボタンクリック時に取得はできますが、本来の目的とは異なるため個別にポスター画像を用意するか、動画の登録時に自動生成したものを保存して使用する方法が良さそうです。

紹介や指名でご依頼いただく場合を除き、商談や提案時に「御社の強みは何ですか？」と聞かれることがあります。ホームページ制作時にも「ファーストビューにはキャッチコピーを記載しましょう」と気軽に提案していましたが、改めて考えるとサービスの機能や専門用語を説明するよりも難しいことに気が付いたので考え方をメモ。 自社の強みを説明する「USP（Unique Selling Proposition）」 USPとは「Unique Selling Proposition（ユニーク・セリング・プロポジション）」の頭文字を取ったもので自社の商品やサービスの持つ、独自の強みのこと。マーケティングにおいては差別化戦略の土台を支える考え方の一つとして、様々な会社で利用されています。 効果的なUSPの見つけ方 USPでは、独自性や顧客への具体的な価値提供に焦点をあてて、明確なメッセージを構築することが重要です。下記の手順に沿って作成を進めると、魅力的で効果的なUSPを導き出すことができます。 ターゲット顧客を明確にする 商品やサービスが誰に向けて提供されるものかを明確にします。ターゲット顧客のニーズ、関心、課題、悩みなどを把握し、彼らが重視するポイントを見極めます。 競合分析を行い、自社の独自価値を定義する 競合他社の商品やサービスの特徴を調査、自社と比較し、どのように差別化できるかを検討します。ここでは、自分たちが「何を提供するのか」よりも「他社との違い」に焦点を当てることが重要です。 比較のポイント .blogpage .wrap .post_main table tr td:first-of-type { width: 25%; } 比較項目説明具体例数量選択肢の数や数量プランの種類、品揃え、大盛価格基本料金や大幅な割引まとめ買い、初回割引利便性面倒に感じることへの対応出張査定、出張買い取り品質商品の品質希少素材、生産地、受賞歴時間サービスの提供スピード翌日配送、見積り30秒リスクリバーサル商品購入に感じるリスクの削減返金保証、修理保証、成果保証特典プレゼントの提供無料券、ポイントカード シンプルで記憶に残るメッセージを作成する USPは短く、シンプルなメッセージで表現することが効果的。「顧客の課題解決」や「自社の独自の強み」をベースに、記憶に残るキャッチフレーズやスローガンとして作り、そのメッセージを読んだとき、「このサービスは自分に合っている」と感じられるように意識します。 USPをテストしてフィードバックを得る 作成したUSPが効果的に機能するか、ターゲット顧客からのフィードバックや反応を確認。もし反響が弱いと感じる場合は、さらに独自性を強調する表現や、顧客が感じる利点を見直して再調整します。 自社の「普通」は他社の「特別」 スマートフォン専用のホームページが珍しかった頃、「弊社にスマートフォン用のホームページをご依頼いただくと、ホームページから直接電話ができるようになります」と言われて契約したという話を聞き、衝撃を受けたことがあります。 電話番号のリンクはどのホームページでも既に実装されていたことですが、当たり前過ぎて誰もが強みと思わなかった（見落としていた）ことに、価値を再発見された良い例だと思います。 内側（業界や会社の中）にいると「普通」に思えることが、他の方には「特別」であることは意外とあるのかもしれません。

ホームページ内でスクロールバーを使用する場合、特に設定がなければ左上を基準に表示されますが、デザインの都合で初期位置を変更する必要があったため、対応方法をメモ HTML <div class="scroll__flame">任意のコンテンツ</div> CSS .scroll__flame { width: 90vw; margin: 0 auto; overflow: auto; } jQuery（javascript） $(document).ready(function() { var $elm = $('.scroll__flame'); if($elm.length){ var halfScrollWidth = $elm[0].scrollWidth / 2; $elm.scrollLeft(halfScrollWidth); } }); 参考例はスクロールバーの水平位置が最大表示横幅（90VW）の半分の位置で表示されるように設定 垂直位置を調整する場合は下記。最大表示縦幅を利用します。 CSS .scroll__flame { height: 90vh; overflow: auto; } jQuery（javascript） $(document).ready(function() { var $elm = $('.scroll__flame'); if($elm.length){ var halfScrollHeight = $elm[0].scrollHeight / 2; $elm.scrollTop(halfScrollHeight); } });

PHPを使用してPDFファイルを動的にダウンロードしたところ、「header」関数でのリダイレクトができなくなってしまったため「cookie（クッキー）」とjavascriptを併用して対応した方法をメモ HTML <form action="download.php" method="post"> <input type="hidden" name="download__token" value="xxxxxxxxxx"> <dl> <dt>メールアドレス</dt> <dd><input type="text" name="email" placeholder="例）mail@example.com"></dd> </dl> <div class="btnSubmit"><input type="submit" name="download" value="送信する"></div> </form> download.php(PHP) if(!empty($_POST['download'])){ //値の取得処理とバリデーションを記載 if(empty($err_msg['error'])){ //クッキーを設定 setcookie('downloaded', '○○○○', time()+60*60, '/'); //ファイル名 $filename = '○○○○.pdf'; //ファイルのパス $filepath = dirname(__FILE__).'/'.$filename; header('Content-Type: application/octet-stream'); header('Content-Disposition: attachment; filename="'.rawurlencode($filename).'"'); header('Content-Length: '.filesize($filepath)); ob_end_clean(); readfile($filepath); }else{ header('location:'.$_SERVER['HTTP_REFERER']); } } jQuery（javascript） $('form').submit(function() { setInterval(function(){ if(document.cookie){ //クッキーを配列に収納 var params = document.cookie.split(';'); var array = {}; for(i = 0; i < params.length; i++){ var term = params[i].split('='); var key = term[0].trim(); var value = term[1] ? term[1].trim() : ''; array[key] = value; } if(array['downloaded']){ //クッキーの削除処理 document.cookie = "downloaded=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; window.location.href = '完了ページのURL'; } } }, 1000); }); 今回はメールアドレスを取得したのちにPDFをダウンロード可能にする仕様のため、フォーム（HTML）にはメールアドレスの入力項目を設置。フォームの受け取り処理でバリデーションを実行し、エラーの無い場合に「setcookie」関数を使用してクッキーを設定（変数名：downloaded）javascriptの「setInterval」を使用し1秒毎に、クッキーの値を判定して、条件に合った時のみ完了ページに遷移させています。 ファイルダウンロード完了後に画面遷移などをjavascriptで行う 尚、jquery側で入力チェックを行う名う場合は下記 jQuery（javascript） $('form').submit(function() { var error = ['']; if($('input[name="email"]').val() ==''){ error[1] = 'メールアドレスを入力してください'; }else if(!$('input[name="email"]').val().match(/^[a-zA-Z0-9_\.\-]+@(([a-zA-Z0-9_\.\-]+\.)+[a-zA-Z0-9]+$)/)){ error[1] = 'メールアドレスを正しく入力してください'; } var errors = ''; for( a = 0; a < 1; a++){ if(error[a].length > 0){ errors = errors + error[a]; } } if(errors.length > 0){ alert(errors); return false; } setInterval(function(){ if(document.cookie){ //クッキーを配列に収納 var params = document.cookie.split(';'); var array = {}; for(i = 0; i < params.length; i++){ var term = params[i].split('='); var key = term[0].trim(); var value = term[1] ? term[1].trim() : ''; array[key] = value; } if(array['downloaded']){ //クッキーの削除処理 document.cookie = "downloaded=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; window.location.href = '完了ページのURL'; } } }, 2000); }); 入力チェックの処理時間を考慮して「setInterval」の実行を2秒後にしています。

ホームページのリニューアル（改修）をお願いされる際に、現在ご利用中のサーバーを一緒に見直される方もいらっしゃいます。新規に使用されるサーバー（引っ越し先のサーバー）の登録時にドメインの登録を勧められて、一緒に新規で取得される方もいらっしゃますが、改修の際にサイト名（サービス）を変更する、合併等で社名が変わる、といった特殊な例を除いては、独自ドメインの新規取得は不要です。この機会にドメインとサーバーの関係を改めてメモ。 「ドメイン」と「サーバー」について 「ドメイン」と「サーバー」はホームページ制作や専用のメールアドレスを取得を作るうえで欠かせない要素。ホームページの制作時に一緒に説明をされることが多いので、同時契約が必要なものに思われる方も多いと思いますが、別会社が管理しており、それぞれに専用の管理ツールがあります。また、似たような用語に「IPアドレス」があります。 用語ウェブ上での役割地図上での例えドメインURLやメールアドレスの末尾に使用されるもの例）syu-u.com会社名や店名にあたるもの「表札（名前）」のようなものサーバーウェブ上でのデータ保管場所住所にあたるものIPアドレスウェブ上の位置情報のようなもの（数字で表記）サーバーに付与されています。緯度・経度にあたるもの（数字で表記）住所に付与されています。 事務所や店舗を移転される際に会社名や店舗名を変更される方は少ないと思いますが、同じようにサーバーを引っ越す際もドメインの新規取得（変更）は不要です。 サーバー移転の仕組み サーバーの引っ越しは、実際の引っ越しと異なり表面上には見えにくい裏側の処理になります。ドメインとサーバー（IPアドレス）は「DNS（ドメインネームサーバー）」というもので紐づけされていて、この設定を基にドメインへのアクセスを指定されたサーバーに繋げるようにしています。 そのため、サーバーの引越しは、必要な情報を移し替えた後で、ドメインの管理ツールからDNSの設定を変更するだけで完了。既存のドメイン（URL、メールアドレス）が変わらないので得意先やサイト会員等に引越しの連絡をする必要もありません。 独自ドメインを保有することは「URLを分かりやすくする」「メールアドレスを社用にする」以外にも、「引っ越しても連絡先が変わらない」という点でも便利です。 サーバー移転（DNS設定変更）の注意点 サーバーの切り替え操作は単純ですが、ドメインからのアクセスが完全に切り替わるまでに最大で72時間（3日間）程度かかると言われています。 その間は、新旧どちらかのサーバーに繋がる状態となっています。メールの受信がどちらのサーバーで行われても良いよう、両方のメールアカウントを併用して受信していく必要があります。また、マッチングサービスのあるホームページやショッピングサイト等、サイト内で顧客情報を保存する必要のあるサービスも注意が必要です。登録データの不足が起きないよう、常に登録データを同期させるか、IPアドレスでの転送処理等を使用して旧サーバーにアクセスが流れないようにすることが必要となります。

WordPress（ワードプレス）で画像追加してページに掲載する際に、アップロードは正常なのに小さいサイズ（scaled）の画像に置換されて表示されることがあります。これは対象画像のサイズが大きいため、読み込みが遅くならないように自動処理されているようですが、ギャラリー等で品質が保てなくなるので対処方法をメモ。 function.php（PHP） add_filter('big_image_size_threshold', '__return_false'); 上記を追記することで自動生成・置換を防ぐとこができます。その他のサイズに関しては「メディア設定」の項目で変更可能ですが、同様にfunction.phpでも制御できます。 function.php（PHP） //既存のサイズを停止 function disable_image_autogeneration($sizes) { unset($sizes['thumbnail']); // thumbnailサイズを停止 unset($sizes['medium']); // mediumサイズを停止 unset($sizes['large']); // largeサイズを停止 unset($sizes['medium_large']); // medium_large'サイズを停止 unset($sizes['1536x1536']); // 1536pxサイズを停止 unset($sizes['2048x2048']); // 2048pxサイズを停止 return $sizes; } add_filter('intermediate_image_sizes_advanced', 'disable_image_autogeneration'); 更に、コンテンツに適したサイズに自動変換したい場合は任意のサイズを追加指定することも可能です。 function.php（PHP） add_image_size('contents01（ファイルの末尾に付与）', 横幅（px）, 縦幅(px), true); //最後の引数は切り欠きの有無 尚、アップロードされた画像は年月ベースのフォルダに整理されて保存されますが、こちらもメディア設定で「チェックボックス」を外しておいた方が固定ページなどでHTMLを直書きする際は便利です。 [WordPress]メディアの自動生成を停止する方法 アイキャッチ画像（Featured Image）およびサムネイル画像のサイズを追加する

WordPress（ワードプレス）でメディアを追加する際に、動画や大きめの画像を追加しようとすると初期状態ではファイルサイズが不十分な時があります。変更手順は契約サーバーにより異なりますが、今回はお名前サーバーのSDプランを対応した際の方法をメモ。 php.ini upload_max_filesize = 20M post_max_size = 20M memory_limit = 20M SDプランでは「php.ini」ファイルを作成しての変更を推奨していましたので、上記ファイルを作成して対象サイトのディレクトリ直下にアップロード。WordPress（ワードプレス）のメディアページに数値が適応されていれば完了です。 値に関しては自由に設定は可能ですが、概ねサーバーの許容範囲になるようです。 WordPressサイトのファイルアップロードサイズ上限を引き上げる方法

「ワードプレスを使えば好きなように投稿できます」と言われて投稿機能を使ってみたけど思ったような（制作会社に作ってもらったような）デザインはできなかった…。こういったお話を聞く機会があったのでワードプレスの投稿についてメモ。 多目的に使えるが、デザイン特化の機能が用意されているわけでない ワードプレスの投稿機能は自由に投稿できますが、利用者や利用時によって使われ方が変わるため、全てに対応して必要なパーツ（以降ブロック）が用意されているわけではありません。使用しているテーマによって違いはあるものの、業種に特化したテーマでない限りは「見出し、段落、画像、表、リスト」など必要最低限のデザインとブロックが用意されているのみとなるため、思い通りのデザインに仕上げるのはなかなか難しい。初心者の方であればマイクロソフトの「ワード」で作成したようなページになるのではないでしょうか。 思い通りのデザインに近づけるための方法 ワードプレスの投稿画面で希望のデザインにするには様々なテクニックが必要。弊社の考える方法をご紹介します。 デザインカテゴリーの「カラム（横並び）、区切り、スペーサー」を使用する。 難易度 ★☆☆☆☆ デザインカテゴリーにはページの配置に関するブロックが用意されています。これらを利用することで希望する配置に近づけることが可能です。 ブロック要素機能備考カラム（横並び）画像や文章等を横並びの配置にします。各ブロックをカラム内のカラムボックスに追加していく区切り文章の下に罫線を追加します線とドットがあり、色変更が可能スペーサー文章の下に余白を追加します。余白の単位は改行の回数分になるよう「rem」を推奨 「高度な設定」を利用する 各ブロックには「高度な設定」の項目が用意されており、「追加CSSクラス」に記入することで自由にデザインを付与できます。CSSクラスは「テーマに用意されていものから利用する」方法と、「新たに作成する」方法の2通りがあります。 用意されているCSSクラスを利用する 難易度 ★★☆☆☆ ホームページ内の使いたいデザインのCSSを流用します。制作者の方に該当するCSSのリストを用意してもらい、リストの内容に倣って記載します。 新たにCSSクラスを作成する 難易度 ★★★★☆ 新しくデザイン用のCSSクラスを作成します。テーマ本体のCSSを編集すると他のページにも影響が出てくるためウィジェットカテゴリーの「カスタムHTML」ブロックを使用してページ専用のCSSクラスをインライン形式で作成し記載。ホームページで使用されていないデザインを実装できますが、CSSクラスの作成には専門知識が必要となります。 全てHTMLで記載する 難易度 ★★★★★ 既存のブロックを使用せず、「カスタムHTML」ブロックを使用して全てHTMLタグを直書きします。完全に自由なデザインを実装可能ですが、ホームページ制作者と同じ手法になりますのでCSSの知識に加えてHTMLの専門知識が必要となります。 専用のブロックを追加で依頼して作成してもらう 難易度 ★☆☆☆☆ ワードプレスの投稿ブロックは追加が可能です。必要となる項目（構成）が決まっているのであれば、あらかじめ専用のブロックを制作者に依頼して用意してもらうことも可能です。ブロックを制作するための費用は必要となりますが、他のブロックと同じ要領で専門知識がなくても手軽に編集が行えるようになります。 .blogpage .wrap .post_main div > .wp-block-group > * { margin: 0; } .blogpage .wrap .post_main div > .wp-block-group > p:first-of-type { background: #eee; padding: 5px 10px; font-size: 0.8rem; } .blogpage .wrap .post_main div > .wp-block-group > * + p { color: #ffd900; font-weight: bold; }

WordPress（ワードプレス）でホームページ制作をする際に、トップページは複雑な構成になることが多いため、専用ファイル（home.php）で作成することが多いのですが、編集を自由にしたいとのご要望から個別ページで作成する場合もあります。その際に投稿一覧（新着情報）を自由な位置に配置できるように投稿一覧をショートコード化した方法をメモ。 function.php（PHP） function news_post_list() { $html = '<ul class="newslist__list">'; $postargs = array( 'post_type' => 'post', 'posts_per_page' => 5, //表示件数指定 ); $newspost_query = new WP_Query($postargs); if ($newspost_query->have_posts()) : while($newspost_query->have_posts()) : $newspost_query->the_post(); $html .= '<li><a href="'.get_permalink().'">'; $html .= '<span class="news__list__date">'.get_the_time('Y/m/j').'</span>'; //カテゴリーを取得 $categories = get_the_category(); if($categories){ foreach($categories as $category){ $html .= '<span class="newslist__list__cat">'.$category->name.'</span>'; } } $html .= '<span class="news__list__heading">'.get_the_title().'</span>'; $html .= '</a></li>'; endwhile; endif; wp_reset_postdata(); $html.='</ul>'; return $html; } add_shortcode('my_news_post_list', 'news_post_list'); [my_news_post_list]を個別ページのショートコードブロックの中に記載して完了。一応、デフォルトでショートコードが用意されているようなのですが、反映に1時間近くかかるようなので、そちらは実用性がないかもしれません。 「投稿の表示」ショートコード 日本語サポート