2019/05/19

FC2ブログの1年間JPドメインプレゼント(有料会員)がお得なのか考えてみました。

FC2ブログで有料会員となると、1年間JPドメインプレゼントとありますが、これがお得なのかどうか、人によって結構違うようなので、書いてみます。

※結論的には、ずっとFC2ブログをつかい続けたい人で、「.jp」ドメインがいい!という人にはお勧め。それ以外は、お勧めではないと思います。

ドメインってなに?

このブログでは、「nknot.jp」です。「https://ドメイン名」となります。 WEBの世界では、IPアドレス(111.111.111.111のような数字の羅列)でサーバを特定しているのですが、人が覚えられないので、このドメイン名がブラウザに入力されたら、このIPアドレスに変換してアクセスしてくださいね。ということをしています。

fc2ブログですと「blog.fc2.com」がドメイン名です。それで、個人がブログを作成すると「(id).blog.fc2.com」(nknot.blog.fc2.com)と言った形となりidが付与されたドメイン名になります。

特に「(id).blog.fc2.com」でも困ることはありません。ただ、ドメイン名に「blog.fc2.com」が含まれているので、fc2ブログを使っているサイトなのか。だとか。ブログサイトなんだ。というのがURLからわかります。 ブログサイトは個人がやっているイメージが強いので、それがいいほうにも、悪いほうにもとらえられることがあります。 なので、ドメイン名に「blog」や「fc2.com」が入っていない、自分独自のドメイン名が欲しい!というときに、独自ドメインを取得します。

※独自にサーバを立てるときは、独自ドメインを取得する必要があります。

1年間JPドメインプレゼントに向いている人

独自ドメインは、ドメインを管理している会社に登録、運用してもらう必要があります。そのため有料です。 また、ドメインの種類によって金額が変わります。ちなみに、プレゼント対象の「.jp」は少し人気があるので、お高めです。「.com」や「.net」は安くなってきます。 fc2ブログで取得できるドメインの種類と金額はここから確認できます。

「.jp」は年間「2,780円」で、「.com」「.net」は年間「1,080円」です。そのため、1年間「.jp」が無料なのは結構お得感はあります。

そのため、「.jp」のドメインを、これからもずっとFC2ブログでお金がかかっても使いたい!という方には向いているかと思います。

それ以外にも、独自ドメインで少し試してみたいことがあるといった人にはいいかもしれません。

1年間JPドメインプレゼントに向いていない人

現在感じているのは大きく下記2点です。

  1. 「.jp」にこだわりがない人

    向いている人で書いていますが、「.jp」は年間「2,780円」で初年度だけ無料です。2年目には「2,780円」がかかります。

    例えば「.com」だと初年度「1,080円」かかりますが、2年目も同じ金額なので、総額「2,160円」となり、2年目の時点で「.jp」より安いことになります。

    なので、「.jp」にこだわりがない人は、ランニングコストの安い「.com」などのドメインをお勧めします。

  2. 将来別のブログや、レンタルサーバを考えている人

    FC2ブログでは、「JPドメインプレゼントキャンペーンやかんたん変換サービスで取得したドメインは、FC2ブログなどのFC2「かんたん変換サービス」の対応サービス内のみになります。」となっています。

    「かんたん変換サービス」ではいろいろ制限があるので、一番の問題は、他のサーバへの設定ができません。(FC2サービス内にしか使えません。)

    通常のドメインであれば、ドメインに紐づけるIPを変えることで、別サーバへ向けることができますが、それができません。

    また、ドメイン作成後60日後には、他のドメイン管理会社に移すことができますが、それもできません。

    なので、ドメインの運用を考えている人にはお勧めできないです。

私個人の感想ではありますが、FC2の1年間JPドメインプレゼントについては、FC2ブログから出て行かれないようにするための、しかも、2年目からコスト回収ができるFC2ブログ運営側よりの内容のようには見えます。

ただ、FC2ブログを使いたい。かつJPドメインが欲しい!という人にはお勧めできる内容だと思います。

※ちなみに、私は独自ドメインで少しためしてみたいことがあるので使っていますが、2年目は更新するつもりはありません。

