wordpressのCustomizrのカスタマイズ方法について解説する。

Customizrの構造を見てみよう

Customizrの構造はこのようになっている。特徴はスライドショーとフィーチャーページがあるところだ。ちなみに右サイドバーと左サイドバーにはウィジェットエリアが1つずつ、フッターには3カラムのウィジェットエリアがある。

Customizrをカスタマイズ画面からカスタマイズする

ダッシュボードの外観からカスタマイズをクリックしよう。

するとカスタマイズ画面が開く。ここでカスタマイズをしていく。

Global settings

Site Title &Tagline

サイトのタイトル

タイトルを入力する。

キャッチフレーズ

サイト説明文を入力する。

Logo & Favicon

Logo Upload (supported formats : .jpg, .png, .gif, svg, svgz)

ロゴに使用する画像をアップロードする。サイト名がロゴに変わる。

Force logo dimensions to max-width:250px and max-height:100p

アップロードしたロゴ画像において、最大でも250px,100pxで表示するように制限をかける。

Sticky Logo Upload (supported formats : .jpg, .png, .gif, svg, svgz)

ヘッダースティックに表示する画像をアップロードする。アップロードしない場合は、タイトル、もしくはロゴが表示される。

Favicon Upload (supported formats : .ico, .png, .gif)

ファビコンをアップロードする。

skin

Select a skin for Customizr
Choose a predefined skin

ここではテーマ全体の基調となる色を選択する。

Google Fonts

Set up the font global settings
Select a beautiful font pair (headings & default fonts) or single font for your website.

サイト全体のフォント設定、ペアフォントやシングルフォントの中から、好みのフォントを選ぶ。

Set your website default font size in pixels.

デフォルトフォントサイズをピクセルサイズで指定する。

Social links

Social links in header

ヘッダーにソーシャルリンクを表示する。

Social links in footer

フッターにソーシャルリンクを表示する。

Social links in left sidebar

左サイドバーにソーシャルリンクを表示する。

Social links in right sidebar

右サイドバーにソーシャルリンクを表示する。

Social link title in sidebars

サイドバーに表示するソーシャルリンクのタイトルを入力する。空白だとタイトルは非表示になる。

※この下の各ソーシャルリンクのテキストボックスに情報を入力すれば、自動で、そのソーシャルリンクが追加される。

Links style and effects

Smooth scroll on click

アンカー(目印)を置いて、ページ内でのリンクでのジャンプをする時、デフォルトでは一瞬でその場所にジャンプする。このチェックボックスにチェックを入れるとスムースな表現でジャンプ先に移動する効果を付ける事ができる。

Display an icon next to external links

外部リンクに、それを外部リンクだと示すアイコンを設置する。(固定ページと投稿ページにのみ適用)

Open external links in a new tab

外部リンクに”リンクを新ウィンドウまたはタブで開く“を設定した場合に、新しいタブで開くように設定する。

Titles icons settings

Display icons next to titles

アイコンを設置する。またアイコン設置の設定項目ウィンドウを開く。
↓
【アイコン設置の設定項目ウィンドウの設定】

Display a page icon next to the page title

固定ページタイトルの横にアイコンを設置する。

Display a post icon next to the single post title

投稿ページタイトルの横にアイコンを設置する。

Display an icon next to the archive title

カテゴリーページやタグページのアチーブタイトルの横にアイコンを設置する。

Display an icon next to each post title in an archive page

カテゴリーページやタグページの記事リストタイトルにアイコンを設置する。

WP sidebar widgets : display icons next to titles

サイドバーウィジェット部分のタイトルにアイコンを表示する。

WP footer widgets : display icons next to titles

フッターウィジェット部分のタイトルにアイコンを表示する。

Image settings

Lightbox effect on images

画像をクリックすると画像がポップアップするようになるライトボックス機能を使用する。※画像ギャラリーやスライドショーには適用されない。

Autoscale images on zoom

ライトズーム時の画像のポップアップを、画面のサイズに合わせてポップアップする。

High resolution (Retina) support

スマートフォンやタブレットなどの高精細ディスプレイにも対応させる。

