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などを使いたい方などは、レンタルサーバを使用するのも手ですね!
※私も、続くようだったら、レンタルサーバにも手を出すかもしれません。(^^)

2019/04/14

ブログ記事内の見出しに背景色や線を付けて読みやすくする。

ブログを見やすくするために、記事内の見出しの文字を装飾して目立たせ、読みやすくしたいと思います。
見出しと、文章がわかりやすく区別できるとメリハリがついて、記事が読みやすくなると思います。

見出し装飾

やりたいこと

下の4つを対応してみたいと思います。

  • 1.見出しの背景に色を付ける
  • 2.見出しの下に線を入れる
  • 3.見出しの左横に縦線を入れる
  • 4.縦線と見出し文字をずらす

前提

  • 過去やこれから書く記事すべてに同じように反映されます。
  • ブログの見出しの文字列はh2タグ(※)が設定されている前提です。このh2タグで囲まれている文字が全部同じように装飾されるように対応します。
    (※)たとえば「文字の装飾」という文字を見出しとすると<h2>文字の装飾</h2>のように記載していることを前提にしています。
    FCブログでは、h2タグを入れるには、「本文の編集」で「W」を押していない状態でできます。「W」が押されている状態だとうまく反映されません。※押されている状態で、さらに「ソース」ボタンが押されている場合はできます。
  • すでにh2タグなどの装飾がされている場合ではうまくいかないときがあります。※装飾されている内容を削除すればできるようになります。

装飾をするための修正箇所

CSSに追記します。FCブログでは、左メニューにある「テンプレートの設定」のリンクをクリックすると右側の下部に表示される「スタイルシート編集」の部分に追記します。

PCとスマホとでレイアウトを分けている人は、PCとスマホそれぞれで追記が必要になります。※PCだけに対応する場合は、PCだけでも大丈夫です。

CSSは、タグなどに装飾(sytle)の定義を記載することができるものです。HTML上のタグへ直接記載することもできますが、全記事で読み込まれる共通のCSSファイルに記載することで、全部の記事に同じように反映されるようになります。※管理画面の「スタイルシート編集」で編集すると、全記事で読み込まれる共通のCSSに反映されます。

事前準備

まずは、背景色を決めます。
ただ、色はブラウザがわかる色を指定する必要があります。下のサイトから使用したい色の名前(英語)、もしくは、色の番号(#000000のような#と6桁の数字)を取得します。
サイト:見本とカラーコード変換
※記載のサイトを開いて、画面上部に表示されている色の箱から設定したい色をクリックすると、該当する色番号が左側に#000000のような感じで表示れますので、控えておきます。もしくは、画面の下部に色の名前(aliceblueなど)が書かれていますので、その名前を控えてください。
もし、サイトがなくなっている場合は、googleで「色 カラーコード」などの文言で検索して確認してください。

「テンプレートの設定」の「スタイルシート編集」の一番下に下記の文字を入力します。
h2 {
}
※この{}内に装飾の設定を記載していきます。

h2タグの装飾

では実際にCSSへ設定を追加していきます。

1.見出しの背景に色を付ける

「テンプレートの設定」の「スタイルシート編集」に追加したh2の設定の箇所が下記のようになるようにします。
※青文字を追加します。
h2 {
background: #e6f8ff;
}
背景(background)の色です。
#e6f8ffが背景色です。この値を変えると色が変わります。

2.見出しの下に線を入れる

「テンプレートの設定」の「スタイルシート編集」に追加したh2の設定の箇所が下記のようになるようにします。
※青文字を追加します。
h2 {
background: #e6f8ff;
border-bottom: solid 3px #00A2b6;
}
下(bottom)の線(border)を指定しています。
#00A2b6が線の色です。この値を変えると色が変わります。ここに色の名前(aliceblueなど)を記載することもできます。
pxは線の太さです。数字を小さくすると細く、大きくすると太くなります。
solidは1本の実線を表しています。doubleだと2本の実線、dottedだと点線、dashedだと破線になります。

3.見出しの左横に縦線を入れる

「テンプレートの設定」の「スタイルシート編集」に追加したh2の設定の箇所が下記のようになるようにします。
※青文字を追加します。
h2 {
background: #e6f8ff;
border-bottom: solid 3px #00A2b6;
border-left: solid 5px #77d2d9;
}
左(left)の線(border)を指定しています。
※設定値は下線と同じです。

4.縦線と見出し文字をずらす

「テンプレートの設定」の「スタイルシート編集」に追加したh2の設定の箇所が下記のようになるようにします。
これを入れないと、左横の線と文字がくっついて表示され見にくいです。
h2 {
background: #e6f8ff;
border-bottom: solid 3px #00A2b6;
border-left: solid 5px #77d2d9;
padding-left: 0.5em;
}
左側(left)にスペースを入れる(padding)します。
0.5emの値を大きくすると、大きくずれます。

最後に保存してもらうと反映されます。

参考

たとえば、下線がいらない場合は、border-bottomの行を書かなければ表示されません。
自分が好きなように装飾をしてみてくださいね!

今回はh2タグでの記載をしましたが、h3タグや他のタグも同じように設定ができますので、気が向いたら設定してみてくださいね。