小金井にあるWEB制作会社の備忘録

対企業向けのマーケティングにおいて「ホワイトペーパー」を活用する企業が増えていますが、「ホワイトペーパーって何？」と疑問を持たれる方も多いのではないでしょうか。そこで、本記事では、自社での再確認も含め、ホワイトペーパーの説明や、ホワイトペーパーを活用したマーケティング方法についてメモ。 ホワイトペーパーとは？ ホワイトペーパーとは、企業が提供する無料の資料で、特定の課題や問題を解決するための情報を詳しく解説したものです。例えば、「業界の最新動向」「課題解決の方法」「導入事例」などをテーマにすることが多く、リード獲得（見込み客の情報収集）に効果的な手法として知られています。 ホワイトペーパーの具体的な特徴 専門的な知識をわかりやすく解説している 読者（見込み客）の課題解決をサポートする 企業の信頼性を高める ダウンロードと引き換えに見込み客の情報を得る ホワイトペーパーを活用するメリット ホワイトペーパーを活用すると、以下のようなメリットがあります。 リード獲得につながる ホワイトペーパーは、企業が「無料でダウンロードできる資料」として提供することで、見込み客の情報を取得する手段になります。フォームにメールアドレスや企業名を入力してもらうことで、将来的にアプローチできる貴重なリードを獲得できます。 企業の信頼性を向上できる 質の高いホワイトペーパーを提供することで、「この企業は業界の専門知識を持っている」と認識され、ブランドの信頼性が高まります。これは特に、競争が激しい業界において差別化のポイントとなります。 営業活動の効率化できる ホワイトペーパーは、営業ツールとしても活用できます。見込み客が事前に資料を読んでいるため、営業担当者が説明する手間が減り、スムーズに商談へ移行しやすくなります。 ホワイトペーパーの効果的な活用方法 ターゲットを明確にする ホワイトペーパーを作成する際、最も重要なのは「誰に向けた資料なのか」を明確にすることです。例えば、以下のようなターゲット設定が考えられます。 初心者向け：「はじめての〇〇」「基礎から学ぶ〇〇」 導入検討者向け：「〇〇の選び方」「導入前に知っておきたい〇〇」 比較検討者向け：「〇〇 vs 〇〇｜徹底比較」 ターゲットが明確でないと、読者のニーズに合わない内容になってしまい、ダウンロード率が低下する可能性があります。 魅力的なコンテンツを作成する ホワイトペーパーの内容は、読者にとって価値があるものでなければなりません。以下のポイントを意識すると、より魅力的なコンテンツになります。 課題を明確にする：「〇〇に困っていませんか？」と共感を生む内容にする 解決策を示す：具体的な方法や成功事例を紹介する 読みやすい構成：図表や箇条書きを活用し、分かりやすくする ダウンロードを促す仕組みを作る ホワイトペーパーを作っただけでは、効果は期待できません。ダウンロードを促す仕組みを整えることが重要です。 LP（ランディングページ）の設計：ダウンロードページを作り、ホワイトペーパーの魅力を伝える フォームの最適化：入力項目を減らし、ユーザーの負担を軽減する CTA（行動喚起）の工夫：「今すぐ無料ダウンロード」など、具体的な言葉を使う ホワイトペーパーの効果を最大化する運用ポイント ダウンロード後のフォローを徹底する ホワイトペーパーをダウンロードした方に対して、フォローを行わないと成果につながりません。 お礼メールの送信：「ダウンロードありがとうございます」と感謝の気持ちを伝える 関連コンテンツの紹介：他の記事や事例紹介を送ることで、興味を継続させる 営業チームとの連携：温度感の高いリードに適切なアプローチを行う 成果の分析と改善 ホワイトペーパーマーケティングを継続的に成功させるには、データを分析し、改善を重ねることが重要です。 ダウンロード数 コンバージョン率（CVR） 商談化率 これらのデータをもとに、コンテンツやプロモーションの改善を図りましょう。 当社でのホワイトペーパー活用事例 ホワイトペーパーは、ターゲットにとって価値のある情報を提供することが重要です。例えば、当社では導入時に質問の多い「ワードプレスでの投稿方法」をまとめた簡単な資料をホワイトペーパーとして提供しています。 このホワイトペーパーをダウンロードできるようにすることで、初心者の方がスムーズにワードプレスを使い始められるようサポートすると同時に、見込み客との接点を作ることもできています。 「ホワイトペーパーを活用してみたいけど、どこから始めればいいかわからない…」という方は、まずは自社の顧客がどんな課題を抱えているのかを分析し、それに応える形でシンプルな資料を作成すると良いでしょう。少しずつ改善を重ね、効果的なマーケティング施策に育てていきましょう！

WordPress（ワードプレス）での投稿時にハイフンを連続して記載する機会があったのですが、セキュリティーの観点から禁止されていたので解決方法をメモ。 「-」（ハイフン）を「-」と置き換えて投稿 投稿画面でハイフンを文字コード「-」に置き換えて記載。記載する際にはエディタモードを「コードエディタ」に切り替えて作業を行います。尚、コードブロック内では問題なく表記されます。