Sliders : display on loading icon before rendering the slides

スライドショーが表示準備されている間、ローディングアイコンを表示する。

Dynamic slider images centering on any devices

どのデバイスでもスライドショーを中央にセンタリングして表示する。

Dynamic thumbnails centering on any devices

どのデバイスでもサムネイルを中央にセンタリングして表示する。

Responsive settings

Dynamic sidebar reordering on small devices

どのようなデバイスを使用してサイトを閲覧していても、スライドショーを中央にセンタリングして表示する。

Authors

Display an author box after each single post content

それぞれの投稿記事ページの下部に投稿者情報(ユーザープロフィールで設置した”ブログ上の表示名“と”プロフィール情報“)を表示する。

Header

Design and layout

Display top border

ページ上部に、境界を示す色のついたトップボーダーを表示する。

Display the tagline

サイト説明文を表示する。

Display menu in a box

ページ上部のソーシャルボタン、サイト説明文、メニューをグレイの四角い枠の中に入れる。

Layout

ロゴ、もしくはタイトルを、ヘッダーの左、真ん中、右のいずれに表示するか決める。

Sticky on scroll

画面を下にスクロールした時、ページ上部のソーシャルボタン、サイト説明文、メニュー、ロゴやタイトルを四角い枠に小さく表示する。この四角い枠をヘッダースティックと呼ぶ。

Sticky header : display the tagline

ヘッダースティックにサイト説明文を表示する。

Sticky header : display the title / logo

ヘッダースティックにタイトル、もしくはロゴを表示する。

Sticky header : shrink title / logo

ヘッダースティックにタイトル、もしくはロゴを小さめに表示する。

Sticky header : display the menu

ヘッダースティックにメニューを表示する。

Sticky header : semi-transparent on scroll

ヘッダースティックを透明な透き通ったような表示にする。

Set the header z-index

ヘッダースティックと他の要素の重なり順序を指定する。0にするとヘッダースティックは全ての要素の背面に表示される。1～99までの値を指定するとヘッダースティックは、ほとんどの要素の前面に表示されるが、featured pageの背面に表示される。100以上の値を指定するのが良い。

Navigation

Manage menus

メニューを作成、編集する。

Select a submenu expansion option

マウスをメニューの上に乗せるとサブメニューウィンドウが開くのか、メニューをクリックするとサブメニューウィンドウが開くのかを選択する。

Menu position

メニューをページ右と左のどちらに配置するかを選ぶ。

Reveal the sub-menus blocks with a fade effect

サブメニューウィンドウを表示する時、フェードイン効果をかけながら表示する。

Hover move effect for the sub menu items

サブメニューウィンドウのサブメニューの上にマウスを乗せると、サブメニューの文字がセンタリングされる。

Content:home,post,

Front Page

【Front page displays解説】

Don’t show any posts or page

フロントページ下部に記事リストや固定ページを表示しない。

Your latest posts

フロントページ下部にここ最近の投稿の記事のリストが表示される。

A static page

フロントページ下部に指定した固定ページの内容を表示する。固定ページ選択形式設定ウィンドウが開く。
↓
固定ページ選択形式設定ウィンドウでは、フロントページに表示したい固定ページを選択する。するとその固定ページ内容が、フロントページの下部に反映される。

【Front page displays解説終わり】

Set up the front page layout

フロントページのレイアウト設定

• No sidebars : full width layout
  フルワイドレイアウト、サイドバー無し
• Right sidebar
  右側サイドバーを表示する
• Left sidebar
  左側サイドバーを表示する
• 2 sidebars : Right and Left
  右と左のサイドバー両方を表示する

Select front page slider

フロントページに表示するスライドショーを選ぶ。

Full width slider

フロントページの横幅いっぱいにスライドショーを表示する。

Delay between each slide

どのくらいの時間毎にフロントページのスライドショーの画像を切り替えるかを設定する。1000が1秒である。

Set slider’s height in pixels

フロントページのスライドショーの高さをピクセル値で指定する。

Apply this height to all sliders

上で指定したスライドショーの高さを、フロントページ、固定ページ、投稿ページ、全てのページでの設置したスライドショーに適用する。

