Twenty Twenty One

Screenshot of the new default theme for WordPress, Twenty Twenty-One.

Twenty Twenty-One はあなたのアイデアのための真っ白なキャンバスで、ブロックエディターはそこにあなたのイメージをどのようにも描ける最高のブラシになります。新しいブロックパターンを使えば、美しいレイアウトを瞬時に作成できます。このテーマの柔らかな色合いと、目を引く — しかも時代を超えた — デザインは、あなたの描く作品を輝かせてくれるでしょう。ぜひ試してみてください。あなたのポートフォリオ、ビジネスサイト、個人ブログが Twenty Twenty-One でどのように生まれ変わるのかを、ぜひご覧ください。

仕様の概要

  • WordPress 5.3以降のバージョンで動作します。
  • PHP のバージョンは最低限5.6が必要です。
  • 1440pxのラップトップ画面では、メインカラムの最大幅は1240pxです。 「ワイド」ブロック幅でも同様に最大1240pxで、「フル」ブロック幅では画面の幅全体に広がります。
  • アイキャッチ画像のサイズは、幅が610px以上が推奨されます。
  • ロゴ画像は幅300px以上、高さ100px以上が推奨されます。
  • Twenty Twenty-One には、サイトコンテンツの下とフッターの上に表示されるウィジェットエリアがそれぞれ1つずつあります。各ウィジェットは、利用可能なスペースの3分の1を使って、最大380pxの幅となります。
  • Twenty Twenty-One は Internet Explorer 11 での表示に制限があります。

トップ ↑

アクセシビリティの機能

  • コンテンツのリンクへの移動
  • ランドマークを使ったセマンティックな HTML
  • ハイコントラストモードとダークモードに対応
  • キーボードナビゲーションに対応

トップ ↑

スターターコンテンツ

Twenty Twenty-One には、テーマのブロックパターンやスタイルの使い方を説明するスターターコンテンツが付属しています。スターターコンテンツを有効化できるのは、デフォルト以外のページや投稿がないインストールしたてのサイトのみです。有効化するには、カスタマイザーに移動して「保存して公開」ボタンをクリックしてください。

トップ ↑

Full Block Editor Support

Twenty Twenty-One is designed and developed to take full advantage of the creative freedom enabled by the block editor. Extra care has been given to the Columns block so you can create impressive landing pages with intricate blocks layouts. Twenty Twenty-One includes styles for the block editor, so what you see in the editor will almost exactly match the end result.

トップ ↑

Block patterns

トップ ↑

Large text

A screenshot of the large text block pattern, with the text: A new portfolio default theme for WordPress.
A heading with a 144px text size

トップ ↑

The links area block pattern has a large text followed by social links and an email address. The section has a thin border on all four sides.
For your social links and call-to-action

トップ ↑

Contact Information

The contact information pattern has 3 columns that contains email and phone number, address and social media links with icons.
How to get in touch with you

トップ ↑

Media & Text article title

The media & text article title has a left aligned image combined with text section. The section has a thin border on all four sides.
Highlight your best image and include a summary at the beginning of your article

トップ ↑

Overlapping images

The overlapping images block pattern displays 3 images in two columns.
The left column has two vertically placed images. The right hand column contains one mage and overlaps the left column.
Place images in a beautiful column pattern

トップ ↑

Two Images

The two images block pattern has two horizontally placed images. The images have different sizes and one image has a frame.
Showcase images next to each other with different sizes and borders

トップ ↑

Overlapping images and text

The overlapping images and text pattern uses 3 columns. The two outer columns contains images.
The middle column contains a paragraph with a border around it, and overlaps the left most column.
Mix images and text content in columns

トップ ↑

Portfolio list

The portfolio list pattern has a vertical list of links and miniature images. The image is displayed to the right of the link text.
Each portfolio item is separated by a bottom border.
Display links to your portfolio items together with miniature images

Learn more about block patterns and how to add them

トップ ↑

Block styles

Block styles are selected in the block Settings sidebar in the editor.

Social links: In addition to the default styles, you can choose a dark grey icon color.

Separator: In addition to the default styles, you can choose an extra thick separator.

トップ ↑

Borders

In Twenty Twenty-One, borders can be added to the following blocks:

  • Media & Text
  • Latest posts -Styles for borders and dividers
  • Image -Styles for borders and frames
  • Cover
  • Group

トップ ↑

Overlapping columns

The columns block has an optional style called overlap, where the content of every second column overlaps the previous:

A screenshot of a columns block with the overlapping style applied. The first column has a white background. The second column has a black background and overlaps the bottom right corner of the first column.

トップ ↑

Color palette

The theme provides several recommended colors that works well with the design of the theme. Select the colors in the background color setting and in the editor. There are also matching gradients.

Black

White

Dark Grey

Grey

Green

Blue

Purple

Red

Orange

Yellow

トップ ↑

Custom Background Color

Twenty Twenty includes the option to change your site’s background color.

To change the background color, navigate to Customizer → Colors & Dark Mode.

Add your own custom color, or select a color from the palette.

The colors of the elements on your site are automatically calculated based on the background colors you pick. This ensures that the color contrast is always high enough to be accessible to all visitors.

トップ ↑

Twenty Twenty-One includes a site logo setting which can be used to display the logo of your business or an image of yourself. You can set your site logo by going to Customizer → Site Identity.

The recommended size of the logo is at least 300px wide, or at least 100px tall. The logo is visible in the header and footer.


The logo in the site header is centered. If you want to hide the Site Title and Tagline, the logo is placed to the left of the menu:

トップ ↑

Excerpt settings

In the Customizer you will find a panel called Excerpt Settings:

The Customizer Excerpt settings have two radio buttons where you can can choose between summary and full text.