CSSのコーディング時に同じ色、同じフォント、同じ文字サイズなど、何度も同じ値を使用する際に個別にクラスを用意してマークアップを行っていくのでも良いのだけれど、THTMLへの追記なくCSSファイルのみで完結できる「カスタムプロパティ（変数）」が非常に便利だったのでメモ。 CSSのカスタムプロパティ（変数）とは CSSのカスタムプロパティは、CSSの値を事前に変数として登録しておくとこで、各セレクターでの指定時に再利用できる値のこと。具体的にはルートセレクター（:root）に設定することで全てに適応することが可能となります。 CSS :root { --maincolor: #4790bb; --accentcolor: #2a5772; --subcolor: #b0d7d5 --bigsize: 1.8rem; --middlesize: 1.4rem; --enfont: "Jost", serif; } .common__label { color: var(--accentcolor); font-family: var(--enfont); font-size: var(--bigsize); font-weight: 700; } .common__heading { margin: 1rem 0 4rem; font-size: var(--middlesize); } 設定時に「--○○○○」の形式で登録、実行時に「var(--○○○○)」の形式で記載。変更する際も「:root」の値を変更するだけで一括で変更できるほか、誤って「:root」の値を削除してしまった時のために「フォールバック値（代替値）」の設定も可能です。 CSS .common__heading { margin: 1rem 0 4rem; font-size: var(--middlesize, 20px); } 「var」の第二引数（カンマの後の値）に記載されたものが「フォールバック値」。カスタムプロパティが空の場合に代わりに適応されます。

ホームページにブログを設置すると、「記事を書けば収益を得ることができるようになりますか？」というお問い合わせをいただく事もあります。実際、自社ブログ（オウンドメディア）を収益化することは可能ですが、やみくもに記事を書いていても成果は出ません。この記事では、ブログで収益を得る仕組みと、初心者が副業で成功するための方法について解説します。 ブログで稼ぐ基本の仕組みを知る ブログで収益を得るためには、単に記事を書くだけでは不十分です。自社商品をお持ちの企業様で、そちらの広報用の記事で収益が出せるということでない限りは、読者を集め、マネタイズの仕組み（広告）を適用することで、初めて収益化が可能になります。 主な広告の種類 種類特長Googleアドセンスクリック報酬型広告。記事内に広告枠を設置するだけで自動で広告が配信されるので導入は比較的容易。単価が低く、アクセス数が少ないと稼げない。アフィリエイト（成果報酬型広告）特定の商品やサービスを自身で選択・紹介し、読者が購入・登録すると報酬が発生する。単価の高いものも多く、テーマに合えば成約率も高くなる。A8.net、もしもアフィリエイト、Amazonアソシエイトなどが有名。企業案件企業から依頼を受け、製品やサービスを紹介する広告や記事を設置する。ブログの認知度が高くなると企業側から連絡がくる。固定費（期間契約）が多い。 副業ブログの始め方：初心者向けのステップ ブログに掲載する広告（テーマ）を決める 副業ブログを始める方に、ご自身の好きな内容の記事を作成し、後で広告を設置される方が多いのですが、出稿時になって希望の価格や、テーマに添った広告が見つからないこともありますので、最初に広告を選択し、その広告に合わせたテーマで記事を書くことが望ましいです。 SEO（検索キーワード）を意識した記事作成でアクセスを集める テーマが決まったら次は実際に記事を書いていきますが、この際にSEO（検索キーワード）を意識して検索エンジンからの流入が期待できる内容を盛り込んで作成します。特に見出しは、検索結果にも表示されるため重要になります。 キーワードは「キーワードツール」を使うか、その時の「トレンド」から選定しながら、まずは30本の記事を作成することを目指します。 広告やアフィリエイトを導入する ある程度の記事が溜まってきたら、広告の申請を行い、広告の掲載を開始します。 アクセス解析を行い、改善を続ける 広告は掲載しているだけでは収益に繋がりません。アクセス解析ツールを使って集客状況を確認したり、SNSで投稿を拡散したりと、記事構成を見直しながら常に集客のできる記事に改善していきます。 まとめ：継続すればブログは副業として成功できる！ ブログは、正しい方法で継続すれば副業として稼げるようになります。最初は収益が出なくても、コツコツと記事を増やし、集客の仕組みを理解していくことが大切です。まずは小さな成功を積み重ねながら、長期的な視点でブログを育てていきましょう！

掲示板など不特定多数の方が利用できるサービスを作成する際に、不適切な書き込みができないよう禁止ワード（ＮＧワード）を設ける場合もあるため、実装方法をメモ。 PHP $ngWords = '/○○○○|○○○○|○○○○|○○○○|○○○○|○○○○|○○○○/u'; function checkNGWord($ngWords, $text) { if (preg_match($ngWords, $text)) { return true; } else { return false; } } // 使用例 $comment = "お前は○○○○"; if(checkNGWord($ngWords, $comment)){ //禁止ワードが含まれている際の処理を記載 } 禁止ワードが含まれる投稿を一切登録できなくする方法もありますが、その場合は対象の文字が含まれている普通の用語（例：禁止ワード「エロ」の場合の、投稿ワード「ピエロ」）も登録できなくなってしまうこともあるため、禁止ワードを過剰に設定しない、管理者に通知が届くにとどめて目視で削除する、または承認制にする等の運用方法を考える必要はありそうです。

フォーム投稿で画像をアップロードする際に、追従式のメールフォームを作成し、コンテンツの途中の段階で送信が送れる仕組みを作成していたのだけれど、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: 使用中のプラグインが多すぎる 便利だからといってプラグインを多用していませんか？不要なプラグインが増えると、サーバーへの負荷が高まり、サイト全体のパフォーマンスに悪影響を及ぼします。また、同じ機能を持つプラグイン同士が競合することで速度低下を引き起こすこともあります。 原因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を使用して表示時に動画のサムネイル（ポスター画像）を自動で生成した方法をメモ 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で行う