テーマ「Twenty Eleven」の補足解説

※テーマ「Twenty Eleven」の概要については、記事「Twenty Eleven | comemo」をご参照下さい。

投稿フォーマットの種類

標準

twentyeleven16
Format:標準 | Twenty Eleven

アサイド

記事のタイトルが省略されます。

twentyeleven17
Format:アサイド | Twenty Eleven

ギャラリー

画像がサムネイル表示されます。

twentyeleven18
Format:ギャラリー | Twenty Eleven

リンク

記事のタイトルが省略されます。書式は、Format「アサイド」と同じようです。

twentyeleven19
Format:リンク | Twenty Eleven

画像

画像の幅を585px以上に設定すると、アーカイブ表示では以下のように表示されます。

twentyeleven20
Format:画像 - 幅585px以上 - | Twenty Eleven

なお、画像の幅が585pxより小さいと、例えば、以下のように右側が空いた状態になります。

twentyeleven21

なお、全画面表示のことも考えると、

twentyeleven22

画像の幅は、930px以上にしておいた方がいいのではないかと思います。

引用

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

twentyeleven24

arrow02

twentyeleven23

ステータス

Formatに「ステータス」を適用すると、記事のタイトルがなくなり、Gravatarの画像が表示されます。

twentyeleven25

ページテンプレートの種類

twentyeleven26
Showcase Template | Twenty Eleven

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

twentyeleven28
Sidebar Template | Twenty Eleven

おすすめ投稿

投稿記事を先頭に固定表示すると、以下のように表示されます。

twentyeleven35

また、複数の記事を先頭に固定することができます。切り替えは右上のボタンで行います。

twentyeleven36

1000px x 288px以上のアイキャッチ画像を使用すると、以下のように全画面表示されます。

twentyeleven37

投稿記事や固定ページでの単独表示におけるアイキャッチ画像の表示

1000px x 288px以上のアイキャッチ画像を使用すると、投稿記事や固定ページを単独表示させたときにアイキャッチ画像がヘッダー画像として適用されます。

twentyeleven39

Windows Live Writer へのテーマのダウンロード

プレビューでは表示が乱れますが、

twentyeleven41

編集画面の方は大丈夫です。実質上、記事の作成には問題ないと思います。

twentyeleven40

レイアウトの伸縮

だんだん幅をせまくしていくと…

twentyeleven29twentyeleven30

自動的に1カラムのレイアウトに変更されます。

twentyeleven31

サイドバーは記事の下側に回り込みます。

twentyeleven32

Format「アサイド」などに指定した投稿記事のリスト表示

「Twenty Eleven Ephemera」ウィジェットを使用すると、

twentyeleven33

Format「引用」、「Status(ステータス)」、「アサイド」、及び「リンク」に指定した投稿記事のタイトルがリスト表示されます。

twentyeleven34

「blockquote」のクラス指定

以下のように「blockquote」を指定すると、

 <blockquote>A normal blockquote</blockquote> 
<blockquote class="pull"> 
A bolder blockquote that extends into both margins</blockquote> 
<blockquote class="pull alignleft"> 
A bolder blockquote that floats into the left margin</blockquote> 
<blockquote class="pull alignright"> 
A bolder blockquote that floats into the right margin</blockquote> 

以下のように表示されます。

duster11

画像のクラス指定

画像を左寄せにするクラス指定「alingleft」に「pull」を追加すると画像が左端まで移動します。

alignleft01

arrow02

alignleft02

同様にして、画像を右寄せにするクラス指定「alingright」に「pull」を追加すると画像が右端まで移動します。

alignright01

arrow02

alignright02

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中