2019/05/03

FC2ブログに目次を表示できるようにしました。その設定方法等です。

ブログに目次が欲しいなぁ。と思ったのですが、FC2ブログではその機能が提供されていませんでした。※見つけられてないだけかもしれませんが。。

なので、自分で作ってみることにしました。※同じようなことをしてくれるJavaScriptのプラグインとかあるようですが、勉強のため自分で作りました。

20190503目次1

作成したJavaScript、CSSの記載方法や、テンプレートなどの設定方法を書きます。

※選択しているテンプレートや、別のJavaScriptと干渉してうまく動かない可能性もあります。この手順を実施される場合は、自己責任でお願いします。また、テンプレートを触りますので、必ずテンプレートのバックアップをとってから作業してください。

目次のメリットは?

記事の最初のほうに目次があると、最後まで読まなくても、記事の全体感がわかります。また、目次をクリックすると、直接その場所に遷移できるのもいいですね。

実際、他のサイトを見ているときに、目次があるとわかりやすいなぁ。と思っていました。

どのような目次を作成するの?

下記のような仕様の目次を作ってみたいと思います。
目次は自動生成させる

先にも書きましたが、FC2ブログには目次を自動生成する機能はないので、自分で作ります。

管理画面の記事作成では生成できないので、JavaScriptを使用して、ブラウザ側で記事を見たときに自動生成し、表示されるようにします。

JavaScriptのプログラム記載量を減らすために、jQueryを使用します。※jQueryはJavaScriptの記載を少し簡単にしてくれるものです。

hタグのタイトルを取得する

プログラムで取得する以上、ルールを設定する必要があるため、hタグのタイトルを目次の対象とします。

h1タグは、ブログ名や、記事のタイトルに使われているので、h2~h6のタグを対象とします。

※制約として、h2タグの次に、h3タグがなく、いきなりh4タグを記載するといったパターンには対応しません。頑張れば対応できると思いますが、その分処理時間もかかるため、イレギュラーなパターンは想定外とします。

ページ内リンクを設定(アンカーを設定)

目次内のタイトルをクリックすると、該当のhタグまで遷移するようにします。

自分で表示位置を指定できる

記事によって表示位置を変更したいこともあると思うので、特定のタグを記載した個所に表示されるようにします。

また、記事によっては、目次が不要な記事もあると思うので、特定のタグが記載されていない場合は、表示されないようにします。

トップページでも大丈夫

トップページでは最新の記事がいくつか並んで表示されますが、すべての記事のhタグが各記事内に表示されないように、記事単位で処理されるようにします。

目次の作成の流れ

下記のような流れで作成します。

  1. jQueryをテンプレートに設定する
  2. テンプレート内に記事のIDを設定する
  3. 目次作成用のJavaScriptをテンプレートに設置する
  4. 目次作成用のCSSを設定する
  5. 記事に目次作成用のタグを書き込む

目次の設定方法

では実際に目次を設置していきます。

jQueryをテンプレートに設定する

※すでにjQueryを読み込むようにしている場合はここは対応不要です。

※テンプレートを修正する場合、万が一のため、「複製」をクリックして現状のテンプレートのバックアップをとってから作業することをお勧めします。

まずは、ブログの管理画面を開き、左メニュー内の「設定」>「テンプレート」をクリックします。

画面右側を少し下に行くと、【[ テンプレート名 ] のHTML編集】があります。そのheadタグ内に下記の記載をします。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></p>

※headタグ内であれば、とりあえずどこでもいいのですが、私は下記のようにstylesheetを読み込む下に記載しました。
<link rel="stylesheet" href="<%css_link>">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

記載後は必ずプレビューをクリックして、問題ないことを確認してから、更新ボタンをクリックしてください。

テンプレート内に記事のIDを設定する

トップページや、カテゴリ一覧などで、複数の記事が表示される場合に記事を区別できるようにテンプレートを修正します。

上の手順でテンプレートの修正画面へ遷移し、「<!--topentry-->」が記載されている個所を探します。「<!--topentry-->」の直下のタグに「id="entry_id<%topentry_no>"」を追加します。
※すでにid=xxxxの記載がある場合は、それを書き換えます。
※私の場合、すでにidの記載があったので、下記のように修正しました。

20190503目次2

