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

.htaccessを使用してベーシック認証を設定する場合、設定したいページ（ディレクトリ）毎にファイルを設置すれば良いのだけれど、パラメータから生成した仮想ディレクトリの場合に設置が難しいことと、多くなりすぎると管理がしずらくなるため一元化した時の実装方法をメモ .htaccess Authtype Basic AuthGroupFile /dev/null <If "%{REQUEST_URI} =~ m#^/○○○○/△△△△/dir1/#"> AuthUserFile /○○○○/.htpasswd_user1 //フルパス AuthName "Please enter your ID and password" Require valid-user </If> <If "%{REQUEST_URI} =~ m#^/○○○○/△△△△/dir2/#"> AuthUserFile /○○○○/.htpasswd_user2 //フルパス AuthName "Please enter your ID and password" Require valid-user </If> パスワード用のファイル（.htpasswd_user1、.htpasswd_user2）をそれぞれ用意し、全てのファイルをホームページディレクトリの直下に設置。「IF」を使用してディレクトリごとに設定を切り分けています。 尚、パスワードを1種類にして流用する場合は「SetEnvIf」を使用して、対象ディレクトリのみに制限をかけることも可能。 .htaccess Satisfy Any AuthType Basic AuthUserFile /○○○○/.htpasswd //フルパス AuthName "Please enter your ID and password" AuthGroupFile /dev/null SetEnvIf Request_URI "^/○○○○/△△△△/dir1/" auth_dir1 SetEnvIf Request_URI "^/○○○○/△△△△/dir2/" auth_dir1 Require valid-user Order Allow,Deny Allow from all Deny from env=auth_dir1 また、ファイル単位で指定したい場合は下記。 .htaccess <Files △△△△.php> AuthUserFile /○○○○/.htpasswd //フルパス AuthGroupFile /dev/null AuthName "Please enter your ID and password" AuthType Basic require valid-user </Files> ワードプレスの管理画面のみにベーシック認証を設定したい場合はファイル名に「wp-login.php」を指定します。

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

ホームページを開くと上部にタブがいくつも表示されますが、その際にテキストの前に生じされる「ファビコン」。目を引くこともあり、最近はホームページを作成した際に同時にお願いされる事が多くなったので実装方法をメモ。 ファビコン・タッチアイコンの設置方法 ファビコン（タッチアイコン）用画像を用意する 専用のソフトで画像を用意。タッチアイコンを兼用する場合も考慮して「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"> 【ホームページ制作】ホームページのアイコン(ファビコン)を設定しよう タッチアイコンの設定方法

電話やメール営業など、自社サービスを営業する上で欠かせないのが営業用のリスト。業種の違いはありますが、販売されているリストを購入する以外では、自社サービスで売上に貢献できそうな企業様の掲載されているページを見つけて取得していく流れになると思います。その際に一点づつコピー・ペーストでも出来るのですが、数十件ともなると時間がかかるので一斉取得する方法をメモ。 営業用リストの作成方法 リストの記載されてるページのソースを取得する まずは、リストに必要な項目の掲載されているページを開き、「ソースを見る（Ctr+u）」で必要な部分の「HTMLタグ」をコピーし、新規にHTMLファイルを作成する。 例：弊社制作実績ページ HTML <ul class="works_list__post__list"> <li class="works_list__post__list__item"> <span class="works_list__post__list__item__cat"> サービスサイト</span> <a href="https://web.syu-u.com/blog/?works=%e3%81%84%e3%81%91%e3%81%b0%e3%81%aa-%e6%a1%82%e5%8f%a4%e6%b5%81%e3%83%bb%e6%a1%82%e6%b5%81"> <figure class="works_list__post__list__item__img"> <img width="1899" height="1266" src="https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47.jpg" class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47.jpg 1899w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47-300x200.jpg 300w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47-1024x683.jpg 1024w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47-768x512.jpg 768w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47-1536x1024.jpg 1536w" sizes="(max-width: 1899px) 100vw, 1899px" /></figure> <section class="works_list__post__list__item__content"> <h2 class="works_list__post__list__item__content__heading">いけばな 桂古流・桂流</h2> <p class="works_list__post__list__item__content__description"> 京都桂離宮の華務職を始祖とし、日本の伝統的な生け花と現代花を教授する他、今の時代にマッチしたクリエイティブ・フラワーの指導も行っている「いけばな　桂古流・桂流」のサービスサイト。CMSはワードプレスを使用して構築。海外からの応募もあるため、日本語と英語の二か国語で作成。各言語に合わせてページを分けるのでなく、cookie（クッキー）を使用した表示切替により同一ページ内に異なる言語を混在する形式を採用。ページが増えることを抑えることで運用もしやすくしています。</p> </section> </a> </li> <li class="works_list__post__list__item"> <span class="works_list__post__list__item__cat"> コーポレートサイト</span> <a href="https://web.syu-u.com/blog/?works=presby%ef%bc%88%e3%83%97%e3%83%ac%e3%82%b9%e3%83%93%e3%83%bc%ef%bc%89"> <figure class="works_list__post__list__item__img"> <img width="1899" height="1266" src="https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21.jpg" class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21.jpg 1899w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21-300x200.jpg 300w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21-1024x683.jpg 1024w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21-768x512.jpg 768w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21-1536x1024.jpg 1536w" sizes="(max-width: 1899px) 100vw, 1899px" /></figure> <section class="works_list__post__list__item__content"> <h2 class="works_list__post__list__item__content__heading">presby（プレスビー）</h2> <p class="works_list__post__list__item__content__description"> オリジナルブランドの度数調節メガネ「 ドゥーシリーズ 」を手掛ける「Presby（プレスビー）」のコーポレートサイトです。CMSはワードプレスを使用して構築。カスタム投稿タイプ機能を使うことで、商品・取扱店舗一覧・お客様の声の投稿を実現。商品カテゴリー部分はトップページのカテゴリー項目やスライダーとも連動し、HTMLを操作することなくカテゴリーの追加・編集も可能です。</p> </section> </a> </li> ・ ・ ・ <li class="works_list__post__list__item"> <span class="works_list__post__list__item__cat"> サービスサイト</span> <a href="https://web.syu-u.com/blog/?works=%e3%83%a1%e3%83%87%e3%82%a3%e3%82%ab%e3%83%abdr%e3%82%bb%e3%83%a9%e3%83%94%e3%82%b9%e3%83%88%e3%82%b9%e3%82%af%e3%83%bc%e3%83%ab"> <figure class="works_list__post__list__item__img"> <img width="1899" height="913" src="https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45.jpg" class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45.jpg 1899w, https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45-300x144.jpg 300w, https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45-1024x492.jpg 1024w, https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45-768x369.jpg 768w, https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45-1536x738.jpg 1536w" sizes="(max-width: 1899px) 100vw, 1899px" /></figure> <section class="works_list__post__list__item__content"> <h2 class="works_list__post__list__item__content__heading">メディカルDr.セラピストスクール</h2> <p class="works_list__post__list__item__content__description"> 一般社団法人日本メディカルDr.セラピスト協会が運営する美容・痩身に関する通信講座を取り扱う「メディカルDr.セラピストスクール」のサービスサイト。 </p> </section> </a> </li> </ul> HTMLファイルにjavascriptを追記して抜き出したい項目を設定する 作成したHTMLファイルに、ソースの中から抜き出したい項目を選定してjavaseciptを追記。該当項目の出力回数分ループ処理を行い「console.log」で出力。複数の変数を抜き出す場合は「,（カンマ）」等の区切り用文字を入れておと後で編集しやすい jQuery（javascript） <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $(function(){ var size = $('h2').size(); for($i = 0; $i < size; $i++){ var url = $('.works_list__post__list__item').eq($i).find('a').attr('href'); console.log($('h2').eq($i).text()+','+url); } }); </script> 参考例は「サイト名称（h2）」と掲載ぺーじの「URL（.works_list__post__list__item a）」を抽出 編集したファイルにアクセスし、コンソール画面を開く 編集したファイルをクリックしてローカルで開きます。そのままの状態でgoogleクロームなどのブラウザに備わっている開発ツール（Ctr+Shift+i）を使用してコンソールタグを開くと、今回設定した内容が表示されます。 画面に記載されているリストをコピーし、エクセルに貼り付け、調整する コンソール画面に表示されている内容をコピーしてエクセルに貼り付け。「データ」タブの「区切り位置」ボタンをクリック、②で設定したカンマや空白等でデータを区切って整えると営業用リストの完成。 ソースによって出力項目の設定は必要ですが、一点づつコピー・ペーストするよりも時間が短縮できます。

