投稿者: Munehiko Kishi

  • Twenty Twenty-Five ブロックテーマでロゴサイト制作

    2026年10月に弊社のロゴマークデザインのホームページをリニューアルいたしました。基本的な構成としては、

    1. ブロックテーマ(Twenty Twenty-FIve)
    2. ワンカラム
    3. プラグインは必要最低限で

    このような感じです。

    WordPressによるWeb制作でいつも思うのが、プラグインの入れ過ぎによるトラブルが本当にやっかいで面倒という事です。PHPやWordPressのバージョンUPをして案の定真っ白になって、プラグインをひとつずつ無効化して原因を探る、なんてことを当たり前のようにやっていましたが、もうこりごりということで、極力入れずに作りました。

    この組み合わせのメリットは、

    圧倒的なメンテナンスの軽さ

    プラグインを最小限に抑えることで、WordPress本体やPHPのバージョンアップ時に「画面が真っ白になる」「レイアウトが崩れる」といったトラブルのリスクをほぼゼロにできます。保守の手間が劇的に減るため、本業のデザイン業務に集中できます。
    ※テーマも安心安全、標準仕様のTwenty Twenty-Fiveブロックテーマです

    ワンカラムとブロックテーマ(FSE)の相性の良さ

    Twenty Twenty-Fiveは「フルサイト編集(FSE)」に完全対応しています。標準機能(グループブロックやセクションの配置)だけで、余計なサイドバーのない、洗練されたワンカラムのレイアウトが直感的に組める点も大きなメリットです。
    UPした画面を見なくてもデザインチェックができるため、たいへん作業がはかどりました。この感覚は、昔使っていた「ホームページビルダー」や「フロントページ」「Macromedia時代のDreamweaver」を思い出しました (笑)

    作品(ポートフォリオ)を引き立てるデザイン

    ワンカラムは視線が上から下へと直線的に動くため、制作実績の大きな写真やタイポグラフィをダイナミックに見せるデザイン事務所のサイトに最適です。
    ※ワンカラム(縦スクロール)ならスマホ・タブレット端末にもぴったりです

    全体設計

    ページジャンプなしでクライアントのロゴ作品画像を複数枚見せる

    クライアントごとにページジャンプさせる従来のやり方は管理し易い反面、離脱されやすい側面もあります。なので、ワンカラムレイアウトでも「→ ギャラリーを見る」クリックで画像を複数枚見せる方法を考えました。

    全体設計(どう実装するか)

    1. ワンカラムの設定
      固定ページの表示設定で「1カラム(またはLP用テンプレート)」を選択。
    2. アコーディオン(詳細ブロック)
      標準機能の「詳細ブロック」を使い、開閉式のパーツを作る。
    3. たくさんの写真表示(ギャラリーブロック)
      アコーディオンの中に「ギャラリーブロック」を入れ込んで、写真を綺麗に敷き詰める。

    具体的な作成ステップ

    STEP 1: ページを1カラムにする

    1. WordPressの固定ページ新規追加画面を開きます。
    2. 画面右側の設定サイドバーにある「固定ページ」タブを開きます。
    3. 「テンプレート」の項目から、お使いのテーマが用意している「フル幅」「1カラム」「LP用」などのテンプレートを選択します。
      ※サイドバー(2カラム)が出ない設定になればOKです

    STEP 2: アコーディオン(開閉)を設置する

    1. 本文エリアで「+」ボタンを押し、「詳細」ブロックを選択します。
    2. 「タイトルを入力…」の部分に、ユーザーにクリックを促す文字(例: もっと写真を見る)を入力します。

    STEP 3: アコーディオンの中に「ギャラリー」を配置する

    1. 「詳細」ブロックの下部にある「隠されたコンテンツを入力…」と書かれたエリアをクリックします。
    2. そこに「+」ボタンから「ギャラリー」ブロックを追加します。
    3. 見せたい写真をメディアライブラリから複数選択して挿入します。

    STEP 4: 写真の並びを調整する(ギャラリー設定)

    1. 挿入したギャラリーブロックを選択します。
    2. 右側の設定サイドバーで「カラム(列数)」を調整します(PCで3〜4列、スマホで自動最適化がおすすめ)。
    3. 「画像を切り抜く」にチェックを入れると、縦横比がバラバラの写真でも綺麗に正方形などで統一されて並びます。

    インストールしたプラグイン

    最後にインストールしたプラグインを記します。

    1. Contact Fomr 7
    2. Create Block Theme
    3. Font Awesome
    4. Slim Maintenance Mode