Shoreditch

最終更新日:2016-06-26

2016-04-29 at 14.55.png
テーマの解説 Shoreditch Theme — WordPress Themes for Blogs at WordPress.com
デモ Shoreditch – A flexible and multi-purpose business theme
更新情報新テーマ: Affinity と Shoreditch — WordPress.com ニュース|2016-06-16   (New Themes: Affinity and Shoreditch — WordPress.com News|2016-04-28)
テーマの制作者 Thomas Guillot (Automattic)

テーマ「Shoreditch」の背景/特徴

1ページサイトを作成することができます。

2016-04-29 at 14.48

iPhone 等にも対応しているレスポンシブデザイン設計のテーマです。

2016-04-29 at 14.57.png

外観設定のバリエーション

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

2016-04-29 at 15.00.png
2016-04-29 at 14.59.png

うち、フッター部のウィジェットエリアは1〜3カラムに変更することができます。

2016-04-29 at 15.01.png

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

2016-04-29 at 15.01.png

1つのソーシャルアイコンエリアがあります。

2016-04-29 at 15.02.png

ロゴ画像を追加することができます。

2016-04-29 at 15.03.png

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

2016-04-29 at 15.04.png

背景を変更することができます。背景色に応じて文字色が反転します。

2016-04-29 at 15.06.png

記事設定のバリエーション

テンプレート

3つのテンプレートが準備されています。

2016-04-29 at 15.11.png
デフォルトテンプレート
2016-04-29 at 15.09.png
Full-Width Page Template
Panel Page Template – Shoreditch
Panel Page Template

テンプレート「Panel Page」を指定した固定ページには、その固定ページの子ページが表示されます。

テンプレート「Panel Page」を指定した固定ページに推薦文の一覧を表示させたいときには、

2016-04-29 at 15.29

子ページの方にショートコード「Testimonials」を使うなどして設置します。

投稿スライダー

カスタマイズ → おすすめコンテンツ」のところで、ブログページの上の方にスライダー (手動式) を設置することができます。

2016-04-29 at 15.19.png
ブログページ

アイキャッチ画像

記事にアイキャッチ画像を設定するとアーカイブ表示等の時にアイキャッチ画像が以下のような感じで表示されます。

2016-04-29 at 15.24.png
アーカイブ表示等
2016-04-29 at 15.26.png
記事の個別表示

テーマ固有のタグ

CSS クラス「button」や「button minimal」を使うことで以下のようなボタンを設置することができます。

CSS クラス「column-1-2」等を使うことで以下のような複数カラムの記事を作成することができます。

2016-04-29 at 15.31.png

その他のカスタマイズ(色等)・CSS 編集のバリエーション

 カスタマイズ:色

投稿者: comemo

mac & iPad で情報をインテグレートする

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

%d人のブロガーが「いいね」をつけました。