一般的になってきたスクロールアニメーション。以前はモーションを一つづつ作成していましたが、複雑な動きで無ければ簡単に実装できる「animate.css」を見つけたので実装方法をメモ。 「animate.css」を使ったスクロールアニメーションの実装方法 animate.cssを読み込む まずは、Animate.cssのサイトからCDNで提供されている「animate.css」を読み込む CSS @import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css'); Animate.css 「animate__animated」クラスを追加 アニメーションを行いたいHTMLタグに「animate__animated」クラスを追加します。 HTML <section class="animate__animated"> コンテンツ01 </section> <section class="animate__animated"> コンテンツ02 </section> <section class="animate__animated"> コンテンツ03 </section> <section class="animate__animated"> コンテンツ04 </section> <section class="animate__animated"> コンテンツ05 </section> <section class="animate__animated"> コンテンツ06 </section> 使いたいアニメーションを探して、「クラス名」をコピー。 サイトの右側のリストからアニメーションが確認できるので、動きを確認したら、すぐ横のアイコンから「クラス名」をコピー。今回は「animate__fadeInUp」を使用します。 jsファイルを作成してアニメーションを設定。 使用するアニメーションが決定したら、jsファイルを作成して「クラス名」を設定。今回はスクロールアニメーションのソース内に記載します。 jQuery //スクロールアニメーション $(window).scroll(function(){ let sH = window.innerHeight * 7 / 10; //トリガー位置の設定 let offsetTop = $(window).scrollTop(); if($('.animate__animated').length){ for (var j = 0; j < $('.animate__animated').length; j++){ if(offsetTop > $('.animate__animated').eq(j).offset().top - sH){ if(!$('.animate__animated').eq(j).hasClass('animate__fadeInUp')){ $('.animate__animated').eq(j).addClass('animate__fadeInUp'); } } } } }); 「sH」の部分でスクロール量を設置。「animate__animate」のついているタグを自動でカウントし、スクロール量に達した時点で「animate__fadeInUp」の無いものにクラスに追加（アニメーション発動）しています。 今回のモーションは非表示の状態から表示されるパターンのものなので、CSSも調整する。 CSS .animate__animated { opacity: 0; } 簡単にアニメーションを実装できるAnimate.cssの使い方