目次作成用のJavaScriptを設置する

下記のJavaScriptをテンプレート内の下のほうにある</body>の上に記載してください。

<script type="text/javascript">
function get_index(target,index){
	let id_cnt=1,id_str,index_str="",target_tag,n_level="",b_level="",o_tag,i,tmp_str;
	target_tag =  "h2,h3,h4,h5,h6";
	target.find(target_tag).each(function(){
		if($(this).attr("id") == undefined){
			id_str = "index_"+index+"_" + id_cnt;
			$(this).attr("id",id_str);
			id_cnt++;
		}else{
			id_str = $(this).attr("id");
		}

		tmp_str = '<a href="#'+id_str+'">' + $(this).text() + '</a>';
		n_level = $(this).prop("tagName").substr(1,1);
		if(n_level > b_level){
			index_str += "<ol><li>"+tmp_str;
		}else if(n_level < b_level){
			for(i=0;i<(b_level - n_level);i++){
				index_str += "</li></ol>";
			}
			index_str += "</li><li>"+tmp_str;
		}else{
			index_str += "</li><li>"+tmp_str;
		}
		b_level = n_level;
	});
	for(i=0;i<(b_level - n_level);i++){
		index_str += "</li></ol>";
	}
	index_str += "</li></ol>";

	return index_str;
}
$(function(){
	let entry_id;
	$('[id^="entry_id"]').each(function(index){
		let index_head='<p> 目次 </p>';
		entry_id= $(this).attr("id");
		$("#"+entry_id+" .nknot_index_area").html(index_head+get_index($(this),index));
	});
</script>

※文字色が青の箇所は変更することができますが、後で記載する、cssおよび、記事へ目次を表示するタグの記載も合わせて同じ文字で変更する必要があります。

※h2~h6を対象にしていますが、変更したい場合は、「target_tag=」の箇所で対象としたいタグに変更してください。ただ、稼働テストはh3までしかやっていません。

※hタグに遷移するためidを設定するようにしていますが、すでにidが設定されている場合は、値を変更しないようにしているので安心してください。

目次作成用のCSSを設定する

テンプレートの編集の下のほうに【[ テンプレート名 ] のスタイルシート編集】という箇所があります。 その中を一番下までスクロールし、下記を追加します。

.nknot_index_area{
    border: 1px solid;
    margin: 30px;
    padding: 10px;
    background: #f0f8ff;
    line-height: 1.3em;
}
.nknot_index_area p {
    text-align: center;
    font-size: 1.2em;
}
.nknot_index_area  ol{
  counter-reset: cnt;
  padding-left: 0;
}
.nknot_index_area  ol li{
  list-style: none;
  margin-bottom: 8px;
}
.nknot_index_area  ol li::before{
  content: counters(cnt, ".") ". ";
  counter-increment: cnt;
}
.nknot_index_area  ol ol{
  counter-reset: cnt;
  margin-left: 20px;
  margin-top: 8px;
  margin-bottom: 0;
}
ol.nknot_index_area, ol.nknot_index_area ol, ol.nknot_index_area ol ol, ol.nknot_index_area ol ol ol, ol.nknot_index_area ol ol ol ol{
  padding-left: 1em;
}

※JavaScriptで青文字の文字を変更した方は同じ文字で変更してください。

※背景色を変えたい方は「.nknot_index_area」内の「background」を変更してください。※色の数字はGoogleでカラーコードなどで検索し、好きなコードを取得すれば大丈夫です。

記事に目次作成用のタグを書き込む

ここまでで、目次が作成される準備が整いましたので、最後に各記事内に目次を表示するタグを記載します。
目次を表示したい箇所に「<div class="nknot_index_area"></div>」を書いてください。
私の場合、下記のように記載しました。反映した実際の記事はここです。

20190503目次3

※JavaScriptで青文字の文字を変更した方は同じ文字で変更してください。

※私の記事はタグがいっぱい書かれていますが、hタグさえあれば動くはずです。

※記事の編集画面直下にある、リアルタイムプレビューには表示されません。プレビューボタンでは表示されます。

2019/05/01

「はとバス」ツアーで栃木の観光へ行きました!お勧めの点・気になる点・ツアー内容を書いています。

今回は「はとバス」に乗って、東京から栃木(日光)方面へ日帰り観光に行ってきました。「はとバス」では栃木方面のツアーはいつもやっているようなので、そちらへ参加を検討している方々の参考になればと思います。

時期によってツアーの内容は少し変わってくると思いますが、大体の流れは変わらないと思います。

はとバスとは?

東京都内や、一部神奈川、埼玉、千葉から出発する、定期観光バスや、貸し切りバスです。簡単に言うと、東京で有名な観光バスです。

ちなみに「株式会社はとバス」が運行しています。

この「はとバス」は、日帰りのツアーや、1泊2日の宿泊込ツアーもあり、都内観光はもちろん、関東周辺の観光ができます。この後、書きますが、私は、東京から栃木までの日帰りツアーに行ってきました。

はとバスの良かった点、気になる点

今回「はとバス」で良かったと思ったところは下記です。

  • 座っているだけで、目的地に連れて行ってもらえ、帰ってこれます。

  • バスガイドさんがついてくれます。バスガイドさんっていたほうがいいの?と思う方もいらっしゃるかとは思いますが、プロの方なので喋りはうまいですし、的確なタイミングで見どころなど教えてもらうことができて、とてもよかったです。

  • 観光地で団体割引や、団体サービスを受けることができます。

逆に、少し気になった点は下記です。

  • 時間が自分たちの自由にはならない。(帰りは少し遅くなってもいいから、もう少し観光したいけどできない。)

  • ちょっと思い立ったところに行けない。(近くに温泉あるんだ。。だけど行けない。)

  • ご飯を食べるところが結構窮屈。(知らない方たちと挟まれて食事をとりました。団体ツアーですが、特に何か一緒にするわけでもないので、初めてあった人と結構近くで食べました。)

気になった点は、基本的に団体ツアーだからなので、「はとバス」だからではないですね。

参加したツアーの概要・費用

「世界遺産の日光とスカイベリー狩り/浜松町発」というツアーに参加しました。

大きくは下記です。

  • 栃木イチゴ狩り
  • 昼食
  • 日光自由散策
  • パンケーキデコレーション体験

費用は、今回休日だったので、一人10,280円でした。※平日だと少し安いです。

同じツアーは、2019年5月2日までです。栃木方面のツアーはこちら(はとバス公式ページ)からご確認ください。

今回のツアー内容

今回参加したツアー内容をもとに、良かった点などを書いてみます。

集合~出発

今回のツアーは、7:30に浜松町(東京)の駅にある「はとバス」の乗り場に集合でした。ツアーによって集合場所や、時間が異なるので、必ず確認して行ってください。ちなみに、同じ内容でも出発地点が違うツアーもあるので、申し込むときにも気を付けましょう。

7:30までに、乗車手続を行いますが、バスに乗るは15分後の7:45からでした。さらに出発は8:00ですので、集合時間の30分後の出発となるようです。

ちなみに、7:45までどのバスに乗るかわかりません。はとバスが他のバス会社のバスをチャーターして運行することもあるため、黄色い「はとバス」に乗れるかどうか出発の15分前までわかりません。

定刻通り出発です。見慣れた首都高速道路を走っていましたが、バスガイドさんが通過する地名の由来など小ネタを教えてもらえて少しお得な気分になりました。ちなみに、バスガイドさんは30分ほど喋っていましたが、朝早くの集合なので、その後は休んだり、歓談してください、となります。

バスにはおトイレはついていませんでした。そのため、途中トイレ休憩で羽生PAに止まりました。ちなみに、トイレ付のバスは、レガートという少しランクが上のバスになるようです。トイレ付が良い人は、バスのランクをチェックしてください。

イチゴ狩り

今回のツアーで行ったのは、栃木県にある「いちごの里」という場所でした。こちらは、イチゴのハウスがたくさんあり、駐車場も広く、イチゴ狩りの時期の終盤にもかかわらず、かなりの人出がありにぎわっていました。

このツアーを選んだ理由としては、この「いちごの里」では、なんと「スカイベリー」のイチゴ狩りがあるのです!「スカイベリー」といえば、高級イチゴですよね!それがツアーに組み込まれていたので、このツアーに決めたと言っても過言ではありません。

ここで団体の強みがでました。実はこの「いちごの里」は以前来たことがあったのですが、その時は受付をして30分以上待ってから説明を聞いて、少し離れたところまで歩いてイチゴ狩り開始でした。しかし、今回は、バスが付くとすぐに係りの人がバスに乗り込んできて説明をしてくれました。そしてそのまま、近くのハウスまで案内してくれイチゴ狩り開始でした!団体だとやはり扱いが違いますね!※場所は偶然近くだったのかもしれませんが・・・

また、ハウスも2つあり、このツアーの人のみでイチゴ狩りが楽しめるようになっていました。そのためか、11時前くらいにもかかわらず、イチゴが山のようになっていました。

20190501_はとバス1 20190501_はとバス4

中にはこんな大きなイチゴもありました。※私の身長は177CMあり、手も大きいほうです!

20190501_はとバス2

イチゴの味ですが、スーパーに並んでいる普通のイチゴとは、やはり異なり、かなり甘かったです。小ぶりから、中くらいのイチゴのほうが美味しかったですが、大きなイチゴも大味ではなくスーパーのイチゴより美味しかったです!そのため、30個ほど食べました!

20190501_はとバス3

イチゴ狩りは30分の時間制限がありましたが、お腹がいっぱいになるため、そんなに量が食べれず、15分くらいでほとんどの人がいなくなりました。

ここで少し団体ツアーの弱いところがありました。かなり一般の人も多かったので、トイレが混雑していましたが出発の時間は決まっています。イチゴは水分がほとんどなので、トイレが近くなります。トイレに行く時間を考慮してイチゴを食べる必要があります。

今回のイチゴ狩りは、今までの中で一番美味しかったのではないかと思います。「いちごの里」はここを押すと、公式ページを見れます。5月31日までやっているので気になる方は行ってみてはいかがでしょうか。※完全予約制とのことです。

昼食

昼食は磐梯日光店というところで、黒毛和牛のビーフシチューと栗おこわの昼食でした。また、寄せ豆腐作りもありました。

20190501_はとバス6

全体的に日本食ですが、なぜかビーフシチューがあり、違和感がありました。宣伝用に黒毛和牛のような言葉がほしかったのでしょうか?ビーフシチューは普通のお味でした。

かわりに、寄せ豆腐は、にがりを混ぜ、豆乳に入れるのを自分でやれて楽しかったです。また、お味もできたての豆腐なので美味しかったです。

20190501_はとバス5

ちなみに、一番美味しかったのは汁物でした。出汁がとても美味しくおかわりしたいくらいでしたが、おかわりはなかったです。。。

前にも書いていますが、知らない人たちとかなり近くに詰め込まれて食べるので、すごく楽しんでとはいかないのが残念でした。場所はだいぶ余っていたのですが、団体ツアーでは仕方ないですね。昼食は、まぁ普通といったところでした。

日光自由散策

ご飯を食べる時間を入れて、日光で170分の自由時間があります。私は日光東照宮に行きました。以前行ったときは、見ざる言わざる聞かざると、眠り猫が修復中で本物が見れなかったので今回のタイミングで見れて良かったです。ちなみに、日光での散策は自由時間なので、東照宮のチケットは自分で買う必要があります。(2019年4月末時点で大人1,300円です。)また、バスガイドさんもついてはこないです。

やっぱり徳川家ゆかりの地だけあって、豪華な造りで目の保養になります!

ちなみに、この自由時間の後は買い物をしている時間はないので、お土産を買う人はこの時間で買ってくださいね!

パンケーキデコレーション体験

自由散策の後、日光カステラ本舗(バスが止まっているところの近く)で、パンケーキを食べます。この日は、1日中食べていますね。

パンケーキは一人1枚です。ホイップクリームを山のように載せてくれます。そこに、自分で好きなトッピングをしていきます。

20190501_はとバス9

トッピングは、イチゴソース、チョコソース、イチゴ・バニラジェラート、メイプルシロップ、黒糖、きな粉などがありました。自由にトッピングできるのは楽しいですね!

また、パンケーキ以外にも、イチゴのムース(プリンみたいなもの)、自家製豆乳プリン、白玉、イチゴのゼリー、イチゴ大福があり、これらは食べ放題でした。30分の時間制限がありますが、ここまでにたくさん食べてきているので、私も含めみなさん、あまり量は食べれて内容でした。

20190501_はとバス10 20190501_はとバス11

帰途

パンケーキデコレーション体験が終わったら、すぐに帰途につきます。みんな疲れているため、結構早く寝はじめるので、バスガイドさんも30分もは喋っていなかったと思います。

途中1回のトイレ休憩があります。行きと同様に羽生PAです。上り(東京方面)の羽生SAは鬼平犯科帳の舞台をイメージしているSAで、見た目も楽しむことができるPAでした。今まで下りのPAは使ったことはあったのですが、下りのPAは初めてで少しびっくりしました。ツアーはトイレ休憩にもこういう珍しいところを取り入れてくれるのでいいですね!

19:00過ぎに東京駅に着き、解散しました。朝7:30集合なので、本当に半日ですね。行きと帰りとで、駅が違うので気を付けてくださいね。また、GWとか連休だと大幅に到着が遅れることもあるので、帰ってからの予定は入れないほうがいいかと思います。

今回、初めて「はとバス」を利用させてもらいましたが、全体的にかなり満足のいく内容でした。団体ということで少し気になる点もありますが、寝ていたら着いて、帰ってこれるって幸せです。また、機会があれば利用したいと思える内容でした!

2019/04/28

FC2ブログの記事を一部はてなブログに移行手順

一部の記事をこのブログから、別のブログに持っていくことになりました。同じ「FC2ブログ」でもよかったのですが、せっかくなので別のブログである「はてなブログ」に持っていきました。

「FC2ブログ」から「はてなブログ」へ記事を持っていく手順を紹介します。とても簡単ですぐに持っていくことができました。

全体の流れ

大きく下記5点を行うだけです。全体で30分ほどで終わりました。

  1. はてなブログで新しいブログを作る
  2. FC2ブログで記事のバックアップを取得する
  3. はてなブログでインポート(記事の取り込み)をする
  4. 画像データを移行する
  5. 持っていかない記事を削除する

はてなブログで新しいブログを作る

こちらからはてなブログの画面に行き「無料でブログを始める」で作ることができます。

※ブログ作成は人によって違うので自由に作成してもらって大丈夫です。お勧めの初期設定としては、「ブログを公開したい範囲を選んでください」で「自分のみ」を選択しておくことです。こうしておくことで、記事を持って行っているの中途半端な時に、はてなブログ側で他の人に見られることがなくなります。完全に移行後、「すべての人に公開」にすることができます。

FC2ブログで記事のバックアップを取得する

FC2ブログにログインし、管理画面を開きます。

左サイドメニューの下のほうにある「データバックアップ」をクリックします。

そうすると、右側にバックアップ画面が表示されるので、「バックアップ」>「エクスポート」>「記事全部」の「ダウンロード」ボタンをクリックします。

少し待つとテキストファイルがダウンロードされてきます。※40記事ほどで1,2分かかったので記事の多い方は気長に待ってください。

ちなみに、開いてみるとタイトルや本文などが書かれています。※文字コードはUTF-8でした。

はてなブログでインポート(記事の取り込み)をする

はてなブログにログインし、画面右上に表示されているメニューの人の画像をクリックすると、さらにメニューが表示されます。ここで「設定」をクリックします。

左メニューにある「インポート」をクリックします。

画面右側に「ブログデータをアップロード」が表示されるので、「ファイルを選択」をクリックし、FC2ブログでバックアップしたファイルを選択します。この時「形式」は「MovableType形式」にしておきます。※2019年4月時点では、最初から「MovableType形式」になっていました。
ファイル選択後、右側に表示されている「文字コード選択へ進む」をクリックします。

最新の記事の内容が少し表示されるので、正しく読める文字コードを選択します。※2019年4月時点では、FC2ブログからUTF8でひ出力されていたので、一番上の「UTF-8」を選択で大丈夫です。
文字コード選択後、右側に表示されている「インポートする」をクリックします。

インポートの進行状況が表示されるので終わるのを待ちます。※記事がたくさんある人は時間がかかるので、一度閉じて後程この画面に来ても大丈夫です。

記事の取り込みが終わると、下のように取り込まれた記事数などを確認することができます。

画像データを移行する

次に画像データの移行です。同じ画面の下に「画像データの移行」が表示されていますので、「移行する」をクリックします。

移行開始のメッセージと、移行中の表示がされます。こちらは進捗状況が変わらなかったです。画像の移行も時間がかかるので、一度画面を閉じても大丈夫です。

ある程度時間が経過したら、再度この画面(インポート)にアクセスします。※私の場合は10分ほどのちに行いました。
「これまでのインポート」の行が閉じているので、「画像データの移行」をクリックして開いて状況を確認します。「移行完了」になっていれば移行完了です。

持っていかない記事を削除する

すべてのブログデータを持っていく人は不要です。私のように、一部のブログだけを持っていく人は、いらないブログを削除します。

左メニューの「記事の管理」をクリックします。

記事の一覧が表示されますので、削除する記事の左側のチェックボックスにチェックを入れ、右上にある「チェックした記事を削除」をクリックします。※誤って削除してしまっても、ゴミ箱がありますので、そこから復活することができます。

最後に、「はてなブログ」作成時に「ブログを公開したい範囲を選んでください」で「自分のみ」を選択した人は、左メニューの「設定」をクリックし、画面上に表示される「公開設定」をクリック、その後「すべての人に公開」を選択し、画面下部の「変更する」をクリックすると他の人にも公開されるようになります。

どうでしたでしょうか。本当にすごく簡単にブログ記事のコピーができてしまいました。なんとなくですが、はてなブログのほうが使いやすい気がしますね。特にゴミ箱はFC2にはないので万が一の時には助かります。FC2ブログはテンプレートの修正などできるなどのメリットもあるので、一概にどちらがいいとは言えないですけどね!

ブログを分割したい人や、はてなブログに移行したい人は試してみてはいかがでしょうか。※画像のデータ移行がとても簡単でびっくりしました!

2019/04/27

別ブログへ記事コピーしたのでcanonicalタグとは何か調べてみました

今回はcanonicalタグについて書いてみます。

なぜ、canonicalタグかというと、一部の記事を別のブログに持っていくことにしました。対象の記事は数日はこちらのブログにも記事を残したいと思ったためです。では、canonicalタグはどういうものかを次の章から記載します。

※最終的にFC2ブログで、記事毎にcanonicalタグを記載できないとの結論に達しましたが、せっかく調べたので記載します。

canonicalタグどんなもの?

canonicalタグは、異なるURLで内容が同じ記事が複数ある場合、「優先するURLを通知する」するもので、「URLを正規化するもの」らしいです。正直これを聞いてもわからないと思います。

もう少しわかりやすくすると、ある記事をコピーして複数のブログに配置したとします。GoogleなどでWEB検索をした際、検索結果にコピーした同じ内容の記事がいっぱい並んでも困りますよね。なので、この記事はこのURLのコピー品(代替品)なので検索結果に出さなくていいですよと明記したものです。この明記する方法(タグ)がcanonicalタグです。

でも単純に考えれば、記事を作った人は同じ内容でも、検索結果にいっぱい表示されたほうが人の目につきいいと思いますよね。ですが、実際にはそうとも言えません。※次の章に書きます。

コピー記事にcanonicalタグがないとどうなる?

結果からいうと、GoogleなどのWEB検索の結果の一覧に、コピーした記事がそもそも表示されなくなったり、サイト全体の評価が下がり、コピーしていない記事も含めて、検索結果の表示順がかなり下がったりします。なので、Google検索をする人達にサイトを見てもらえなくなります。

GoogleなどのWEB検索業者では検索結果にコピー記事がいっぱい並ぶことを嫌がります。なぜならGoogleなどのWEB検索業者を使いやすくし、より良いサービスにしたいためです。 例えば、情報を知りたくて検索した人が、この記事は必要な情報がなかったと思い検索結果に戻っても、同じコピー記事が並んでいたら、そのWeb検索の検索結果は使えないと思いますよね。結果、その人は別のWEB検索を使うようになります。 なので、GoogleなどのWEB検索業者としては、コピーされた記事は不要なのです。 そして、そもそもコピー記事を配置しているサイトは良くないサイトというのもあり、サイト全体の評価を下げて検索結果の表示順位を下げたりするペナルティを与えているようです。 せっかく書いた記事がgoogleやyahooなどで検索されないと、ブログを見てもらえる機会が減ってショックですよね。

canonicalタグはどう書くの?

html内のheadタグ内に下記のような行を追加します。今回は、移動先のブログを残していきたいので、移動先のブログのURLを書くことにしました。

<link rel="canonical" href="検索結果に出したい記事のURL"/>

実際に追加してみた際のHTMLソースです。※もともとこのブログ内に記載していた私の記事で試したものです。 canonical

FC2ブログで記事単位のcanonicalタグは設定できるの?

やめたほうがよいとの結論に。。

通常のブログでは、html内のheadタグ内は、記事本文からは変更できません。通常テンプレートに記載されています。また、FC2ブログではテンプレートを編集はできるのですが、記事毎に移動先のブログのURLを設定することはできません。

その為、今回はJavaScriptを使って、画面表示後にcanonicalタグを設定するようにしてみました。が、結果としてJavaScriptでタグの設定自体はうまくいきましたが、Googleはサポートしていないようで、うまくいきませんでした。

※同じブログ内で、PCとスマホのURLが違う場合のcanonicalタグの設定は他のサイトで公開されていたので、同じブログ内であれば可能のようです。

※一旦、最大手のGoogleで確認しました。実際には正しく認識することもあるようですが、JavaScriptで変更するのは想定外とのことなのでうまくいったとしても、いつダメになるかわかりません。また、別の記事で試したところ、うまくいったものもあり、原因がわからないため、JavaScriptではやらないほうが安全です。

検証した内容

JavaScriptでhead内にcanonicalタグを追加するコードを書いたのち下記を確認しました。

  • ブラウザの開発者ツールでcanonicalタグが正しく追加されていることを確認。こちらはうまくいきました。
  • Google Search Consoleの「公開URLテスト」を実施。「ユーザーが指定した正規 URL」は「なし」のまま、「テスト済みのページ」でHTMLのソースを見るとcanonicalタグが反映されていませんでした。
  • 後日、Google Search Consoleの「クロール済みのページを表示」で確認しましたが、ある記事ではcanonicalが表示され、ある記事では表示されていませんでした。また、「クロール済みのページを表示」でcanonicalが表示されている記事でも、「ユーザーが指定した正規 URL」で正しく設定されている記事や、「なし」と表示されており、正しく設定されていな記事もありました。

今回、canonicalタグについては勉強になったのですが、無料ブログサービスなど、記事の内容しか変更できないブログサービスでは、canonicalタグは設定できないことがわかりました。ちょっと残念でした。レンタルサーバでWordpressや、MovableTypeを使用すようにすると、いろいろ自分の好きなようにできるのだろうなぁと思いました。
2019/04/16

FC2ブログの有料会員になって独自ドメインを取得。リダイレクトのされ方など記載しています。

fc2ブログの有料会員になってみました。有料会員でできることや、独自ドメインにしてみたので、気になっていた切り替え時の挙動(リダイレクトや、SSL)などを書いてみます。

なぜ有料会員になったの?

  • 少し独自ドメインにあこがれがあった(笑)
    →自分のドメインというのは、会社のページを持っているみたいで少し優越感があります。あんまり意味ないですが。。
    ちなみに、1年後からは独自ドメインは費用が掛かるのでどうするかは、その時に考えます。※これも気になる点がありますので、下に記載します。
  • 月々300円程度なら遊びで使える。
    →300円も。という人がいるかもしれませんが、1日10円と思えば。嫌になったら簡単にやめられるしなぁ。と思いました。
  • FTPでファイル(HTMLなど)がアップできる。
    →これがちょっとほしい機能でした。詳細はのちに書きます。
  • スマホの広告や、下部のFC2内のランキングを消すことができる。
    →これもいいなぁ。と思いました。自分に関係のない広告が表示されて見にくくなったり、自分のサイトなのに、勝手にFC2ブログのランキングが表示されても見てくれる人がなんなのか分からないだろうなぁ。と思っていました。

他に有料会員でできること

私はあんまり魅力に感じなかったですが、有料会員になるとできることです。

  • アップロードファイルが5MBまでできる。
    →あんまり大きなファイルをアップする機会がなさそうです。。。
  • ファイルのアップロードの容量が無制限で保存できる。
    →無料会員の10GBも使い切る自身がないです。。。
    ちなみに、FTPのアップロードファイルの最大は500MBまでだそうです。これも使い切ることはないだろうなぁ(^^;)
  • 一日の投稿記事最大数が100件になる。
    →一日で100件も記事を書くことは不可能だと思われます(笑)
  • 404ページが自分で変更できる。
    →記事を削除とかしないと404ページ(該当のページがないですの画面です。)が発生しないのと、初期のものでも困らないと思うので。
  • トークン発行機能がある。
    →これは何のための機能なのかよくわからないです。
    有料で使えるということは、何か有用に使えるのだとは思うのですが。。
  • 続けて編集設定ができる。
    →1日1記事も書けるかどうかなのに、やっぱり私には不要かな。

1年後のドメインの費用などで気になる点

「https://nknot.jp/」のドメインが1年間無料となっていたので、申し込んでみましたが、1年後からは3,000円程度の利用料がかかってくることになります。
まぁ、ドメインを使用するのでお金がかかるのは仕方ないですが(それが商売ですからね。)、実は「.jp」ではないドメイン、例えば「.net」とかだと1,000円ちょっとから使用できます。
こちらは初年度からお金がかかりますが、2年目になったタイミグで「.jp」より安くなることになります。
ドメインも人気なものが高くなっているんですね。
ドメインにあまりこだわりがなく、長期使用を考える方は、ランニングコストが安いドメインを取得されるほうがいいかと思いました。
※私は、2年目以降高くなるのは気が付いていましたが、「.jp」いいなぁと思ってポッチとやってしまいました。(笑)

ドメインの切り替え

ドメインの切り替えですが、画面上でボタンを押していくだけで完了します。※いくつか自分の情報や、決済のため、入力が必要ではありますが、迷うことはなかったです。
最後に、有料会員で追加されるドメインの管理画面で、新しいドメインを選択しすると切り替えが完了します。

ドメイン登録時に、個人情報を入力するのですが、Whoisに公開されますと記載されています。しかし、実際にはFC2の会社の情報で公開する設定(whois情報公開代行サービス)がある(初期設定)ので、個人情報を公開したくない人はFC2の会社の情報で公開するといいです。

前のドメインにアクセスするとどうなるのか、ですが、前のドメインのページアクセスすると、新しいドメインに転送してくれます。
ちなみに、301リダイレクトとなります。そのため、Google Search Consoleのドメイン切り替えの手続きも可能です。※わからない方は気にしなくても大丈夫です。

SSLは使えるのですが、新しいドメインに切り替えた直後はサーバ側の設定が行われていないため、httpでのアクセスのみとなります。※httpsでアクセスするとエラーになります。
私の場合10分~20分後には、SSLの設定が完了し、httpsでのアクセスができるようになりました。
httpでアクセスするとhttpsに転送されるようにもなっています。httpからhttpsへは302リダイレクトになっています。※301リダイレクトに変更することも可能です。
また、SSLを無効にすることも可能です。

FTPでファイルアップできることについて

あまり使用する人は少ないかと思いますが、FC2ブログでは、Cssはテンプレートで一つだったり、JavaScriptに至ってはテンプレートに直接書くか、プラグインのフリーエリアにしのばせるしかできません。
ある程度は、機能単位に分割して管理したいので、自分で作成したファイルをアップロードできるのは助かります。
※Cssや、JavaScriptは別ファイルで作っておいて、テンプレートで読み込むように指定することができるのです。
「.html」、「.css」、「.js」のファイルはアップロードできるのを確認しました。
ちなみに「.php」はエラーとなりアップロード禁止、「.pl」はアップできましたが、テキストが表示されるだけでした。さすがにセキュリティや、重たい処理を動かされると困るので、使えないようにされているのですね。少し残念でした。

趣味+アルファでブログをやっているのですが、月300円(2年目からは600円)程度の趣味であれば問題ないかなぁと思います。
独自ドメインに興味があるかたや、有料会員のサービスに興味がある方は月300円ですし、一度やってみてはいかがでしょうか。
もちろん、サーバサイドのプログラミングや、WordPress、MovableTypeなどを使いたい方などは、レンタルサーバを使用するのも手ですね!
※私も、続くようだったら、レンタルサーバにも手を出すかもしれません。(^^)