Replace the default image slider’s height

アップロードした画像をスライドショーに設定する場合、スライドショーの高さに合わせて自動でサイズ変更する。

Display home featured pages area

Enableはフロントページにフィーチャーページを表示する、Disableはフロントページにフィーチャーページを表示しない、という設定。Enableを選択した場合、フィーチャーページ設定ウィンドウが開く。
↓
【フィーチャーページ設定ウィンドウの設定】

Show images

フィーチャーページに、該当記事のアイキャッチ画像を表示する。

Button text

フィーチャーページに表示されるボタンのテキストを入力する。

Home featured page one

左から一つ目のフィーチャーページに設定する固定ページを選ぶ。

Home featured page two

左から二つ目のフィーチャーページに設定する固定ページを選ぶ。

Home featured page three

左から三つ目のフィーチャーページに設定する固定ページを選ぶ。

Featured text one (200 car. max)

左から一つ目のフィーチャーページに設定する文章を入力する。

Featured text two (200 car. max)

左から二つ目のフィーチャーページに設定する文章を入力する。

Featured text three (200 car. max)

左から三つ目のフィーチャーページに設定する文章を入力する。

Page & Posts Layout

Choose the global default layout

全体のデフォルトとなるページレイアウトを設定する。

• No sidebars : full width layout
  フルワイドレイアウト、サイドバー無し
• Right sidebar
  右側サイドバーを表示する
• Left sidebar
  左側サイドバーを表示する
• 2 sidebars : Right and Left
  右と左のサイドバー両方を表示する

Force default layout everywhere

フロントページも含めて、固定、投稿ページ全てに上のページレイアウト設定を適用する。ここにチェックを入れると、固定、投稿ページやフロントページ設定でも、ページレイアウト設定が変更できなくなる。

Choose the posts default layout

投稿ページのページレイアウト設定のデフォルトを決める。デフォルトなので投稿ページの編集画面でページレイアウトを変更する事もできる。

Choose the pages default layout

固定ページのページレイアウト設定のデフォルトを決める。デフォルトなので固定ページの編集画面でページレイアウトを変更する事もできる。

Post lists:blog,archives,

Maximum number of posts per page

1ページに表示する投稿の記事リストの数を指定する。この設定をして、投稿の記事リストが1ページに表示する数の上限を超えた場合、ページ下部にページネーションが追加され、そのページネーションをクリックすると、次のページで2枚目の投稿の記事リストを見る事ができる。

Select the length of posts in lists (home, search, archives, …)

投稿の記事リストの表示形式を決める、Display the excerptは抜粋形式、Display the full contentでは記事全体が表示される。

Set the excerpt length (in number of words)

上で抜粋形式を選んだ場合、記事リストに表示するそれぞれの記事の文字数を指定する。

Select a layout

投稿の記事リストのレイアウト

• Alternate thumbnails layout
  交互型レイアウト
• Grid layout
  格子型レイアウト

↓
【Grid layoutの設定】

Number of columns per row

1行に表示する格子の数、シングルサイドバーのデザインの場合は3,ダブルサイドバーのデザインの場合は2が最大。

Expand the last sticky post (for home and blog page only)

公開状態を先頭に固定表示にしている最新の記事を広げたイメージで表示する(トップページのみ)。

Apply the grid layout to Home/Blog

トップページに格子型レイアウトを適用する。

Apply the grid layout to Archives (archives, categories, author posts)

カテゴリーページなどに格子型レイアウトを適用する。

Apply the grid layout to Search result

検索結果ページに格子型レイアウトを適用する。

Apply a shadow to each grid items

格子型レイアウトの外枠に影を付ける。

Apply a colored bottom border to each grid items

格子型レイアウトの下部に色の着いた線を付加する。

Display post format icons in the background

投稿アイコンを格子型レイアウトの背景に設置する。

Max. length for post titles (in words)

投稿記事リストのそれぞれの記事のタイトルの表示単語数を決める。

Set the post grid thumbnail’s max height in pixels

格子型レイアウトに表示するサムネイルの高さの最大値を決定する。

【Grid layoutの設定終わり】

