msshにブログをつくりました。一覧と記事のページを用意して、文章を書くために必要なものから始めます。
一覧に並ぶのは記事のタイトルと日付だけ。記事を開くと、見出しと本文が続きます。余白や文字の大きさを調整して、短いメモも長い文章も同じ場所に収められる構成にしました。
一覧では、記事を見渡す
タイトルを左に、日付を右に置き、記事の間を細い線で区切っています。画像を用意しなくても記事を追加できるので、文章だけで書きたいときにも使えます。
スマートフォンでは、タイトルの下に日付を並べます。横に並べたままだと、長い日本語のタイトルを置く幅が足りません。日付を別の行に移して、タイトルを自然に折り返せるようにしました。
本文は、一つの流れで読む
PCでは左にナビゲーション、右に本文を置いています。本文の幅を絞り、段落の間に余白を取ることで、次の行や段落を追いやすくしています。
スマートフォンではナビゲーションをページの上へ移し、本文を一列で表示します。画面の左右に余白を残しながら、文章に使える幅を確保しました。
Markdownで書く
記事はMarkdownファイルで管理します。ファイルの先頭にタイトルや日付を書き、その下に本文を続けます。この形式なら、いつものテキストエディターで記事を書けます。
---
title: 文章を書くために、ブログの構成を小さくする
description: msshのブログの構成と、記事の書き方について。
pubDate: 2026-10-02
draft: false
---
ここから本文を書きます。
## 見出し
空行を挟むと、新しい段落になります。draft: trueにすると、一覧にも詳細ページにも出力されません。書きかけの記事を残しておき、公開する前に本文を整えられます。
画像を添える
本文の途中に写真やスクリーンショットを入れるときも、Markdownに一行追加します。冒頭の一覧画像は、この書き方で挿入しました。
角括弧には画像の内容、丸括弧には画像ファイルへのパスを書きます。画像は本文の幅に収まり、スマートフォンでも縦横比を保って表示されます。
デザインや実装の話は、このブログへ。制作実績はポートフォリオへ。それぞれのページに合う形で、少しずつ記録を増やしていきます。