写真素材 足成：酒の瓶

参照：テーマカスタマイズの事前プレビューが可能に — ブログ — WordPress.com

以下の部分をクリックすると

以下のようなウィンドウが表示されます。キャプションのところに＜ａ＞～＜／ａ＞タグを入力することで、

画像のタイトル（キャプション）にリンクをつけることができるようになったようです。

写真素材 足成：酒の瓶

テーマカスタマイズの事前プレビューが可能に — ブログ — WordPress.com（Look Before You Leap — Blog — WordPress.com）

「外観」→「テーマ」より、テーマの一覧を見ることができるところはこれまでと同じです。

これまでは、単にプレビューを見れるだけで、カスタマイズしたときにどのような状態になるかを確認することはできませんでした。無料テーマの場合は、一旦、そのテーマを適用して気に入らなかったら元のテーマに戻せばいいのですが、プレミアムテーマの場合は購入しないと適用できないのでそう簡単にはいきません。30日以内であれば返金できるとはいえ、一旦、購入してから気に入らないので返金、というのはちょっと気が引けます。

…という気持ちを察してか否か、「ライブプレビュー」のリンクをクリックすると、

カスタマイズまでできるプレビュー画面が現れます。左の方にカスタマイズするためのメニュー、右側にカスタマイズした内容が反映されたテーマが表示されます。

例えば、背景画像を変更してみます。

画像をドラッグ＆ドロップし、

背景に木目状の画像を適用してみます。

すると、こんな感じで、プレビューの状態で背景を変更することができます。

カスタムデザインにアップグレードしている場合には、事前にCSSを追加しておけば、

こんな感じでCSSカスタマイズした状態のものをプレビューすることができます。

これまでどおり、プレビューの状態で、たとえば、問い合わせフォームの画面に切り替えたりすることができます。

ブログ「comemo」のメニュー一覧 – comemo

メニュー一覧へのリンクはメニューの下などにつけました。

今後ともよろしくお願い致します。

Customize — Theme Showcase（WordPress.com 日本語ブログでの解説記事：カスタマイズブログを集めたユーザーショーケース — ブログ — WordPress.com）

以前はテーマの検索ページへのリンクボタンのあったところに「Customize」というボタンが追加されています。

Theme Showcase — WordPress.com

「Customize」ボタンをクリックすると、以下のようなページが開きます。

Customize — Theme Showcase

任意のブログのサムネイル画像にカーソルをあてると「View」という文字が現れるので、それをクリックすると、

そのブログが右側に表示され、左側に、そのブログが使用しているテーマ、カスタムフォントを使用している場合にはそのフォントの種類、カスタムCSSを使用している場合にはその旨の記述が表示されます。

カスタムフォントやカスタムCSSを使用するためには「カスタムデザイン」機能を追加する必要がありますが、以下のようにそのようなオプションを使わずにデザインしている例も紹介されています。

WordPress.com のテーマ「Twenty Ten 」に以下のCSSを追加すると

#main {
overflow: visible;
}

#content h1.entry-title a,#content h1.entry-title,#content h2.entry-title a,#content h2.entry-title {
color: #F9F9F9;
font-weight:normal;
}

#content h1.entry-title a:hover, #content h2.entry-title a:hover {
color: #ccc;
}

.page-template-onecolumn-page-php #content h1.entry-title,.page-template-onecolumn-page-php #content h2.entry-title {
  	margin:0 -186px 30px;
	padding:12px 180px;
}

#content h1.entry-title,#content h2.entry-title {
	background: #1d8ade; /* Old browsers */
	background: -moz-linear-gradient(left, #1d8ade 0%, #53a2e2 50%, #1d8ade 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d8ade), color-stop(50%,#53a2e2), color-stop(100%,#1d8ade)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* IE10+ */
	background: linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* W3C */
	margin:0 -10px 30px -56px;
	padding:12px 20px;
	color:#FFF;
	text-shadow:1px 1px 2px #333;
	box-shadow:inset 0 0 50px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.3);
	position:relative;
	}
 
#content h1.entry-title:before,
#content h1.entry-title:after,
#content h2.entry-title:before,
#content h2.entry-title:after {
	content: ' ';
	position: absolute;
	z-index: -1;
	width: 0;
	height: 0;
	right: -14px;
	bottom: -15px;
	background: transparent;
	border-color: transparent  transparent transparent #666;
	border-style:solid;
	border-width:15px;
	}
#content h1.entry-title:after,#content h2.entry-title:after {
	left: -14px;
	bottom: -15px;
	right:auto;
	border-color: transparent #666 transparent transparent;
	}

見出しがいい感じで装飾されます。

demo

demo

参考にした記事：コピペで出来るCSS3で見出しスタイリング | 3streamer blog

ページの自動めくり機能のあるテーマは、WordPress.com のテーマ検索機能で探しだすことができます。

ページの自動めくり機能とは

ページの自動めくり機能とは、フロントページで画面をスクロールしていったときに以下のようにページが自動的にめくれる機能のことです。

Ari デモ

テーマによっては、以下のようにページめくりをするためのボタンが表示されるものもあります。これは、テーマ「Twenty Ten」での例。

Twenty Ten デモ

ページめくりをするためのボタンが表示されるタイプのテーマの場合は、「設定」→「表示設定」→「To infinity and beyond」のところで、「無限スクロール」のチェックを外すと、

他の多くのテーマと同様にリンク「←過去の投稿」でのページの切り替えに変更されます。

ページの自動めくり機能のあるテーマの探し方