グーグルタグマネージャーでの詳細マッチングの設定を依頼される機会も増えたので方法をメモ。 入力値を取得 まずは必要となる値を取得。変数の項目から新規追加で「DOM要素」を選択。値にIDが設定されていれば、選択様式を「ID」で、そうで無ければ「CSSセレクタ」を選択し、「要素ID（セレクタ）」の箇所にIDの値または、CCSセレクタの値を記載して保存。名称はそのまま変数（{{名称}}）として使うのでわかりやすいものにする。 DOM要素は通常テキスト取得になるため、フォームの入力値を取得する際は「属性名」に「value」を設定する。 適切な形式に変換 ①で作成した変数を適切な形に変換するためにカスタムjavascriptを使用。変数の項目から新規追加で「カスタムjavascript」を選択し、テキストエリアにコードを記載。コードは一度に記載せず、必要となる値ごとに変数を作成して対応。 //取得した金額の値を数値のみ変換 function() { var fbValue = {{該当する変数名称}}; fbValue = fbValue.replace(/ /g, '').replace(/円/g, '').replace(/,/g, ''); fbValue = parseInt(fbValue, 10); return fbValue; } //取得した名前を「姓」の部分のみに変換 function() { var fbName = {{該当する変数名称}}.split(' '); return fbName[1]; } //取得した名前を「名」の部分のみに変換 function() { var fbName = {{該当する変数名称}}.split(' '); return fbName[0]; } //取得した電話番号を数字のみに変換 function() { var fbPhone = {{該当する変数名称}}; fbPhone = fbPhone.replace(/-/g, ''); return fbPhone; } cookieを使用して値を保持 確認画面で取得した値を最後まで保持できるようcookieに代入して値を完了画面に遷移するまで保持。 変数の項目から新規追加で「ファーストパーティーCookie」を選択。「Cookie名」に代入するcookieの値を入力して保存。 次にタグの項目から新規追加で「カスタムHTML」を選択し、テキストエリアに下記コードを記載。作成したタグ処理のタイミング（トリガー）は購入ボタンをクリック時に設定する。 //クッキーに変換 <script> var cookieValueF = encodeURIComponent({{該当する変数名称}}); var cookieValueL = encodeURIComponent({{該当する変数名称}}); var cookieValueP = {{該当する変数名称}}; var cookieValueM = {{該当する変数名称}}; var cookieValueV = {{該当する変数名称}}; document.cookie = "該当するCookie名=" + cookieValueF; document.cookie = "該当するCookie名=" + cookieValueL; document.cookie = "該当するCookie名=" + cookieValueP; document.cookie = "該当するCookie名=" + cookieValueM; document.cookie = "該当するCookie名=" + cookieValueV; </script> 詳細マッチングタグに値を設定 最後にタグの項目から「カスタムHTML」を選択し、テキストエリアに、Facebookから提供されているコードを記載し、値の箇所に変数で作成した「ファーストパーティーCookieの変数」を記載して完了。タグの処理タイミング（トリガー）は完了画面表示時に。 <script> fbq('init', '○○○○',{ em:'{{該当するファーストパーティーCookieの変数名}}', ph:'{{該当するファーストパーティーCookieの変数名}}', fn:'{{該当するファーストパーティーCookieの変数名}}', ln:'{{該当するファーストパーティーCookieの変数名}}', }); </script> タグの設定後は「公開」をクリックして完了 全ての設定が完了したら「プレビュー」よりエラーを確認し、「公開」ボタンで処理を開始して完了。

PHPを使用して画像（動画・PDF等）をアップロードするフォームを作成した際に、ファイルサイズが大きくてアップロードできないことがあります。サーバーで許容されていないからと、エラーメッセージで制限することもできますが、「.htaccess」を使用して上限を解放する方法をメモ。 ファイルアップロードサイズの上限値変更の実装手順 php.iniの初期設定を確認。 現在、使用しているサーバーのphp.iniの設定を確認する必要があるので、まず以下のファイル（phpinfo.php）を作成し、該当するディレクトリの直下にアップロードし、アクセスします。 phpinfo.php <?php phpinfo(); ?> 以下の画面が表示されるので、この中から「memory_limit」「post_max_size」「upload_max_filesize」の値を確認します。 新しい値を「.htaccess」に設定 現在の値が確認出来たら新しい値を「.htaccess」に記載します。この時、優先順位があるので「memory_limit　>　post_max_size　> upload_max_filesize」の関係になるよう注意が必要。また、apacheの上限により「2G」より大きな値は設定できないようです。 項目解説memory_limitメモリ使用量の上限post_max_sizePOSTデータの最大サイズ※1回のアップロードファイルすべての合計サイズupload_max_filesize1ファイルあたりの最大アップロードサイズ .htaccess php_value memory_limit 256M php_value post_max_size 256M php_value upload_max_filesize 256M ファイルをアップロードし、再度設定状況を確認 作成した「.htaccess」ファイルを該当ディレクトリの直下にアップロード。前の項目で作成した「phpinfo.php」にアクセスして値が変更されているかを確認して終了。 PHPでアップロードできる上限は2GBまで！【POSTの場合】 【コピペ用】PHPのアップロード容量を変更する.htaccess、php.iniの記述サンプル ロリポップで一度にアップロードできるファイルサイズ上限を増やす方法 phpinfoの「Local Value」と「Master Value」の違い。結局反映されるのはどっち？

WEBサイトの表示速度を改善する際に、特定のファイル（拡張子）に有効期限を設けてキャッシュするように設定したいとの要望があったので、その方法をメモ。 .htaccess <Files ~ "\.(gif|jpe?g|png|svg|ico|otf|ttf|eot|woff)$"> Header set Cache-Control "max-age=2592000, public" </Files> 1行目の（）の部分に「キャッシュさせるファイルの拡張子」を記載。複数ある場合は「|」で区切る。 2行目は「キャッシュの有効期限」を秒数で設定したもの。上記の2592000は、「60*60*24 * 30」の値で「30日間」になります。 また、キャッシュの有効期限が拡張子によって異なる場合は、上記セットを必要な数分記載する。 .htaccess <Files ~ ".(gif|jpe?g|png|ico|otf|ttf|eot|woff)$"> Header set Cache-Control "max-age=2592000, public" </Files> <Files ~ ".(css|js|html|gz)$"> Header set Cache-Control "max-age=86400, public" </Files> たった数分！ページ高速化のためhtaccessでキャッシュ設定は絶対やっておこう！

