『Luxeritas』の初期設定（外観カスタマイズ）を解説！

はいこんにちは！ぱる（@palulog）です。

『Luxeritas』の導入・初期設定（内部カスタマイズ）に引き続き、初期設定（外観カスタマイズ）をやっていきたいと思います。

[aside type="warning"]当ブログ『ぱるくら』は有料のWordPressテーマ「STORK（ストーク）」を使用しています。「Luxeritas」を使用したサイトは『ぱるイラスト』です。参考にしてみてください。[/aside]

『Luxeritas』の初期設定（外観カスタマイズ）をしよう！

まずはワードプレスの管理画面から「Luxeritas」→「カスタマイズ（外観）」を選択してください。

この画面が出たらOK！

サイト情報/サイトアイコンで設定したところ

一番上の「サイト情報/サイトアイコン」で設定したところを解説していきます！

サイトのタイトルとキャッチフレーズ

サイトのタイトルとキャッチフレーズはこの位置に表示されます。

サイトアイコン

お好みで設定してください！ひとまず仮設定してみました。

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]こんな感じになった！[/voice]

全体レイアウトで設定したところ

上から2番目の「全体レイアウト」で設定したところを解説していきます。

コンテナの最大幅

記事とサイドバーを合わせたMAXの横幅ですね。
「ぱるイラスト」はイラスト素材が中心なので、横幅はいらないかな？と思い少し縮めました。

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]普通にブログを書くなら変更しなくて良いね[/voice]

投稿ページ

「Next / Prev ナビゲーション表示」のチェックを外しました。
記事下のナビゲーションが消えて、いきなり関連記事になります。

トップページだとこの様子がわからないので、どれか記事を開いて（またはテスト記事を投稿してみて）確認してください！

グリッドレイアウトで設定したところ

3番目の「グリッドレイアウト」で設定したところを解説していきます。

リスト型トップページ

「通常スタイル」をはじめ、「タイル型」「カード型」とそれぞれ最大列を選べます。

[colwrap]
[col2]

[/col2]
[col2][/col2]
[/colwrap]

私はイラストを並べて表示させたいので、「カード型（最大3列）」に変更！

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]見やすくなった！[/voice]

カテゴリー

先ほどはトップページの記事一覧の表示設定でしたが、今度はカテゴリーページの設定です。
同様に「カード型（最大3列）」に変更しました！
これでカテゴリーから見てもトップページと同じような並びになりました。

アーカイブ

使うかわかりませんが、一応そろえるために「カード型（最大3列）」に変更。

カラム操作で設定したところ

4番目の「カラム操作」で設定したところを解説していきます。

カラム数

「フロントページ」「投稿ページ」「固定ページ」「カテゴリー/アーカイブ」それぞれのカラム数が設定できます。すごい……！

[colwrap]
[col3]

[/col3]
[col3][/col3]
[col3][/col3]
[/colwrap]

私は

• フロントページ→1カラム
• 投稿ページ→2カラム
• 固定ページ→1カラム
• カテゴリー/アーカイブ→2カラム

に変更しました。

サイドバーの位置

ブログを書くなら右サイドバーのほうが無難。
ただ私はサイト内のいろいろなイラストを見てほしいので、目立たせるためにサイドバーを左に変更しました。

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]カテゴリーが目立つね～！[/voice]

領域の分離と結合

サイドバーは初期設定で結合されているのでわかりにくいですが、分離させると項目ごとにスキマができるんですよね。後々カスタマイズで枠線はとってしまいたいのですが、コンパクトにしたかったのでひとまず結合させました！

コンテンツとサイドバーの分離・結合

分離していると記事の下の方はサイドバーがない状態なのですが、結合させて常にサイドバーのゾーンを確保してみました。

ヘッダー/フッターで設定したところ

「ヘッダー/フッター」で設定したところを解説していきます。

タイトルの配置

タイトルを「左」から「中央」へ変更しました！

コンテンツ領域とサイドバーで設定したところ

「コンテンツ領域とサイドバー」で設定したところを解説していきます。

コンテンツ領域

「コンテンツ領域に枠線をつける」のチェックを外しました。記事を囲っている線がなくなります！

コンテンツ領域のパディング

このような記事のまわりの余白です。初期設定だとだいぶ余白があるので、もう少し本文の領域を増やしました。（余白はわかりやすいように色をつけています）

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]こんなところまでカスタマイズできちゃうんだ……！[/voice]

サイドバーの位置