WordPress.com のテーマ検索機能は、上のバーの一番左のロゴをクリックしたときに表示される画面の、

フッターの左側にある「テーマショーケース」という項目からアクセスできます。

ページの自動めくり機能のあるテーマを探すには、まず、「Explore the Themes」ボタンをクリック。

「Filter」をクリック。

カテゴリー「Features」の中の「Infinite Scroll」という項目にチェックを入れ、

「Apply Filters」ボタンをクリックすると、

ページの自動めくり機能のあるテーマの一覧が表示されます。

設定のバリエーション

６つのウィジェットエリアがあります。

１つのメニューエリアがあります。

ヘッダー画像を追加することができます。

背景を変更することができます。

CSS編集のバリエーション

以下のCSSを追加すると

body {
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
} 

ie （インターネットエクスプローラ）での日本語のフォント表示がきれいになります。

固定ページ、投稿記事どちらにもある機能

アイキャッチ画像

アイキャッチ画像を表示する機能は、固定ページ、投稿記事どちらにもあります。機能の有無は、テーマ毎に異なります。

demo｜固定ページでのアイキャッチ画像の表示例

demo｜投稿記事でのアイキャッチ画像の表示例

カスタムメニューでの選定

カスタムメニュー機能では、固定ページ、投稿記事のどちらも選定することができます。

demo

共有ボタン（Facebook 等のボタン）

共有ボタンは、固定ページ、投稿記事どちらにも貼り付けることができます。

demo

demo

いいねボタン

いいねボタンは、固定ページ、投稿記事どちらにも貼り付けることができます。

demo

demo

固定ページだけにある機能

テンプレート

テンプレート機能は、固定ページのみにあります。投稿記事にも「投稿フォーマット」という似たような機能がありますが、一般的には、テンプレート機能の方がレイアウトが大胆に変更されるようです。例えば、テーマ「Twenty Eleven 」の場合、以下の３つのテンプレートが準備されています。

Showcase Template | Twenty Eleven

デフォルトテンプレート | Twenty Eleven

Sidebar Template | Twenty Eleven

フロントページでの選定（ウェブサイトの表紙への適用）

WordPress.com には、ウェブサイトの表紙に固定ページを適用することができます。その設定は、「設定」→「表示設定」→「フロントページの表示」より行います。たとえば、このブログでは、「Showcase Template」というテンプレートを使用している「Showcase Template を使用している固定ページ」を表紙に使っています。

投稿記事だけにある機能

カテゴリー／タグ

投稿記事には、カテゴリーやタグをつけることができます。

投稿フォーマット（テンプレートみたいなもの）

投稿フォーマット機能は、投稿記事のみにあります。固定ページにも「テンプレート」という似たような機能がありますが、一般的には、投稿フォーマット機能の方がより限定的に変更されるようです。例えば、テーマ「Twenty Eleven 」の場合、投稿フォーマットを「引用」に設定すると、引用部分の文字が大きくなります。

Formatに「引用」を適用すると、引用文（タグ<blockquote>～</blockquote>で囲った部分）が大きく表示されます。

demo

 
demo

時系列（アーカイブ）表示／投稿日等の表示。

投稿記事は時系列で表示されます。

demo

また、投稿記事では、投稿日等が表示されますが、固定ページでは表示されません。

demo

demo

先頭に固定表示／注目記事への指定

投稿記事では、時系列に並んでいるアーカイブ表示の先頭に特定の記事を固定することができます。その記事にさらにアイキャッチ画像を設定すると、テーマによっては注目記事として指定されます。

demo

RSSフィード（RSSでの更新情報の発信機能）／パブリサイズ共有機能（Facebook 等への更新情報の自動発信機能）

ブログをフォローしている人に対して発信される情報（RSSフィードでの情報発信）は投稿記事からのものとなります。固定ページを新規に作成したり、更新したりしてもブログをフォローしている人には情報がいきません。Facebook などへ自動的に情報を発信する機能（パブリサイズ共有機能）についても同様です。

カスタム CSS の機能強化 — ブログ — WordPress.com

たとえば、テーマ「Reddle 」に以下のCSSを追加すると、

@media (max-width: 900px) {
	#page #main .widget-area {
		background:white;
	}
}

#colophon,#supplementary {
	background:black;
	border-color:#333;
	color:#CCC;
}

iPhone 等でのフッターの表示などを変更することができるようになりました。

demo

demo

なお、2012年4月9日現在、プラグイン「WordPress.com Custom CSS」では、今回の変更を反映していないようですので、レンタルサーバ等にインストールするタイプの WordPress をお使いの場合は、かわりに「My Custom CSS」等を使ってみてはいかがでしょうか？

WordPress.com のテーマ「Twenty Eleven 」に以下のCSSを追加すると

aside[id*=nav] h3.widget-title {
background-color:#CCC;
text-align:center;
font-size:14px;
color:#555;
border:none;
padding:10px 0;
}

#secondary aside[id*=nav] {
padding:0;
}

aside[id*=nav] {
border:5px solid #CCC;
border-radius:5px;
}

aside[id*=nav] ul li {
list-style:none;
}

aside[id*=nav] ul {
padding:5px 7px;
}

aside[id*=nav] ul > li {
border-bottom:1px dotted gray;
line-height: 1.5;
padding: 15px 0;
}

aside[id*=nav] ul > li > ul li {
border-bottom:none;
line-height: 1.5;
padding: 5px 0;
}

aside[id*=nav] ul.sub-menu {
margin-bottom: -10px;
}

カスタムメニューウィジェットに枠がつきます。

demo

demo