Twenty Seventeen

Twenty Seventeen は2017年の新しい WordPress デフォルトテーマです。ビジネス向けのデザインに新しいビデオヘッダーがサポートされ、ページセクションを組み合わせてフロントページレイアウトを作成できます。カスタムカラーオプションを使用したり、サイトロゴ、ソーシャルメニュー、ウィジェットを追加してカスタマイズできます。

twenty-seventeen-1058

クイックスペック クイックスペック

  • メインカラムの最大幅は 2カラムレイアウトで 525px、1カラムレイアウトで 740px
  • サイドバーの最大幅は 326px
  • 推奨するアイキャッチ画像は幅 2000px、高さ 1200px
  • 推奨するヘッダー動画、ヘッダー画像サイズは幅 2000px、高さ 1200px

トップ ↑

ヘッダーメディア ヘッダーメディア

Twenty Seventeen はヘッダー画像とヘッダー動画の両方をサポートします。どちらも「カスタマイズ」>「ヘッダーメディア」から変更できます。

video-headers

ヘッダー動画には mp4 動画をアップロードするか、YouTube 上の動画をリンクできます。ファイルサイズの小さな動画を使用すればページロードが速くなります。

ヘッダー画像を使用すると、サイトの先頭に大きな写真を配置できます。またヘッダー動画のフォールバックとしても使用できます。ヘッダー動画とヘッダー画像の両方を追加すると、ヘッダー画像は動画がロードされるまでのプレースホルダーとして使用されます。またモバイル機器のネットワークで動画の再生が難しい小さな画面のフォールバックにもなります。

トップ ↑

フロントページ フロントページ

Twenty Seventeen ではサイトの異なるページのコンテンツを組み合わせて印象的なフロントページを構築できます。各ページのアイキャッチ画像が強調され、固定位置にフルスクリーンサイズで表示されます。Twenty Seventeen にはページを割り当て可能な4つの異なるセクションがあります。

設定するには「カスタマイズ」>「ホームページ設定」にアクセスし、「ホームページの表示」で「固定ページ」を選択します。

front-page

次に「カスタマイズ」>「テーマオプション」にアクセスします。それぞれのフロントページ 第#セクションのコンテンツ で、セクションに表示するページを選択します。

theme-options

まだどのページも作っていなければ、カスタマイザーで各セクションの下にある + 新規固定ページを追加 をクリックして作成できます。カスタマイザーで新規にページを作成し、あとでコンテンツを埋めることができます。

美しく見せるには各ページにアイキャッチ画像とコンテンツが必要なことに注意してください。

ブログの投稿ページを選択することもできます。この場合、パネルは最新の3つの記事を表示します。

blog

セクションにページを追加したら、公開をクリックしてください。

ページを追加可能なセクションの数を変更するには、次のコードをテーマのfunctions.php に追加してください。

add_filter( 'twentyseventeen_front_page_sections', 'prefix_custom_front_page_sections' );
function prefix_custom_front_page_sections( $num_sections ) {
return 6;
}

上のコードはデフォルトのセクション数を6に変更します。

トップ ↑

カスタムカラー カスタムカラー

Twenty Seventeen には3つのカラーオプションがあります。デフォルトの明るいカラースキーマ、暗いカラースキーマ、そしてスライダーでさまざまな色合いを調整できるカスタムカラースキーマです。

colours-screenshot

利用可能なすべてのカラーオプションを調べるには「カスタマイズ」>「色」にアクセスしてください。

トップ ↑

言語サポート 言語サポート

Twenty Seventeen は WordPress コミュニティからのフィードバックにより多くの言語で最適なフォントスタイルが含まれています。テーマはデフォルトで Libre Franklin を使用し、次の文字においてタイポグラフィの調節を行います。

  • アラビア文字
  • 中国文字
  • キリル文字
  • デーヴァナーガリー文字
  • ギリシャ文字
  • グジャラート文字
  • ヘブライ文字
  • 日本文字
  • 韓国文字
  • タイ文字

また Twenty Seventeen は読みやすさの向上のため非ラテン文字の文字間の空白を削除します。

トップ ↑

1カラムレイアウトと2カラムレイアウト 1カラムレイアウトと2カラムレイアウト

Twenty Seventeen では固定ページに対して、1カラムレイアウトまたは2カラムレイアウトを選択できます。変更するには「カスタマイズ」>「テーマオプション」にアクセスしてください。デフォルトは2カラムレイアウトです。ページタイトルを1つのカラムに、コンテンツを別のカラムに表示します。

注意: この機能は「ホームページ設定」で「固定ページ」を設定した場合のみ利用可能です。

two-column-option

1カラムレイアウトが選択されると、ページのタイトルとコンテンツの両方が幅広の単一カラムに、中央揃えで表示されます。

two-column
one-column

トップ ↑

ウィジェット ウィジェット

Twenty Seventeen にはフッターウィジェットエリアがあり、サイトのコンテンツの下にウィジェットを追加できます。

ブログのトップページ、アーカイブ、検索ページ、ブログの単一投稿ページのサイドバーにもウィジェットエリアがあります。これらのページではサイドバーがなければ1つの中央カラムにコンテンツが表示されます。サイドバーがあれば、1つのカラムにコンテンツ、別のカラムにウィジェットが表示されます。

トップ ↑

プルクオート プルクオート

プルクオートを使用すると読者の注意をある特定の一節に向けたり、投稿や固定ページにビジュアルな興味を与えられます。Twenty Seventeen ではblockquote要素の alignleft クラス、または alignright クラスとプルクオートをセットにしてさらに強調できます。詳細な方法については こちらを参照してください。以下はサンプルのコードです。

<blockquote class="alignleft">This is my fabulous left-aligned pullquote.</blockquote>

カスタマイザーでのページ設定や、投稿のサイドバーウィジェットの追加で2カラムレイアウトを使用すると、同じ側に揃えられたプルクオートは完全にコンテンツエリアの外側、2番めのカラムの下に表示します。注意: この機能はプルクオートが2番めのカラムが終了するコンテンツの中に出現する場合にのみ動作します。

pullquotes

トップ ↑

投稿フォーマット 投稿フォーマット

Twenty Seventeen は次の投稿フォーマットをサポートします。

  • アサイド
  • 音声
  • ギャラリー
  • 画像
  • リンク
  • 引用
  • 動画

トップ ↑

ソーシャルアイコン ソーシャルアイコン

Twenty Seventeen ソーシャルアイコンメニューがあり、ヘッダーにロゴとして表示されるソーシャルメディアプロフィールへのリンクを追加できます。この機能に詳しくない場合は、Twenty Fifteen のドキュメンテーションを参照してください。

次のサービスは Twenty Seventeen のソーシャルアイコンメニューでサポートされています。

  • Behance
  • Codepen
  • DeviantArt
  • Digg
  • Dribbble
  • Dropbox
  • Facebook
  • Flickr
  • Foursquare
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Meanpath
  • Medium
  • Pinterest
  • Pocket
  • Reddit
  • Skype
  • SlideShare
  • Snapchat
  • SoundCloud
  • Spotify
  • StumbleUpon
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • Vine
  • VK
  • WordPress
  • Yelp
  • YouTube

トップ ↑

サポートとリソース サポートとリソース

Twenty Seventeen のフォーラム でコミュニティーの支援を得られます。

Twenty Seventeen を使用したテーマ作成のヒントを得るには、Twenty Seventeen 開発者からの make.wordpress.org のこの投稿を参照してください。変更履歴も参照してください。

チュートリアル

この記事は役に立ちましたか ? どうすればさらに改善できますか ?