「サイドバーを枠線で囲む」のチェックを外しました。サイドバーを囲っている線がなくなります！

ディスカッションで設定したところ

コメントなどの設定です。今回は特に設定をいじりませんでした！

細部の見た目で設定したところ

「細部の見た目」で設定したところを解説していきます。

角の丸み

PAGE TOPボタンの角の丸みを変更できます。「0」から「10」に変更しました！

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ころんとしてて可愛い♡[/voice]

TOP PAGEの背景色

やっと色がいじれるようになりました！！！

ブログのカラーはイメージできてますか？ここはカナリ重要な部分なのでよーく考えましょう。参考になる記事は「【成果を上げる色の選び方】色彩心理学から学ぶ サイトカラーの「正解」」です。

私は「活気 親しみ 健康」なイメージの「橙色」を選択しました。フリーイラストなので万人受けしたい。特に幼稚園などのお便りに使われたいな～（笑）

カラーコードは「配色の見本帳 | キーカラーで選ぶ配色パターン - 色見本とHTMLカラーコード」がおすすめ。

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]どんどん華やかになってきた～！！[/voice]

メタ情報の表示位置で設定したところ

「メタ情報の表示位置」で設定したところを解説していきます。

これらの表示の有無が設定可能です！

「タクソノミー」は難しい概念ですが、ひとまず「カテゴリー名＋タグ」みたいな認識で良いかと思います。

一覧タイプのページ

フリーイラスト素材サイトなので、思い切って「一覧タイプのページ」の「記事タイトル下のメタ情報」すべてチェックを外しました！

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]超スッキリ！[/voice]

サムネイル（アイキャッチ）で設定したところ

「サムネイル（アイキャッチ）」で設定したところを解説していきます。

投稿一覧ででてくる画像のところです。今回設定はしませんでしたが、画像サイズが変えられるのでお好みでぜひ！もちろんカード型以外もできますよ。

文字種（フォントファミリー）で設定したところ

「文字種（フォントファミリー）」で設定したところを解説していきます。

日本語フォント

お気に入りの「[ Web フォント ] Rounded M+ 1c」に変更しました！これは好みを見つけてみてください♪

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]これ、有料テーマ「ストーク」でもめんどくさい設定だったのに……！本当に無料？！[/voice]

文字サイズで設定したところ

タイトルや見出しなど細かいところまで文字サイズが変更できます。今回はひとまずそのままにしました！

文字色で設定したところ

• 文字色 ( Body )
• リンク色 ( Body )
• リンクホバー文字色 ( Body )
• ヘッダー文字色
• ヘッダーリンク色
• ヘッダーリンクホバー文字色
• フッター文字色
• フッターリンク色
• フッターリンクホバー文字色

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]ぜーんぶ「配色の見本帳 | キーカラーで選ぶ配色パターン - 色見本とHTMLカラーコード」を見ながら設定してみましょう♪[/voice]

背景色/枠線色で設定したところ

• 背景色 ( Body )
• コンテンツ領域背景色
• コンテンツ領域枠線色
• サイドバー背景色
• サイドバー枠線色
• ヘッダー背景色
• ヘッダー枠線色
• フッター背景色
• フッター枠線色
• コピーライト表示部背景色
• コピーライト表示部枠線色

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]同様に「配色の見本帳 | キーカラーで選ぶ配色パターン - 色見本とHTMLカラーコード」を見ながら設定してみましょう♪[/voice]

ちなみにここまでの途中経過。

[colwrap]
[col2]

[/col2]
[col2][/col2]
[/colwrap]
[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]え？可愛くない？これから可愛くしていくから……！！！[/voice]

背景・タイトル・ロゴ画像で設定したところ

「背景・タイトル・ロゴ画像」で設定したところを解説していきます。

サイトタイトルを画像にする

これは設定したい……！仮のロゴを作って設定してみました。

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]でかすぎる（笑）でもきっとどこかで調整できるハズ……[/voice]

パンくずリンク

「パンくずリンク」で設定したところを解説していきます。
パンくずリンクとは←これです。

パンくずリンク上下パディング（px）

コンパクトにしたいので「10」から「0」に変更しました。

パンくずリンク文字色

好きな色に変更してください！

ヘッダーナビ（グローバルナビ）で設定したところ

「ヘッダーナビ（グローバルナビ）」で設定したところを解説していきます。

ここがグローバルナビです！

モバイルメニューの種類

「豪華バージョン」から「グルーバルナビのみ」に変換。すっきりしました。