ホームページを改修（リニューアル）する際に、ページが増えたり減ったり、変わったりすることはよくあることですが、そのことで以前は存在していたページがなくなり、アクセス数が減るのは避けたいところ。そんな時に便利な「.htaccess」を使ったページ単位でリダイレクト（転送）処理をする方法をメモ。 RewriteEngine on RewriteRule ^旧URL$ 新URL(絶対パス) [L,R=301] 旧URLの部分に以前使っていたURLを、新URLの部分に転送先のURLを絶対パスで指定。 複数ページを設定する場合は、上記を複数セット設定します。（下記参照） RewriteEngine on RewriteRule ^○○○○1.html$ http://○○○○/○○○○/○○○○1.php [L,R=301] RewriteRule ^○○○○2.html$ http://○○○○/○○○○/○○○○2.php [L,R=301] RewriteRule ^○○○○3.html$ http://○○○○/○○○○/○○○○3.php [L,R=301] ErrorDocument 404 http://○○○○/ 最後の一文（ErrorDocument 404 http://○○○○/）は404エラー時（ページが見つかりません）の転送先を設定しています。 .htaccessでページ単位、ディレクトリ単位の301リダイレクト(転送)を設定する方法

パソコンとスマホ用にメディアクエリを使用してレスポンシブ対応のHTMLメールを作成する機会があったので、制作時に気付けた点をメモ。 HTMLはテーブルレイアウトで作成する。 受信環境（メーラー）によって使用できるCSSの種類が異なるため、2カラムをCSSで実装できるものとできないもがある。 全てのメーラーで同じ表現にする場合はテーブルタグを入れ込状にして使用する「テーブルレイアウト」を使用するのが確実。 CSSは「style」を使ってHTMLタグに書く。 CSSの外部読み込みはもちろん、一部のメーラーではインラインで設定したCSSが効かない場合も。基本的には「style」やHTMLタグが保有している属性を使って直にHTMLタグに設定していくのが安全。 メーラーによってメディアクエリの効かない環境がある。 PCのOutlook、スマートフォンのGmailアプリはCSSのメディアクエリが効かない。（Gmailアプリに関しては「メッセージ全体を見る」ボタンを押さなければ有効。）そのため原則としてPC版の表示を基準に作成し、スマートフォン（タブレット）にのみ適応するところを、メディアクエリを使用して制作する方法をとる必要がある。 また、Outlookに関しては、下記のタグを使用することで、他のメーラーでは表示させない方法をとることもできる。 HTML <!--[if gte mso 9]> ＝＝＝＝outlookのみ対応＝＝＝＝ <![endif]--> HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="format-detection" content="telephone=no, address=no, email=no, date=no, url=no"> <title>レスポンシブ対応したHTMLメールのサンプルソースコード｜株式会社衆</title> <style> body { font-size: 90%; } @media screen and (max-width: 480px) { .tbl { width: 90% !important; margin: 0 5% !important; border-collapse: separate; border-spacing: 5vw !important; } .tbl__cell { display: block !important; width: 100% !important; } .padding_top { padding-top: 5vw !important; } } </style> </head> <body style="background-color: #f5f5f5; margin: 0; padding: 0;"> <table width="650" border="0" cellpadding="0" cellspacing="25" bgcolor="#ffffff" style="margin: 0 auto;" class="tbl"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="width: 48%; padding: 0 1%" valign="top" class="tbl__cell"> <p style="margin: 0 0 10px;">こんにちは、「株式会社衆」メルマガ担当の○○○○です。<br> いつも弊社の備忘録（ブログ）をご覧頂きありがとうございます。</p> <p style="margin: 0 0 10px;">衆では「HTMLメール」の参考になればと考え、弊社ブログをご覧頂いている方限定でこちらのソースを公開しています。</p> <p style="margin: 0;"><strong>レスポンシブ対応したHTMLメールを作成</strong>される際に、こちらの<strong style="color: #FD5B3E;">ソースコード</strong>がお役に立ちますと幸いです。</p> </td> <td style="width: 48%; padding: 0 1%" valign="top" class="tbl__cell padding_top"><img src="○○○○" width="100%"></td> </tr> </table> </td> </tr> </table> </body> </html> 送信環境にも左右される？ 同じHTMLを使用しても送信環境（メーラー）によって正しく送信されない場合もあるようです。たまたま、異なるメーラーを使用してメール配信テストをした際に、同じ内容なのに異なる表示がされたことがあったので一応追記。メール作成の手順もあるので、再度検証は必要。 送信環境（メーラー）結果状態Outlook×メディアクエリが正しく機能しなかった。Becky〇 レスポンシブHTMLメール制作で失敗しないためのポイントとは？【レスポンシブ（リキッド）HTMLメール】outlookで幅を固定する対処法

画像を多用することで遅くなっているWEBサイトの表示速度を「webP（ウェッピー）」を使って改善する方法をメモ。safari（サファリ）には対応していないので、今回はブラウザ判定を用いて対応。 「WebP(ウェッピー)」を使った画像圧縮の方法 画像データを WebP に変換 まずは使用画像（JPEG・PNG・GIF）をWebpに変換。「サルワカ道具箱」というサイトで一括変換できるのでこちらを利用 PNG・JPEGをWebP画像に一括変換｜サルワカ道具箱 ブラウザに合わせて画像を表示 WebPはすべてのブラウザで対応しているわけではありません。全ブラウザで表示対応してしまうと、画像が見れなくなるものもあるため、ブラウザにあわせて表示画像を対応することが必要。今回は「.htaccess」による対応方法と「picture」タグによる対応方法の2種類を記載。htmlを変更する必要のない「.htaccess」を使用した方法の方が比較的早く実装が可能。 .htaccessによる切り替え対応 .htaccess <ifModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$ RewriteCond %{DOCUMENT_ROOT}%1.webp -f RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> <IfModule mod_mime.c> AddType image/webp .webp </IfModule> pictureタグによる切り替え対応 htmlの該当する項目を「<picture>」を使って実装。「<source>」を上から順に読み込み、条件に該当しなければ下のソースを読みこむため、非対応の場合は最下部の「<img>」を表示する。 HTML <picture> <source srcset="sample.webp" type="image/webp"/> <img src="sample.png" /> <picture> 実装の確認 <picture>方式であればHTMLのソースで、WebPフォーマットで配信されているかを確認ができるのですが、「.htaccess」を使用した場合は、ソースでの確認ができないため、Chromeの拡張機能「WebP Highlighter」を使用するのが分かりやすい。 WebP Highlighter 見ているページでWebPとして配信されている画像が蛍光色の枠で表示されます。 WebPと従来の画像を正しく振り分ける.htaccessファイルWebP 対応・導入WebP画像を目立たせるChrome拡張機能 WebP Highlighter

