【重要】FC2ブログのSSL対応に伴うテンプレート修正

テンプレ不具合・修正など
2017/09/22 4
vanillaice (Akira)
vanillaice (Akira)
SSL AOSSL

ようやくFC2ブログがAOSSLに対応しました。
その件について詳細は別途記事にしますが、本件は リリース済みテンプレートの一部が修正必須 という旨のお知らせですー （￣∀￣；）

公式DLページの方は修正済みです。
カスタマイズ済みなど何らかの事情で再DLが難しい方は 本記事をご参照の上、修正をお願いします。
特に複雑な内容ではありません。
また、中には「任意」となる修正も含まれます。

はじめに

修正内容とその目的について
  • URLの正規化
  • テンプレートに起因する 混在コンテンツの排除
  • 再度DLが可能な方は修正の必要はありません(既に修正済みです)
修正対象者
  • 環境設定の SSL設定を有効化する方
  • SSL化有効後にURLの正規化を行いたい方

注意点とお願い

  • ご質問の受付、サポートは 私の制作したテンプレートに限ります
  • スマートフォン版を併用している方は スマートフォン版でも別途作業が必要です(お手伝いは致しかねます)
  • 今回の修正は全て html の操作です。CSS内容は触りません。
  • リダイレクトが正しく行われるものについては修正項目から省いています(公式DLファイルはこちらも修正してあります)

自身のブログを当面SSL化しない、という方もいらっしゃるかと思います。
あるいは「今後も絶対やらない。httpで運営していくんだ。」という奇特な方ももしかすると。
SSL化を行わない場合には現在の内容で問題が生じることはありません。
そのまま継続してお使いください。
今回の修正は SSL化する場合に限る 内容です。

スマホ版を併用している(スマートフォン版非表示設定を無効にしている)方につきましては、スマホ版でも修正が必要かもしれません。
現在私の方でリリースしているスマホ版はありませんので、製作者様に直接お問い合わせください。
また、html内容についてPC版とスマホ版は一切連動していませんので、版を行き来する際の親和性やhead内情報の兼ね合いなどのご相談はお受け致しませんことを予めご了承ください。
つまり本記事及び修正は レスポンシブでお使い頂いていることが大前提 の内容です。

URLの正規化(重要されど任意)

URLの正規化を目的とする canonical というlinkのrel属性があります。
私のテンプレートでは以前から要所に記してはありますが、一部追加した方が良いと思います。

インデックス済みの記事について、表示されるURLは httpスキームになっています。
正規化を行わなければいつまでもhttpのままですので、httpsの方を正規アドレスとしてクローラーに伝える作業です。
全内容をコピペで… というのが一番楽だとは思いますが、独自に編集した部位もあるかもしれませんので、内容を照らして「追加」という形でお願いします。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

から始まり

</head>

までが head情報 と呼ばれる部位です。
htmlソースの書き始めにあるものですので、かなり上の方。たぶんすぐわかります。

<!--xxxxx_area--> と <!--/xxxxx_area--> に挟まれる内容がいくつかあります(xxxxは固有文字列)
これはFC2ブログの エリア変数 と呼ばれるもので、ページ種の切り分けをしています。

各変数に挟まれる内容は meta, title, link と3つの要素がセットになっている場合がありますが、そのうちいくつかが欠けている場合もあります。
デフォルトの内容は特に気にする必要はありません。
これから各部位に適切な内容を 追加 してください。
くれぐれも内容の「差し替え」ではなく「追加」です
元あった meta や title などの内容を削除されませんよう。

追加内容
(緑が追加内容です)

トップページ

<!--index_area-->
<meta name="description" content="<%introduction>">
<link rel="canonical" href="<%url>">
<!--/index_area-->

カテゴリページ

<!--category_area-->
<title><%sub_title> - <%current_page_num>ページ目<%cno> - <%blog_name></title>
<link rel="canonical" href="<%url>blog-category-<%cno>.html">
<!--/category_area-->

トップページとカテゴリのエリア変数内のみに追加です。

このhead情報ですが、あくまでもレスポンシブでお使いの方へ向けてのものです。
スマホ版にはスマホ版のhead情報があり、各製作者によって内容も異なります。
いくら上記のような正規化をしたところでスマホ版の内容が適正でなければ 無意味 です。
また、エリア変数は PC版とスマホ版が完全に合致することはありません ので、PCテンプレのhead情報内容をそっくりスマホ版へ移設、といった無茶はされませんようお願いします。

以降の章で修正必須テンプレートを列挙します。
必須に当てはまらないテンプレート(修正不要)をご利用の方も、URLの正規化が必要と思われます方は行ってください
。 (いずれにしろ再DLが可能な方は自身での修正は不要です)

修正必須テンプレと修正不要テンプレ一覧

テンプレート名が不明な方はCSSソース(管理画面下段) の書き出しに
* Website skin name: xxxxxx
と記してありますのでご確認ください。

修正必須

計 21件

修正不要

(リンクなし, 名称のみ掲載)

Pinboard, Classica, Out-of-style, VeryMerry, Empty-street, Sincerely-yours, Velonica, Dark-Divine, Room38, Chronicle, Juliette-Note, Pianissimo, Swollen, Vanilla-Sky, Cabbie, Synchronisity, Juvenile, Message, Arrival, Corridor, Colony, Nostalgia, Little-thing, Mocha, All-about-us, Sweetie, BetweenNeo, Fields, Bliss, Jingle, Faint, GirlOnWire, Chilling, OnTheGround, Valparaiso, DaisyGreen, TheCity, Palette_w, Ranchu, Capricious, Romantique_duex, Sakura_daylight, Sakura_daylight2, Sakura_nightglow

計 44点

各テンプレート修正詳細

