Twenty Fifteen のデザイン

ヘッダーとサイドバーが融合し、スクロール固定を採用

ヘッダーと視認できる部分はなく、サイドバーがヘッダーになっています。header.php の中にサイドバーが含まれるつくりです。このサイドバー部分に、コンテンツ以外のものは全て表示させる構造になっています。サイトタイトル、ナビゲーションメニュー、ウィジェットが全てここにきます。
サイドバーは一番下までスクロールすると固定されます。

スペースいっぱいの大きなアイキャッチ

Twenty Fifteen には大きなアイキャッチ（サムネイル）が表示されます。推奨サイズは 幅 825px に高さ 510px です。このサイズの画像をアイキャッチとして用意すれば、Twenty Fifteen のレイアウトにきれいに表示されます。
これまでアイキャッチの画像に 1208px × 540px の画像を使っていたんですが、このサイズの画像だとスペースいっぱいに表示されませんでした。
また、新たに 1208px × 540px のアイキャッチをアップロードしたら、コンテンツのスペースをはみ出して表示されてしまいました。縮小されずにそのままのサイズで表示されているようです。
色々なサイズで試してみましたが、以下のようになりました。

新規にアップロードした画像に関しては、推奨サイズにしておいた方がよさそうです。既にアップロード済みの画像がうまくはまらないので、なんとか最適化されるようにしたいものです。

主なパーツの幅やサイズ

Twenty Fifteen のカスタマイズ

Twenty Fifteen の背景や色の変更、ウィジェットやメニューの設定についてです。

Twenty Fifteen のカラーパターン変更

Twenty Fifteen には、予め 6 つのカラーパターンが用意されています。カスタマイズ画面から選択することで変更できます。

ヘッダー画像の変更

メインメニューの設定

メニューといえばヘッダーの上か下に配置されることが多いのですが、Twenty Fifteen には明確なヘッダー部分がなく、ナビゲーションメニューもサイドバーに表示されます。
デザイン・レイアウト的にはウィジェットを追加するのとなんの違いもありませんが、メニューでは階層を指定でき、また今回メニューに補足説明を追加できるようになっています。
さらにソーシャルメニューというものが用意されていて、ソーシャルメディアの URL をメニューに追加すると、ソーシャルアイコンとして自動的に表示されるようになっています。

メニューに補足説明を追加する方法

外観 > メニューから設定できます。このメニュー設定のページを開いた状態で右上の【表示オプション】をクリックすると、以下のようなメニューが表示されます。【詳細メニュー設定を表示】の右端にある【説明】にチェックをいれると、メニューの中に詳細を入力するボックスが表示されます。

ソーシャルメニューの設定

初めから用意されているメニューは 2 つ、メインメニューとソーシャルメニューです。中でもソーシャルメニューには、ソーシャルリンクを追加することで、自動的にソーシャルアイコンとして表示をしてくれるようになっています。
対応しているソーシャルメディアは以下の通り。RSS や Feedly などが使えないのは残念でした。

(1) ソーシャルアイコン用のメニューを追加

外観 > メニューから設定できます。メニューの名前を決めて【メニューを作成】をクリックします。

(2) 作成したメニューの中にリンクを追加

リンクのタブを開き、ソーシャルメディアの URL を入力し、【メニューに追加】をクリック。

(3) ソーシャルリンクメニューとして表示させる

必要なメニューを追加したら、【メニュー設定】のところで【ソーシャルリンクメニュー】にチェックを入れます。するとサイドバーにソーシャルアイコンが表示されます。

ウィジェットの設定

ウェイジェットを追加できるエリアはサイドバーのみです。ヘッダー部分にサイトタイトルが表示され、その下にメニュー、ソーシャルメニューが続き、その下からがウィジェットエリアになります。
カスタマイズ方法はこれまで通りで特筆すべき点はありません。

Twenty Fifteen の構造

PHP ファイルの中身をちょっと見てみたいと思います。
まずは header.php です。いきなり id=”sidebar” となっています。その下からヘッダー部分が始まり、サイトタイトルとサイトディスクリプションを出力するタグが配置されています。
その下はサイドバーが出力されるようになっていますね。

<div id="page" class="hfeed site">
	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>
	<div id="sidebar" class="sidebar">
		<header id="masthead" class="site-header" role="banner">
			<div class="site-branding">
				<?php
					if ( is_front_page() && is_home() ) : ?>
						<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
					<?php else : ?>
						<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
					<?php endif;
					$description = get_bloginfo( 'description', 'display' );
					if ( $description || is_customize_preview() ) : ?>
						<p class="site-description"><?php echo $description; ?></p>
					<?php endif;
				?>
				<button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
			</div><!-- .site-branding -->
		</header><!-- .site-header -->
		<?php get_sidebar(); ?>
	</div><!-- .sidebar -->
	<div id="content" class="site-content">

sidebar.php を見てみると、ナビゲーションメニューがここに配置されていますね。このナビメニューの中にはメインメニューとソーシャルメニューの 2 つが配置されていることが分かります。
そして、ナビゲーションメニューの後にウィジェットが来ています。