2019/05/17

FC2ブログのスマホテンプレートにcanonicalを設定しておいたほうが良い

FC2ブログのテンプレートで、PCとスマートフォンのテンプレートをそれぞれで指定していたら、Googleに重複コンテンツだと言われてしまいました。 それも、大量に。。。 FC2ブログでは、PCとスマートフォンとで別のテンプレートを作成する人は以前投稿した「別ブログへ記事コピーしたのでcanonicalタグとは何か調べてみました」でご紹介したcanonicalを指定することをお勧めします。

なぜ、重複コンテンツとなると困るのか、どのようなcanonicalを設定したらいいのかを記載しています。

※ちなみに、特にブログの記事は自分個人の日記のようなもので、他の人に見てもらう必要はない!という人は問題のない話です。

重複コンテンツとなるとなぜ困るの?

まず、重複コンテンツとは何かですが、ブログでいうと同じ記事を複数投稿しているような状態です。例えば、記事数が多いほうが見栄えがいいなどと思い、1つの記事を日付や、少しだけ表現を変えて5つ投稿して5倍記事があるように見せるような場合です。

それでは、なぜ重複コンテンツとなると困るかですが、一番の理由は、Googleは重複コンテンツがあるサイトの評価を下げるそうです。評価が下がるということは、Google検索の結果に表示される場合、かなり下のほうにもしくは、表示されなくなったりします。※検索結果の最後のページなどに行くと、似たページは除外しているといったメッセージが表示されています。

これでは、せっかく書いた記事を多くの人に読んでもらうことはできませんよね。

なぜ、Googleは重複コンテンツがあるサイトの評価を下げるというと、検索結果に同じ記事が並んでいても、検索をする人からすると邪魔ですよね。Googleは質の良い検索を目指しているので、そういうページがたくさんあるサイトはペナルティとしてサイト全体の評価を下げるようです。

ちなみに、少量発生するのは仕方がないといった形で、ペナルティにならないこともあるようです。

ただ、FC2ブログでテンプレートをPC、スマートフォンで分けると、記事が2倍(オリジナルと、重複コンテンツが1対1)で発生することになり、重複の割合が高くなると考えられます。

なぜ、FC2ブログでテンプレートを分けると重複コンテンツとなるの?

スマートフォンのテンプレートで表示する場合、URLに違いがでるからです。具体的には、「blog-entry-XX.html?sp」のように.htmlの後ろに「?sp」がついているからです。

FC2ブログとしては、この「?sp」が付いているときはスマートフォンのテンプレートを表示する仕様にしているようです。

「xxx.html?sp」は何かですが、URLで指定するパラメータです。サイトによってはこの「?」の後ろにいろいろな情報を付与して、その条件にあった内容を表示するといったことができます。 例えば、「list.html?category=1」を指定するとカテゴリ1の内容だけ画面に表示させる。といったような感じです。※そのサイトが、そのように作られている場合での話です。なのでFC2ブログで同じ指定しても何も起こりません。

なので、「xxx.html?sp」とあると、Googleとしては、何かパラメータを与えるページだから、「xxx.html」とは別の内容のページだと判断します。でも、実際はテンプレートが違うだけで、同じ内容が表示されるので重複だ!と判断されてしまうわけです。

パラメータが付いているけど、同じファイル名「xxx.html」なんだから、それくらいわかってよと思ったりもしますが、FC2ブログでは自分では書いていないところで、「xxx.html」と「xxx.html?sp」のリンクがあるようで、Googleとしては、あなたのページで分けてリンクつけているでしょ!だからこっちも別ページとして扱います。ということになるようです。

どうのような対応するの?

以前投稿した「別ブログへ記事コピーしたのでcanonicalタグとは何か調べてみました」で紹介したcanonicalをテンプレートに指定することになります。 詳しくは、その記事に記載していますが、簡単に言うと、「URL(A)」は「URL(B)」のコピーですよ!なので、Googleはこのページを無視して「URL(B)」だけを対象にしてくださいね!と指定する方法です。 これを指定しておくと、Googleは、理由があって意図的に重複コンテンツがあるんだな。検索も「URL(B)」だけと言ってるので、「URL(B)」だけ対象にして「URL(A)」が重複していることは気にしないよ。となります。そのため、サイトの評価が下がったり、ペナルティはなくなります。

