Blocksy は、無料で使える多機能な WordPress テーマです。設定の多くを「外観」→「カスタマイズ」（カスタマイザー）でプレビューを見ながら行え、ヘッダーとフッターはドラッグ＆ドロップで組み立てられます。この記事では、テーマと補助プラグイン「Blocksy Companion」の導入、最初に決めておく色とフォント、ヘッダーの作り方、ブログ一覧と記事ページの表示設定、子テーマの用意までを、設定の順番に沿って解説します。
Blocksyの構成を把握する
Blocksy は、次の3つで構成されています。
- Blocksy（テーマ本体）: WordPress.org から無料で入手できる。カスタマイザーでのデザイン設定、ヘッダー・フッタービルダーを備える
- Blocksy Companion（無料プラグイン）: スターターサイト（デモデータ）の読み込みや、拡張機能の追加を担う
- Blocksy Pro（有料）: 追加のヘッダー要素、条件付きの表示、より細かいレイアウト機能などが加わる
まずはテーマ本体と Companion の組み合わせで始め、必要な機能が無料の範囲で足りないと分かったときに Pro を検討するのが順当です（機能の区分や価格は変わることがあるため、2026年10月現在の公式サイトの情報で確認してください）。
また、Blocksy はクラシックテーマ寄りの作りで、ブロックエディターにも対応しています。サイトエディター（「外観」→「エディター」）で全体を組むブロックテーマとは操作の場所が違うので、「全体のデザインはカスタマイザー、記事やページの中身はブロックエディター」と覚えておくと迷いません。
インストールと Companion の導入
- 「外観」→「テーマ」→「新規テーマを追加」で「Blocksy」を検索し、インストールして有効化する
- 有効化後に表示される案内、または管理画面に追加される Blocksy のダッシュボードから、Blocksy Companion をインストール・有効化する
WP-CLI では次のように導入できます。
wp theme install blocksy --activate
wp plugin install blocksy-companion --activate既存サイトのテーマを切り替える場合は、事前にサイト全体のバックアップを取ってください。テーマを変えると、前のテーマ独自のショートコードやウィジェット、メニューの表示位置などが引き継がれないことがあります。
スターターサイトを使うかどうか
Companion を入れると、Blocksy のダッシュボードから「スターターサイト」を読み込めるようになります。デザイン済みのページ、カスタマイザーの設定、必要なプラグインがまとめて入るため、新規サイトでは完成形のイメージを早くつかめます。
ただし、既存の記事があるサイトで読み込むのは避けたほうが無難です。デモの固定ページや画像、メニューが追加され、カスタマイザーの設定も上書きされるため、どこまでが元の設定だったか分からなくなります。使うなら、新規サイトの最初の段階か、ステージング環境で試してから必要な設定だけを真似する方法をおすすめします。
最初に決めておく全体設定
「外観」→「カスタマイズ」を開くと、Blocksy の設定項目が並びます。項目名は日本語に翻訳されていることが多いものの、バージョンによって表記が変わることがあります。最初に手を付けるのは、全体に効く次の2つです。
色（カラーパレット）
全体設定の中にある色の設定で、サイトで使う基本色のパレットを決めます。Blocksy では、文字色やリンク色、ボタン色などがこのパレットの色を参照する作りになっているため、パレットを変えるとサイト全体の配色がまとめて切り替わります。
個別の箇所で色を直接指定すると、後で配色を変えたいときに一つずつ直すことになります。基本はパレットで決め、どうしても違う色にしたい部分だけ個別に指定するのが、管理しやすいやり方です。
フォント（タイポグラフィ）
タイポグラフィの設定で、本文と見出しのフォントや文字サイズ、行間を決めます。日本語サイトで注意したいのは、欧文フォントを選んでも日本語の文字には適用されない点です。日本語の部分は閲覧者の端末のフォントで表示されるため、本文のフォントは「システムフォント」などの既定のままにしておくか、日本語に対応したフォントを指定します。
Webフォントで日本語フォントを読み込むと、ファイルが大きく、表示速度に影響することがあります。使う場合は太さの種類を絞り、PageSpeed Insights などで表示速度への影響を確認してください。
ヘッダーを組み立てる
カスタマイザーのヘッダーの項目を開くと、画面下部にヘッダービルダーが表示されます。ヘッダーは上段・中段・下段の行に分かれており、ロゴ（サイトのタイトル）、メニュー、検索、ボタンなどの要素を各行の左・中央・右にドラッグして配置します。
つまずきやすいのは、パソコン用とスマートフォン用のヘッダーが別々に設定されている点です。ビルダーの表示をスマートフォンに切り替えると、別の配置が表示されます。スマートフォンでは、メニューはハンバーガーアイコン（トリガー）から開く「オフキャンバス」の中に置く構成が基本です。パソコン用だけ設定して公開すると、スマートフォンでメニューが出ないといったことが起きるため、両方の表示で確認します。
要素をクリックすると、その要素の設定（文字サイズ、色、余白など）が左側に表示されます。メニューに表示する項目そのものは「外観」→「メニュー」で作成し、ヘッダーのメニュー要素に割り当てます。
フッターも同じ考え方のフッタービルダーで組み立てます。ウィジェット領域やコピーライト表記の配置を変えたい場合は、フッターの項目から編集します。
ブログ一覧と記事ページの表示
カスタマイザーには、投稿一覧（ブログ）、個別の投稿、固定ページなど、ページの種類ごとの設定項目が用意されています。
- 投稿一覧: カード型・リスト型などの並べ方、1行あたりの列数、アイキャッチ画像の比率、抜粋の長さ、表示する投稿情報（投稿日・カテゴリーなど）
- 個別の投稿: コンテンツ領域の幅、サイドバーの有無と位置、タイトル部分の表示方法、関連記事や著者情報の表示
- 固定ページ: 個別の投稿と同様に、幅やサイドバーの有無を設定
記事ページの読みやすさに大きく効くのは、本文の横幅です。日本語の長文は1行が長すぎると読みにくくなるため、サイドバーを付けない場合は本文幅を狭めに設定し、スマートフォンでも文字が小さくなりすぎないかを確認します。
特定の記事だけレイアウトを変えたい場合は、投稿の編集画面のサイドバーに表示される Blocksy の設定から、その記事だけサイドバーを外すなどの指定ができます。
子テーマを用意する
テーマのファイルを直接編集すると、テーマの更新で変更が消えます。CSS を少し足す程度なら、カスタマイザーの「追加 CSS」で足ります。PHP のカスタマイズやテンプレートの上書きが必要になったら子テーマを作ります。
Blocksy の公式サイトでは子テーマの雛形が配布されています。自分で作る場合は、wp-content/themes/blocksy-child/ に次の style.css を置き、
/*
Theme Name: Blocksy Child
Template: blocksy
*/同じフォルダの functions.php で子テーマのスタイルを読み込みます。
<?php
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'blocksy-child-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get( 'Version' )
);
}, 20 );子テーマに切り替えると、カスタマイザーの設定は親テーマとは別に保存されるため、親テーマで設定した内容が見えなくなることがあります。カスタマイザーの設定は、Companion を入れていればエクスポート・インポートの機能で移せるので、子テーマへ切り替える前にエクスポートしておくと手戻りを防げます。
更新と運用の注意点
Blocksy と Companion は頻繁に更新されます。更新の前にはバックアップを取り、更新後はヘッダー、記事ページ、スマートフォン表示を一通り確認します。表示が崩れた場合は、キャッシュ系プラグインやCDNのキャッシュを削除してから再確認してください。CSS の結合・圧縮を行う高速化プラグインを使っていると、古いCSSが残って崩れて見えることがあります。
まとめ
- Blocksy はテーマ本体と Blocksy Companion の組み合わせで使い始め、足りない機能が分かってから Pro を検討する
- スターターサイトは新規サイトかステージング環境で使い、既存サイトでは設定の上書きに注意する
- 色はカラーパレット、文字はタイポグラフィで全体を決める。欧文フォントは日本語に効かない点に注意する
- ヘッダービルダーはパソコン用とスマートフォン用が別々。両方の表示で確認し、PHP を触るなら子テーマを使う