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)
レンタルサーバ等にインストールして使うタイプの WordPress 用テーマの解説等
!

2016-05-05現在、正常に有効化できないケースがあることを確認済みです。(ロリポップ!、WordPress 4.5.1)  

2016-05-05 at 17.21.png

以下のリンク先よりテーマの zip ファイルをダウンロードすることができます。

2016-04-29 at 14.49.png

テーマの制作者

2015-12-10 at 14.09.jpg

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つのテンプレートが準備されています。

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

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

2016-04-29 at 15.29

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

投稿スライダー

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

アイキャッチ画像

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

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 編集のバリエーション

 カスタマイズ:色

 

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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