Display the post thumbnails

記事リストに、該当記事のアイキャッチ画像のサムネイル画像を表示する。

If no featured image is set, use the last image attached to this post.

該当記事にアイキャッチ画像が設定されていない場合は、その記事に最後に設定されたアイキャッチ画像を使用して、記事リストにそのサムネイル画像を表示する。ようするにアイキャッチ画像を記事に設定して、その後、アイキャッチ画像を削除して、記事にアイキャッチ画像が無い場合でも、その記事に最後に設定したアイキャッチ画像を使用して、記事リストにそのサムネイル画像を表示する、という意味。

Upload a default thumbnail

デフォルトとなるサムネイル画像をアップロードする。サムネイル画像の無いページにおいても、ここでアップロードしたデフォルトサムネイル画像が表示されるようになる。

【Alternate thumbnails layoutの設定】

Thumbnails shape

記事リストに表示するアイキャッチ画像のサムネイル画像の表示形式を選ぶ。

• Rounded, expand on hover
  丸形、記事リストにマウスを乗せると丸が広がる
• Rounded, no expansion
  丸形、記事リストにマウスを乗せても丸が広がらない
• Squared, expand on hover
  四角形、記事リストにマウスを乗せると四角形が広がる
• Squared, no expansion
  四角形、記事リストにマウスを乗せても四角形が広がらない

Thumbnails position

記事リストに表示するアイキャッチ画像のサムネイル画像の位置、Topは記事表示の上部に表示する、Rightは記事表示の右部に表示する、という意味。

Alternate thumbnail/content

記事リストに表示するアイキャッチ画像のサムネイル画像と記事の文章の表示を、記事表示毎に交互に表示する。上の設定で”Top“の場合は、記事表示毎にサムネイル画像が上と下に交互に表示され”Right“の場合は、記事表示毎にサムネイル画像が右と左に交互に表示される。

【Alternate thumbnails layoutの設定終わり】

Category pages titles

Category Archivesのタイトル表示を決める。

Tag pages titles

Tag Archives のタイトル表示を決める。

Author pages titles

Author Archives のタイトル表示を決める。

Search results page titles

Search Results forのタイトル表示を決める。

Single posts

Post thumbnail position

投稿記事に表示するアイキャッチ画像の設定をする。

• Don’t display
  アイキャッチ画像を表示しない
• Before the title in full width
  アイキャッチ画像をタイトルの前で全画面表示する
• Before the title boxed
  アイキャッチ画像をタイトルの前で、記事エリアの大きさに合わせたボックス形式で表示する

Set the thumbnail’s max height in pixels

投稿記事に表示するアイキャッチ画像の高さの上限をピクセル値で指定する。

Breadcrumb

Display Breadcrumb

パンくずリストを表示する。

Display the breadcrumb on home page

フロントページにパンくずリストを表示する。

Display the breadcrumb in pages

固定ページにパンくずリストを表示する。

Display the breadcrumb in single posts

投稿ページにパンくずリストを表示する。

Display the breadcrumb in posts lists : blog page, archives, search results…

検索結果などへもパンくずリストを表示する。

Post metas(category,tags,custum taxonomies)

Display posts metas

ポストメタ設定ウィンドウを開く。

【ポストメタ設定ウィンドウの設定】
↓
Select a design for the post metas

• Text only
  文字のみでポストメタを設定する。
• Buttons and text
  ボタンと文字でポストメタを表示する。

Display posts metas on home

フロントページにポストメタを表示する。

Display posts metas for single posts

投稿ページにポストメタを表示する。

Display posts metas in post lists (archives, blog page)

カテゴリーページなどに表示される記事リストにポストメタを表示する。

Display hierarchical taxonomies (like categories)

ポストメタに階層的なグループを表示する(例：カテゴリー)。

Display non-hierarchical taxonomies (like tags)

ポストメタに階層的なグループで無いものを表示する(例：タグ)。

Display the publication date

ポストメタに記事を投稿した日付を表示する。

Display the author

ポストメタに著者情報を表示する。

【ポストメタ設定ウィンドウの設定終わり】

Display the update date

