世界中の友人に僕の私生活を知ってもらうためののWebサイトを作る
背景。
やること
1. サイトのコンセプトを明確にする（Why & What）
Noteとの役割分担の再確認:Note (日本語): 公開範囲の広い、体系的な文章、特定のテーマに関する深い考察など。
atsuki.asia (英語): よりその翻訳。写真や作ったコードも載っける。実績や学習記録とかも
コアとなるコンテンツ形式の決定:
・ヘッダー写真
・タイトル
・ブログ記事（文章）
・写真集/ギャラリー（旅行、イベント）
・短い近況報告（Twitter/Xより長く、ブログより短い）
・シェア機能
・コメントはスパムくるのでオフにする。
・問い合わせページ
2. Web Siteの必要な機能とページ構成の洗い出い
国際的な友人がアクセスすることを念頭に置く。
言語 ：デフォルトは英語。いずれ多言語対応させる。
基本ページ About Me / Profile: 詳細な自己紹介。
Contact: 連絡方法（SNSのリンク、メールフォーム）。
「Now」ページ: 今熱中していること、住んでいる場所、次に予定していることなど。 欧米の個人サイトで人気のページ形式らしい。近況をコンパクトに伝えるのに最適。（Nowのワードプレスのページ更新されたら、ScrapBoxやDIscordにも更新させるのよさそう。パブリック公開しているとAIで拾いやすいし。）
コンテンツ Blog / Updates: メインの投稿エリア。
Gallery / Photos: 写真に特化したページ。 WordPressのギャラリー機能で良い
プライバシー アクセス制御の検討 世界中の友人に向けたものですが、私生活なので、ごく一部の親しい友人限定の記事はパスワード保護（プラグインで実装可能）を検討しても良い。大学のゼミ内の話とか、簡単な共有とかに使っても良さそう。即時パスワード発行とかは便利かな。（まあ漏れても困らない情報範囲かな。Googleのリンク知っている人のみ閲覧でも困らないから、nice to have枠）
テーマ・テンプレートの決定
「シンプルさ」「スピード」「モバイル対応」を最優先。
モダンなテーマの選択:Astra / GeneratePress / Neveなどの高速でカスタマイズ性の高いテーマ。WordPressのブロックテーマ（FSE：Full Site Editing）：最新のWordPressの編集機能にフル対応しており、コーディングなしで全体のデザインを自由に決められるらしい
デザインコンセプト:
友人が気軽にアクセスできる、クリーンでごちゃごちゃしていないデザイン。
写真は大きく、文字は読みやすく。
実行と実装（手を動かす）
洗い出しと設計が終わったら、いよいよ構築に入ります。
サイトの完全リセットとクリーンインストール（
「記事を消す」「設定をリセット」よりも、完全にクリーンな状態からの再スタートを推奨します。
バックアップ（念のため）: 既存のサイトの状態を丸ごとバックアップしておきます。（必須ではありませんが、安心材料として）
既存データの削除: レンタルサーバーの管理画面から、tatsuki.asiaに紐づいたWordPressのファイルとデータベースを完全に削除します。
WordPressの新規インストール: サーバーの自動インストール機能を使って、英語設定でWordPressを新規インストールする。 これで過去の設定や日本語のゴミデータが一切ない、まっさらな状態からスタートできます。
2. 初期設定とセキュリティ
クリーンインストール直後に、基盤を固めます。
言語設定: Settings → General でサイトの言語を英語に設定。
テーマはCocoonで良いかと思ったが、英語圏なら Astra、GeneratePress、Neveが英語圏でで実績があり、英語サイトでの利用を前提としたテーマらしい。
Astra / GeneratePress / Neve 海外で最も人気があり、高速で軽量なテーマ。デザインはブロックエディター（Gutenberg）で自由自在にカスタマイズ可能。 【最優先推奨】 これらは英語サイトでの利用が前提で設計されており、非常に高速で、余計な機能がないためシンプルです。あなたの求めている「Nowページ」のようなモダンなデザインも容易に実現できます。
https://scrapbox.io/files/69479ff4320191848539424a.png
比較動画見た。Elementor最速のテーマはこれ！【Googleのスピードテストで100点出す！】
Elementorと使うべきテーマ9選！【じゃないとサイトが遅くなります
参照した。
プロじゃないのでGeminiに聞いた
僕の今回の機能なら何がいいかな？CSSとかコード組めるならGeneratePressかな？わからない
結論から言うと、「CSSやコードが少しでも書ける（または抵抗がない）」のであれば、GeneratePress が圧倒的におすすめです。 理由省略
だったのでGeneratePress で１から構築する。
Site Identity
Site Title ：Tatsuki Mitsuhashi Official
Tagline ：My Personal Log of Global Journeys, Code, and the Search for Utopia.
Logo：Icon
Layout
Container ページ全体の横幅と、箱の作り方を決める場所
Container Width 1100px
Content Layout ：Separate Containers
Container Alignment： text
Header
Header Preset Navigation Before / After 系
Header Width→ Full
Inner Header Width→ Contained
Header Alignment→ Left （モバイルで自然）
Primary Navigation
Navigation Width→ Full ナビの背景は画面いっぱい＝スマホでもタップしやすい
Inner Navigation Width→ Contained 文字（メニュー）は本文と同じ幅。ガタガタしない
Navigation Alignment→ Left 👉 英語は左始まりが自然
Navigation Location⇨Below Header
Navigation Drop-down→ Hover👉 PCではマウス、スマホではタップで開く
Drop-down Direction→ RightEnable navigation search modal
Sidebar
Sidebar Layout→ No Sidebar
Blog Sidebar Layout→ No Sidebar
Single Post Sidebar Layout→ No Sidebar
Footer
Footer Width→ Full（そのまま）
Inner Footer Width→ Contained（そのまま）
Footer Widgets→ ❗ 0 に変更（今 3 になってる）
Back to Top Button→ Disable（そのまま）
Colours は一旦そのまま
Typographyそのまま
General（
Icon Type→ SVG（最軽量・正解）
Underline Links→ Always（正解）
Cache dynamic CSS→ ✅ ON（速くなる）
Menus
Header-Menu
code:HeaderMenu
Home
About
Now
Work
Blog
Gallery
Contact
にする。
Widgets 置く場所も、置く理由もない
Homepage Settings
your homepage displays ✅ Your latest posts
Additional CSS →今後
一旦最低限の設定できた。充電切れそうなので、一回チェンマイのホステル戻って充電する。
https://scrapbox.io/files/6947aeb3ccde96a2fd534080.png
英語のポスト一つ作れた。進出英単語もまとめた。めっちゃ勉強になる。
Wordspressのコメント欄にスパムが600件ほど来ていたので、この機能を消す。
https://scrapbox.io/files/6947c3ea657d71cb8e1b4359.png
code:コメント消す
① この画面でやること（今見えている Posts 画面）
一番上のチェックボックス（タイトルの左）をクリック
→ すべての投稿が選択される
上の Bulk actions（一括操作） をクリック
Edit（編集） を選ぶ
Apply をクリック
② 一括編集画面でやること
Comments を探す
Do not allow を選ぶ
Update をクリック
👉 これで 今ある全投稿のコメントが全部オフ になります
↑英語でリンク書くと日本語で書いた時の％！％！％）みたいにならないから端的でいいね。
https://scrapbox.io/files/6947c43c2ceb6422e0b535d1.png
できた！あれ、でもブログのところにブログ記事がないぞ。
code:原因はこれ
原因（ほぼ確定）
「Blog」ページが “投稿一覧ページ” として設定されていない 状態。
WordPressは
👉「ブログ一覧に使うページ」を自分で指定しないと、空白になる。
いまのスクショは
見た目：Blogページは表示されている
中身：どの投稿を出すか指示されていない
という状態。
解決方法（1分・超重要）
手順
管理画面 左メニュー
Settings → Reading
Your homepage displays を探す
以下のように設定👇
Your homepage displays: A static page
Homepage:（ホーム用のページ or 空でOK）
Posts page: Blog
Save Changes
https://scrapbox.io/files/6947c4a92ceb6422e0b538a8.png
上記のようになっていたので
code:変更
Reading Settings をこう変える
いまの画面で👇こうする。
① 上の設定
❌ Your latest posts
✅ A static page
② 下のプルダウン
Homepage：
→ Home（なければ空でもOK）
Posts page：
→ Blog
③ Save Changes
にした。
https://scrapbox.io/files/6947c559593a300de337b64f.png
できた。でも表示をタイトルと日付だけにしたいね＞
by tatsuki3284は全ての記事がそうだし。
ファイルとタグもいらない、文章少しもいらない。あと、投稿ごとのアイキャッチというか画像設定がなかったからそれも入れたい
code:修正
ゴール（完成形）
ブログ一覧ページをこうする👇
✅ 表示するもの
タイトル
日付
アイキャッチ画像
❌ 表示しないもの
by tatsuki3284
カテゴリ（フォルダ）
タグ
抜粋（Read more / 文章）
① 「by tatsuki3284 / カテゴリ / タグ」を全部消す（1分）
GeneratePress側で一括オフできる。
手順
Appearance → Customize
Layout → Blog
下の方にある Post Meta を探す
チェックを 全部オフ👇
Author
Categories
Tags
Comments（あれば）
👉 これで
by tatsuki3284 / フォルダ / タグ表示は完全に消える
② 文章（抜粋）を一切出さない（30秒）
同じ画面で続けて👇
Content Type or Blog Content を探す
Excerpt → ❌
Full Content → ❌
もしくは
Excerpt length = 0
👉
「Read more」
本文のチラ見せ
全部消える
③ タイトル＋日付だけ表示する（30秒）
同じく Customize → Layout → Blog
Display post date → ✅ ON
Display post title → ✅ ON
他は全部 OFF でOK。
④ アイキャッチ画像を入れられるようにする（超重要）
まず：記事ごとに画像を設定
Posts → Edit（記事を開く）
右サイドバー
Featured image（アイキャッチ画像）
画像をアップロード or 選択
Update
※ 画像は
横長（1200×630 目安）
文字なし or 少なめ
が読みやすい
次に：一覧で表示する設定
Appearance → Customize → Layout → Blog
Featured Images → ✅ ON
Location → Above Title
Width → Full（おすすめ）
ここまでで完成する見た目
ブログ一覧はこうなる👇
How I'm Attending a Four-Year University for Free
2025/12/21
他の情報は一切出ない。
静かで、強い。
もし「Blog に何も出なくなったら」
それは設定が強すぎただけ。
その場合は👇だけ戻す。
Featured image → ON
Title → ON
下の方にある Post Meta を探す→どこ？ってなった。
https://scrapbox.io/files/6947c559593a300de337b64f.png
らしい。
code:原因
そのスクショを見る限り、
👉 GeneratePress 無料版では「Post Meta」は表示されない／触れない
👉 左に出ている
「More options are available in our premium version」
＝ Author / Categories / Tags をUIで消すのは有料版だけ
だから
「探しても出てこない」＝ あなたの操作ミスじゃない。
じゃあどうする？（無料で完全に解決できる）
方針
UIではなく
CSSで強制的に非表示
安全・一瞬・壊れない
code:CSSで強制的に非表示
/* 投稿一覧：著者・カテゴリ・タグ・コメント数を非表示 */
.blog .entry-meta .author,
.blog .entry-meta .cat-links,
.blog .entry-meta .tags-links,
.blog .comments-link {
display: none;
}
/* 抜粋（本文・Read more）を非表示 */
.blog .entry-summary {
display: none;
}
/* 記事ページ側：著者・カテゴリ・タグだけ非表示（日付は残す） */
.single .entry-meta .author,
.single .entry-meta .cat-links,
.single .entry-meta .tags-links {
display: none;
}
/* 日付横の "by" だけを消す */
.entry-meta .byline {
display: none;
}
https://scrapbox.io/files/6947c66b53b1cf84931c9027.png
https://scrapbox.io/files/6947c67223d19450a7f90dd3.png
次はアイキャッチ、サムネイルを増やす
Appearance → Customize → Layout → Blog
Featured Images → ON
Location → Above Title
※ それでも出なければ
記事編集画面で Featured Image が未設定
これでそもそも無料版だからできなかった。年間$59、買い切り$249はなしだな。
選択肢B（無料・CSSで強制表示）
※ やや中級、今日は無理しなくていい
CSSで
.post-image を無理やり表示
テーマ更新で崩れる可能性あり
code:アイキャッチ強制表示
/* ===== ブログ一覧にアイキャッチ画像を強制表示 ===== */
/* アイキャッチ画像を表示 */
.blog .post-image,
.blog .featured-image {
display: block;
margin-bottom: 1.2em;
}
/* 画像を横幅いっぱいに */
.blog .post-image img,
.blog .featured-image img {
width: 100%;
height: auto;
display: block;
}
/* 本文（抜粋）を完全に非表示 */
.blog .entry-summary {
display: none;
}
/* カテゴリ・タグ・著者などメタ情報は非表示（日付は残す） */
.blog .entry-meta .author,
.blog .entry-meta .cat-links,
.blog .entry-meta .tags-links,
.blog .byline {
display: none;
}
できた。やった！ただ大きいね。写真の大きさ関係なく、合う感じにzoomしてトリミングする設定するぞ。
https://scrapbox.io/files/6947c99967d0046f23769124.png
code:追記
/* アイキャッチ画像をトリミングして統一表示 */
.blog .post-image img,
.blog .featured-image img,
.single .post-image img,
.single .featured-image img {
width: 100%;
height: 260px; /* ← 高さはここで調整 */
object-fit: cover; /* 重要：ズーム＆トリミング */
object-position: center;
}
code:ブログ一覧のタイトルを小さくする
.blog .entry-title {
font-size: 1.0rem;
}
だいぶよくなってきた
https://scrapbox.io/files/6947cc7355ba5051d9411ed2.png
タイトルの日付をもっとバランスよく小さくしたいね。ブログ一覧のところ、 あと下記の枠大きすぎるから幅小さくしたいねと思う。
https://scrapbox.io/files/6947cc88158ac48d4a5b8801.png
code:タイトルの日付を小さく、
/* =========================
Blog一覧：日付を小さく・控えめに
========================= */
.blog .entry-meta {
font-size: 0.8rem; /* 日付を小さく */
margin-bottom: 0.2em;
}
code:ブログ一覧の「タイトル」をもう一段だけ締める（微調整
.blog .entry-title {
font-size: 1.0rem;
line-height: 1.45;
margin: 0.1em 0 0.3em;
}
code: /* Blog一覧：白い囲い（記事カード）の上下余白を詰める
/* Blog一覧：白い囲い（記事カード）の上下余白を詰める */
.blog .inside-article {
padding-top: 11px;
padding-bottom: 11px;
}
1. Header / Hero（世界観）
2. Banner（今伝えたい1点）
3. Books（書いていること）
4. Dream Place（作ってきた場所）
5. Blogs（考えていること）
6. Profile（誰か）
7. News（外向き実績）
8. Contact（連絡）
9. Social（つながる）
10. Copyright
② 「Home」をクリック
👉 タイトルが「Home」の固定ページ
これが
トップページそのもの。
③ 右上の「Edit（編集）」を押す
→ ブロックエディタ（Gutenberg）が開く
ここで👇
見出しを足す
画像を置く
カラムを組む
全部できる。
って指示があるのだが、英語は英語で覚えていて、言われてもわからないから、指示すら英語にしてもらったほうが助かる笑