東京都小金井市にあるWEB制作会社の備忘録

ホームページ制作を行っていると、稀に検索エンジンにヒットさせたくないファイルが出てくることもあります。サーバーから削除するのが確実ではありますが、諸事情もあるため削除せずにクロールをさせない実装方法をメモ。 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で行う 尚、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時間近くかかるようなので、そちらは実用性がないかもしれません。 「投稿の表示」ショートコード 日本語サポート

入力フォームに入力された文字をホームページに出力する際に、XSS（クロスサイトスクリプティング）対策のため「htmlspecialchars」を使用してエスケープ処理をするのが一般的ですが、入力されたHTMLをそのまま使いたい場合は使えないため「strip_tags」を使用して特定のタグのみを許可して対応させた方法をメモ。 PHP // 特定のタグのみ許可（例: <strong>, <em>, <u>, <p> タグを許可） echo(strip_tags($post['content'], '<strong><em><u><p>')); リッチエディタ等の入力サポートツールを使用している場合、設置されているボタンから利用可能なタグが推測できるので、登録されているタグを「strip_tags」に追加。悪意のあるスクリプトタグなどを除去しつつ、特定のタグだけを許可できます。

テキスト入力時に文字を装飾したり画像や表を埋め込めるリッチエディタ。ワードプレスを使用することが増え、使用する機会は減ったものの代表的なツールも有料化され、クライアントへの提案が難しくなったためこれを機会に自作したものの一部をメモ。 PHP <div class="richtexteditor"> <form id="editorForm" method="POST" action="" onsubmit="prepareForm()"> <nav id="toolbar"> <ul> <li><button id="toggleView">ソースを見る</button></li> <li><button onclick="execCmd('bold'); return false;" id="bold"><i class="fas fa-bold"></i></button></li> <li><button onclick="execCmd('createLink', prompt('Enter the URL', 'http://')); return false;" id="links"><i class="fas fa-link"></i></button></li> <li><button onclick="execCmd('unlink')"><i class="fas fa-unlink"></i></button></li> <li><button type="button" onclick="showImageModal(); return false;"><i class="far fa-image"></i></button></li> <li><div class="toolbar__li__inner"><i class="fas fa-tint"></i><input type="color" id="textColor" title="Text Color"></div></li> <li><div class="toolbar__li__inner">フォントサイズ <select onchange="execCmd('fontSize', this.value); return false;" name="fontSize" id="fontSize"> <option value="">標準</option> <option value="10px">10px</option> <option value="12px">12px</option> <option value="14px">14px</option> <option value="16px">16px</option> <option value="18px">18px</option> <option value="24px">24px</option> <option value="30px">30px</option> <option value="36px">36px</option> </select> </div></li> </ul> </nav> <div id="editor" contenteditable="true"></div> <textarea id="textarea" style="display: none;" name="html"></textarea> <ul class="submitbtn"> <li><input type="submit" name="submit" value="登録"></li> </ul> </form> <!-- 画像選択用モーダル --> <div id="imageModal" class="modal"> <div class="modal-content"> <span class="close" onclick="closeImageModal()">&times;</span> <h2>画像選択</h2> <div class="image-list"> <!-- サーバー内の画像ファイルリスト --> <?php $dir = 'upload/'; $files = array_diff(scandir($dir), array('.', '..')); foreach ($files as $file) { echo '<img src="' . $dir . $file . '" onclick="selectImage(\'' . $dir . $file . '\')" alt="' . $file . '">'; } ?> </div> </div> </div> </div> サンプルは「太字」「リンク付与/打消し」「画像」「文字色」「文字サイズ」を変更できるボタンと「ソース切替」ボタンを設定。リッチエディタとして動くよう編集エリアに「contentEditable="true"」を記載。画像はモーダルウィンドウ形式にして対象フォルダ（upload）の中を参照できるようにしています。 CSS @import url('https://use.fontawesome.com/releases/v6.5.1/css/all.css'); .icon-code::before{ font-family: "Font Awesome 5 Free"; content: "\f1c9"; font-weight: 400; margin: 0 5px 0 0; } .richtexteditor .submitbtn { display: flex; justify-content: center; padding: 0; } .richtexteditor .submitbtn li { margin:0 10px; list-style: none; } .richtexteditor .submitbtn li input { background: #3f6fab; width: 20vw; line-height: 44px; border: #3f6fab solid 3px; margin: 0; color: #fff; cursor: pointer; } .richtexteditor .submitbtn li input:hover { background: #fff; color: #3f6fab; } #toolbar { background: #f8f8f8; margin: 0 0 5px; padding: 5px; box-sizing: border-box; border: 1px solid #ccc; } #toolbar ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; } #toolbar ul li { list-style: none; margin-right: 5px; } #toolbar button { background: none; padding: 10px; border: none; font-size: 14px; text-align: center; line-height: 1.0; } #toolbar button i { font-size: 14px; } #toolbar button.active { background: #fff; border: #ddd solid 1px; } .toolbar__li__inner { display: flex; align-items: center; padding: 10px; font-size: 14px; line-height: 1.0; } #toolbar select { margin: 0 0 0 5px; padding: 0; border: #ddd solid 1px; } #toolbar input[type="color"] { height: 14px; margin: 0 0 0 5px; padding: 0; border: #ddd solid 1px; } #editor, textarea { width: 100%; height: 66vh; padding: 10px; box-sizing: border-box; border: 1px solid #ccc; overflow: auto; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); padding-top: 60px; } .modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover { color: black; text-decoration: none; cursor: pointer; } .image-list img { max-width: 100px; cursor: pointer; margin: 5px; } jQuery $(document).ready(function() { let isSourceMode = false; // 選択範囲の状態取得 document.onselectionchange = function() { updateToolbar(); } // コマンドを実行する関数 window.execCmd = function(cmd, value) { // 現在のテキスト選択を取得 var selection = window.getSelection(); // 現在の選択範囲を取得 var range = selection.getRangeAt(0); switch (cmd) { case 'bold': var ancestor = findAncestor(range.commonAncestorContainer, 'STRONG'); if (ancestor) { unwrap(ancestor); } else { var strong = document.createElement('strong'); range.surroundContents(strong); } break; case 'createLink': var a = document.createElement('a'); a.href = value; a.textContent = range.toString(); range.deleteContents(); range.insertNode(a); break; case 'unlink': var parent = range.commonAncestorContainer.parentElement; if (parent && parent.tagName === 'A') { var textNode = document.createTextNode(parent.textContent); parent.parentNode.replaceChild(textNode, parent); } break; case 'insertImage': var img = document.createElement('img'); img.src = value; range.deleteContents(); range.insertNode(img); break; case 'foreColor': var existingSpan = findExistingSpanWithStyle(range, 'color'); if (existingSpan) { existingSpan.style.color = value; } else { var span = document.createElement('span'); span.style.color = value; range.surroundContents(span); } break; case 'fontSize': var existingSpan = findExistingSpanWithStyle(range, 'fontSize'); if (existingSpan) { if (value === '') { unwrap(existingSpan); } else { existingSpan.style.fontSize = value; } } else { var span = document.createElement('span'); span.style.fontSize = value; range.surroundContents(span); } break; default: document.execCommand(cmd, false, value); } updateTextarea(); updateToolbar(); }; // RGBからHEXへ変換 function rgbToHex(color) { var hex = '#'; if (color.match(/^#[a-f\d]{3}$|^#[a-f\d]{6}$/i)){ return color; } var regex = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); if (regex){ var rgb = [ parseInt(regex[1]).toString(16), parseInt(regex[2]).toString(16), parseInt(regex[3]).toString(16) ]; for (var i = 0; i < rgb.length; ++i){ if (rgb[i].length == 1){ rgb[i] = '0' + rgb[i]; } hex += rgb[i]; } return hex; } } // タグの削除 function unwrap(element) { var parent = element.parentNode; while (element.firstChild) { parent.insertBefore(element.firstChild, element); } parent.removeChild(element); } //該当範囲にタグが反映されているのか確認 function findAncestor(node, tagName, allowedTags) { while (node) { if (node.nodeType === 1 && node.tagName === tagName) { return node; } if (allowedTags && allowedTags.includes(node.tagName)) { return node; } node = node.parentNode; } return null; } // 該当範囲にスタイルが適応されているかの確認 function findExistingSpanWithStyle(range, style) { var container = range.commonAncestorContainer; while (container) { if (container.nodeType === 1 && container.tagName === 'SPAN' && container.style[style]) { return container; } container = container.parentNode; } return null; } // ツールバー更新関数 function updateToolbar() { // ボタンの状態をクリアする $('#toolbar button').removeClass('active'); $('#toolbar #textColor').val('#000'); $('#toolbar select#fontSize').val(0); var selection = window.getSelection(); if (selection && selection.rangeCount > 0) { var range = selection.getRangeAt(0); var parentElement = range.commonAncestorContainer.parentElement; // bold var ancestorStrong = findAncestor(range.commonAncestorContainer, 'STRONG'); if (ancestorStrong) { $('#toolbar button#bold').addClass('active'); } // font color var existingSpanColor = findExistingSpanWithStyle(range, 'color'); if (existingSpanColor) { var fontColor = existingSpanColor.style.color; $('#toolbar #textColor').val(rgbToHex(fontColor)); } // font size var existingSpan = findExistingSpanWithStyle(range, 'fontSize'); if (existingSpan) { var fontSize = existingSpan.style.fontSize; $('#toolbar select#fontSize').val(fontSize); } } } // エディタの内容をテキストエリアに反映する関数 function updateTextarea() { var content = $('#editor').html(); $('#textarea').val(content); } // テキストエリアの内容をエディタに反映する関数 function updateEditor() { var content = $('#textarea').val(); $('#editor').html(content); } // モード切替関数 function toggleView() { if (isSourceMode) { $('#textarea').hide(); $('#editor').show(); updateEditor(); $('#toggleView').text('ソースを見る'); } else { updateTextarea(); $('#editor').hide(); $('#textarea').show(); $('#toggleView').text('エディタに戻る'); } isSourceMode = !isSourceMode; } // 画像モーダル表示関数 window.showImageModal = function() { $('#imageModal').show(); }; // 画像モーダル閉じる関数 window.closeImageModal = function() { $('#imageModal').hide(); }; // 画像選択関数 window.selectImage = function(imgSrc) { execCmd('insertImage', imgSrc); closeImageModal(); }; // フォーム送信前の処理 window.prepareForm = function() { // 不要なタグや空のタグを削除する処理 var editorContent = $('#editor').html(); var cleanedContent = cleanHTML(editorContent); $('#editor').html(cleanedContent); }; // HTMLをクリーンアップする関数 function cleanHTML(html) { var cleaned = html.replace(/<div><br><\/div>/g, '<br>'); cleaned = cleaned.replace(/<div><br\s*\/?><\/div>/g, '<br>'); cleaned = cleaned.replace(/<div><\/div>/g, ''); cleaned = cleaned.replace(/<p><br><\/p>/g, '<br>'); cleaned = cleaned.replace(/<p><br\s*\/?><\/p>/g, '<br>'); cleaned = cleaned.replace(/<p><\/p>/g, ''); // cleaned = cleaned.replace(/<strong><\/strong>/g, ''); cleaned = cleaned.replace(/<em><\/em>/g, ''); cleaned = cleaned.replace(/<u><\/u>/g, ''); return cleaned; } // 初期化：テキストエリアの内容をエディタに反映 updateEditor(); // フォーカスをエディタに設定 $('#editor').focus(); // エディタの内容が変更されたときにテキストエリアを更新 $('#editor').on('input', updateTextarea); // ソースビュー切り替えボタンのイベントハンドラ $('#toggleView').on('click', toggleView); // 文字色変更イベントハンドラ $('#textColor').on('input', function() { execCmd('foreColor', this.value); }); }); 「window.getSelection()」を使用してカーソールで選択している範囲を取得。「execCmd」関数に押されたボタンの値を送ることで各タグを実装。 「findAncestor」関数や「findExistingSpanWithStyle」関数は押したボタンのタグが既に付与されているかを判定するのに使用、スタイルのみを変更することで二重にタグを付与することを防いでいます。

スライドアニメーションの使用等で画面全体をマスクしたい時に、「overflow-x」を使用するのですが、スマートフォンではうまく行かなったので対処方法をメモ。 HTML <body> <main class="overflow "> … </main> </body> CSS .overflow { overflow-x: hidden; } スマートフォンではパソコンと異なり「body」タグには「overflow-x」が適応できません。そのため直下に別のタグ（例はmainタグ）を作成して、そちらにクラスを設定しています。

スライダーの中に音源を設置し都度再生したいとのご要望があった際に、スライドが切り替わる度に自動で音源が停止されるように実装した、音源の停止方法をメモ。 HTML <div class="slide"> <div class="slide__flame"> <ul class="list"> <li> <audio controls src="sample01.mp3" id="sample01">音源01</audio> <img src="img01.jpg"> <div class="play"><a href="sample01">再生</a></div><!-- iOS用 --> <div class="pause"><a href="sample01">停止</a></div><!-- iOS用 --> </li> <li> <audio controls src="sample02.mp3" id="sample02">音源02</audio> <img src="img02.jpg"> <div class="play"><a href="sample02">再生</a></div><!-- iOS用 --> <div class="pause"><a href="sample02">停止</a></div><!-- iOS用 --> </li> … <li> <audio controls src="sample09.mp3" id="sample09">音源09</audio> <img src="img09.jpg"> <div class="play"><a href="sample09">再生</a></div><!-- iOS用 --> <div class="pause"><a href="sample09">停止</a></div><!-- iOS用 --> </li> </ul> </div> <nav class="slide__nav"> <ul class="slide__nav__list"> <li class="slide__nav__list__item"><a href="" class="prev">前へ</a></li> <li class="slide__nav__list__item"><a href="" class="next">次へ</a></li> </ul> </nav> </div> jQuery $(function(){ var setWidth = $('.slide__flame').width(); var sliderSize = $('.list').length; var position_slide = 0; var maxposition_slide = sliderSize - 1; //音源の停止処理 $('.slide__nav__list a').click(function(){ for($i = 0; $i < sliderSize; $i++){ $('audio').get($i).pause(); $('audio').get($i).currentTime = 0; } }); $('.slide__nav__list__item .prev').click(function(){ if(position_slide > 0){ $('.modal .list').animate({'margin-left':'+='+ setWidth +'px'}, {duration:500, easing:'swing'}); position_slide = position_slide - 1; }else{ $('.modal .list').animate({'margin-left': '-'+ maxposition_slide * setWidth +'px'}, {duration:500, easing:'swing'}); position_slide = maxposition_slide; } return false; }); $('.slide__nav__list__item .next').click(function(){ if(position_slide < maxposition_slide){ $('.modal .list').animate({'margin-left':'-='+ setWidth +'px'}, {duration:500, easing:'swing'}); position_slide = position_slide + 1; }else{ $('.modal .list').animate({'margin-left':'0'}, {duration:500, easing:'swing'}); position_slide = 0; } return false; }); }) 一時停止（pause）後に「currentTime 」を使い開始位置まで巻き戻しすることで停止と同様の機能を実装しています。 尚、iOSでは再生ボタンをクリックしても動かないため、「再生、停止」のボタンを追加し、下記をスクリプトに追記しています。 $('.play a').click(function(){ var audio = '#'+$(this).attr('href'); $(audio).get(0).play(); return false; }); $('.pause a').click(function(){ var audio = '#'+$(this).attr('href'); $(audio).get(0).pause(); $(audio).get(0).currentTime = 0; return false; }); 【JavaScript】Safari だけじゃないオーディオ再生の制約と再生開始遅延の解決方法 jQueryでvideoやaudioを再生したい時はオブジェクト取得方法に注意が必要 【HTML5 + jQuery】音声ファイルの再生／停止を制御するボタン Safari で音声、動画を再生する際に発生する NotAllowedError に対応する方法

WordPress（ワードプレス）でサイトを運用していく際に、投稿ページ（カスタム投稿）や個別ページに独自の入力項目（カスタムフィールド）を追加することがあります。編集ページに移動すると内容を確認できますが、内容によっては一覧ページの段階で確認できる方が便利なので対応方法をメモ。 function.php（PHP） function my_adv_posts_columns($columns) { $columns['my_adv_post'] = 'オリジナルカラムの名称'; return $columns; } function add_column($column_name, $post_id){ if($column_name == 'my_adv_post'){ $get_value = get_post_meta($post_id, 'my_adv_post_state', true); if(isset($get_value) && $get_value == 1 ) { echo('表示する'); }else{ echo('表示しない'); } } } //投稿ページに適応 add_filter('manage_posts_columns', 'my_adv_posts_columns'); add_action('manage_posts_custom_column', 'add_column', 10, 2); //個別ページに適応 add_filter('manage_pages_columns', 'my_adv_posts_columns'); add_action('manage_pages_custom_column', 'add_column', 10, 2); //カスタム投稿タイプに適応（○○○○はカスタム投稿の投稿タイプ名） add_filter('manage_○○○○_posts_columns', 'my_adv_posts_columns'); add_action('manage_○○○○_posts_custom_column', 'add_column', 10, 2); 参考例は投稿ページと個別ページ、カスタム投稿のそれぞれのページに広告表示の可否をカスタムフィールド「my_adv_post_state」を作成して、入力された値に応じて表示したもの。 ダッシュボードのカスタム投稿タイプの一覧に、記事属性のカラム（列）を追加する方法 WordPress 管理画面の投稿をカスタマイズ

WordPress（ワードプレス）を使用して特定条件の記事のみ表示する際に、「tax_query」（カスタムタクソノミー）と「meta_query」（カスタムフィールド）を使用する場合が多いのだけれど、併用すると仕様上「両方の条件を満たす記事（AND）」にしかならないようので、「いずれかの条件を満たす記事（OR）」になるよう実装した方法をメモ。 PHP <ul> <?php //tax_queryでの処理 $args1 = array( 'post_type' => 'your_custom_post_type', 'tax_query' => array( 'relation' => 'OR', array( 'taxonomy' => 'your_taxonomy_1', 'field' => 'slug', 'terms' => 'your_term_1', ), array( 'taxonomy' => 'your_taxonomy_2', 'field' => 'slug', 'terms' => 'your_term_2', ), ), ); //meta_queryでの処理 $args2 = array( 'post_type' => 'your_custom_post_type', 'meta_query' => array( 'relation' => 'OR', array( 'key' => 'your_custom_field_1', 'value' => 'your_value_1', 'compare' => '=', ), array( 'key' => 'your_custom_field_2', 'value' => 'your_value_2', 'compare' => '=', ), ), ); $query1 = new WP_Query($args1); $query2 = new WP_Query($args2); //投稿まとめ用配列の生成 $postslist = array(); if($query1->have_posts()) { while($query1->have_posts()) { $query1->the_post(); $postlist[] = array( 'post_date' => strtotime(get_the_time()), 'post_title' => get_the_title(), 'post_link' => get_the_permalink() ); } } if($query2->have_posts()) { while($query2->have_posts()) { $query2->the_post(); $postlist[] = array( 'post_date' => strtotime(get_the_time()), 'post_title' => get_the_title(), 'post_link' => get_the_permalink() ); } } wp_reset_postdata(); // 重複を除外してユニークな投稿配列を取得する $postlist = array_unique($postlist, SORT_REGULAR ); // 投稿配列を投稿日時でソートする $sortArray = array_column($postlist, 'post_date'); array_multisort($sortArray, SORT_DESC, $postlist); //出力 foreach($postlist as $val){ echo('<li> <span class="home__newslist__item__date">'.date('Y年m月j日', $val['post_date']).'</span> <span class="home__newslist__item__hedding"><a href="'.$val['post_link'].'">'.$val['post_title'].'</a></span> </li>'); } ?> </ul> それぞれの条件で投稿リストを取得してから、「$postlist」にまとめ、そこから重複する投稿を削除、更に投稿日時で並び替えするという流れになります。 ランダムで取得する時も同様ですが、ページ送りで2ページ目以降に遷移することを考える場合は取得した配列データ（$postlist）をセッションで保存しておいて、適切な範囲を呼び出すことになります。並び替えの都合上、全ての投稿を取得する必要があり、投稿数が多いと処理が遅くなるのであまり実用的ではないかもしれません。

外部ファイル（CSVファイル等）を読み込んでサイト内に表示する際に、保存時の文字コードが異なる場合に文字化けになることがあります。毎回、制作者が調整できれば良いですが、担当が変わっても問題なく処理できるよう、自動で文字コードの変換を行う方法をメモ。 PHP $fileName = '○○○○.csv'; $fp = fopen($fileName, 'r'); $ary = array('UTF-8', 'eucJP-win', 'SJIS-win', 'ASCII', 'EUC-JP', 'SJIS', 'JIS'); while($line = fgetcsv($fp)) { $encoding = mb_detect_encoding($line[1], $ary, true); if($encoding != 'UTF-8'){ echo(mb_convert_encoding($line[0], 'UTF-8', $encoding)); echo(mb_convert_encoding($line[1], 'UTF-8', $encoding)); }else{ echo($line[0]); echo($line[1]); } } fclose($fp); 「mb_detect_encoding」は初期状態では判別できる文字コードの種類が少ないので、第二引数に独自配列（$ary）を追加してから判別。参考例はCSVファイルを読み込み、「UTF-8」形式でない時にのみ、「UTF-8」に変換して表示しています。 PHPでの無難なエンコーディング検出方法 PHP 文字コードの確認（mb_detect_encoding()）

トップページなどのメインイメージの切り替えをする際、自動と手動を組み合わせて行うことも多いですが、「setInterval」と「clearInterval」で時間の管理をしっかり行わないと均一に処理が行われなくなることがあるので実装方法をメモ。 Javascript $(function(){ //画像の数を数えてナビゲーションを設置 var fadeSize = $('.fanc__fadeimage ul li').length; var fadeOrder = []; for (var i = 0; i < fadeSize; i++){ fadeOrder.push('<li><a href=""></a></li>'); } $('.fanc__fadeimage__nav ol').html(fadeOrder); $('.fanc__fadeimage__nav ol li:first-of-type a').addClass('active'); //自動繰り返しの開始 var timerId = setInterval(fadeImage, 6000); //ナビゲーションボタンクリック時の処理 $('.fanc__fadeimage__nav a').click(function(){ //自動繰り返しの停止 if(timerId) { clearInterval(timerId); } $('.fanc__fadeimage__nav a').removeClass('active'); $(this).addClass('active'); var index = $(this).parent('li').index(); var next = $('.fanc__fadeimage ul li').eq(index); $('.fanc__fadeimage ul li').removeClass('last-active'); $('.fanc__fadeimage ul li.active').addClass('last-active').removeClass('active'); next.css({'opacity':'0'}).addClass('active').animate({'opacity':'1.0'}, 2500, function(){ //自動繰り返しの再設定 timerId = setInterval(fadeImage, 6000); }); return false; }); }); //フェードインアニメーション関数 function fadeImage(){ var fadeSize = $('.fanc__fadeimage ul li').length; var index = $('.fanc__fadeimage__nav a.active').parent('li').index(); $('.fanc__fadeimage__nav ol li a').removeClass('active'); if(index < fadeSize - 1){ $('.fanc__fadeimage__nav li').eq(index + 1).find('a').addClass('active'); }else{ $('.fanc__fadeimage__nav li:first-of-type a').addClass('active'); } var fadeActive = $('.fanc__fadeimage ul li.active'); var next = fadeActive.next().length ? fadeActive.next() : $('.fanc__fadeimage ul li:first'); $('.fanc__fadeimage ul li.last-active').removeClass('last-active'); fadeActive.addClass('last-active').removeClass('active'); next.css({'opacity':'0'}).addClass('active').animate({'opacity':'1.0'}, 2500); } HTML <div class="fanc__fadeimage"> <ul> <li class="active"><img src="○○○○.jpg"></li> <li><img src="○○○○.jpg"></li> <li><img src="○○○○.jpg"></li> <li><img src="○○○○.jpg"></li> </ul> <nav class="fanc__fadeimage__nav"> <ol> </ol> </nav> </div> 参考例はフェードインアニメーション「fadeImage（）」。「setInterval」を使用して6秒ごとにがフェードインアニメーション関数の仕様で画像を自動切り替え。停止する際に対象となる処理を指定するため「timerId」を定義しています。 ナビゲーションボタンをクリックされたときに「clearInterval」を使用して繰り返し処理を停止。クリック時の処理を完了したのち再度「setInterval」を使用して繰り返し処理を再設定しています。 setInterval（一定時間ごとの処理）の中断と再開。 【JavaScript】setIntervalを停止させたり再開させる方法・コード例 jQueryで処理を遅延実行させる方法を解説！

ホームページを開くと上部にタブがいくつも表示されますが、その際にテキストの前に生じされる「ファビコン」。目を引くこともあり、最近はホームページを作成した際に同時にお願いされる事が多くなったので実装方法をメモ。 ファビコン・タッチアイコンの設置方法 ファビコン（タッチアイコン）用画像を用意する 専用のソフトで画像を用意。タッチアイコンを兼用する場合も考慮して「192×192ピクセル」サイズのpng画像形式で作成。 ファビコン画像に変換する 「Faviconジェネレーター」というサービスで、サイト内の手順に従って上記の画像をファビコンに変換・ダウンロードします。サイズは最小サイズの「16×16」が一般的ですが、それよりも大きく表示される箇所もあるようですので「32×32」を使用しています。 Faviconジェネレーター HTMLに記載する 最後に変換した「ファビコン（favicon.ico）」と「タッチアイコン用画像（apple-touch-icon.png）」をサーバーにアップロードしたら表示したいページのhead内にソースを記載。パスは絶対パスでも相対パスでも可。 <!-- ファビコン --> <link rel="icon" href="https://○○○○/favicon.ico"> <!-- iOS Safari and Chrome --> <link rel="apple-touch-icon" href="https://○○○○/apple-touch-icon.png"> <!-- Android標準ブラウザ(一部) --> <link rel="shortcut icon" href="https://○○○○/apple-touch-icon.png"> 【ホームページ制作】ホームページのアイコン(ファビコン)を設定しよう タッチアイコンの設定方法