ポストメタに追加の日付として記事が最後に編集された日付を表示する(編集された事の無い記事には表示されない)。アップデート設定ウィンドウが開く。
↓
【アップデート設定ウィンドウの設定】

Select the last update format

記事の最終編集日のポストメタにおける表示形式を指定する。Nb of days since last updateを選ぶと、記事を最後に編集してから何日経過しているか、Date of the last updateを選ぶと記事の最後の編集日が表示される。

【アップデート設定ウィンドウの設定終了】

Display a recent update notice

最近投稿された記事には、ポストメタに最近投稿された事を示す文字を表示する。

Display the notice if the last update is less (strictly) than n days old

何日前に投稿された記事から、最近投稿された事を示す文字を表示するかを指定する。

Update notice text

最近投稿された記事に表示する、最近投稿された事を示す文字を入力する。

Update notice style

最近投稿された事を示す文字の枠のスタイルを選択する。

Paragraphs

Enable drop caps

段落の先頭の文字に落とし大文字を使う。
↓
【落とし大文字設定ウィンドウの設定】

Apply a drop cap when the paragraph includes at least the following number of words :

段落に何単語以上あった場合に、その段落の先頭の文字に落とし大文字を使うかを設定する。

Drop cap style

• Simple black
  黒文字で落とし大文字を表現する。
• Skin color with shadow
  テーマの基調色として設定しているskin colorと影の文字で落とし大文字を表現する。

Enable drop caps in posts

落とし大文字設定を投稿ページに適用する。

Enable drop caps in pages

落とし大文字設定を固定ページに適用する。

Comments

Display the number of comments in a bubble next to the post title

記事タイトルの横に、その記事に何件のコメントがあるかを表示する。

Comments bubble shape

コメント件数表示の形を選択する、Small bubblesでは小さな泡の表示、Large bubblesでは大きな泡のような表示となる。

Comments bubble color

コメント件数表示の色を選択する、Skin colorを選択するとGlobal settingsで指定したskinの色、Customを選択すると自由に色を決められる。

Enable comments on pages

固定ページにコメント欄を表示する。

Enable comments on posts

投稿ページにコメント欄を表示する。

Display the comment list

コメントリストを表示する。

Footer

Footer global settings

Display a back to top arrow on scroll

ページ上部に戻る矢印を表示する。

Advanced options

Website Performances

Performance : use the minified CSS stylesheet

縮小化したスタイルシートを使用する事によりウェブサイトのロード時間のスピードアップをはかる。

Load images on scroll

視覚上、見えていない箇所の画像のロードを遅らせる。視覚上、見えていない箇所の画像はスクロールで視覚に入るときにロードされる。画像を含む長いページの場合、軽量化してパフォーマンス効率を上げる事ができる。

投稿ページのカスタマイズ

Customizrでは、投稿ページの編集画面で個別に投稿ページをカスタマイズする事ができる。

投稿ページの編集画面の右上を見るとLayout optionという項目がある。ここでページレイアウトの設定ができる。

• No sidebars : full width layout
  フルワイドレイアウト、サイドバー無し
• Right sidebar
  右側サイドバーを表示する
• Left sidebar
  左側サイドバーを表示する
• 2 sidebars : Right and Left
  右と左のサイドバー両方を表示する

またページ下部を見るとSlider Optionという項目がある。ここでスライドショーの設定ができる。設定方法は、

Customizr・スライドショーの設定

を参考にして欲しい。

固定ページのカスタマイズ

Customizrでは、固定ページの編集画面で個別に固定ページをカスタマイズする事ができる。

投稿ページの編集画面の右上を見るとLayout optionという項目がある。ここでページレイアウトの設定ができる。

• No sidebars : full width layout
  フルワイドレイアウト、サイドバー無し
• Right sidebar
  右側サイドバーを表示する
• Left sidebar
  左側サイドバーを表示する
• 2 sidebars : Right and Left
  右と左のサイドバー両方を表示する

またページ下部を見るとSlider Optionという項目がある。ここでスライドショーの設定ができる。

設定方法は、

Customizr・スライドショーの設定

を参考にして欲しい。