実際の対応手順は?

テンプレートを修正することになります。※テンプレートを修正する場合は、必ずバックアップを取得して作業してくださいね。FC2ブログではバックアップはとられていないので誤っても、もとに戻すことはできません。

  1. 管理画面にログインします。
  2. 左メニューの「設定」>「テンプレートの設定」をクリックします。
  3. 右側の「スマートフォン用」>「テンプレート管理」をクリックします。
  4. 右側の「[ sky_flow_sp ] のHTML編集」のheadタグ内(何行も記載)に下の内容を貼り付けてください。
    
      
        
      
    
    

    私は「」の行の下に貼り付けました。下のような感じです。</p> <pre> <title><%sub_title> - <%blog_name>

  5. 更新ボタンをクリックします。
  6. 作業としては以上です。PCで「blog-entry-XX.html?sp」にアクセスして、ページ内を右クリックしてソースを表示するとすると、HTMLのソースが表示されます。canonicalが表示されていればうまくできています。

せっかく書いた記事が、FC2のブログの仕様のせいで重複コンテンツとして判定され、Google検索で表示されなかったり、検索結果で最後のほうになったら嫌ですよね。 あらかじめcanonicalが設定されているテンプレートもあるかもしれませんが、いくつか見た中では設定されているものはなかったので、自分で対応する必要があるようですね。。

別の対応としては、テンプレートをPCだけにしてレスポンシブのテンプレートを選ぶというのがありますが、別の機会に書くことにします。

2019/05/14

高圧洗浄機の代わりに蓄圧式噴霧器を使いましたが、かなり窓掃除が楽になったので紹介します!

外側の窓拭き掃除の際に、高圧洗浄機の代わりに蓄圧式噴霧器が活躍しましたのでご紹介します! 高圧洗浄機を購入するかも迷いましたが、いろいろ問題があるので、高圧洗浄機の代わりに蓄圧式噴霧器を使用することにしました。 窓の雑巾がけより、かなり楽に掃除できましたよ!

噴霧器

ケルヒャーなどの高圧洗浄機を使うと楽だとは思うのですが、マンション住まいだと後に記載するようにいろいろ問題があります。。

窓の拭き掃除のやり方の種類

窓ふきをしようと思った際、思いついたのは下記3つの方法でした。それぞれのメリットと、デメリットを考えます。

  • 雑巾がけ
  • 高圧洗浄機の水圧で汚れを取る
  • 霧吹きなどで窓を濡らし、ハンドワイパーで汚れを取る

□先ずは、雑巾がけですが、下記のようなことが想定されます。

メリット:一番コストがかからない。

デメリット:一番労力と時間がかかかる。 窓の外側を掃除する際、雑巾などでの拭き掃除をすると、すぐに雑巾が汚くなります。そして、それをバケツの水で洗うと、水がすぐに汚れてきて、何度もバケツの水をかえる必要があり、結構面倒で疲れます。

□次に、高圧洗浄機です。

メリット:一番簡単に掃除できる。やはり、機械の力は偉大です!

デメリットは、人にもよると思いますが、マンション住まいの私個人では下記のようにいろいろと問題がありました。

  • 高圧洗浄機が高い。マンションなどで、近所迷惑を考えて静穏タイプを選ぶ必要がありますが、物が高いイメージです。
  • 水しぶきがかなりでて、マンションでは両隣、下の階に迷惑がかかりそう。聞いた話では、2階したの家まで結構濡れたということなので、迷惑が掛かりそうです。
  • ベランダに、電気、水道がない。家の中から電気をとる必要がありますが、水しぶきが入ってきそうです。水道も延長の10メートル以上のホースを買えばいいのかもしれませんが、洗濯機の蛇口くらいしか接続できなさそうです。
  • 高圧洗浄機は壊れやすいといった口コミが良くあった。ネットで探していましたが、数回で壊れたという話がよく書かれていました。年に1,2回しか使用しないと想定されるので、壊れているのに気が付いたときは、保証期間が終わっているということがありそうです。
  • 大きいので保存場所に困る。機械なので、ベランダにそのまま放置もできないですが、家の中で保存もしたくないです。

