サイドバーに記事ランキングやカテゴリがあります

EXVS2_投票型機体ランク
(20/9/16更新)

機体ランク掲載サイトまとめ
(20/9/3更新)

EXVS_大会結果まとめ
(20/9/3更新)

FPSフリークはマジでいいぞ

スポンサーリンク
レイアウト

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

レイアウト
この記事は約2分で読めます。
スポンサーリンク

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

 ====

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

🔷使う理由

はてなブログはデフォルトだと全文形式になっています.全文形式であるとブログのトップ画面(記事一覧画面?)にその記事の全文章がズラズラと羅列されとても見にくくなってしまいます.(図.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カラム表示する方法については後日記事にしたいと思います.

以上となります.

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

0

コメント

広告のデバッグ出力

広告がページに表示されます

現在の投稿: 記事の折りたたみ方【続きを読む】, ID: 45

広告: ヘッダーに挟む広告 (2025)
配置: main-before (main-before)





マニュアルで解決策を見つけます
タイトルとURLをコピーしました