WordPressのおすすめ無料テーマ巡りその7「Neve」。今回紹介するNeveはデザインのカスタマイズが結構ハイレベルです。ホームページビルダーのように細かく作り込みができ、カスタマイズ性が高いです。
Neveの紹介コメントを翻訳してみます。
Neveは、超高速で簡単にカスタマイズ可能な多目的テーマです。 ブログ、中小企業、スタートアップ、代理店、企業、eコマースショップ（WooCommerceストアフロント）、個人のポートフォリオサイト、ほとんどのタイプのプロジェクトに最適です。 完全にAMPに最適化されたレスポンシブテーマであるNeveは、わずか数秒で読み込まれ、あらゆる視聴デバイスに完全に適応します。 軽量でミニマルなデザインですが、テーマは拡張性が高く、SEOに最適化されたコードを備えているため、Google検索結果で上位にランキングされます。 Neveは、Gutenbergおよび最も人気のあるページビルダー（Elementor、Brizy、Beaver Builder、Visual Composer、SiteOrigin、Divi）と完全に連携します。 Neveは、WooCommerce対応、レスポンシブ、RTLおよび翻訳対応でもあります。 これ以上探さない。 Neveはあなたにぴったりのテーマです！
WordPressテーマ紹介ページより
実際に使ってみたところ、カスタムが非常に楽で操作方法もわかりやすい。ライブでプレビューを見ながら文字の大きさやフォントの種類、色、余白、文字間や行間の調整もできる。もはやほとんど全ての場所の変更ができるというレベルです。
しかもPC、タブレット、スマホ、それぞれのレスポンシブ設定ができるので、カスタマイズが細かい！かなり自由度が高いです。
こちらのサイトでデモ的に採用してみました↓
鴻島blog
目次
Neveの特徴【カスタマイズの自由さ】
Neveの特徴は、使いやすさとカスタマイズの自由さです。優れた無料テーマはいろいろありますが、ここまで細かくデザイン設定ができる無料テーマはないんじゃないんでしょうか。メニューのレスポンシブやカスタマイズ、ハンバーガーメニューのデザインなんかも選べます。
さらに、画面上で変更したいところをクリックすると、修正場所に移動できるところも便利です。上の画像にある鉛筆マークをクリックし、編集ページに飛びます。このように、感覚的に操作ができるのは初心者にも嬉しいですよね。
PC、タブレット、スマホそれぞれのビューを切り替えるには、左下にある「コントロール」タブを選択すればOKです。それぞれに追加したい機能があれば、右下のカスタム画面で＋ボタンを選択し、機能を選ぶだけ。
もう一つ嬉しい機能に「Googleフォント」があります。一般設定とタイトルの両方でたくさんのフォントが選べるので、デザインの幅が広がりますね。
豊富すぎる無料テンプレート（デモサイトをそのまま使える）
デザインを作っていく自信がなくても、Neveでは公式で使えるデザインテンプレートがあるから大丈夫。24種類もの無料テンプレートをインストールすれば、あとは文字や画像を入れていくだけでおしゃれなサイトが完成します。
Neveのカスタマイズ（項目の説明と設定方法）
Neveでカスタマイズできるのは以下の通りです。
- レイアウト
- ヘッダー
- フッター
- 色と背景
- 書式設定
- Buttons
- メニュー（グローバルメニュー）
- ウィジェット（サイドバー）
- ホームページ設定（ホーム画面の設定）
- 追加CSS（デザインの追加）
後半の4つに関しては他のテーマと同じなので省きます。その他の6種類を簡単に解説していきますね。
レイアウトのカスタマイズと設定
カスタマイズはメニューの「外観 > カスタマイズ」からでも、「外観 > Neve Options」からでも可能です。
コンテナー
コンテナーは、サイト全体の画面幅を表します。PC、タブレット、スマホの3種類で設定ができます。およそPC＝1024px、タブレット＝768px、スマホ480pxがブレイクポイントと言われているので、この前後で調整するとうまくレスポンシブされるかと思います。
コンテンツとサイドバー
コンテンツ／サイドバーでは、両サイドに表示するサイドバーの位置調整ができます。幅の設定もできますし、消すことも可能。サイドバーの位置は右側がデフォルトです。左側に移動するとスマホビュー画面の時にトップへ表示されてしまいます（邪魔になるのでおすすめできない）。
ブログとアーカイブ
ブログ／アーカイブレイアウトでは、ブログ記事一覧画面のレイアウトを選ぶことができます。グリッドレイアウトで有名なMasonryがチェック一つで使えます。カラム数も自由に変更でき、記事の抜粋文字の数字も調整可能。無限スクロール（1ページに全コンテンツを表示する）もできます。
投稿
投稿では、タイトルやアイキャッチの順番を変えたり消したりできます（目玉マークをクリックで不可視化）。
ヘッダーのカスタマイズと設定【ロゴ／背景色／メニュー】
ヘッダーとは、サイトタイトルやロゴ、メニューなどを配置する一番上の部分です。ロゴの配置や大きさを、PC、タブレット、スマホそれぞれの画面で変更が出来ます。ヘッダーの幅は「margin（topかbottom）」で変更でき、背景の色も自由に選べます。
メニューの位置は、ロゴの横、下、中央など、自由に選ぶことができます。面倒なら「Header Presets」でテンプレートを選べばOK。わからなければデフォルトが一番です。
フッターのカスタマイズと設定【コピーライト／サイズと背景色】
フッターとは、一番最後に表示される場所です。サイトマップやコピーライトなどを入れます。設定方法はヘッダーと同じ。コピーライトはリンク先と名前を変更すればOK。©︎マークを表示させるコードは「& copy ;」（スペースはツメる）です。
色と背景のカスタマイズと設定【リンクや文字、コンテナ背景の色】
この項目では「リンクの色」「リンクのホバーの色（マウスを乗せた時）」「文字の色（文章）」「背景色」「背景画像」が選べます。色はカラーコードで自由に選べるので、カラーコード変換ツールなどで確認しながら入れていきましょう。
書式設定のカスタマイズと設定【一般 or 見出し】
書式設定では、フォントの種類、大文字小文字の自動変換、文字の太さ、サイズ、行間、文字間が選べます。こちらもデバイスごとに設定が可能です。
一般タブでは、サイト全体に使われている文章（pタグ部分）の文字を変更できます。
- 「Font Family」
フォントの選択ができます。Defaultは何も選んでない状態。
System項目では、システムフォントを選択できます。（明朝かゴシック的な）
Google項目ではGoogleフォントを指定できます。（固定したい場合は指定する） - 「Test Transform」
英語のスペル（小文字と大文字）を自動変換できます。 - 「Font Weight」
文字の太さが選べます。300＝Thin、400＝Light、500＝Regular、600＝Bold、800＝Heavyという感じで、数値が大きくなるほど太くなります。 - 「Font Size」
文字の大きさを選べます。16pxが推奨です。 - 「Line Height」
行間の調整ができます。1.6〜1.8くらいが綺麗かと思いますが、好き好きで。 - 「Letter Spacing」
文字間が調整できます。0.1〜0.2くらいがおすすめ。
見出しタブでは、記事のタイトルや見出し「h1〜h6」までのフォントが選べます。操作方法は上に同じです。
Buttonsのカスタマイズと設定【リンクボタンの設定】
こちらではリンクボタンの設定ができます。Primaryの設定が優先されます。項目を説明します。
- Style…FILLED（塗り）、OUTLINE（線）
- Border…Radius（角丸）、Width（横幅）
- Color settings…Background（塗りの色）、Text and Border（文字と線の色）
- Hover…（マウスカーソルを置いたときの色）上に同じ
- Padding…（ボタンの大きさ）
Neveのカスタマイズ（追加CSS）
ここまで揃っているカスタマイザーですが、個人的には「ウィジェットのタイトル」「見出しの色と余白」「アイキャッチ画像のトリミング」の設定も欲しいところ。もし同じようなカスタマイズが必要な方は、追加CSSの項目にコピペして使ってくださいね。（各項目の数値は自由に置き換えてください）
/* ウィジェットタイトルの文字サイズと太さの変更 */
.widget p.widget-title{
font-size:1em;
font-weight:300;
}
/* タイトルの色変更 */
h1{
color:#84aad6;
}
/* 見出しの色と余白の調整 */
h2,h3,h4,h5{
color:#84aad6;
padding-top:1em;
}
/* アーカイブ一覧のアイキャッチ画像をトリミング */
.nv-post-thumbnail-wrap img{
height:180px; /* ←縦のサイズは自由に変更してOK */
object-fit: cover;
}
Googleアナリティクスや、アドセンス広告コードを入れる枠は用意されていないので、もし入れたい場合はテーマエディターにある「テーマヘッダー（header.php）」ファイルの<head></head>内にコピペしましょう。
その他、WordPressの無料テーマ巡り
Wordpressの無料テーマ“Hestia”おすすめカスタマイズ – freespace
Wordpressの無料テーマ「Alternative」でデモサイトを作った – freespace
Wordpressでグリッドレイアウトを作る【プラグイン:Final Tiles Grid Gallery／テーマ:Luxeritas】 – freespace
WordPressの無料テーマ「Minimal Portfolio」使用レビュー – freespace
