シュンクマのブログ

ゲームの紹介や考察,ガジェットのレビューをしていきますヾ(*´∀`*)ノ

記事の折りたたみ方【続きを読む】


記事の折りたたみ方【続きを読む】記事の折りたたみ方【続きを読む】
「続きを読む」記法で記事を折り畳み,ホーム画面をスッキリさせることが出来ます.

 

 ====

"続きから読む,記事を折りたたむ"といったような効果があり,クリックでその記事を読むことが出来るようになる手法です.

 

🔷使う理由

はてなブログはデフォルトだと全文形式になっています.全文形式であるとブログのトップ画面(記事一覧画面?)にその記事の全文章がズラズラと羅列されとても見にくくなってしまいます.(図.1)

見にくいのでやめたいとは思うのですが,はてなブログでは無料会員であるとトップ画面の表示形式が全文形式しか選択肢がありません.

 

そこで「====」を挿入することで見にくい全文形式と擬似的にサヨナラすることが出来ます.(図.2)

(現在はカード形式に則ったテーマを使うことで回避できるかもしれませんが,現状分からず.)

 

f:id:shun9ma:20190720200605p:plain

図1.全文形式による擬似的なブログのトップ画面 

 

f:id:shun9ma:20190720201500p:plain

図2.折り畳まれた記事

 

🔶使い方

記事の先頭付近で,トップに載せたい情報までの下に「====」を付けることでその下が折り畳まれます.

トップ画面にはそこまでの情報しか記載されないので,全文形式よりスッキリとたくさんの記事をホームに表示することができ,更にサムネと概要文のみをトップに記載することができます.(図.3と図.4)

 

ちなみに記事に対して1つ目の「====」のみが記法として適用され,記事には「====」自体は表示されません.

2つ目以降の「====」は適用されず,文章として記事に載ってしまいます.

 

f:id:shun9ma:20190720193247p:plain

図3.折り畳みの活用

f:id:shun9ma:20190720194411p:plain

図4.トップ画面での表示

 

ここで1つ注意なのですが,続きを読む記法では図.2の状態までにしかなりません.

通常ではブログタイトルの下から記事が縦に1つずつ並んだ状態(= 1カラム)なのですが,私のブログではそこから

・横に記事が2つずつ並ぶテーマを設定

・デザインcssを追加して記事とサイドバーが平行している状態(= 2カラム)の設定

をしてあります.(図.4の状態)

 

2カラム表示する方法については後日記事にしたいと思います.

 

以上となります.

記事を読んでいただきありがとうございました!