Blogger 追記機能の方法+αカスタマイズ

『続きを読む』や『Read more』など、記事を折りたたむ追記機能。このブログでも使っているのですが、メインページがスッキリするのが良いですよね。

と言うわけで、Bloggerでの設置方法とちょっとした追記機能のカスタマイズをご紹介します♪

1. まずは追記機能を使って記事を書こう！

追記機能は記事投稿の際に画像の赤く囲った部分のアイコンを押すだけ！
上の画像のように点線が現れ、点線から下が追記記事となります。

HTMLで書く場合は追記機能のアイコンが無いので、その場合は以下のように書けば追記記事を書くことができます。

<!--more-->

2. 追記機能の詳細設定

追記記事へのリンク文字を変更したい時はレイアウト→ブログの投稿を編集で行うことができます。
ちなみにこのブログだと『Read more』に変更しています。

CSSでデザインを変更したい場合は.jump-linkにデザインを追加すればOK！

3. 追記機能+α設定『続きを読む』をクリックで1記事の一番上から表示をさせよう！

追記機能を使った場合、『続きを読む』をクリック後は追記機能を入れた下の部分へページ内リンクがされます。
ただ、私のブログの場合だと、追記機能の下は画像であることが多いわけです。クリック後、上のように画像がどーん！と出たのでは「あれ、何の記事をクリックしたんだっけ？」なんてことになって分かりづらいのでは無いかと思い、記事タイトルも見えるようにページの一番上から表示させるように変更をしました！

ここからは記事の一番上から表示をさせる方法になります！

目指すは上の画像のようにブログの一番上、記事のタイトルが見えるように表示させることです！

追記記事のリンクは通常"1記事のURL#more"となっています。

例：https://nontic-blog.blogspot.jp/2014/01/photoshop.html#more

(追記記事へのリンクを押した際のURLを見てみると分かるよ！)
この末尾の #more が追記記事部分へジャンプリンクをするように指定をしているんですね。
となったら、#moreを取ってしまえば1記事へのリンクになるはず！

では、#moreを取るにはテンプレート→HTMLのカスタマイズで行います。
"data:post.url + "#more""
を検索(Ctrl+F)で探します。（タグの<>なんかは特殊文字コードで記述されていたと思うので『data:post.url』とかで検索すると良いと思います。）

見つかったら以下のように変更します。+以下を取っちゃってください。

"data:post.url"

"#more"を消すことで追記記事部分へページ内リンクはされずに、1記事へのリンクになりページの一番上から表示されるようになります☆

※テンプレートを変更する前にバックアップはとっておいてね。

https://nontic-blog.blogspot.com/2014/03/blogger.htmlBlogger 追記機能の方法+αカスタマイズ