□最後に、霧吹きなどで窓を濡らし、ハンドワイパーで汚れを取る

メリット:コストはあまりかからない。労力は、雑巾がけよりかはかからない。

デメリット:手で霧を吹きかけるのに面倒で、時間がかかりそう。

ということを考え、霧吹きパターンをもっと楽にできないかと考えました。 で、ネットで調べていると、蓄圧式噴霧器というものを見つけましたので、価格も安いのでそちらを購入し、使用することにしました。

蓄圧式噴霧器ってどんなもの?

蓄圧式噴霧器は、あらかじめ人手で容器内の空気を圧縮しておくことで、霧状の水を出すことができるものです。

使用する際、電気は不要で、圧縮も人の手で行い、水の勢いも高圧洗浄機に比べれば全然なので静かで、水しぶきも限られます。

元々は園芸の除草剤をまいたりすることを想定した商品のようですが、電気不要で水の勢いもそこまで強くないので掃除用具として購入する人もいるようです。※これを使用してエアコンのフィンの部分の掃除もできるようです。

耐久性ですが、プラスチック容器なので紫外線をどれだけ浴びているかで変わってくるようです。容器の表面にシールが付いていて、色がこの色になったら使わないでくださいと書かれています。私は、4年前に買って、年に1,2回外で使っていますが、色が変わっておらず、まだ全然使えそうです。

噴霧器5

※紫外線をあびる量なので、家の中での保管がいいと思います。

しまう際のサイズは、縦横20cmで、高さ40cmの箱に収まります。結構コンパクトに収まるので収納も楽です。

蓄圧式噴霧器でどのように掃除するの?

では、実際に窓の掃除を行った際の方法などをご紹介します。

必要な道具は?

蓄圧式噴霧器だけでは、あまり綺麗にはならないので、下記のような道具を使用しました。

掃除道具

  • ハンドワイパー:100円ショップ(ダイソー)で100円で買ってきました。

    ハンドワイパー

  • スポンジ:洗車用の洗剤についていたものです。水を大量に吸い込めるのがいいです。なかったら、雑巾でもいいかと思います。

どのように掃除するの?

全部で7つの工程を行います。多いように見えますが、一つ一つの作業が早いのでそんなに時間はかかりません。

  1. まずは準備です。

    蓄圧式噴霧器に水を入れて、空気を送り込みます。一番上の取っ手を外して水を入れます。水を入れ終わったら取っ手を回してつけます。

    噴霧器3

    取っ手をさらに回すと上にスライドできるようになるので、何度も上下にスライドさせて空気を圧縮します。容器内の空気が限界まで圧縮されると、赤いところから余分な空気を逃がす作りになっています。

    噴霧器1 噴霧器2

    バケツにも水を入れます。こちらの水は、スポンジで使うようです。

  2. 蓄圧式噴霧器から窓にまんべんなく水をかけていきます。管の部分についている、スイッチを押すと水が出る仕組みです。霧吹きよりかはよく出ますが、高圧洗浄機から比べるとかなり非力なものです。

    噴霧器4

    掃除1 掃除7

    この時点でも結構汚れが流れていきます。

    掃除2 掃除3

  3. 次にハンドワイパーで水を切っていきます。

    汚れも、水もすっと取れて、結構楽しいです。

    掃除4 掃除5

  4. この段階でもそれなりに汚れは取れているのですが、乾くと汚れが浮いて見えてきます。

    そのため、水を含んだスポンジで表面を軽くこすっていきます。

    掃除6

    何度かやっていると、バケツの水が汚れて、この作業でも少し汚れが残ります。

  5. また、ハンドワイパーで水を切っていきます。

    掃除4

  6. バケツの水が汚れてきて、スポンジに汚れが付いた水が含まれているので、乾くと少しだけ汚れが浮いて見えます。気にならない方は、ここで問題ないです。完璧をきたすならさらに作業を進めます。

    蓄圧式噴霧器で再度、窓に水をかけます。この段階で、きれいな水でほとんど流れていきます。

    掃除7

  7. また、ハンドワイパーで水を切っていきます。蓄圧式噴霧器内の水は綺麗なので、ここまで来ると本当に綺麗に汚れが取れます。

    掃除8