<?php
/**
 * The sidebar containing the main widget area
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) || is_active_sidebar( 'sidebar-1' )  ) : ?>
	<div id="secondary" class="secondary">
		<?php if ( has_nav_menu( 'primary' ) ) : ?>
			<nav id="site-navigation" class="main-navigation" role="navigation">
				<?php
					// Primary navigation menu.
					wp_nav_menu( array(
						'menu_class'     => 'nav-menu',
						'theme_location' => 'primary',
					) );
				?>
			</nav><!-- .main-navigation -->
		<?php endif; ?>
		<?php if ( has_nav_menu( 'social' ) ) : ?>
			<nav id="social-navigation" class="social-navigation" role="navigation">
				<?php
					// Social links navigation menu.
					wp_nav_menu( array(
						'theme_location' => 'social',
						'depth'          => 1,
						'link_before'    => '<span class="screen-reader-text">',
						'link_after'     => '</span>',
					) );
				?>
			</nav><!-- .social-navigation -->
		<?php endif; ?>
		<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
			<div id="widget-area" class="widget-area" role="complementary">
				<?php dynamic_sidebar( 'sidebar-1' ); ?>
			</div><!-- .widget-area -->
		<?php endif; ?>
	</div><!-- .secondary -->
<?php endif; ?>

Twenty Fifteen のカスタマイズがうまくできない場合

Twenty Fifteen では色々なカスタマイズができますが、その中でも色の設定があります。サイドバーと背景色と文字色を自由に設定できます。いくつかのパターンも用意されているので、そこから選択することもできます。
しかし、プラグインの Head Cleaner を有効化していると、不具合を起こして色の変更ができませんでした。他にも相性の悪いプラグインがあるかもしれませんね。
カスタマイズがうまく反映されない場合は、プラグインが原因となっているケースが多いです。プラグインが問題を起こしているかな？　と思った時は、一旦すべて停止させて、1 つ 1 つ有効化していくとどのプラグインが悪さをしているのか確認できます。怪しいと思ったらプラグインをチェックしてみてくださね。

JetPack とは？

Jetpack とは WordPress のプラグインです。非常にたくさんの機能（モジュールと呼ばれています）が備わったプラグインで、もはや WordPress には必須のプラグインと言ってもいいでしょう。ソーシャルプラグインの実装や、アクセス解析、便利なウィジェットの追加などが一手に行えます。
その数あるモジュールの中の 1 つに、ウィジェットの表示/非表示を設定できる機能があります。このモジュールを有効にするだけで、ウィジェット管理画面からウィジェットの表示/非表示を簡単に細かく設定できます。
＞ Jetpack のダウンロードはこちらからできます。

Jetpack の Widget Visibility を使用して、ページごとにウィジェットをカスタマイズ

Jetpack には多くのモジュールがありますが、今回使用するのは Widget Visibility です。

(1) Widget Visibility を有効化

Jetpack の設定画面で Widget Visibility を有効化します。

(2) ウィジェット設定画面で、必要なウィジェットを全て追加する

条件に関わらず、全ページのサイドバーやフッターに、まずは全てのウィジェットを追加します。表示させたいウィジェットや特定のページでのみ表示させたいウィジェット、逆に特定のページでのみ非表示にしたいウィジェットなど、全てです。

(3) 公開状態で、ウィジェットの表示/非表示を個別に設定

Widget Visibility を有効化していれば、ウィジェットに【 公開状態 】というボタンが表示されているはずです。この【 公開状態 】をクリックすると、ウィジェットの表示/非表示の条件を設定することができます。

実践例）フロントページで特定のウィジェットを非表示にしてみる

試しに設定してみたいと思います。事例で使用しているのは Twenty Thirteen をベースにカスタマイズしたテーマです。サイドバーに追加するウィジェットの 1 つを、フロントページでのみ非表示にしたいと思います。

(1) サイドバーにウィジェットを追加する

まずは表示/非表示に関わらず、必要なウィジェットを全て追加します。今回使用しているウィジェットは以下の 5 つです。

(2) ウィジェット管理画面から表示や非常時を設定する

それではウィジェットの表示/非表示を設定していきましょう。今回は先ほど追加した 5 つのウィジェットの内、アドセンス広告のテキストウィジェットをフロントページで非表示にしてみたいと思います。
テキストウィジェットの【 公開状態 】をクリックして、以下の様に設定の上保存しました。

つまり……

という設定です。それではフロントページへ行って表示を確認してみましょう。

実際にアドセンス広告が非表示になっていました。これでフロントページだけ非表示にする設定ができました。
他にも、特定のカテゴリーページやタグページ、特定の固定ページでウィジェットの表示をカスタマイズすることができます。

選択するだけの簡単操作で、ウィジェットを自由にカスタマイズできる

いかがでしたでしょうか？　とても簡単にウィジェットの表示をカスタマイズできると思います。PHP の知識を今から覚える必要はありません。FTP からテーマを直接編集する必要もありません。ダッシュボードからいつでも簡単に設定できてしまいます。
ショートカットできるものはショートカットして、より重要度の高いタスクに時間を割けるようにしましょう。
ちなみに、Jetpack は他にも様々な機能（モジュール）を備えていて、とても便利なプラグインになっています。繰り返しになりますが、WordPress をインストールしたなら、即座に入れるプラグインの 1 つです。必ずインストールしておきましょう。

サイドバー固定の概要

ブログの構造はだいたいメインコンテンツのカラムとサイドバーの組み合わせになっています。メインコンテンツがサイドバーよりも長い場合、スクロールしていくと後半ではサイドバーが見えなくなってしまいますよね。なので、今までのサイトの構成は以下のような感じでした。
しかしここ最近このサイドバーが固定されているブログをよく見かけませんか？　固定と言っても、最初からサイドバーが固定されているわけではありません。
スクロールするとしばらくはサイドバーも一緒にスクロールされるんですが、これ以上サイドバーも先がないよ、となった段階でサイドバーのみスクロールが停止されます。その後はメインカラムだけが下へ下へとフッターまでスクロールされていきます。

※クリックして拡大できます。
これを実装する方法としては jQuery を使うのが王道らしいです。しかしよく分かっていないのと、検索で調べてみても結局うまくいかなかったので、プラグイン頼みで探してみました。そしたらとても使いやすいプラグインを発見しました。

ワードプレスプラグイン：Standard Widget Extensions

＞ Standard Widget Extentions
このプラグインを使えば、スクロールに応じたサイドバーの固定を簡単に取り入れることができます。ちなみに、現時点でこのブログは WordPress のデフォルトテーマ Twenty Thirteen をベースにデザインしています。Twenty Thirteen の場合はちょっとテーマの編集が必要になるとのことだったので、その辺もご紹介します。

プラグインのインストール

まずはプラグインのインストールから。

いずれかの方法でプラグインをインストールし、有効化してください。

プラグインの設定画面

プラグインの設定方法が掲載されているサイトがあります。
＞ Standard Widget Extensions [日本語公式]
このような設定画面になっています。

サイドバーが下までいくとスクロールが停止しフッターまではその位置のままで固定させる設定は【 Sticky Sidebar 】の部分を【有効】にしてください。【詳細オプションを表示】をクリックするとより細かい設定項目が表示されます。

 WordPress ディフォルトテーマの設定方法

詳細はこちらに書かれておりました。【詳細オプションを表示】をクリックして説明されている設定を行ってください。
＞ デフォルトテーマ用設定集
メインカラムやサイドバーの ID を指定する必要があります。またレスポンシブデザインにも対応していて、指定した幅（width）以下では無効化させることもできます。記載されているのは、ワードプレスのデフォルトテーマである Twenty Forteen、Twenty Thirteen、Twenty Twelve になります。

Twenty Thirteen の設定方法

Twenty Thirteen の場合はテーマの編集が必要になります。詳細はこちらに書かれています。
＞ Twenty Thirteen and Standard Widget Extensions
英語ですが雰囲気で分かると思います。念のためこちらにもまとめておきます。

１．まずはサイドバーを表示させる

Twenty Thirteen の場合はウィジェットエリアが 2 つ用意されていますが、サイドバーに対応しているのは【幅ウィジェット】の方です。このエリアに何もないとサイドバーは表示されず、何かウィジェットを配置するとサイドバーが表示される仕組みになっています。

２．sidebar.php を書き換える

テーマを一部編集する必要があります。テーマを編集は必ず子テーマを作成した上で行ってください。

【重要】WordPressテーマをカスタマイズするなら子テーマを作れ！

子テーマフォルダを作成したら、テーマの設定画面で子テーマを有効化してください。そして、子テーマフォルダの中に親テーマの Twenty Thirteen から【sidebar.php】をダウンロードしてください。
sidebar.php の 17 行目を以下のように編集します。

<?php
/**
* The sidebar containing the secondary widget area
*
* Displays on posts and pages.
*
* If no active widgets are in this sidebar, hide it completely.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
<div id="tertiary" class="sidebar-container" role="complementary">
<div class="sidebar-inner">
/* 17行目を変更 */ <div id="mysidebar" class="widget-area">
<?php dynamic_sidebar( 'sidebar-2' ); ?>
</div><!-- .widget-area -->
</div><!-- .sidebar-inner -->
</div><!-- #tertiary -->
<?php endif; ?>

