• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Genesis WP Fan

Genesis Framework とWordPressカスタマイズの情報サイト

  • ホームHome
  • 日本人向けGenesis子テーマ「Muromachi」Genesis Child Theme “Muromachi”
  • Genesis とは
  • Genesis子テーマ一覧
  • Genesisの使い方
  • Genesisカスタマイズ
  • Genesisプラグイン
  • お問い合わせ
HomeGenesis Framework の使い方カラムクラスの使い方【Genesis Framework】
  • Genesis Framework の使い方

カラムクラスの使い方【Genesis Framework】

how-to-use-genesis-column-class-thumbnail

Genesis には、カラムクラス(Column Class)というページ中で段組みができる特殊なクラスがあります。

カラムクラスを使うと投稿や固定ページ以外にも、ホーム画面やサイドバーなど好きな場所で段組みのレイアウトを作ることができます。

how-to-use-genesis-column-class-2

目次

  • カラムクラスの使い方
    • 2段のレイアウトを作るとき
    • 3段のレイアウトを作るとき
  • カラムクラスに対応したウィジェットも

カラムクラスの使い方

カラムクラスを使うには、段組のレイアウトを作りたい要素にカラムクラス用のクラス名(①、②)を追加します。

1 段組みの最初に来る要素に .first というクラスを付けます。

how-to-use-genesis-column-class-5

2 使いたい段組みのレイアウトに合わせて、以下のクラス名を追加します。

レイアウト  要素に追加するクラス名
1/2 one-half
1/3 one-third
1/4 one-fourth
1/5 one-fifth
1/6 one-sixth

ページを2つに分割する場合なら.one-half というクラスを、3つに分割する場合なら3つの要素に .one-third というクラス名を追加します。

how-to-use-genesis-column-class-7

2段のレイアウトを作るとき

下に簡単な使用例を作ってみました。

2段のレイアウトを作る場合、コードは下のようになります。テキストはdivタグで囲みましたが、pタグやimgタグに直接firstやone-thirdなどのカラムクラスを追加することもできます。

<div class="first one-half">

テキスト

</div>
<div class="one-half">

テキスト

</div>

3段のレイアウトを作るとき

<div class="first one-third">

テキスト

</div>
<div class="one-third">

テキスト

</div>
<div class="one-third">

テキスト

</div>

カラムクラスに対応したウィジェットも

Genesis Sandbox Featured Content Widgetのように、ウィジェット(プラグイン)によってはウィジェット内でカラムクラスを使用することもできます。

https://wordpress.org/plugins/genesis-featured-content-widget/

how-to-use-genesis-column-class-9
Genesis Sandbox Featured Content Widget

how-to-use-genesis-column-class-4

自分でコーディングする場合には、.first や .one-half を自分で追加しなければなりませんが、Genesis Sandbox Featured Content WidgetではColumn Classと書かれた選択メニューからone-halfなどのクラス名を選ぶだけで段組みレイアウトを作ることが出来ます。全てのレビューが星5つという高い評価も納得です。

how-to-use-genesis-column-class-8

関連記事

  • 2016年3月22日

    Genesis管理画面からヘッダー/フッターにコードを追加する方法

  • 2017年12月23日

    Genesisサイトの投稿にPost Classを追加する方法

  • metro-pro-settings-thumbnail
    2016年3月17日

    Genesisサイトの設定方法【MetroPro】

  • genesis-theme-settings-thumbnail
    2016年4月1日

    Genesis Theme Settingsの設定方法

  • genesis-seo-settings-4
    2016年4月24日

    Genesis SEO Settings の設定方法

  • Genesis Framework の使い方
  • Genesisの設定

日本人のためのGenesisフレームワーク専用WordPressテーマ 『Muromachi』

SEOやセキュリティのプロから信頼されるGenesisフレームワークのメリットを生かしながら、日本人向けに見やすさや使いやすさ、機能性を追求しました。 Genesisサイトの制作ノウハウやウェブサイトの運営経験が詰まったWordPressテーマです。企業サイトはもちろん、ブログやアフィリエイトサイトなど、様々な用途にお使いいただけます。

詳しく見る
← 前の記事
カラムクラスの使い方【Genesis Framework】
【まずはここから】GenesisとGenesis子テーマをダウンロードする方法
次の記事 →
カラムクラスの使い方【Genesis Framework】
Genesis購入者限定のレスポンシブデザイン・テストツールの使い方

最初のサイドバー

Genesis WP Fan

Genesis WP Fan

たいやき伝道師

Genesisが好きすぎてGenesisフレームワークの情報サイトGenesis WP Fanを運営しています。日本人のためのGenesisフレームワーク専用WordPressテーマ『Muromachi』を開発しました。

Follow

サイト内検索

カテゴリー

タグ

FontAwesome Genesisの設定 Meta Muromachi ウィジェット カテゴリアーカイブ サムネイル ショートコード タグアーカイブ ツール パンくずリスト フッター プラグイン ヘッダー レイアウト 固定ページ 投稿 日本語化 検索関連 管理画面 記事一覧

PVランキング

  • 1genesis-featured-posts-widget-11

    Genesis Featured Postsウィジェットの使い方

  • 2genesis-child-themes

    Genesisフレームワークでブログを作るのに鉄板のGenesis子テーマ12選

  • 3genesis-seo-settings-4

    Genesis SEO Settings の設定方法

  • 4

    競合サイトに差をつけるGenesisサイト運営のためのプラグイン27選

  • 5genesis-logo

    Genesis Frameworkをインストールする方法

  • 6genesis

    【まずはここから】GenesisとGenesis子テーマをダウンロードする方法

  • 7

    GenesisフレームワークとGenesis子テーマを日本語化する方法

  • 8

    ここ最近人気のGenesis子テーマ10選を紹介してみる

  • 9

    【100種類目前!】変幻自在のGenesis子テーマとは?

  • 10metro-pro-settings-thumbnail

    Genesisサイトの設定方法【MetroPro】

最近の投稿

  • 店舗サイトにオススメなGenesisフレームワーク専用子テーマ6選【WordPress】

  • 調べたいサイトを丸裸にするサイト内検索とページ内検索の使い方【簡単絞り込み検索】

  • WWWって何?意外と知らないウェブについてやさしく解説【World Wide Web】

  • 仕事をするときに気をつけたいGenesisフレームワークのライセンスについて整理してみた

  • 日本人向けGenesisフレームワーク専用のWordPressテーマ「Muromachi」販売のお知らせ

  • 404ページも魅力的に簡単カスタマイズ!Genesis専用プラグインで404ページをカスタマイズする方法

  • Genesis専用子テーマ『Academy Pro』の特徴

  • ここ最近人気のGenesis子テーマ10選を紹介してみる

  • Genesisサイトの投稿にPost Classを追加する方法

  • Genesis専用プラグインでレイアウト機能を簡単に拡張する方法【Genesis Layout Extras】

目次

  • カラムクラスの使い方
    • 2段のレイアウトを作るとき
    • 3段のレイアウトを作るとき
  • カラムクラスに対応したウィジェットも
ページトップへ

Copyright © 2023 Genesis WP Fan All Rights Reserved.