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

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]

構造化データとは、検索エンジンがサイトの内容をきちんと認識できるよう、検索エンジンに対してコンテンツを説明するためにサイトのページに記載されるコードのこと。Googleでもこの仕組みを利用して、検索結果を表示しているので、推奨されている構造化データ「JSON-LD」形式のマークアップの方法をメモ。 構造化データをマークアップする方法 構造化データのマークアップは、構造化データを記載したいHTMLファイルのheadタグ内に専用のコードを直接記載することで可能。 <script type='application/ld+json'> { "@context" : "http://schema.org", "@type" : "WebPage", "name" : "ホームページ制作の株式会社衆｜東京都小金井市", "description" : "東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップによりホームページ以外の制作（パンフレットや動画、イラスト等）もご相談可能。詳しくは問い合わせフォームもしくはお電話にてお問合せください。", "url" : "https://web.syu-u.com/" } </script> 上記は、当サイトのトップページで実際にマークアップしてるJSON-LDの構造化データ。WEBページとして認識できるよう@typeに「WebPage」のプロパティ（属性）とバリュー（属性値）を使用して構造化データをマークアップ。 構造化データのマークアップの4つの手順 JSON-LDの構造化データは、次の4つのマークアップが基本。 JSON-LDの構造化データマークアップを宣言 JSON-LDの構造化データをマークアップするために、script要素でapplication/ld+jsonを指定。こうすることで、括弧内に有効なJSON-LDの構造化データを記述することができる。 <script type="application/ld+json"> { } </script> @context属性を宣言 @contextのプロパティで、「http://schema.org」を指定して、schema.orgを使った構造化データを記述することを宣言。文字コードの設定のようなもの。 "@context": "http://schema.org", @type属性を指定 @typeのプロパティで、ページの種類を指定。ここの部分を実際に記載するページの種類に合わせて書き換える。 "@type": "WebPage", ページの種類は下記サイトで確認。 プロパティとバリューを記載 @typeで指定した属性値に関連するプロパティ（nameやurlなど）を、必要に合わせて@type以降にマークアップ。プロパティは複数設定可能だが、最後の行はカンマ「,」をつけない。 "name" : "ホームページ制作の株式会社衆｜東京都小金井市", "description" : "東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップによりホームページ以外の制作（パンフレットや動画、イラスト等）もご相談可能。詳しくは問い合わせフォームもしくはお電話にてお問合せください。", "url" : "https://web.syu-u.com/" プロパティの種類は下記サイトで確認。 構造化データの有効性を確認する方法 構造化データをマークアップしても、正しく記載されていなければ検索エンジンに認識されない。 本番に反映（アップロード）する前に、マークアップした構造化データが正しいかどうかを「構造化データテストツール」で検証。 構造化データテストツール

コンテンツのテキスト部分より目立つようにしたい場合に、画像を作成して表現することの多かった見出しやキャッチコピー。「Google Web Font」を使うと、簡単に豊かなフォント表現が可能。日本語フォントも増えてきたので使い方をメモ。 「Google Web Font」を使った文字の実装方法 「Google Web Font」のサイト内に用意されているCSSファイルにリンク方法でも実装は可能ですが、追加の度に全てのHTMLファイルを変更するのは大変なので、インポート（@iｍport）を使った方法で実装。 使いたいフォントを検索して、フォントのソースを確認。 サイト内の検索フォームからイメージに近い文字を検索。希望フォントの詳細ページで「SELECT THIS FONT」をクリック。 下部に表示された「Family Selected」を開き「EMBED」を「@IMPORT」に切り替えて「ソースコード」を確認。 Google Fonts CSSを編集してアップロード 文字を変更したいクラスに、前の工程で確認した「ソースコード」を記載。 ※下記の参考例は「 Noto Sans JP 」というフォントを使用。 CSS @import url('https://fonts.googleapis.com/cssfamily=Noto+Sans+JP&display=swap'); .jpn-font{ font-family: 'Noto Sans JP'; }