sidebar.php を書き換えたら、子テーマフォルダ内にアップロードしましょう。

３．Standard Widget Extentions の ID 設定

Standard Widget Extentions の設定画面へ行き、以下のように ID を指定してください。

これで Twenty Thirteen のサイドバーのスクロールを停止させることができます。

そもそもパンくずリストとは？

パンくずリストとは、ウェブサイトのページの階層を分かりやすく示すリストのことです。このブログの投稿でも、カテゴリーがパンくずリストとして表示されるようにしました。

投稿の場合は、カテゴリーをリスト表示させるのが一般的です。一方固定ページの場合は、親ページと子ページという関係性がある場合にパンくずリストを使って階層表示させることができます。
パンくずリストは SEO 的にも実装した方がよいようです。SEO で大事なことの 1 つは、検索エンジンクローラーができる限りページを巡回してくれることです。その巡回頻度を増やすためにパンくずリストが有効なわけです。

パンくずリストを出力してくれるタグ

投稿カテゴリーのパンくずリスト

カテゴリーをリスト表示させるには以下を追記します。

<a href="<?php bloginfo('url'); ?>">TOP</a>&nbsp;>&nbsp;
<?php $cat = get_the_category(); echo get_category_parents($cat[0], true, '&nbsp;>&nbsp;'); ?>
<?php the_title(''); ?>

どこに追加すればいいのかは後ほど・・・。

固定ページのパンくずリスト

企業のコーポレートサイトなどは、固定ページのパンくずリストを追加したいと思うでしょう。その場合は以下を追記します。

<a href="<?php echo get_option('home'); ?>">TOP</a>&nbsp;>&nbsp;
<?php foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) { ?>
<a href="<?php echo get_page_link( $parid );?>" title="<?php echo get_page($parid)->post_title; ?>">
<?php echo get_page($parid)->post_title; ?></a>&nbsp;>&nbsp;
<?php } ?>
<?php the_title(''); ?>

どこに追加すればいいのかはこの次で・・・。

パンくずリストの追記場所

Twenty Thirteen の場合を例に説明していきたいと思います。パンくずリストは基本的にページのヘッダーの下辺りに配置されます。なので、【 header.php 】のナビゲーションメニューの下に追記したいと思います。
基本的には上記のタグを記載していくのですが、それぞれ表示場所が異なるので、その使い分けを指定します。具体的には、トップページでは非表示。投稿ページではカテゴリーのパンくずリスト。固定ページでは階層のパンくずリストが表示されるようにします。条件分岐タグを利用します。

<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</a>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<?php get_search_form(); ?>
</nav><!-- #site-navigation -->
</div><!-- #navbar -->
/* ▼ パンくずリストを追記 ▼ */
<div id="breadcrumbs">
<?php if ( is_single() ) : ?><!-- 投稿ページでの表示を指示 -->
<a href="<?php bloginfo('url'); ?>">TOP</a>&nbsp;>&nbsp;
<?php $cat = get_the_category(); echo get_category_parents($cat[0], true, '&nbsp;>&nbsp;'); ?>
<?php the_title(''); ?>
<?php endif; ?>
<?php if ( is_page() ) : ?><!-- 固定ページでの表示を指示 -->
<a href="<?php echo get_option('home'); ?>">TOP</a>&nbsp;>&nbsp;
<?php foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) { ?>
<a href="<?php echo get_page_link( $parid );?>" title="<?php echo get_page($parid)->post_title; ?>">
<?php echo get_page($parid)->post_title; ?></a>&nbsp;>&nbsp;
<?php } ?>
<?php the_title(''); ?>
<?php endif; ?>
</div><!-- #breadcrumbs -->
</header><!-- #masthead -->
<div id="main" class="site-main">

