---
title: "_s(underscores)を2カラムレイアウトにする"
canonical_url: "https://olein-design.com/blog/underscores-set-to-2-column-layout"
language: "ja"
date_published: "2014-12-12T17:08:32+09:00"
date_modified: "2014-12-12T17:08:32+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "WordPress"
  post_tag:
    - "underscores"
---

# _s(underscores)を2カラムレイアウトにする

_s(underscores)は有効化した直後のレイアウトはこのようになっています。 ![ready-for-underscores-19](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-19-1-1024x993.png) １カラムというか、レイアウト自体がなにもCSSによって設定されていません。こちらを既存のCSSを適応してレイアウトを変更してみましょう。 ## デフォルトで用意されているレイアウトは２種類

 デフォルトで用意されているレイアウトは２種類あります。**【左コンテンツ・右サイドバー】**もしくは**【左サイドバー・右コンテンツ】**のどちらかです。このレイアウトにしてくれるCSSが`layout`というフォルダに入っています。前者レイアウト用は`content-sidebar.css`、後者レイアウト用は`sidebar-content.css`ですね。わかり易いファイル名で助かります。 では、今回は例として**【左コンテンツ・右サイドバー】**の`content-sidebar.css`を利用してレイアウトを変更してみようと思います。 ## CSSはfunctions.phpから読み込みます

 以前[こちら](https://olein-design.com/wordpress/fontawesome-on-underscores)の記事でも触れていますが、`functions.php`に読み込みたいCSSを記載していきます。 ```

/**
 * Enqueue scripts and styles.
 */
function olein_scripts() {
	wp_enqueue_style( 'olein-style', get_stylesheet_uri() );

	wp_enqueue_style( 'olein-fontawesome', 'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );

	wp_enqueue_script( 'olein-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

	wp_enqueue_script( 'olein-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'olein_scripts' );
```

 FontAwesomeのCSSを設定した後に加えて書いていきましょう。 `content-sidebar.css`の場所は`layouts/content-sidebar.css`ですね。`layouts`というフォルダの中に`content-sidebar.css`が入っています。 そして、今回は以前のFontAwesomeのCSSとは違い、テーマ内のファイルにアクセスさせることになります。その際に便利なのが`get_template_directory_uri()`という関数です。こちらの関数は**有効化しているテンプレートディレクトリのURIを取得**します。簡単に言えば**テーマフォルダへのパス**をこちらの関数で示すことができます。 ```

wp_enqueue_script( 'olein-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
```

 例としてこちらを見てみましょう。FonAwesomeのCSSを記述した下にあるJavaScriptを読み込んでいる部分になります。こちらで使われているのが`get_template_directory_uri()`です。`js`フォルダはテーマ内に置いてありますので、`get_template_directory_uri()`を使うと簡単にテーマ内ファイルへのパスを書くことができます。 では、書いてみましょう。 ```

wp_enqueue_style( 'olein-layout-content-sidebar', get_template_directory_uri() . '/layouts/content-sidebar.css' );
```

 このように書けば良いということになります。この部分の全体を見てみるとこうなります。 ```

/**
 * Enqueue scripts and styles.
 */
function olein_scripts() {
	wp_enqueue_style( 'olein-style', get_stylesheet_uri() );

	wp_enqueue_style( 'olein-fontawesome', 'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );

	wp_enqueue_style( 'olein-layout-content-sidebar', get_template_directory_uri() . '/layouts/content-sidebar.css' );

	wp_enqueue_script( 'olein-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

	wp_enqueue_script( 'olein-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'olein_scripts' );
```

 ## レイアウトを確認してみましょう

 では、保存してレイアウトが変更されているか確認してみましょう。 ![content-sidebar-layout](https://olein-design.com/wp-content/uploads/2014/12/content-sidebar-layout-1024x859.png) このように、**左にメインコンテンツ、右にサイドバー**というレイアウトに変更されましたね。 デベロッパーツールでも`content-sidebar.css`をちゃんと読み込んでいることが確認できます。 ![dev-tools](https://olein-design.com/wp-content/uploads/2014/12/dev-tools.png) ## まとめ

 レイアウトが２カラムになったことで、少しはホームページのように見えてきましたかね？まだ、完璧なテキストサイトなので、徐々にカスタマイズしていく方法を記事にしていこうと思います。