このサイト（Sil-port）は、WordPress テーマ「SWELL」と子テーマだけで作っています。プログラマーではない私が、生成 AI と対話しながら手を動かした記録として、実際に使っているコードをコピペできる形でまとめておきます。同じように「テーマは好きだけど、もう一歩デザインを作り込みたい」人の参考になれば嬉しいです。
- カスタマイズはすべて子テーマ側で行う。親テーマは触らない
- 配色・フォントは CSS 変数の上書きだけでモノトーン化できる
- 英字見出し・スクロールアニメ・流れる文字は、この記事のコードをコピペで再現可能
なぜ「子テーマ」でやるのか
SWELL のカスタマイズは、必ず子テーマで行います。理由は 2 つ。親テーマを直接書き換えると、テーマのアップデートで変更がすべて消えること。そして子テーマなら、失敗しても style.css を元に戻すだけで復旧できることです。子テーマは SWELL 公式サイトで配布されているので、それをそのまま使います。
子テーマの構造は 3 ファイルだけ
最終的に、このサイトの子テーマは次の構成になっています。
swell_child/
├── style.css ← デザインはすべてここに書く
├── functions.php ← ファイルの読み込みなど
└── js/
└── main.js ← アニメーション用（任意）functions.php には「子テーマの CSS と JS を読み込む」処理だけを書きます。ポイントはファイルの更新日時をバージョン番号にすること。これでブラウザキャッシュに悩まされなくなります。
<?php
// functions.php — 子テーマの CSS と JS を読み込む
add_action('wp_enqueue_scripts', function() {
// style.css（更新日時をバージョンにしてキャッシュ対策）
$css_time = date('YmdHis', filemtime(get_stylesheet_directory() . '/style.css'));
wp_enqueue_style('child_style',
get_stylesheet_directory_uri() . '/style.css', [], $css_time);
// js/main.js（あれば読み込む）
$js_path = get_stylesheet_directory() . '/js/main.js';
if (file_exists($js_path)) {
wp_enqueue_script('child_main',
get_stylesheet_directory_uri() . '/js/main.js',
[], date('YmdHis', filemtime($js_path)), true);
}
}, 11);手順 1：配色とフォントをモノトーン化する
SWELL はサイト全体の色やフォントを CSS 変数（カスタムプロパティ）で管理しています。つまり、子テーマの style.css で変数を上書きするだけで、サイト全体の空気が変わります。
:root {
/* 配色をモノトーンに統一 */
--color_main: #000000;
--color_text: #000000;
--color_htag: #000000;
--color_bg: #ffffff;
--color_link: #1176d4;
/* フォントと文字間隔 */
--swl-font_family: "游ゴシック体", "Yu Gothic", YuGothic,
"Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
--swl-font_family-en-ja: "Roboto", "Helvetica Neue", Helvetica, Arial,
"游ゴシック体", "Yu Gothic", sans-serif;
--swl-letter_spacing: 0.1em;
/* 角丸をなくしてフラットに */
--swl-radius--2: 0px;
--swl-radius--4: 0px;
}
/* 文字詰めとリンク下線なし */
* { font-feature-settings: "palt"; }
a { text-decoration: none; }カスタマイザーで同じ値を設定しておくと、ブロックエディターのプレビューとも一致します。
手順 2：英字の大きなセクション見出し
トップページの「About.」「Blog.」のような見出しは、SWELL 標準の見出しスタイル「セクション用」に、追加 CSS クラス -en を付けて実現しています。
/* 見出しブロックのスタイル「セクション用」+ 追加CSSクラス「-en」 */
.post_content .is-style-section_ttl.-en {
font-family: var(--swl-font_family-en-ja);
font-size: clamp(3.2rem, 9vw, 5rem);
font-weight: 600;
letter-spacing: -0.04em;
line-height: 1.2;
margin: 0 0 0.5em;
}
/* 日本語の小さな添え書き */
.post_content .is-style-section_ttl.-en small {
display: block;
font-family: var(--swl-font_family);
font-size: 0.35em;
font-weight: 500;
letter-spacing: 0.1em;
padding-top: 0.5em;
}
/* ブランドのドット（グレー） */
.post_content .is-style-section_ttl.-en .__dot { color: #b5b5b5; }エディター側では、見出しブロックを「HTML として編集」して次のように書きます。
<h2>About<span class="__dot">.</span><br>
<small>このブログについて</small></h2>手順 3：スクロールで現れるアニメーション
要素が画面に入ったらふわっと表示する定番の演出は、IntersectionObserver という標準 API だけで作れます。ライブラリは不要です。
// js/main.js — スクロールで要素が現れる
(function () {
// JSが動く環境にだけ印を付ける（動かない環境で非表示のままを防ぐ）
document.documentElement.classList.add('js-on');
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add('-inview');
io.unobserve(entry.target);
}
});
}, { rootMargin: '0px 0px -15% 0px' });
document.querySelectorAll('.-observe').forEach(function (el) {
io.observe(el);
});
})();/* 追加CSSクラス「-observe」を付けたブロックがふわっと現れる */
.js-on .-observe {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.js-on .-observe.-inview {
opacity: 1;
transform: none;
}
/* 「視差効果を減らす」設定の人にはアニメーションを出さない */
@media (prefers-reduced-motion: reduce) {
.js-on .-observe { opacity: 1; transform: none; transition: none; }
}使い方は、任意のブロックの「追加 CSS クラス」に -observe と書くだけ。JS が無効な環境では最初から表示され、OS の「視差効果を減らす」設定にも対応しています。
手順 4：流れる巨大アウトライン文字（マーキー）
セクションの背面などで文字が延々と流れる演出も、CSS アニメーションだけで実装できます。テキストを 2 回並べて半分だけ動かすと、切れ目なくループします。
<div class="my-ticker" aria-hidden="true">
<div class="my-ticker__track">
<span class="my-ticker__item">Your Site Name — Tagline Here · </span>
<span class="my-ticker__item">Your Site Name — Tagline Here · </span>
</div>
</div>.my-ticker {
overflow: hidden;
width: 100vw;
margin: 1rem calc(50% - 50vw);
padding: 2rem 0;
}
.my-ticker__track {
display: flex;
width: max-content;
animation: ticker-slide 42s linear infinite;
}
.my-ticker__item {
white-space: nowrap;
font-size: clamp(3.2rem, 7vw, 6.2rem);
font-weight: 700;
/* 輪郭線だけのアウトライン文字 */
color: transparent;
-webkit-text-stroke: 1.5px #d4d4d4;
padding-right: 4rem;
}
@keyframes ticker-slide {
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.my-ticker__track { animation: none; }
}運用のコツ
- 変更はローカルで編集 → zip 化 → 「外観 > テーマ > 置き換えアップロード」が安全
- サーバーキャッシュ（Xserver 等）が効いていると反映が遅れて見える。開発中はキャッシュ OFF 推奨
- 確認はシークレットウィンドウで。ログイン中はキャッシュを素通りするので見え方が違う
- 大きな変更の前に、現状の style.css をコピーして残しておく
参考にしたサイト・引用元
このサイトのデザインとコードは、次のサイト・ドキュメントを参考にしています。
- SWELL 公式サイト — テーマ本体と子テーマの配布元
- POINT OF VIEW — デザイン全体のお手本にした SWELL カスタマイズの名サイト
- トップページをオシャレに！サイト型でカスタマイズする方法（POINT OF VIEW） — サイト型トップページの構成の参考
- Lenis（GitHub） — スムーススクロールに使用しているライブラリ
- Intersection Observer API（MDN） — スクロール連動アニメーションの公式ドキュメント
まとめ
デザインの正体は、突き詰めると「変数の上書き」「見出しのクラス」「小さな JS」の積み重ねでした。一つひとつは小さなコードでも、統一したルール（このサイトならモノトーンと“後ろドット”）で重ねると、テーマの既製感はきちんと消えてくれます。まずは手順 1 の配色から試してみてください。
※カスタマイズは必ず子テーマで行い、適用前にバックアップを取ってください。本記事のコードの利用は自己責任でお願いします。
コメント