Twenty Thirteen の場合は CSS でパンくずリストをきれいに整える

Twenty Thirteen の場合、ただ header.php に追記しただけでは端の方に表示されます。ブラウザの左端です。そこで、コンテンツの幅に合うようにレイアウトを整えたいと思います。

#breadcrumbs {
margin: 30px auto 0;
max-width: 1040px;
position: relative;
}

Twenty Thirteen の場合は横幅の指定が必要です。デフォルト通りであれば、最大 1040px にしましょう。これでレスポンシブデザインにも対応できます。

参考にさせて頂いたサイト

ありがとうございました。

まずはじめに、固定ページのテンプレートとは？

固定ページとは WordPress のページ作成タイプの 1 つです。ブログのような時系列での投稿とは違い、時間軸とは独立したページを作成できます。階層構造を持っていて、いわゆるホームページのページに近い役割があります。
WordPress の「投稿」はブログ、「固定ページ」はホームページという感じで認識しておくといいと思います。
そして、この固定ページは、ページごとに異なるレイアウトを適用できる、テンプレートというものを追加できます。このテンプレートの数だけ、レイアウトを用意することができ、ページ A にはテンプレート A、ページ B にはテンプレート B のように使い分けることができます。

Twenty Twelve の固定ページテンプレートの場合

例えば、WordPress のデフォルトテーマの 1 つである Twenty Twelve には、以下のような 3 つのテンプレートが備わっています。

そして、固定ページごとに、このテンプレートを選ぶことができます。

Twenty Thirteen には固定ページテンプレートがない

しかし、Twenty Thirteen にはこのテンプレートがありません。固定ページのレイアウトは、サイト全体のレイアウトと共通したものになります。Twenty Thirteen のレイアウトは、ワンカラムか、右サイドバーの 2 カラムの 2 パターンです。ですので、2 カラムの設定にしていた場合は、「投稿」も「固定ページ」も共通して 2 カラムになります。

実践：ワンカラムのテンプレートを追加する

それでは、この Twenty Thirteen に固定ページのテンプレートを追加したいと思います。追加するのはワンカラムのテンプレートです。なぜワンカラムのテンプレートを追加するのか？　それは、固定ページごとに、ワンカラムと 2 カラムのレイアウトを選べるようにするためです。
前提として、Twenty Thirteen の基本の設定を 2 カラムにしておきます（これはサイドバー（副ウェジェットエリア）にウィジェットを 1 つでも追加すれば、自動的に 2 カラムになります）。
この場合、通常固定ページも 2 カラムになってしまうのですが、そこにワンカラムのテンプレートを用意することで、2 カラムとワンカラムを使い分けることができる、というわけです。

Twenty Thirteen の固定ページへテンプレートを追加する方法

(1) 固定ページテンプレート（page.php）を複製する

まずは、デフォルトの固定ページのテンプレートに該当する PHP ファイル（page.php）を探して、複製します。

(2) 複製した PHP ファイルの名称を変える

複製したファイルに名前をつけてください。今回はワンカラムのページテンプレートにするので【 onecolumn-page.php 】としました。

(3) 複製した PHP ファイルを編集する

onecolumn-page.php のファイルを以下の様に書き換えます。変更点は 2 点。冒頭のテンプレートの説明部分の書き換えと、下部のサイドバー出力の PHP タグの削除です。

/* ▼ Template Name と Description を追記 ▼ */
<?php
/**
* Template Name: ワンカラムテンプレート
* Description: A Page Template that no sidebar
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class="entry-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
</div><!-- .entry-content -->
<footer class="entry-meta">
<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta -->
</article><!-- #post -->
<?php comments_template(); ?>
<?php endwhile; ?>
</div><!-- #content -->
</div><!-- #primary -->
/* 下から 2 行目の get_sidebar というタグを削除 */
<?php get_footer(); ?>

(4) 専用の CSS セレクタを指定する

複製したファイルの CSS を個別に指定できるように、専用のセレクタを追加します。onecolumn-page.php の <article> 〜 </article> の間を囲みます。今回は <div> で囲みましたが、もっとスマートな方法があるかもしれません。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
/* ▼ 新たに任意のセレクタ（class）を追記 ▼ */
<div class="one-column">
<header class="entry-header">
<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class="entry-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
/* 〜省略〜 */
<footer class="entry-meta">
<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta -->
</div>/* ちゃんと閉じるのも忘れずに */
</article><!-- #post -->

固定ページを確認してみましょう

固定ページの編集画面を確認してみましょう。【ページ属性】を見てみると、【テンプレート】という項目が表示されています。

これで、デフォルトテンプレートか追加したワンカラムテンプレートを選べるようになります。ワンカラムテンプレートのレイアウトを変更したい場合は、スタイルシートで追記したセレクタを使った指定を行えば OK です。先ほどの例で言うと、ワンカラムテンプレートの横幅を広げたいときは以下のようにします。

.one-column .entry-header,
.one-column .entry-content,
.one-column .entry-summary,
.one-column .entry-meta {
 padding: 30px 150px;
}

Twenty Thirteen では、副ウィジェットエリアに何かウィジェットを追加していないと、デフォルトテンプレートでもワンカラム表示になるのでご注意ください。

Twenty Thirteen を選んだ理由

1 番の理由はレスポンシブデザインへの対応です。Twenty Eleven もそれなりに対応していましたが、まだまだ荒削りな感じがありました。デフォルトテーマの最新版は Twenty Fourteen なのですが、個人的に左詰めのレイアウトが好みでなかったのと、モデルにしているサイトに似せたカスタマイズを行うには適さなかったこともあり、Twenty Thirteen を採用しました。
Twenty Thirteen はブログに適したデザインですので、企業のコーポレートサイトなどには適さないテーマだと思っていますが、このようなコンテンツサイトには適していると思います。WordPress のデフォルトテーマも、Twenty Fifteen がもうすぐそこまで来ていますし、Twenty Thirteen を使うのもいつまでか分かりませんが、今後は Twenty Thirteen のカスタマイズ情報も残していけたらと思います。

