走れ！コブリーナ

fc2ブログをSSL対応にしたら、URLが変わった！

今回は、個人的な覚え書きのメモなので、スルーしてくださいませ！
（メモなので、ものすごく端折っております〜！悪しからず☆）

＊＊＊
わたくしは、このブログ以外に、もう一つブログを書いておりまして。

（育犬ブログをfc2ブログで綴っております）

去年の9月にfc2ブログもSSL暗号化接続が可能になったのですが、切り替えると設定変更とかメンドクサイなーと思って手を付けておりませんでした。

（このブログも、切り替え時には少し手こずりましたっけ・・→その時の顛末）

でも、いいかげんそろそろ・・と思って、やっと「切り替え」ました。

SSLの設定自体は簡単なのですよ。

でもね・・やはり一筋縄で行くわけがなく・・

まず最初に発見した不具合は、Webフォントでした。

fc2ブログの方では、ちょっと特殊なWebフォントを使っていたのですが
（レンタルサーバーにWebフォントを置いて、それを参照させる形で）、

それが参照されなくなってしまったのです。
（つまり、ただのシステムフォントになってしまったのです）

Webフォントを利用するサイトのドメインとWebフォントを置いたサーバのドメインが異なる場合、クロスドメイン制約のために上手く表示できなかったりするので、.htaccess にアクセス制限回避の設定をしていました。

指定していたドメインが「http:〜」だったから、「https:〜」に変更すればいいのよね・・と単純に考えていたのですが・・

あれれ？

うまくいかない。

ブログのURLをよーく見て見ると・・あ、URL変わってる！

今までは、ブログ番号が付いていたのですが、それが無くなっていたのです。

http://jilpon.blog98.fc2.com/

だったのが

https://jilpon.blog.fc2.com/

に変わってました！

分かってしまえば単純なことで、無事にWebフォントも復活！

まさかURLが変わるとはね。ビックリ。

去年の9月から分かってたことなのに、今頃何言ってるんだ！というくだらないお話でした☆

httpsが緑にならなくて、オロオロしたけど無事解決。

シシデザインのサイトも、HTTPからHTTPS（SSL化）に変更しなくちゃ・・とは思っていたものの・・

導入コストやら手間やらデメリットやらを考えるとモヤモヤしてしまい、二の足を踏んでおりました。

ところが！

サーバー会社より「無料の独自SSL」サービス開始のアナウンスが！

つまり、追加料金無しで常時SSL化が可能になったのですー♪

待ってました！（待っててよかった！！）

というわけで、遅ればせながらシシデザインもSSL対応に切り替えましたよー。

SSL証明書の申請と設定は、サーバーの管理画面から簡単にできました。

ポチッと申請して、5分くらい待てば完了。

ただ、本格的な切り替えにあたっては、いくつか細かい作業が必要です。

例えば・・

• リダイレクト設定
• Google Search Console への再登録とサイトマップの送信
• Google Analytics に設定してあるURLの変更

等々。

具体的に何をどうすればよいかは、ググればすぐ分かるのでここでは割愛。

小一時間ほど格闘して、無事に「HTTP」から「HTTPS」へ切り替えが完了！

FirefoxでもChromeでも、アドレスバーに緑の鍵マークが付きました！

これでひとまず安心、と思ったのですよ。

・・ところがです。

このブログのアドレスバーに黄色いマークが！（しかも「この接続は安全ではありません」と出ちゃう！）

どうやら「部分的にしか暗号化されていないので、盗聴者の攻撃を防ぐことができないよ」という状態らしい。

原因は、各記事内のリンク画像にありました。

http://から始まる絶対パスで指定していたのです。

これを全部「https://〜」に修正すればいいのですが、ブログに貼ってある画像なんて膨大な数だし、どうしよう・・。

と思ってググったら、文字列を一括置換するプラグインを使えばいいということが判明し、これもあっさり解決。

画像のURL以外にも、アフィリエイトリンクやAPIなどがひっかかることもあるので、要注意ですね。これらをチェックしていくのが一番面倒な作業かも。

何はともあれ、無事に緑の鍵マークが付いて、ようやく人心地付きました。

ただ・・。分かっちゃいたけど、SNSの「いいね！」カウントがリセットされてしまうんですよね。

悲しい・・。

引き継ぐ方法も無くはないのですが、面倒なので、ま、いいや。
（そんなたいしたブログでも無いし）

また一からコツコツ地道に稼いでいきます。

お手軽に、サイト内検索！

Webサイトに、サイト内検索窓（検索ボックス）が無いことってありますよね。

（スミマセン、シシデザインも然りです・・）

そんなとき、Googleさんの検索窓を利用するという裏技（？）があります。

site: URL（スペースを空けて）キーワード
と入れるだけ！

これで、指定したサイト内の検索ができちゃいます。

例えばシシデザインのサイト内で「グーペ」という単語を検索したければ、

site: www.shi-shi-design.com グーペ

とすればOK！

と、うちのアシスタントくんに教えてもらいました。

え？？それって常識なの？！(^▽^;)

でもきっと、知らない人もいるはず☆

というわけで、本日のネタにしてみました〜。

［続きを読む］でテキストを開閉！hide_paragraphs

長い文章の途中で[続きを読む]のように省略/開閉できるようにしたいなーと思い、シンプルなスクリプトをいろいろ探していたら・・
『hide_paragraphs』というjQueryプラグインを見つけたので、メモとして残しておきます。
（メモなので、ものすごく端折っております〜！悪しからず☆）

この手のスクリプトは、表示文字数（あるいは行数や単語数）で判別するタイプがほとんどですが、今回使ってみたのは「段落数」で判別するというもの。

使わせていただいたのは「hide_paragraphs」です。

＊＊＊
使い方はとっても簡単。

１）こちらのサイトから「hide_paragraphs.js」をダウンロードし、jQueryのあとに「hide_paragraphs.js」を読み込ませます。

<script src="***/jquery.js"></script>
<script src="***/hide_paragraphs.js"></script>

２）次に、使いたい場所に次のスクリプトを書いて、

<script>
$(function () {
$(".collapsable").hideParagraphs(オプション);
});
</script>


３）あとは開閉させたい文章をまるごと囲めばいいだけ！

<div class="collapsable">○○○</div>

上記の（オプション）のところには、たとえば{show: 4}と書けば4段落目まで表示させることができます。

<script>
$(function () {
$(".collapsable").hideParagraphs({show: 4});
});
</script>

その他にも、次のようなオプション設定が可能です。
{show: 4, show_text: "Show more", hide_text: "Hide"}

他のライブラリと干渉するなどしてうまく動かない場合は、$をJQueryに変えればコンフリクトは回避できると思います☆

＊＊＊

ところで、どこでこれを使ったかというと・・こちらのページで♪

ものすごく長いレビューをいただいたので、全文掲載でもよかったのですが・・開閉式ですっきりさせてみました！