SVGとは、Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、jpgやpngのような画像(ビットマップデータ)ではなく、ベクター画像のフォーマットの一種。画像データと異なり、拡大縮小しても表示がぼやけることがなく、きれいに表示できる他、画質によってデータサイズが大きくなることもないので、ロゴや簡易的なアイコンなどの部分にも使われることが多いので使用方法をメモ。 SVG形式のファイルをHTMLで表示する方法 「img」タグを使用する。 一般的な画像と同様にHTMLのimgタグにSVG形式のファイルを読み込んで表示する方法。SVG形式で作成したデータをサーバーにアップロードして直接読み込み、CSSを使って大きさを調整します。 HTML <div class="svg__image"><img src="sample.svg" alt=""></div> CSS .svg__image img { width: auto; height: 60px; } IEにsvgを対応させる方法 IE11でsvgをimgタグで読み込んだ場合に、CSSのサイズが画像に適用されない現象が発生するため、下記を追記して対応。全ブラウザで読み込むと、今度は他の方に影響が出てしまうのでCSSハックを使って限定的に対応。 /* IE11にのみ適用される */ _:-ms-lang(x)::-ms-backdrop, .svg__image img[src$=".svg"] { width: auto; height: 100%; } 「svg」 タグを使う HTML内に（インラインで）直接svgタグでベクターパスを指定して描画する方法。イラストレータを使用して該当する素材をコードに変換し、HTMLに情報を記載します。 イラストレータで使用する画像を開き、ファイルメニューの「書き出し」から「svg」形式を選択して書き出す。この時に文字を使用する場合は「アウトライン」をかけておく。 書き出しボタンを押した直後に表示される「SVGオプション」で「インラインスタイル」を選択し、「コード」ボタンから該当コードをコピーしてHTMLに直接貼り付ける。 この時にアンドロイド携帯でも不具合なく表示されるように「viewBox」の値を参考に「svg」タグに「width」と「height」を追記で設定する。またclassやid、styleは不要であれば削除しても大丈夫。 HTML <div class="svg__image"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.34 125.03" width="57.34" height="125.03"><path d="M302.34,355.91a9.74,9.74,0,1,1-9.74-9.74A9.74,9.74,0,0,1,302.34,355.91Z" transform="translate(-268.97 -333.95)"/><path d="M325.11,371.41a3.79,3.79,0,0,0-5.36.18l-10.54,10.33-7.59-8c-2.47-3.26-6.51-4.21-9.4-5.3-5.07-1.93-8.33-3.9-9.52-5.39l-4.37-6.8,1.33-18.07a3.79,3.79,0,1,0-7.46-1.31L269,356.92v0c0,.06,0,.13,0,.19a3.66,3.66,0,0,0,0,.66v0c0,.11,0,.23,0,.34a.41.41,0,0,0,0,.11,1.91,1.91,0,0,0,.06.33.5.5,0,0,0,0,.12,2,2,0,0,0,.1.35.29.29,0,0,0,0,.09,5,5,0,0,0,.38.85h0L276,371.71c2,3.4,6.09,8.84,6.34,11.89s-.64,10.51-1.22,14c-.52,3.14-1.1,9.19-1.64,10.94l-3.81,18.74-5.09,25a4.94,4.94,0,1,0,9.59,2.4l7.26-24.44,5.53-19.44c.59-1.85,2-1.7,2.36-.23l3,18.89,4,25.18a4.94,4.94,0,1,0,9.82-1.11L310.33,428,309,409c-.22-2.16-1.87-10-3.55-17.64l.35.36a4.36,4.36,0,0,0,6.33.21,14.09,14.09,0,0,0,1.25-1.21l11.9-13.91A3.79,3.79,0,0,0,325.11,371.41Z" transform="translate(-268.97 -333.95)"/></svg> </div> CSS .svg__image svg{ fill: #118b42; } 滝乃川学園採用ページ SVGは思ってたより怖くなかった。インラインSVGのススメ インラインSVGを使えば画像の色変更をCSSから楽にできる！ IE11でsvgをimageタグで読み込んだ場合にサイズが適用されない AndroidでSVGが正しく表示されていなかった問題を解決

サイト全体に大きく画像を表示する表現がメインになり、見やすくて印象的なサイトが増えてきた半面、使用画像のファイルサイズが大きくなり表示スピードが遅くなることも。そんな中、画像の画質を下げずに画像サイズを圧縮できるサイトがあるのでメモ。 TinyPNG – Compress PNG images while preserving transparency 「TinyPNG」を使った画像圧縮の方法 圧縮したい画像をセット 圧縮変換したい画像を選択して中央のエリア（赤枠部分）にドラッグ。「gif」画像は対象外となります。 圧縮後のファイルをダウンロード 画像をセットすると、自動で画像の圧縮処理が始まるので、完了後にファイルをダウンロード。個別のダウンロードのほか、ドロップボックスにも保存できます。 尚、無料版は一度に変換できるサイズとファイル数に制限があるため、多くの画像を一度に変換したい場合は有料版にするのもおすすめです。 他にもあります。優良な画像圧縮サービス 上記サイトの他にも、JPEGとPNGの両方に対応し、最大50MBの画像を圧縮できるWEBサービスを教えていただきましたので合わせてご紹介。 PNG圧縮ツール│無料でPNG・JPGを最大80%圧縮 使い方は「TinyPNG」同様、ファイルを選択して指定の枠にドラックするだけですので、用途に合わせて使いやすい方をご利用ください。