Here you can choose if the blog and archive pages should show the full content or only the summary.
The default is summary. The search result page always shows the summary.
When the summary is selected, only text will be displayed.

トップ ↑

Twenty Twenty-One includes two menu locations:

  • A traditional responsive horizontal menu at the very top of the site, which supports dropdown menus.
  • A horizontal menu between the widget area and the footer at the bottom of the screen, which only supports one level of navigation.

You can choose a menu location by going to Appearance → Menus, where you can assign a menu to the “Primary Navigation” or the “Footer Navigation”. You can also use both menu locations in combination, if you prefer.

トップ ↑

The primary navigation menu supports menu descriptions.

The menu description is shown below the menu item text.

To enable menu descriptions, go to Appearance → Menus, and open the Screen Options tab at the top of the page.

Under Show advanced menu properties, check the box for Description:

The screen options tab includes a form with settings for menu properties including the menu descriptions.

Add a description by selecting the menu item and filling out the Description textarea. Remember to save your changes.

Each menu item uses a textarea where the description can be added.

トップ ↑

Add Social Icons

There are two ways to add social icons in your site:

  • Use the Social Icons block within the editor.
  • Add a link to a social media site to your footer menu.

When you create a social menu, the text label you provide will be hidden, and an icon will be shown in its place. If you’re not familiar with this functionality, please check out the documentation from Twenty Fifteen.

Twenty Twenty-One provides icons for the following social media services:

  • 500px
  • Amazon
  • Bandcamp
  • Behance
  • Codepen
  • DeviantArt
  • Dribbble
  • Dropbox
  • Etsy
  • Facebook
  • Feed
  • Flickr
  • Foursquare
  • GitHub
  • GitLab
  • Goodreads
  • Google
  • Instagram
  • Kickstarter
  • JSFiddle
  • Last.fm
  • LinkedIn
  • Mail
  • Mastodon
  • Medium
  • Meetup
  • Pinterest
  • Pocket
  • Reddit
  • Skype
  • Snapchat
  • SoundCloud
  • Spotify
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • VK
  • WhatsApp
  • WordPress
  • Yelp
  • YouTube

Additional icons can be added following the steps under “Adding icons in Twenty Twenty” at Themes field guide: WordPress 5.5.

トップ ↑

Widgets

Twenty Twenty-One comes with support for one widget area, at the very bottom of each page. Each widget column is 33% of the site width, up to 380px.

The footer widget area has 3 columns.
Below the widget area is a site information section with the site title or logo, and a ink to WordPress.org with the link text "Proudly powered by WordPress"

トップ ↑

Post formats

Twenty Twenty-One has support for post formats.
Post formats are selected in the editors Settings sidebar → Post → Status & visibility.

  • Standard
  • Aside
  • Gallery
  • Link
  • Image
  • Quote
  • Status
  • Video
  • Audio
  • Chat

トップ ↑

Language Support

Twenty Twenty-One includes styles for RTL languages.

The theme uses a native system font stack. This font stack provides support for a large number of languages.

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
Expand this list to see the fonts used for non-Latin languages.
  • ar, ary, azb, ckb, fa-IR, haz, ps: Tahoma, Arial, sans-serif.
  • zh-CN: PingFang SC, Helvetica Neue, Microsoft YaHei New, STHeiti Light.
  • zh-TW: PingFang TC, Helvetica Neue, Microsoft YaHei New, STHeiti Light.
  • zh-HK: PingFang HK, Helvetica Neue, Microsoft YaHei New, STHeiti Light.
  • bel, bg-BG, kk, mk-MK, mn, ru-RU, sah, sr-RS, tt-RU, uk: Helvetica Neue, Helvetica, Segoe UI, Arial, sans-serif.
  • bn-BD, hi-IN, mr, ne-NP: Arial, sans-serif.
  • el: Helvetica Neue, Helvetica, Arial, sans-serif.
  • gu: Arial, sans-serif.
  • he-IL: Arial Hebrew, Arial, sans-serif.
  • ja: sans-serif.
  • ko-KR: Apple SD Gothic Neo, Malgun Gothit, Nanum Gothic, Dotum, sans-serif.
  • th: Sukhumvit Set, Helvetica Neue, Helvetica, Arial, sans-serif.
  • vi: Libre Franklin, sans-serif.

トップ ↑

Dark Mode Support

One of the accessibility features of the Twenty Twenty-One theme is support for the visitor’s color scheme preferences in their operating system or browser’s settings. The feature is opt-in and supported in most operating systems, including Android, iOS, OSX, Windows 10, as well as most Linux distributions.

If you have Dark Mode enabled, your site will be shown to visitors using a light or dark color scheme, respecting their operating system’s preferences. Depending on their lighting conditions or personal preferences they may choose to switch color schemes using a dedicated button on the bottom-right of their site (or bottom-left for RTL languages).

トップ ↑

Enabling Dark Mode from the Customizer

To activate Dark Mode Support, you can go to the Colors & Dark Mode section in your Customizer. If you have a light color selected for the site’s background, you will be able to see and activate the Dark Mode Support setting. The background color you select will be applied to light mode, while Dark Mode colors are optimized automatically. You can use the Dark Mode On/Off button at the bottom of the preview screen to toggle between dark & light schemes in your preview.

トップ ↑

Dark Mode in the Editor

The editor will by default respect your operating system’s color scheme settings. If on the front of your site you have chosen a different scheme (using the Dark Mode On/Off button), then the editor will use the preferred scheme.

トップ ↑

Block-Based Theme

A version of Twenty Twenty-One is also being built as an experimental block-based theme. You can follow along with development, contribute, and test the theme via GitHub.

トップ ↑

Support and Resources

Get community help with Twenty Twenty-One in its support forum.

You can also read the theme’s changelog.

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