どれくらいの時間がかかったの?

私のマンションでは、上の写真のような約1メートル四方のガラスが10枚ほどありますが、全部をやるのに40分かからないくらいでした。その間、1回蓄圧式噴霧器と、バケツの水を交換しただけです。雑巾がけなら、バケツの水がすぐ汚くなるのでかなり水替えが必要となる(依然やったのでよくわかります。。。)ため、かなり楽になりました。

窓ガラスの拭き掃除は時間がかかり、面倒なイメージを持っていましたが、蓄圧式噴霧器を使うと、思った以上に効率的に掃除ができ、綺麗にできました。

高圧洗浄機が使用できればそちらのほうが早いとは思いますが、近所への影響や導入コストの面からあきらめている方も多いのではと思います。コストも安いので高圧洗浄機の代わりに蓄圧式噴霧器を使用してみてはいかがでしょうか! ちなみに、私が購入しているものは、下記の商品です。

工進 ミスターオート 蓄圧式噴霧器 4L HS-401E

新品価格
¥1,274から
(2019/5/14 01:22時点)

2019/05/08

衣類スチーマー(スチームアイロン)を買ってみました!安いものでもお手軽でお勧め!

テレビなどで見ることのある、衣類スチーマー(スチームアイロン)ですが、お手軽ということで気になっていました。 先日Amazonのタイムセールで、安い衣類スチーマーがさらに安くなっていたので買いました。意外と使えて便利だったので、注意点を含め書いてみます。

安いものはどうなのか?と思っている方は是非読んでみてください。実際に使ってみた写真もあります。

衣類スチーマー(スチームアイロン)ってどんなもの?

衣類スチーマについて書いてますが、知っている方は読み飛ばしてもいい内容です。

衣類スチーマー(スチームアイロン)の役割

テレビなどでもたまにやっているので知っている方も多いかと思いますが、蒸気を衣類にあててしわを伸ばすことができるアイロンです。通常のアイロンは、熱くなったアイロンを直接衣類にあてながらしわを伸ばしますが、こちらはハンガーなどにぶら下げたままかけることができます。

なぜしわが伸びるの?

小難しいことはよくわかりませんが、衣類は水に濡れるとしわがない状態になりますよね。原理的には同じようなもので衣類を湿らせてしわが伸びるのです。

ただ、ずぶ濡れにすると乾くときにまたしわができるので、高温のスチームにすることにより、衣類に水分が入りやすく、温度が高いのですぐ乾きます。また、高温なのでしわが伸びやすい状態にすることができるようです。

メリットは?

これもよく知られているかと思いますが、下記のような点があります。

  • 普通のアイロンに比べて、早くしわ伸ばしができる状態になります。
  • ハンガーにかけたまましわ伸ばしができます。(アイロン台いらないです)
  • 素早くしわ伸ばしをすることができます。
  • 高温スチームなので衣類をあまり傷めず、防臭、除菌などができます。(水蒸気なので所詮100℃までです。普通のアイロンのほうが高温でダメージが大きいです)
  • ボタンのところのしわ伸ばしが簡単。
  • スーツなどにあててもてからない

デメリットは?

仕方のないことですが下記のような点があるように思えます。

  • 水の補給が必要。
  • 連続しての長時間運手はできない。
  • 普通のアイロンのほうがしわが伸びる。(衣類スチーマでも十分伸びます。やっぱり少ししわは残ります。)
  • ハンカチなど折り目を付けたいものは無理。
  • 端っこのほうに水蒸気を当てようとすると、熱くて手で衣類を引っ張れない。(少しでもよく伸ばそうと少し引っ張りながらやるのですが、裾のあたりは少しやりにくいです。)

利用シーンは?

