読み込み中です…
トピックのまとめ
Markdownで作成したノートやチュートリアルを、視認性の高いカード形式で紹介できます。
はじめてのMarkdownサイト
Markdown Webサイト制作サンプル
このテンプレートは、MarkdownファイルをHTMLに変換して公開するための最小構成です。文章を書くことに集中しつつ、Webページとして見やすく整った状態で配信できます。下のテンプレート例を参考に、必要なブロックだけ残して自由にカスタマイズすることができます。
まずはレイアウトを崩さずにテキストを書き換えてみましょう。慣れてきたらCSSを編集して、自分だけのデザインに仕上げてください。
3カラムのカード例
用途に合わせてカードを複製・削除してください。画像は`articles/images`内のファイルに差し替え可能です。
テンプレート配布
テンプレートの使い方やカスタマイズTipsを3ポイントに分けて掲載すると便利です。
更新情報
新しい記事やバージョンアップの内容を短くまとめて表示できます。
ストーリー形式の紹介
1. アイデアをまとめる
文章の骨組みをMarkdownで作り、見出しごとに役割を決めます。必要に応じて画像の差し込み位置もメモしておきましょう。
2. テンプレートに差し込む
`articles`フォルダにファイルを保存すれば、ページ上で自動的に整形されます。必要に応じてこのブロックを複製してください。
3. デザインを整える
`css/style.css`で色や余白、角丸を調整すると雰囲気が変わります。落ち着いた色味で統一すると安心感のある仕上がりになります。
画像と文章の組み合わせ
見やすい構成で魅力を伝える
左側にビジュアル、右側に詳しい説明文を配置する定番レイアウトです。サービス紹介やプロジェクトの背景説明に向いています。
ボックス全体の背景色を変えたい場合は`panel-soft`クラスを参照し、CSS側で色を調整してください。
画像ギャラリー
モザイク状のレイアウト
プロジェクト概要
幅広スペースに経緯や目標をまとめることで、はじめて訪れた読者にも伝わりやすくなります。
スケジュール
短いリストや箇条書きで進捗を整理できます。必要ならリストやボタンを追加してください。
フッタ位置に画像や補足資料を置いて、閲覧者の想像を助けます。ここにリンクボタンを追加するのもおすすめです。