youtube動画をホームページに掲載する機会も増えてきました。動画サイズを固定するのであれば、埋め込みタグの幅（width）と高さ（height）を適切に変更すればよいのですが、レスポンシブ対応したい場合は自動的に取得する仕組みが必要。そこでCSSのみで実装可能な方法をメモ。 HTML youtubeの埋め込みより取得したコードの「幅（width）と高さ（height）」を指定する部分を削除して設置。 <div class="movie__youtube"> <div class="movie__youtube__frame"> <iframe src="https://www.youtube.com/embed/○○○○" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> CSS .movie__youtube { width: 1200px; margin: 0 auto; } .movie__youtube__frame { position: relative; width: 100%; height: 0px; padding-top: 56.25%;　//縦横比が16：9の場合 } .movie__youtube__frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 「.movie__youtube__frame」で設定している「padding-top: 56.25%;」の部分で自動取得が行わる。※「padding-top」や「padding-bottom」の%指定は親ブロックの幅が基準になる。 新生テクノス株式会社採用ページ

wordpress（ワードプレス）を使ってテーマを自作した際に使用した、最低限知っておきたい基本的な内容をメモ。 wordpress（ワードプレス）を使ったホームページの作成 まず「テーマ」のファイルを収納するフォルダを作成。そのフォルダの中に、必要に応じてファイルを新規に作成。今回、制作に必要となったファイルは下記。記事の一覧とトップページを兼用しているほか、投稿ページと固定ページのデザインは同じものを流用している。 style.css　//テーマの設定に必須header.php　//外部読み込み用共通ファイルside.php　 //外部読み込み用共通ファイル footer.php　 //外部読み込み用共通ファイル function.php　//機能の追加に必要index.hpsingle.php（page.php） テンプレートファイルの優先順位 Wordpress（ワードプレス）では、ページの種類ごとに、使うテンプレートファイルの優先順位があり、該当ファイルがない場合は時点のファイルを使うようにできている。「index.php」は最も優先順位が低いが、全ての種類のページに対しての最終手段として使われるため、「index.php」があればテーマとして成立する。 ページの種類 優先順位1 優先順位2 優先順位3トップページhome.php index.php アーカイブページcategory.php archive.php index.php 投稿ページsingle.php index.php 固定ページ page.php index.php 404ページ 404.php index.php 分岐タグ Wordpress（ワードプレス）では、 同一のテンプレートファイルを兼用してもデザインを変更できるよう、分岐タグの準備がある。「index.php」は全ての種類のページとして使用できるので、条件分岐タグを用いることで、ページ分のテンプレートファイルを用意しなくてもページデザインを切り替えることも可能。 ページの種類条件分岐タグトップページis_home()カテゴリー別アーカイブページis_category(), is_archive()タグ別アーカイブページis_tag(), is_archive()投稿日別アーカイブページis_date(), is_archive()月別アーカイブページis_month(), is_date(), is_archive()年別アーカイブページis_year(), is_date(), is_archive()検索結果ページis_search()投稿ページis_single()固定ページis_page()404ページis_404() CSS @charset "utf-8"; /* Theme Name: テーマの名前 Theme URI: http://web.syu-u.com Description: テーマの説明文 Version: 2.0　テーマのバージョン Author: syu　制作者 Author URI: https://web.syu-u.com　制作者のホームページ */ @import url('./pc.css'); @import url('./sp.css'); バージョンの数値はアップデートの際に更新の判断材料となる。更新の必要があると表示される場合は数値を大きくすることで回避できる。 header.php <!DOCTYPE HTML> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo( 'name' ); ?></title> <meta name="description" content="<?php bloginfo( 'description' ); ?>"> <meta name="keywords" content="<?php bloginfo( 'description' ); ?>"> <meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script language="javascript" src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script> <?php wp_head(); ?> <body <?php body_class(); ?>> <header class="header animated fadeIn headerleft"> <div id="inner-header"> <div id="logo"> <?php if(is_home()): ?> <h1><a href="<?php bloginfo('url'); ?>" class="blog_title"><?php bloginfo('name'); ?></a></h1> <?php else: ?> <a href="<?php bloginfo('url'); ?>" class="blog_title"><?php bloginfo('name'); ?></a> <?php endif; ?> </div> <div id="g_nav"> <div class="btnClose"><a href=""><img src="<?php echo get_template_directory_uri(); ?>/images/common/btn_close.png" width="100%"></a></div> <?php wp_nav_menu(array('container' => 'nav', 'container_class' => 'header__nav', 'theme_location' => 'header__nav' ) ); ?> </div> <div class="btnMenu"><a href=""><img src="<?php echo get_template_directory_uri(); ?>/images/common/btn_menu.png" width="100%"></a></div> </div> </header> footer.php <footer> <div class="footer__inner"> <div class="footer__widget_area"> <?php dynamic_sidebar( 'footer-widget' ); ?> </div> <?php wp_nav_menu(array('container' => 'nav', 'container_class' => 'footer__nav', 'theme_location' => 'footer__nav' ) ); ?> <small class="copyright">Copyright<?php echo date('Y'); ?> <a href="<?php bloginfo('url'); ?>" rel="nofollow"><?php bloginfo( 'name' ); ?></a>.All Rights Reserved.</small> </div> </footer> <?php wp_footer(); ?> </body> </html> sidebar.php <div id="side"> <div class="side__widget_area"> <?php dynamic_sidebar( 'side-widget' ); ?> </div> </div> index.php <?php get_header(); ?> <?php if(is_home()): ?> <figure class="mainimage" style="background: url('<?php header_image(); ?>') center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; "> <hgroup> <h2><img src="<?php echo get_template_directory_uri(); ?>/images/common/title.png" width="100%" alt="<?php bloginfo('name'); ?>"></h2> </hgroup> </figure> <?php else: ?> <?php breadcrumb(); ?> <?php endif; ?> <div class="wrap"> <main class="main"> <ul class="post-list"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <li class="post"> <a href="<?php the_permalink() ?>"> <figure class="eyecatch"> <?php if(has_post_thumbnail()) { echo the_post_thumbnail('full'); } ?> <span class="cat-name"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span> </figure> <section class="entry-content"> <h2 class="entry-title"><?php the_title(); ?></h2> <p class="entry-meta"><?php the_time('Y.m.j') ?></p> <div class="description"><p> <?php if(mb_strlen($post->post_content,'UTF-8') >50 ){ $content= str_replace('', '', mb_substr(strip_tags($post-> post_content), 0, 50,'UTF-8')); echo $content.'…'; }else{ echo str_replace('', '', strip_tags($post->post_content)); } ?></p></div> </section> </a> </li> <?php endwhile; endif; ?> </ul> <?php if( function_exists("the_pagination") ) the_pagination(); ?> </main> <?php get_sidebar(); ?> </div> <?php get_footer(); ?> single.php（page.php） <?php get_header(); ?> <?php breadcrumb(); ?> <div class="wrap"> <main class="main"> <article class="pageSub"> <section id="container"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title();?></h1> <figure class="eye_chatch"><?php if(has_post_thumbnail()) { echo the_post_thumbnail('full'); } ?></figure> <div> <?php the_content();?> </div> <?php endwhile; endif; ?> </section> </article> </main> <?php get_sidebar(); ?> </div> <?php get_footer(); ?> function.php <?php // サイドエリアのウィジェットを作成 register_sidebar( array( 'name' => __( 'Side Widget' ), 'id' => 'side-widget', 'before_widget' => '<div class="side__widget_area__container">', 'after_widget' => '</div>', 'before_title' => '<h3 class="side__widget_area__container__title">', 'after_title' => '</h3>', ) ); // フッターエリアのウィジェットを作成 register_sidebar( array( 'name' => __( 'Footer Widget' ), 'id' => 'footer-widget', 'before_widget' => '<div class="footer__widget_area__container">', 'after_widget' => '</div>', 'before_title' => '<h3 class="footer__widget_area__container__title">', 'after_title' => '</h3>', ) ); // アイキャッチ画像 add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size(220, 165, true ); // 幅 220px、高さ 165px、切り抜きモード // カスタムナビゲーションメニューを作成 add_theme_support('menus'); register_nav_menus( array( 'header__nav' => 'ヘッダーナビゲーション', 'footer__nav' => 'フッターナビゲーション', ) ); //ページング機能 function the_pagination() { global $wp_query; $bignum = 999999999; if ( $wp_query->max_num_pages <= 1 ) return; echo '<nav class="pagination">'; echo paginate_links( array( 'base' => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ), 'format' => '', 'current' => max( 1, get_query_var('paged') ), 'total' => $wp_query->max_num_pages, 'prev_text' => '<', 'next_text' => '>', 'type' => 'list', 'end_size' => 3, 'mid_size' => 3 ) ); echo '</nav>'; } function breadcrumb(){ global $post; $str =''; echo('<nav class="pankuzu"><ul>'); if(!is_home()&&!is_admin()){ $str.= '<li><a href="'. home_url() .'">ホーム</a></li>'; if(is_category()) { $cat = get_queried_object(); if($cat -> parent != 0){ $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' )); foreach($ancestors as $ancestor){ $str.='<li><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor) .'</a></li>'; } } $str.='<li><a href="'. get_category_link($cat -> term_id). '">'. $cat-> cat_name . '</a></li>'; }else if(is_page()){ if($post -> post_parent != 0 ){ $ancestors = array_reverse(get_post_ancestors( $post->ID )); foreach($ancestors as $ancestor){ $str.='<li><a href="'. get_permalink($ancestor).'">'. get_the_title($ancestor) .'</a></li>'; } } $str.='<li>'. get_the_title() .'</li>'; }else if(is_single()){ $categories = get_the_category($post->ID); $cat = $categories[0]; if($cat -> parent != 0){ $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' )); foreach($ancestors as $ancestor){ $str.='<li><a href="'. get_category_link($ancestor).'">'. get_cat_name($ancestor). '</a></li>'; } } $str.='<li><a href="'. get_category_link($cat -> term_id). '">'. $cat-> cat_name . '</a></li>'; $str.='<li>'. get_the_title() .'</li>'; } } echo $str; echo('</ul></nav>'); } // カスタムヘッダー $custom_header = array( 'random-default' => false, 'width' => 1980, 'height' => 600, 'flex-height' => true, 'flex-width' => false, 'default-text-color' => '', 'header-text' => false, 'uploads' => true, 'default-image' => get_stylesheet_directory_uri() . '/img/default_img.png', ); add_theme_support( 'custom-header', $custom_header ); ?> ページング機能とパンくずリストの機能、トップページのヘッダー画像を変更できるようにカスタムヘッダー機能を追加。その他の機能に関しては、ウィジェットやプラグインを導入したり、別途制作で対応。 WordPress オリジナルテーマの作り方 3.0+テーマを自作したい人必見！WordPressの基本的な仕組みWordPressでプラグインを使わずに簡単にページネーション（ページ送り）を行う 双海カオルのタロット占い

一般的なログイン機能までは必要のない、ホームページ公開前などの一時的（簡易）にパスワードを設置したい場合に便利なベーシック認証の設置方法をメモ。 .htaccess AuthUserFile /.htpasswdまでのディレクトリ/.htpasswd AuthGroupFile /dev/null AuthName "Input your ID and Password." AuthType Basic require valid-user 「AuthUserFile」のパス（URL）が不明な場合はサイトルートからのパスを取得できるPHP関数「$_SERVER['DOCUMENT_ROOT']」を設置予定のディレクトリに設置して確認。 PHP echo($_SERVER['DOCUMENT_ROOT']); //サイトルートからのパスを表示 上記「.htaccess」ファイルと「.htpasswd」の2つのファイルをパスワードを設置したいディレクトリの直下にアップロード。使用後（削除する場合）は該当ファイルを削除。 「.htpasswd」は下記のサイトを使って作成すると便利。 .htaccessによる認証用 パスワード暗号化ツール

インスタグラムのサイト埋め込みと言えば「instawidget」が有名だったんですが、サービスが使えなくなってしまったため、代用として採用。無料で使える上に、ログインの必要もないので手軽で便利。 「InstaWindow」を使ったインスタグラムの埋め込み方法 専用コードの作成 サイトにアクセスし、「ユーザー名」「表示画像数」「ブログパーツ幅」など掲載サイトに合わせて、表示条件を設定し、コードを作成。 無料インスタグラムブログパーツ作成ツール InstaWindow 表示したい箇所に作成したコードを張り付ける 上記の手順で作成したコードをコピーして、掲載サイトの表示したい箇所に張り付け。デザインに合わない部分はCSSで調整。 SOCKSTAR（ソックスター）

コンテンツマーケティングの一環として、自社でブログを書いてツイッターで情報発信という流れをされているところも増えたので、ツイッターで拡散した記事を、よりクリックしてもらえるようになる「twitter（ツイッター）カード」の導入方法をメモ。 Twitterカードとは Twitterカードとは記事等のツイートボタンを押した（ URLをシェア ）際に自身で入力したコメントは別に、自動的にツイートに組み込まれるページ情報のこと。 上のイメージのように、記事のURLのみでなく、タイトルや要約文、画像が一緒に表示されるので、ユーザーの目に留まりやすく、流れの速いツイートの中では、このTwitterカードが設定されているかどうかでツイートのクリック率も大きく変わる。 Twitterカードの概要と設定方法 Twitterカードの設定は、情報発信をするページのHTMLファイルのheadタグ内に専用のコードを直接記載することで可能。 <meta name="twitter:card" content="カード種類"> <meta name="twitter:site" content="@ユーザー名"> <meta property="twitter:title" content="記事のタイトル"> <meta property="twitter:description" content="記事の要約（ディスクリプション）"> <meta property="twitter:image" content="画像のURL"> 「twitter:title」「twitter:description」「twitter:image」の3つは、OpenGraphの項目と併用可。すでにOpenGraph（「og:title」「og: description」「og: image」）が設定されている場合は、Twitter側を省略可能。カードの種類は下記の通り。 カードの種類 種類表示される内容 summary タイトル、説明、およびサムネイルを表示できる。 summary_large_image 「summary」とほぼ同じ、表示される画像が大きくなる。 app アプリを直接ダウンロードできるボタンを表示できる。 player ビデオ/オーディオ/メディアを表示できる。 About Twitter Cards Wordpress（ワードプレス）への導入 実際は、ワードプレス等のCMSに組みこんで自動取得する流れがメインになるので、ワードプレスへの導入方法もメモ。「All in one seo」というプラグンでも実装はできるが、今回はソースを直にカスタマイズ。 記事の要約（ディスクリプション）を個別に設定できるように機能を追加する 初期状態では、ページの要約の部分が一律（キャッチフレーズ）になっていることが多いので、記事ページで個別に要約が設定できるよう変更。使用しているテーマフォルダ内の「function.php」に下記のソースコードを追加。 //ディスクリプションの設定 function get_description() { if(is_single()) { $description = get_the_excerpt(); } if(empty($description)) { $description = bloginfo('description'); } return $description; } Twitterカードの更新される部分に該当部分を変更する Twitterカードのソースコードを下記の内容に変更。 <meta property="twitter:title" content="<?php the_title(); ?>"> <meta property="twitter:description" content="<?php echo get_description(); ?>"> <meta property="twitter:image" content="<?php the_post_thumbnail_url( 'medium' ) ?>"> 「twitter:title」の記載内容は記事タイトル。サイト名なども記載したい場合は好みで変更。「twitter:description」に表示される内容は各記事の「抜粋」に入力した内容。入力がなければ「キャッチフレーズ」になる。「twitter:image」の記載内容は「アイキャッチ」で登録している画像。 「Card validator」表示内容を確認 ソースコードを追加したら、きちんと表示されるのかを「Card validator」で確認。「Card URL」に設定したページのURLを入力して「Preview card」をクリック。正しく表示されれば完了 Card Validator | Twitter Developers

2019年12月から2020年2月にかけ、Google ChromeではWebサイト内の「HTTP」コンテンツがブロックされるよう段階的な仕様変更が行われることが公表されました。今後は「HTTP」のホームページは訪問されたお客様に伝えたい情報を正しく伝えることができなくなるとか。今更ではありますが、常時SSLの方法をおさらい。 常時SSL化の3つの手順 使用しているサーバーで、「SSL証明書」を取得 SSL証明書は、ほとんどのレンタルサーバーでは、無料で提供しています。利用中のサーバー会社の管理画面にログイン後、管理画面からSSL証明書の発行を申請。適応されるまで待つ。 レンタルサーバでない場合は、各種管理会社に確認しSSL証明書の発行手続きを行う。 ホームページのURLを、「https」で入力して、ホームページが表示されることを確認 SSL証明書の発行が完了したら、対象となるホームページのURLを「https」で入力して、きちんとページが表示されるのか確認。画像や外部読み込みリンクなどがきちんと表示、動かない場合は、ソースを変更。 相対パスで書かれていれば、ほとんど問題はない。外部読み込み用リンクの場合は、 プロトコルに左右されないよう「http:(https:)」を省略した記述が一般的。 <link href="//use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 「.htaccess」ファイルで常時SSL化対応 テキストエディタで下記のソースコードを記載し、ファイル名を「.htaccess」として保存。対象ホームページの直下のディレクトリにアップロード。 ※拡張子的に「.htaccess」というファイル名は作成できない環境の場合、アップロードしてからFTP内でリネーム。 RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] URLを「www」無しに統一する場合は更に下記のソースコードを記載。 RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] RewriteRule ^(.*)$ https://%1/$1 [R=301,L]