Twenty Eleven もバージョンが古くなってきた

Twenty Thirteen がリリースされた当初、ぼくは以下のように言っていました。

Twenty Eleven 使い続けることで何か実害が出るとは思えません。WordPress のバージョンが変わっても、テーマも合わせて変更する必要はないでしょう。特にビジネスに使われている場合は、新しいテーマの内容を把握することに時間を割くより、もっと重要なことに時間を使った方が賢明です。

しかし、Twenty Eleven が WordPress を新規インストールした際に含まれなくなっている点や、今後 Twenty Eleven のバージョンアップもなくなっていくだろうことを考えると、次世代のテーマにそろそろ移行した方がいいと考えました。バージョンアップがないとセキュリティが不安になるからです。
今後も新しいテーマがリリースされるでしょう。その度に変えるというのは時間の無駄ですが、Twenty Ten や Twenty Eleven は、そろそろ世代交代の時期にあるのかもしれません。いつまでも Windows XP を使い続けるわけにはいかないのと同じですね。Twenty Eleven ありがとうございました！　そして Twenty Thirteen よろしく！

重要ポイントはレイアウトと配色

サイトリニューアルの参考にしたサイト

― バズ部
― Goosehouse
― FUTURITY
これらのサイトからレイアウトや配色を参考にし、その通りにしました。配色に関しては好みもありますし、リニューアル前も黄色をメインとした配色だったので、黄色をメインとした配色のサイトでいい感じのものはないかということで探した結果です。レイアウトに関してはビジネス上うまくいっているところのサイトを参考にしました。

まだまだリニューアルは途中

とりあえず最低限整えてテーマを変更しました。多くの人は完成という状態にしてからリリースすると思いますが、今回のリニューアルはまだまだ穴だらけです。自社サイトなので納期の影響がないというのもありますが、リリースして、実際に運営してからでないと気付かない点というのもたくさんあります。なので、ある程度でリリースして一般の目にさらすことが重要だと考えています。今回もその考えに則って公開しました。
起業で大事な考え方の 1 つに「Ready Fire Aim」というのがあります。「構え！　打て！　狙え！」という感じです。狙ってから打つのではなく、打ってから狙う。つまり、売ってから狙いを定めるというわけです。起業初期の頃はとくに、あれこれ考えて準備を万全にしてから売るよりも、まずとりあえず売ってみて、それから改善していくことが大事なわけです。
サイトの公開に関しても同じように言えます。大企業でも、ウェブサービスのリリース直後は不具合やトラブルで炎上することがよくありますよね。大企業でもそういうもんです。使ってみないと内輪だけの感覚では分からないことがたくさんあるので、とりあえずリリースという精神は大事だと思います。

サイドバーが黒い……でも他の色にも変更できる

管理画面（ダッシュボード）のサイドバーが真っ黒です。しかし、今回から管理画面の配色を変更できるようになってます。WordPress 3.8 にバージョンアップすると、まず始めにバージョンアップ情報が表示されますが、そこで配色を選ぶことができるようになっています。
その後は【ユーザー】【プロフィール】で、ユーザーごとに管理画面の配色を設定できるみたいです。

ダッシュボードのウィジェットの変更

個人的にちょっととまどったのが、ダッシュボードのウィジェットでした。以前は【最近の下書き】というウィジェットがあって、ダッシュボードから書きかけの投稿の編集画面へとすぐに移動することができました。しかし、3.8 になると、その【最近の下書き】というのが見当たりません。
どこに行ったかというと、【クイックドラフト】に統合されていました。以前は【クイック投稿】と訳されてましたね。ここに下書き中の投稿も表示されるようになっています。

また、コメントも単独のウィジェットはなくなり、【アクティビティ】というウィジェットになっています。最近の投稿と最近のコメントが合わさったようなウィジェットです。

他にも、【概要】の部分がだいぶスッキリして、余計な情報は出てこない感じになっています。

見やすくなったプラグインページ

プラグインページのデザインはとても見やすくなっています。有効なプラグインと無効なプラグインの区別をすぐにつけられそうです。それだけ分かりやすいデザインになっている、ということですね。

ウィジェット管理画面も使いやすく…なったかな？

大きく見やすくなっていると感じるのが 1 点。それと、ドラッグ＆ドロップでのカスタマイズだけではなく、左側の利用できるウィジェット一覧にあるウィジェットをクリックしても、追加することができるみたいです。
例えば【利用できるウィジェット】から【カテゴリー】ウィジェットをクリックすると、メニューが下に開いて、どこに追加するかを選んで【ウィジェット追加】をクリックすれば、ドラッグしなくても追加できます。

スマホやタブレットからも見やすいデザイン

その他は、デザイン面でこそ結構変わっていますが、使い勝手的に大きく変わっている部分はほとんどないんじゃないかという感じでした。そう、デザイン面が結構変わっているなという感じです。その 1 つが、管理画面（ダッシュボード）のレスポンシブ化ではないでしょうか？
ちょっと iPhone からログインしてみましたが、確かに見やすくなっています。ただ、実際にスマホから投稿しようと思ったら、まだまだ動作がもったりしていて使いにくいかな、という感じです。出先で思いついたアイデアをすぐにメモ的な感じで記事として保存しておくのはいいかもしれませんね。
でもやっぱりまだまだアプリを使った方が作業しやすいと思います。

まとめ

使い勝手よりもデザインの刷新がとても魅力的だと思います。管理画面のデザインが違うだけで、WordPress を使ってコンテンツをつくりたくなってくる不思議。このコンテンツもかなり久しぶりに投稿しました。WordPress との付き合いは長くなりそうです。
Twenty Fourteen もかっこいいんですが、人を選ぶというか、用途を選ぶ感じがします。でもコンテンツマーケティングを仕掛けるにはいいのかもしれません。。。やってみないとなとも言えませんが。