スマホ表示を確認するには下のアイコンをクリックしてみてね！

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]左からPC・タブレット・スマホだよ[/voice]

ナビ文字色～

色の変更です。

• ナビ文字色
• ナビバー背景色
• ナビ背景色
• ナビリンクホバー文字色
• ナビリンクホバー背景色
• ナビカレント文字色
• ナビカレント背景色
• ナビ上の線の色
• ナビ下の線の色
• 区切り線の色（「区切り線を付ける」で設定した人のみ）

好きな色に変えていきましょー！

ナビ上・下線の太さ（px）

少し太くしてナビをはっきりさせました。

ここまででどうなったか？というと……

結構可愛くなったのでは？♡初期設定のナビカレント背景色の黒を白変えるだけでも可愛い。

ヘッダー上の帯状メニューで設定したところ

「ヘッダー上の帯状メニュー」で設定したところを解説していきます。

右上にあるこれがあるところが帯状メニューです！

帯状メニューの外観

• 帯状メニュー文字色
• 帯状メニューリンクホバー文字色
• 帯状メニュー背景色
• 帯状メニューの下線の色

で色の変更をしちゃうましょう！高さや下線の太さも変えたい人は是非ここで。

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]線の色も同じにしてフラットにしたよ。[/voice]

検索ボックスの表示

「検索ボックスの表示」にチェックをいれました！素材サイトだからあったほうが便利かな？と思って。

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]検索ボックスができたー！[/voice]

フォローボタンの表示方法

「フォローボタンをカラーにする」「Twitterフォローボタン表示」それぞれチェックをいれました！Twitter IDも登録。他のSNSがある人は登録してみてくださいね♪

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]にぎやかになってきたね！[/voice]

アニメーションで設定したところ

重くしたくないので全て「効果なし」で。気になる人は試してみてください♪

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]めちゃめちゃ可愛いよ……！[/voice]

Lazy Load（画像の遅延読み込み）で設定したところ

「Lazy Load（画像の遅延読み込み）」で設定したところを解説していきます。

プレースホルダーの色

※プレースホルダーとは画像が表示される前に仮表示する背景のことです。
ブログの雰囲気に合わせて色だけ変更しておきました！

画像ギャラリーで設定したところ

今回はいじりませんでした！

外部リンクで設定したところ

「外部リンク」で設定したところを解説していきます。

外部リンクアイコンのタイプ

「記事の外部リンクにアイコン付ける」にチェックをいれました！
外部へのリンクにこんなアイコンがつくんですよ～！

外部リンクアイコンの色

一緒に色も変更しましょう！

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]リンクの色と合わせるときれいだよ！[/voice]

記事の外部リンクに target="_blank" 付ける

外部リンクが新規タブでひらきます。チェックをいれておきました！

投稿者名の表示・ブログカードで設定したところ

今回はいじりませんでした！

SNSシェアボタン(1)で設定したところ

「SNSシェアボタン(1)」で設定したところを解説していきます。

SNS カウントをキャッシュする（おすすめ）

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]おすすめって書いてあるからチェックした[/voice]

記事上 SNS ボタンの種類と配置

• 通常ボタン
• カラータイプ
• ホワイトタイプ
• 可変幅フラットタイプ（カラー）
• 可変幅フラットタイプ（ホワイト）
• 名無しアイコンタイプ（カラー）
• 名無しアイコンタイプ（ホワイト）

どれも良くて迷っちゃう！好きなものを選んでみてください♪
「記事上の SNS カウント表示」にチェックを入れると、シェアされたときに数がでますよ！

私は「名無しアイコンタイプ（カラー）」にしました。

記事下 SNS ボタンの種類と配置

同様に記事下も。私は「可変幅フラットタイプ（カラー）」にしました！「記事上の SNS カウント表示」にもチェックを入れてます。

記事下の SNS シェアメッセージ

一緒にここの設定も！
デフォルトは「よろしければシェアお願いします」です。

私はこんな感じになりました！

SNSシェアボタン(2)～追加CSSで設定したところ

ここらへんはこのままで。

追加CSSは別記事でやろうと思います！

おわりに：『Luxeritas』の初期設定（外観カスタマイズ）完了！

私が設定したところは以上です。

ここだけでもかなり仕上がってきたのではないでしょうか？

カスタマイズ前

カスタマイズ後

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]次はロゴを小さくするところからだな……[/voice]

あなたがすてきなブログを作れますように。ぱるでした！