テンプレート名をしっかり確認してから行ってください。
また、URL正規化の方も必要であれば同時に行ってください。

BasementFraiseBelongSoutherlyLibertyPromise-meAlternativeQuietStoicBlueStoicBrownWorldOfMineAnotherDay_azureAnotherDay_mauveGlass_shore--- 修正数 1
  • jQueryファイル

修正前

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

修正後

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Life-is--- 修正数 2
  • Webフォント
  • jQueryファイル

① 修正前

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rock+Salt%7CWork+Sans">

① 修正後

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rock+Salt%7CWork+Sans">

② 修正前

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

② 修正後

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Decoy--- 修正数 2
  • Webアイコン
  • jQueryファイル

① 修正前

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

① 修正後 (バージョン数もUP)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

② 修正前

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

② 修正後

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
GrungeFlower_respWGrungeFlower_respB--- 修正数 2
  • Webフォント
  • jQueryファイル

① 修正前

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Poiret+One">

① 修正後

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poiret+One">

② 修正前

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

② 修正後

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Open--- 修正数 1点 x 6箇所
  • 不要JS内容削除
検索(目印) 
注)新着サムネイル不要の方

以下のコメントから…

<!-- 注)新着サムネイル不要の方・非公開ブログの方はここから削除(この行含む) -->

以下のコメントまでを削除

<!-- 注)新着サムネイル不要の方・非公開ブログの方はここまで削除 -->
BeHappy--- 修正数 1
  • JSファイル差し替え

修正前

<link rel="stylesheet" href="//blog-imgs-91.fc2.com/v/a/n/vanillaice000/sliderpromin16_6.css">

修正後

<link rel="stylesheet" href="https://blog-imgs-114.fc2.com/v/a/n/vanillaice000/sliderpromin16_6_modify.css">
Ivory--- 修正数 3
  • Webフォント
  • jQueryファイル
  • 不要JS内容削除

① 修正前

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu+Condensed" type="text/css">

① 修正後

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed" type="text/css">

② 修正前

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

② 修正後

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

③ 検索(目印)

注)新着サムネイル不要の方

以下のコメントから…

<!-- 注)新着サムネイル不要の方・非公開ブログの方はここから削除(この行含む) -->

以下のコメントまでを削除

<!-- 注)新着サムネイル不要の方・非公開ブログの方はここまで削除 -->

最後に自身で混在コンテンツに対処する際の注意点

絶対やらないで頂きたいのは
テンプレートhtmlで「http:」をキーワードにCtrl+F(Windows)/ Command+F(Mac)キー検索をし、全てを「https:」に書き換えてしまう
これはやってしまわないよう注意です。
OGP関連など、単純に http → https と書き換えてはいけないものもありますし、今回のSSL化については ユーザー選択制である ことへの配慮も必要です。

以上です。
本記事の通りに修正を行った後には、テンプレート内容が原因となる混在コンテンツは無くなるはずです。
修正後もブラウザで混在コンテンツを指摘される場合は、テンプレートとは無関係なもの、例えば
プラグイン
アフィリエイトなどのバナー
ランキング等のバナー
記事内容
などに原因があると思われます。

皆様にはお手数おかけします。
よろしくお願いします。

 4

There are no comments yet.
ｈｉｇｅ
すごい！

素早い対応尊敬いたします。
プロに徹した優良企業（？）の対応はこうありなん、と感服しました。

#postscriptの件よく解りました。
Akira氏の忠告に従って、最近追記の形式で記事を書き出したのでそういう表示が出たのですね。

あと、FC2アクセス解析を見るとSSL化した日は、グーグルさんのクローラーが突然300ページとか舐めて行ってます。
それ以降結構なアクセスがあります。
FC2カウンターのほうは、クローラなどのアクセスは弾いているようですね。

グーグルのウェブマスターツールの設定をどうしたらいいのか、ゆっくり調査中です。
ネットは難しい用語や、解りにくい文脈が多いので、
解るまで、あっちのサイトで理解したり、こっちのサイトで勉強したり、
これも読書百編・・なのかも。

2017/09/22 (Fri) 16:43
Akira
To ｈｉｇｅさん

サチコさん再登録はそんなに難しくないと思いますよ。
まだやってないけど(笑)
それより混在コンテンツを潰していくのが大変そう （￣∀￣；）
私ブログカード使いまくってるし(笑)

2017/09/22 (Fri) 21:21
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/09/22 (Fri) 22:40
Akira
To 独自ドメインのSSLの件 内緒さん

こんばんは (o'ω')ﾉ

> この記事に関する修正は、独自ドメインで運営している私のテンプレートにも必要でしょうか〜

はい。もちろん必要です。
Out-of-styleのテンプレート修正自体は正規化の件だけですが、テンプレートとは無関係なところで修正が必要です。
ですからこの記事ではなく最新記事の方をご参照ください。
https://vanillaice000.blog.fc2.com/blog-entry-581.html

ざっと見ただけでも第三サーバーのファイルが含まれています。
・絵文字(直リンク)
・スクリプトファイル
など。
相対パス(スキーム省略)で記してあるものについては、現在は自動でhttp:でアクセス、SSL化後には自動でhttps:アクセスすることになりますので、通信プロゥトコルがhttpsでもアクセスができるかどうかは要確認です。
で、スクリプトのエラーも現時点でわかっているだけで14件ありますので、この機会に一度精査されると良いと思います。
第三サーバーでhttp:と明示してあるものについては、仮にhttps:でも取得が可能であったとしてもhttpでの通信が確定してしまいます。
ともかくFC2サーバー以外に属するファイルはチェックが必要です。
よろしくお願いします。

2017/09/22 (Fri) 23:30

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください ↓
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

テンプレ不具合・修正など