手軽な標準の横並び機能を使う【基本編】から、object-fitで美しくトリミングする【応用編】まで徹底解説！PC・スマホでの具体的な検証数値を交え、はてなブログでカメラロール風ポートフォリオはどこまで作れるのか限りなく検証します。

はてなブログのトップページで、記事タイトルを2行で省略表示するためのCSSコードを紹介しています。 この方法を使えば、記事一覧ページの表示をすっきりと見やすく整えられます。また、トップページだけでなく、アーカイブページにも適用可能です 。

はてなブログのHTML構造をまとめました（偉大なる先輩方の記事を元に2025年現在向けに一部加筆修正しました）。はてなブログのデザインカスタマイズの際にお役に立てれば幸いです。

囲み枠(ボックス)のHTMLコード25種類を掲載。①特定のテキストにだけ囲み枠をつけたい、②特定の記事内でのみ共通の囲み枠デザインを使いたい、③とにかく暫定的に使いたい場合にオススメです。

主に①公式サイトからダウンロードした素材、②Font Awesome、③文字コード「U+1D54F」、④SVG形式の画像を使う方法を解説しています。

display: tableを使ったグローバルナビゲーションの作成手順とデザイン（4種類）の紹介をしたいと思います。

はてなブログで［見たまま・HTML・CSSのみ使用］でコードブロックを書く方法を考えてみました。第2回目は「コードブロック（行番号なし）」。

はてなブログで［見たまま・HTML・CSSのみ使用］でコードブロックを書く方法を考えてみました。第1回目は「行番号付きコードブロック」。

はてなブログの表組関連の記事を書くにあたって検証をしたテーマ27個についてのデータを表にまとめてみました。

はてなブログでは表組も挿入することができる。今回は、はてなブログの表組表示パターン（計4種類？）と問題の検証と解決策について解説。

表組デザインだけを修正したい時に使えそうなHTMLコードを掲載（外部CSSやheadタグ内の更新必須ではありません）。

はてなブログの「HTML編集」モードにコピペすれば大体完成する表組のHTMLコード5つを載せています。コピペ後に文字だけ打ち変えればそのまま使うこともできます。

はてなブログの写真キャプションを調整する（左揃え・行間を詰める）HTMLコードを掲載。デザインCSSの変更なし。直したい画像にだけ使えます。

台本風の見出しデザインのHTMLコードを掲載。［会話形式の吹き出し］［アイコン付き吹き出し］の代わりに自分用に作ったページともいいます。。。