はてなブログは「続きを読む」を自分で入れるよ！スマホ版は要注意
はてなブログを利用中の方、「続きを読む」ボタン、出てますか？？
前回、スマホ版でデザインを変える方法を記載しましたが、
デザインを変えたことにより、「続きを読む」ボタンを使用していない方のブログには問題が起きている可能性があります。
スマホデザインの変更については下記記事参照
それは、「サイトのホームを見ると、今まで書いた記事が全部表示されている」という状態。
自分のサイトのホームを見て、先程の画像のようになっていなければ、この記事の手順を実施しましょう！
なぜ記事がすべて表示されているのか
実は、はてなブログにおいて、「続きを読む」ボタンは自分で定義しないといけません。
記事を書く中で、このボタンを使って追加しないといけませんでした。
ですが、プレビューなどで「記事としてのチェック」になってしまうと、「続きを読む」というボタンの存在は忘れがちになっていきます。。。
実際自分も、記事の形ばかり気にしていました。。。
更に、スマホでみることが多い人にとって、無料版のはてなブログは余計なおせっかいをしています。。。
スマホで見ていると気づきにくい
もともと、無料版のはてなブログでは、スマホ版は以下のような表示となっています。
この見た目が、スマホ版でのデフォルトデザインなのでしょう。
このおかげで意識せずとも、記事の一覧が見やすい状態にはなっています。
ですが、実はPCから見るとそうではなく、記事が延々と記載される状態になっていました。
つまり、最初からブログで問題は起きていたんです。
レスポンシブデザインを適用することで、PC版との違いがなくなるため、発覚する。というわけです。
具体的な手順
それでは、実際にボタンを配置していきましょう。
記事を作成する
まずは、普通に記事の作成をしてください。
「続きを読む」ボタンの挿入
記事を公開する前に、ボタンを挿入したい箇所にカーソルを移動させ、以下のボタンをクリックしましょう。
横の線がこのようにカーソル位置から記入されると思います。
それが、「続きを読む」ボタンが配置される位置になります。
「プレビュー」で確認してはいけない
最後にプレビューで記事の確認をして終わり！ではいけません。
先程も書いていますが、「サイトのホーム」から見て、きちんとボタンが出ていることを確認しましょう。
もしかすると「これだとボタン押さないんじゃないかな・・・」と思うかもしれませんよ。
まとめ
うまくボタンの追加できましたか？
これで、読者に優しい記事一覧が作成できたと思います。
意外と忘れがちなので、記事の公開後、ホームでの確認は忘れずにやりましょう！
以上、ありがとうございました。
良ければツイッターのフォローをお願いします！