まず始めに、これはどんな人のためのものか？

前述のように、WordPress や PHP などの専門性を高めたいと思っている人のものではありません。WordPress を使ってネットでの集客やセールス力をアップさせたいと思っている社長・起業家、個人事業主、マーケターやウェブ担当者のためのものです。
目的はあくまで売上アップ。そのために必要なカスタマイズが出来る程度に WordPress を活用できればいいと考えている人のためのものです。
また、ある程度知識のある玄人向けのものでもありません。WordPress を使い始めた方。WordPress を今まで何となくで使ってきた方。PHP に関して全然知識のない方のためのものです。
加えて、ウェブサイトの基本である、HTML や CSS の知識はある程度あることを前提に進めていきます。
では、早速いきたいと思います。

まずはWordPressにおける PHP の機能的な役割について

正直 PHP の本質を理解しているとは思ってませんが、ぼくがイメージしているのはこんな感じです。

サーバー上にある段階では、PHP ファイルはあくまでもレシピや材料としてだけの存在です。
実際にぼくたちが見ているウェブサイト（PHP で作られた WordPress などのサイト）は、ぼくたちがアクセスするまで基本的に存在していないようなものです。注文するまでは料理が出てこないのと一緒です。ぼくたちがアクセスして初めて、ウェブサイトとして形作られます。
オムライスが食べたい！（トップページが見たい）と注文（アクセス）すると、コックさん（これは何に該当するだろうか？）がレシピ（PHP で書かれた指示内容）を元に必要な材料（ヘッダー・本文・サイドバー・フッターなどの PHP ファイル）を揃え、オムライスとして調理・盛りつけ（CSS などでのレイアウト・デザインの構成）をして、ぼくたちの前に運ばれてきます（HTML ウェブサイトの表示）。
アクセスされる度に 1 回 1 回 HTML サイトを構成している・吐き出している、みたいな説明をよく見かけますが、それはつまり、ぼくたちがアクセスして初めて HTML ウェブサイトが構成されているわけです。
だからこそ、アクセスした人や表示するページなどの条件によって、細かくコンテンツを変えていくことができるわけですね（1 ページ目はヘッダー画像を表示するが、2 ページ目以降は表示させない、とか）。そして、そのために表示が遅くなる、というのがデメリットでしょう。
こういった作業をサーバーとやり取りしたりとか、なんかよく分かりませんが複雑なことをしているようですが、イメージとしてはこんな感じだと思います。

WordPress テーマの構造を PHP 的に把握する

WordPress のテーマファイルを覗いてみると、主に 2 種類の PHP ファイルがあります。この 2 つのタイプのファイルの関係性を把握しておけば、どこをカスタマイズしたらどう変化するのか、希望通りのカスタマイズをするためには、どこを変更したらいいのか、ということが分ってくるようになります。
その 2 つのタイプとは、

WordPress のテーマで具体的に見てみると、以下のようなファイル名で分類できます（Twenty Thirteen のファイルを参考にしていますが、他もほぼ同じのはずです）。

レシピの具体例

例えば、こちらの【 single.php 】というファイルを開くと、以下のようになっています。