下記のような利用シーンがあるかと思います。

  • 朝のシャツのしわ伸ばし
  • スーツにしわが寄った際の緊急のしわ伸ばし
  • スーツ・コートがにおう際のにおい消し(コートは素材に気を付けてくださいね!)
  • たぶん、丈夫な靴もにおい消しができるかと思います。

安いやつで大丈夫なの?

さて、気になる安いやつでちゃんとしわ伸ばしできるのか?というところです。

実際に安いものでしわ伸ばししてみました

実際に使ってみましたので、その画像を公開します。

こんな形のものです。高さ30cm程度横幅は20cm位です。

スチーマー1

後ろ側にオレンジ色のスイッチがあります。

スチーマー2

上部のキャップを回すと、水を入れる口が現れます。沸騰中に開けると危険ですが、水がなくなった後であれば、すぐ開けても大丈夫でした。※すぐ給水して再沸騰後使い始めることができました。

スチーマー3

私は100均で買った漏斗を利用して水を入れています。

スチーマー4

衣類スチーマーをかける前の衣類です。しわが結構あります。

スチーマー5

左半分だけかけてみました。大きなしわは残っていますが、小さなしわは消えていて、普通に着る分には大丈夫な程度になりました。

スチーマー6

残り右半分もかけてみました。このまま着ても恥ずかしくはないレベルにできました。

スチーマー7

写真は前面だけですが、慣れてくると長袖のシャツは5分もかからない時間でしわ伸ばしできます。1回の給水でシャツ2枚とちょっとしわ伸ばしできてます。

安いやつでも大丈夫

しわを伸ばすといった機能については、さほど変わらないと思っています。元の水自体に何か入れるのであれば異なるでしょうが、そんなものがあっても中で焦げてしまいそうですし、ランニング費用も掛かってしまいます。なので、この次に書く注意事項を見て、別にこれくらいならいいやという方は全然安いやつでいいと思います。

安いやつの理由は?

当然、安いのはそれなりの理由はあります。

蒸気が出始める時間が少し長い
大手メーカーのものは20秒ほどで出始めるそうですが、私が購入したものは2分ほどかかります。それでもアイロンよりはいいかなぁと思っています。
安全性が少し低い
大手メーカーのものは横に向けて使えるようですが、私が購入したものは中で沸騰した蒸気がそのまま出てくる仕組みなので、横にすると沸騰した水が出てきます。 まぁ、わかっていることなので、特に危なげなく使えています。
常に水蒸気が出続ける
大手メーカーのものはボタンを押している間だけ水蒸気がでますが、私が購入したものは常に出続けています。でも連続して使うので気になりません。
常に同じ量の水蒸気しか出ない
大手メーカーのものは一時的に大量のスチームを出すとかの機能がありますが、私が購入したものはそんなものはありません。この機能は伸びにくいしわがあるときに、ちょっとうらやましいです。

でも下記の点はあまり変わらないかなぁと思います。

使える水の量
大手のものも100mlですが、私が購入したものは200mlです。
使用可能時間
大手のものは7~10分程度ですが、私が購入したものも同じくらいかもう少し長いです。連続して使うと少し購入したほうが長いと思います。

安い衣類スチーマーをお勧めできる方は?

たぶん、一人暮らしとかで、アイロン+アイロン台となると結構場所をとると思ってアイロン買っていない人。 男の一人暮らしに向いていそうですね!とは言え、女性のおしゃれな衣類のしわ伸ばしにも使えると思います。 大量にしわ伸ばしをするのは水の補給とか面倒なので、ぱっと外に出るとき、しわが気になるなぁと思う一人暮らしの人に向いているかと思います。

逆に大手メーカーのものは、安全性や機能性、使い勝手がいいので、朝アイロンをかける忙しい主婦(主夫)に向いているかと思います。

最近はシャツは全部衣類スチーマーでしわ伸ばしをするようになりました。もちろんハンカチなどや、強いしわが入ったものは、普通のアイロンをかけますが、用途に分けて使用するのが一番ですね! 気軽に使うのは衣類スチーマー。完璧を目指すなら普通のアイロンです!あって便利なものなので、皆様も是非購入してみてはいかがでしょうか。

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タグさえあれば動くはずです。

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