<?php
/**
 * The template for displaying all single posts
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
get_header(); ?>
	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">
			<?php /* The loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', get_post_format() ); ?>
				<?php twentythirteen_post_nav(); ?>
				<?php comments_template(); ?>
			<?php endwhile; ?>
		</div><!-- #content -->
	</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

結構内容はスカスカで簡単そうに見えますよね。どういう材料をどういう順番で、どういう条件で表示させるかが書かれています。
ざっくりと、1 〜 10 行目までがヘッダー、12 〜 25 行目までがコンテンツ、27 行目がサイドバー、28 行目がフッターの順番で構成されています。そしてヘッダーの部分は【 header.php 】を呼び出します。
吐き出す、と言った方が正しいですかね。。。同じようにサイドバー部分は【 sideber.php 】、フッター部分は【 footer.php 】を吐き出します。
コンテンツ部分はちょっと複雑になってます。【 single.php 】は比較的シンプルですが、他のレシピ系のファイルを見るとこの部分は条件分岐タグなどを用いて、色々な条件によって表示方法を変えられるようになっているみたいです。

材料の具体例

一方、材料となるファイルの例として【 header.php 】を見てみましょう。

<?php
/**
 * The Header template for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
	<div id="page" class="hfeed site">
		<header id="masthead" class="site-header" role="banner">
			<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
				<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
				<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
			</a>
			<div id="navbar" class="navbar">
				<nav id="site-navigation" class="navigation main-navigation" role="navigation">
					<button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button>
					<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
					<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
					<?php get_search_form(); ?>
				</nav><!-- #site-navigation -->
			</div><!-- #navbar -->
		</header><!-- #masthead -->
		<div id="main" class="site-main">

こちらも色々複雑な感じがしますが、実は PHP の理解というより、HTML の理解の方が必要です。めっちゃ単純化すると、、、以下のような基本的な HTML サイトの構造になっていることが分かります。
 

<html>
<head><!-- 21行目 -->
<title></title><!-- 24行目 -->
</head>
<body><!-- 33行目 -->

そして、【 footer.php 】を見てみると分かるんですが、</body> や </html> があって、ちゃんとサイトが閉じられた構造になっていることが確認できます。
また、ところどころに PHP タグが見られるのは、決まった情報を呼び出すための便利なタグとして使われています。
例えば、24 行目に <title> タグで挟まれた PHP タグを見つけることができると思います。通常、HTML だけで書いたサイトは、ここにタイトルを書くわけですね。テキストで。それがサイトのタイトルとして認識され、SEO 上も重要視されるわけです。
ですが、WordPress を始め、CMS ではこのタイトルを管理画面側で設定しますよね。直接 PHP ファイルに書き込んだりはしません。管理画面側からいつでも変更ができます。
つまり、このタグが管理画面で設定したタイトルを、この場所に吐き出してくれる、というわけです（アクセスすると、タイトルが文字として認識される）。
他にも、ブログの URL を吐き出してくれるタグや、ブログの投稿者名を吐き出してくれるタグとか、たくさんあります。
むしろ重要なことは、どんな HTML 構造になっていて、id や class などのセレクタは何と指定されているのか、というようなことを把握することでしょう。これを確認できるようになっておけば、スタイルシートのどの部分を変更すれば、デザインやレイアウトを変えられるのか、予想がつきますからね。

サイトの構造を把握するための便利な目印

HTML でページをつくる時は、1 つのファイルに <html> から <head>、その中の meta 情報、<body> と、全てを盛り込んで作っていきますよね。なので分かりやすいとは思います。ですが、WordPress はパーツごとにファイルが異なります。なので、全体の構成を把握するには、複数のファイルを確認しないといけません。
そこで、目印になるのが補足説明。これです。

</div><!-- #primary -->

Twenty Thirteen や、WordPress のデフォルトテーマシリーズには必ず似た様な表記があります。これは、基本タグを閉じる部分に書かれています。上でちょっと説明したように、【 header.php 】に書かれている <body> タグは、【 footer.php 】の中の </body> タグで閉じられています。
同じように、<div id=”＊＊＊”> みたいに始まる要素が、別のファイルで閉じられている場合があります。同じファイル内で閉じられていたとしても、ごちゃごちゃしているので見つけにくくなっています。
そこで、上記の様な補足説明の出番です。例に上げた説明書きは、</div> で閉じられていますよね。そして、#primary と書かれている。つまり、「<div id=”primary”> から始まる部分はここまでです」という意味になります。
これを理解しておけば、複雑でごちゃごちゃした WordPress のテーマファイルでも、なんとなく構成や、何が書かれているかを予想することができると思います。
あとは、ブラウザでソースコードを表示させたり、Firefox の Firebug などのアドオンを使って、サイトを分析すれば、だいぶ理解できるんじゃないかと思います。

まとめ：結局は HTML で好きなようにカスタマイズできる

では、ここまでの長い話をどのように活用すればいいのでしょうか？　それは、構造の把握にあります。結局のところ、ウェブサイトは HTML で書かれていて、レイアウト・デザインは CSS によって決められています。なので、何か追記したい、デザインを変えたいと思ったときは、基本的に HTML と CSS で対応可能です。
ただ、どこに追記したら、サイトのどのページのどの部分に表示されるのか？　もしくは、固定ページを変更したいが、どのファイルを変更したらいいのか？　ということが分かりにくいので、このような話をしました。
この PHP についてのイメージを持っておけば、かなりカスタマイズの自由度が高まると思います。ぜひ参考にしてみてください。

① 次のwordpressは3.6と聞いていますが、デフォルトテーマがそれにともないまた変わるそうです。このままtwentyelevenをつづけてもいいのでしょうか。それともwordpressのバージョンがあがれば、テーマもかえたほうがいいのでしょうか。

さて、早速ですが回答です。

Twenty Eleven 使い続けることで何か実害が出るとは思えません。WordPress のバージョンが変わっても、テーマも合わせて変更する必要はないでしょう。特にビジネスに使われている場合は、新しいテーマの内容を把握することに時間を割くより、もっと重要なことに時間を使った方が賢明です。
以下、根拠などを説明してますので、興味があればどうぞ。

WordPress 3.6 の新テーマ Twenty Thirteen を使うべき人、そうでない人

ぼくが WordPress 3.6 の新しいテーマ Twenty Thirteen について知ったとき、「また新しいテーマか〜…やばいな」と思ってしまいました。何がやばいかと言うと、また新しいテーマに興味を持って行かれてしまうのではないか、という点です。
WordPress ユーザーとして、新しいテーマが出たら、そりゃ試してみたくもなります。どんなカスタマイズ機能が備わっているのか確認してみたくもなります。でも、たぶん趣味の範囲を出ないのです。残念ながら、自己満足でしかないのです。
もし、あなたがウェブデザイナーで WordPress ベースのサイトを作っている人なら、WordPress の使い方を教えている人なら、WordPress の専門家と名乗っている人なら、こういった最新情報はいち早く押さえておく必要があるでしょう。
しかし、そうでないのならテーマについての知識や使い方を把握するのは、本業とはかけ離れた行為です。新しいテーマの使い方を身につけたからといって、売上が上がるわけでも、お客さんの満足度が上がるわけでもありません。
確かに、ウェブデザインにも流行がありますし、テーマはサイトのユーザビリティや印象を決める重要な要素なので、訪問者視点に立って考えた場合、変更した方がいいという判断になることもあるでしょう。ただ、正直テーマの見直しより、もっと重要な点を見直した方がいいのではないか、というケースがほとんどだと思います。

テーマの変更は最重要事項ではない

つまりそういうことです。テーマを変更するかどうかは、結局立場や好みの問題です。Twenty Twelve がリリースされたときも、Twenty Eleven と比べて正直使いにくいなと感じました。なのでぼくは Twenty Eleven を使い続けています。
それよりも見直すべき点は、ウェブサイトから見込み客を集める仕組みがあるかどうかという点です。具体的には訪問者のメールアドレスや連絡先などを取得する仕組みがあるかどうか。あるならその反応率を上げるにはどうしたらいいか、などです。
これはデザイン云々よりも、サイト上で何（どんなコンテンツ）を提供しているか？　訪問者にその価値がどのように伝わっているのか？　メッセージが訪問者の注意をつかんでいるのか？　などを検討した方がいいということです。
その方が見込み客の獲得につながりますし、結果的に売上に貢献するでしょう。

でも Twenty Thirteen も気になる・・・
その場合はテストサイトで試験運用を

そう、それはしょうがないですよね。気になるものは気になります。Twenty Thirteen を見てみましたが、今までのデフォルトテーマとはだいぶイメージが違いますよね。エキセントリックというか・・・派手です。今まではモノトーンでしたし。最近流行のフラットデザインを意識しているのかな？　という感じもします。
どうしても気になってしまう場合は、別途テーマ確認用の WordPress サイトを立ち上げてみるといいと思います。今の WordPress サイトにすぐ Twenty Thirteen を適用するのではなく、別のサイトで Twenty Thirteen の使い心地を確認してみたり、カスタマイズしてみたりをやっておくと。それで Twenty Eleven よりもいいと感じたらテーマの以降に踏み切ってみると、、、。
でもそこに時間を割くのなら、他にもっと大切なことがあると思いますよ（ほとんどの場合）、というのがぼくの意見になります。

画像の編集でできること

画像の編集でできることは、基本的に画像を挿入する際に設定したことと同じです。画像挿入の際に設定し忘れたことや、設定を変えたいと思ったことなどは、こちらで後から変更できます。

(1) サイズ変更

イメージサイズを縮小することができます。割合で選べるようになっています。ここで変更するよりは、【詳細設定】の画面を開いて変更した方が、横幅と高さを実際の数値で確認できるので分かりやすいです。

(2) 配置

画像の配置を変更できます。「なし」だと文字と同じように左詰めになります。「左」や「右」は回り込みです。CSS で言うと float が適用されています。「中央」はその名の通り真ん中配置になります。【 style=”text-align: center;” 】が適用されます。配置はプレビューでも確認できます。

HTML 上で、配置はどのように指定されているか？

例えば Twenty Eleven の場合は、画像の配置を左に指定すると、ここに【 alignleft 】という class が追加されます。スタイルシートで【 .alignleft 】を探してみると【 float: left; 】となっているはずです。つまり、イメージタグに直接【 style=”float: left;” 】と記述して回り込ませているわけではなく、スタイルシート側で用意している回り込みスタイルを class を使って指定しているわけですね。

・左に配置した場合

<img src="画像URL" class="alignleft" />

・Twenty Eleven のスタイルシート

.alignleft {
 display: inline;
 float: left;
 margin-right: 1.625em;
}

(3) タイトル

デフォルトでは、画像のファイル名がタイトルになっています。このタイトルに記載した内容は、ブラウザ上で画像にカーソルを合わせた場合に表示されます。個人的にここを変更したことはありません。SEO 的にも重要ではないみたいです。

<img src="画像URL" title="タイトル" />

(4) 代替テキスト

SEO 的にも重要な alt 属性です。目的は、画像が表示されなかった場合に替わりにテキストを表示させることです。また 検索エンジンのロボットなどに、画像の内容を分からせるためのものなので、SEO 的にも重要だとされているわけです。ここには、画像の内容を伝えるテキストを記載する必要があります。

<img src="画像URL" alt="画像の説明" />

(5) キャプション

画像にキャプションが付きます。キャプションというのは、説明書きです。キャプションはショートコードで追加されます。ショートコードを使うと、あらかじめ指定したものを、簡単なコードを記述するだけで表示してくれます。

(6) リンクURL

画像にリンクを貼ることができます。別ページへのリンクを貼るのは OK ですが、画像の URL をそのまま残すのはユーザビリティを損なうのでやめときましょう。
画像を拡大させたい時も、画像をポップアップ表示してくれるプラグインなどを併用することをオススメします。そうすると、いちいち画面が切り替わらないので。。。

<a href="リンクURL"><img src="画像URL" /></a>

画像の詳細設定の使い方

詳細設定の方では、細かい大きさの設定やスタイルの設定などができます。

(1) 画像のサイズを調節する

これは基本の編集画面と同じですが、【詳細設定】の画面では幅と高さが数値として表示されます。割合を選ぶとここの数値が自動的に変わります。
割合だけで変更すると実際にどのくらいのサイズになるかイメージがわきにくいので、実際のサイズを数値で確認しつつ変更すると分かりやすいです。また、割合ではなく実際にサイズを指定して変更することもできます。

<img src="画像URL" width="幅" height="高さ" />

(2) クラスを指定して、外部 CSS のスタイルを指定できる

class を追加することができます。class はあらかじめスタイルシート側で指定しておく必要があります。

<img src="画像URL" class="クラス名" />

(3) スタイルで画像の CSS を追加できる

style を追加することもできます。ボックスの中に入力するのは、指定したいスタイルシートの部分のみです。例えば画像の周りをボーダーで囲みたい時は、【 border: 3px solid #cccccc; 】などのように入力します。

<img src="画像URL" style="ソースコード上でここに表示させたい内容を入力" />

画像をに border のスタイルを適用する場合

例えば、イメージをボーダーで囲みたい場合は、、、

と記述すると、このようになります。

ソースコードを見てみると、このようになっています。

<img src="画像URL" style="border: 3px solid #333333;" alt="alt属性" width="300" height="200" />

(4) 枠線・余白の数値は簡単に設定できる

(3) では任意のスタイルを指定することができますが、枠線の太さ、余白（マージン）については、ここで簡単に指定できます。数値を指定すると、(3) のスタイルの部分に該当するスタイルが自動的に記述されます。
例えば、【上下余白】に【 10 】と入力すると、【 margin-top 】と【 margin-bottom 】に 10px ずつ余白ができます。

詳細リンク設定

ここでは画像にリンクを指定した際の細かい HTML タグを設定できます。

(5) リンクタイトル

タイトル属性を指定できます。

<a href="リンク先URL" title="リンクタイトル"><img src="画像URL" /></a>

(6) リンク rel

rel 属性を指定できます。

<a href="リンク先URL" rel="rel 属性値"><img src="画像URL" /></a>

rel 属性はリンク先のリソースとの関係を表すもので、以下のようなものがあります。

(7) CSS クラス

リンクに class を指定することができます。

<a href="リンク先URL" class="クラス" ><img src="画像URL" /></a>

(8) スタイル

リンクに style を指定することができます。

<a href="リンク先URL" style="スタイル" ><img src="画像URL" /></a>

(9) リンクターゲット

リンク先を別ウィンドウで開くか、同じページで開くか指定できます。チェックを入れると、リンクタグが以下のように変更されます。

<a href="リンク先URL" target="_blank" ><img src="画像URL" /></a>