Luxeritasの外観カスタマイズ
Luxeritas themeをインストールした直後のサイトはこんな感じです。
さぁ、ここから、カスタマイズしていきますよ~♪p(◕ ◡ ◕*)
- 1. Luxeritas themeのカスタマイズ（外観）
- 1.1. サイト情報 / サイトアイコン
- 1.2. 全体レイアウト
- 1.3. グリッドレイアウト
- 1.4. カラム操作
- 1.5. ヘッダー / フッター
- 1.6. コンテンツ領域とサイドバー
- 1.7. ディスカッション
- 1.8. 細部の見た目
- 1.9. メタ情報の表示位置
- 1.10. サムネイル（アイキャッチ）
- 1.11. 文字種（フォントファミリー）
- 1.12. 文字サイズ
- 1.13. 文字色
- 1.14. 背景色 / 枠線色
- 1.15. 背景・タイトル・ロゴ画像
- 1.16. パンくずリンク
- 1.17. ヘッダーナビ（グローバルナビ）
- 1.18. ヘッダー上の帯状メニュー
- 1.19. 目次
- 1.20. アニメーション
- 1.21. Lazy Load (画像の遅延読み込み)
- 1.22. 画像ギャラリー
- 1.23. 外部リンク
- 1.24. 投稿者名の表示
- 1.25. ブログカード
- 1.26. SNS シェアボタン (1)
- 1.27. SNS シェアボタン (2)
- 1.28. メニュー
- 1.29. ウィジェット
- 1.30. ホームページ設定
- 1.31. 追加CSS
- 2. まとめ
Luxeritas themeのカスタマイズ（外観）
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
まずは、見た目の変更で、カスタマイズ（外観）を選びましょう。
Luxeritasはカスタマイズ出来る量がとても多いので、自分が変更した箇所を中心に説明・・・と言うより自分用の覚え書きですかね（＾＾；(笑)
[/su_tab][su_tab title=”サイト確認のしかた” disabled=”no” anchor=”” url=”” target=”blank” class=””]
外観カスタマイズ画面では、プレビューがついているので編集する時にとても見やすいのですが、一番下のアイコンで画面のサイズも切り替えられますのでタブレットやスマホ画面でもどう見えてるのかそれぞれ確認してみてくださいねd(╹◡╹*)
通常はパソコン画面です↑
真ん中のアイコンはタブレット画面↑
右側のアイコンはスマホ画面サイズです↑現物で確認しなくて済むのは助かりますね♪
[/su_tab][/su_tabs]
外観変更はプレビューついてて初心者のかたでもとても分かりやすいと思うので簡単にしか書いていませんが、項目が多くて長くなりそうだったので、画像や詳細はタブで閉じています。見たい項目のタブをクリックで開いて見て下さいね。
サイト情報 / サイトアイコン
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
サイトのタイトルやキャッチフレーズが変更出来ます。
キャッチフレーズはサイト名下にある文章のことです。
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
サイトアイコンは、ブラウザのサイトタブの所に付けられるアイコンの事です。肉球大好きなのでアイコンも肉球にしてみました(*´▽｀*)
[/su_tab][/su_tabs]
全体レイアウト
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
コンテナの最大幅や記事一覧の表示方法など。
うちは変更してません。
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
グリッドレイアウト
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
リスト型、カテゴリー、アイカーブなどの記事のレイアウトを指定できます。うちは、カード型（最大１列）にしています。記事が多いサイトなら２列の方がいいかもしれません。
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][su_tab title=”見た目” disabled=”no” anchor=”” url=”” target=”blank” class=””]
カード型１列だと縦並びに大きく並びます。
カード型２列の場合。投稿数が多いサイトは１ページに表示出来る数が倍になるので、こちらの方がいいかもしれませんね。
[/su_tab][/su_tabs]
カラム操作
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
カラム数やサイドバーの位置など選ぶことが出来ます。
うちは２カラム(デフォ)のまま、領域の分離と結合の所を、全て「分離」を選んでいます。
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
ヘッダー / フッター
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
タイトルの配置を中央→左に変更。
[/su_tab][su_tab title=”ヘッダー” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][su_tab title=”フッター” disabled=”no” anchor=”” url=”” target=”blank” class=””]
コンテンツ領域とサイドバー
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
角の丸み→20に変更
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
ディスカッション
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
コメント部分ですね。変更なし。
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
細部の見た目
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
PAGE TOPの角の丸み→20に変更
[/su_tab][su_tab title=”ホーム” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][su_tab title=”PAGE TOP” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
メタ情報の表示位置
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
記事部分のメタ情報。デフォがどうだったか忘れちゃった(笑)各タブ見てくださいね。
[/su_tab][su_tab title=”タイトル下” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][su_tab title=”記事下” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][su_tab title=”一覧記事” disabled=”no” anchor=”” url=”” target=”blank” class=””]
抜粋？・・・どこかな＠＠;ちょっと分かりませんでした；すみませんorz
[/su_tab][/su_tabs]
サムネイル（アイキャッチ）
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
デフォは真四角でしたが、ユーザーサムネイルに変更。200×150に設定しています。出来れば新着記事や関連記事部分も長方形にしたいのだけど、どこにあるのかまだ分かっていません(^^;
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][su_tab title=”変更したい場合” disabled=”no” anchor=”” url=”” target=”blank” class=””]
※ユーザーサムネイルの設定は、Luxeritas管理機能→サムネイル管理にあります。こちら↓の設定をしてからユーザーサムネイルに変更が出来ます。
[/su_tab][/su_tabs]
文字種（フォントファミリー）
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
変更なし。
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
文字サイズ
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
ほとんど変更してないんですが、タイトルを少しだけ大きくしています。（36ポイント)
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
文字色
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
変更なし
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
背景色 / 枠線色
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
ヘッダーにあるコピーライト表示部背景色を#e6e6fa(ラベンダー色)に変更
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
背景・タイトル・ロゴ画像
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
変更なし
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
パンくずリンク
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
角の丸みを15に変更
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
ヘッダーナビ（グローバルナビ）
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
グローバルナビの位置を「ヘッダー下部（ノーマル）」に変更。
スクロール固定を「PCサイズだけスクロール固定」に変更
「スクロール固定で半透明にする」にチェック
横幅の大きさを横幅を自動リサイズ(幅いっぱい)に変更
ナビバー、ナビ、ナビカレントを#e6e6fa
ナビリンクホバーだけ少し濃い#d6d6f9に変更
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][su_tab title=”見た目” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
ヘッダー上の帯状メニュー
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
変更なし
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][su_tab title=”見た目” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
目次
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
自動で目次を挿入する
スタイルを適用する
AMPページにも自動で目次を挿入する
にチェック入れてます
見た目のスタイルを少し変えたい気もしますが・・・とりあえずデフォでd(＾◡＾;)
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][su_tab title=”見た目” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
アニメーション
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
サイト名、記事一覧のサムネイルをズームイン
SNSボタンとヘッダーナビ(グローバルナビ)を上方移動に変更
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
Lazy Load (画像の遅延読み込み)
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
Lazy Loadとは画像データを遅延読込させる事によって、結果的にwebページが速く表示させられます。画像が多いサイトには非常に有効なのでチェックしておいた方がいいと思います。
うちは各種サムネイル、投稿コンテンツ、サイドバーのLazy Loadを有効化にチェックしています。（フッターに画像は無いし、Gravatar？はよく分からないのでチェックしていません）
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
画像ギャラリー
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
この画像ギャラリーとは、Liteboxのようなその場で画像を拡大表示してくれる設定をするので、どれか選んだほうが良いと思います。
やっぱり作者さんの最もおすすめ！とされているTosrusがいいんじゃないかな？
って事で、私もTosrus ( レスポンシブ / 最もおすすめ )を選択してますｗ
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][su_tab title=”画像を拡大表示する方法” disabled=”no” anchor=”” url=”” target=”blank” class=””]
投稿画面で「メディアを追加」ボタンを押し使いたい画像をアップロードします。アップロードした画像の右下に、添付ファイルの表示設定があるので、リンク先に「メディアファイル」を選ぶと自動でその画像へのURLが記載されるので、サイズはフルサイズを選んで「投稿に挿入」ボタンで画像を挿入します。
これでwebサイト画面で、画像が拡大表示されるようになります。
[/su_tab][su_tab title=”TosrusとLightcaseの違い” disabled=”no” anchor=”” url=”” target=”blank” class=””]
Tosrusを選択した場合↓
どちらも両端にページ送り＜ ＞がありますし、画像以外の黒い場所をクリックすれば閉じれますので、好みでいいと思います。
ちなみに、画像ギャラリーを使用しないを選択した場合は、同画面で拡大画像が表示されるだけで黒い部分クリックしても閉じないですし、訪問者が間違えてサイト毎閉じてしまうかもしれないので・・・どちらか選ぶようにしましょうd(╹◡╹*)
[/su_tab][/su_tabs]
外部リンク
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
変更なし
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][su_tab title=”アイコンタイプ” disabled=”no” anchor=”” url=”” target=”blank” class=””]
うちはアイコン使ってないですが、「記事の外部リンクにアイコン付ける」にチェックを入れると、外部リンクの場合に下記のアイコンが付きます。
fa-extermal-linkの場合は
fa-extermal-link-squareの場合だと
[/su_tab][/su_tabs]
投稿者名の表示
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
記事下のPosted by・・・の部分ですね。このサイトは自分しか投稿しないし記事の度に投稿者名はいらないかなーと思ってたのですが、非表示だと構造化データエラーになるそうなので、投稿者は表示させるにチェックを入れ、リンクには自分で作成したページにリンクにチェックを入れ、プロフィール記事のURLを入れています。
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
ブログカード
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
ブログカードの丸みと角の丸みを20にして影もつけました
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
SNS シェアボタン (1)
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
小さくて目立たない名無しアイコンタイプ(ホワイト)を選択しています。
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
SNS シェアボタン (2)
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
RSS ボタン表示とFeedly ボタン表示以外にチェックつけています。
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
メニュー
[su_tabs][su_tab title=”見た目” disabled=”no” anchor=”” url=”” target=”blank” class=””]
このメニュー２つを作っています。
[/su_tab] [su_tab title=”メニュー” disabled=”no” anchor=”” url=”” target=”blank” class=””]
メニューを新規追加で新しいメニューが作れます
[/su_tab] [su_tab title=”新規作成” disabled=”no” anchor=”” url=”” target=”blank” class=””]
メニュー名は自分が分かりやすい名前で大丈夫です。グローバルナビの位置かヘッダー上の位置か選んで、次へを押し、項目を追加で、カスタムリンク、固定ページ、投稿、カテゴリー、タグの中から入れたいメニューを選んで下さい。
並び替えはマウスドラッグで好きな位置に変更出来ます。
メニュー設定は自動的に追加されちゃうので、私はチェックを外しています。
[/su_tab] [su_tab title=”グローバルナビ” disabled=”no” anchor=”” url=”” target=”blank” class=””]
カテゴリーや固定ページなど好きなように入れられます。
[/su_tab] [su_tab title=”帯状メニュー” disabled=”no” anchor=”” url=”” target=”blank” class=””]
RSSやFeedlyはヘッダー上の帯状メニューの方でデフォルトでチェックされてたものです。
[/su_tab][/su_tabs]
ウィジェット
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
ウィジェットでは各項目の並び替えが出来ます。
現在使用しているのは以下
・汎用サイドバー (タイトルH3タイプ)
・スクロール追従サイドバー(H4タイプ）
主にこの２種類のウィジェットを使っていますが、先日からアドセンスなどの広告だけ以下のウィジェットも使い始めました。
でもまだ試行錯誤中で場所変更するかもなので今は詳細伏せておきます・・・(^^;)
・記事一覧中央
・記事一覧下
・投稿内で一番最初に見つかった H2 タグ の上
・関連記事下ウィジェット
・記事下ウィジェット
[/su_tab][su_tab title=”トップページ” disabled=”no” anchor=”” url=”” target=”blank” class=””]
プレビュー画面でトップページを表示している時に出てくるウィジェット一覧
以下は変更した部分
[su_accordion]
[su_spoiler title=”汎用サイドバー (タイトルH3タイプ)” open=”no” style=”simple” anchor=”” class=””]
カルーセルはサイドバーにある↓これの事です。
設定項目が多かったので下に載せておきます。
[/su_spoiler] [su_spoiler title=”スクロール追従サイドバー(H4タイプ）” open=”no” style=”simple” anchor=”” class=””]
スクロール追従は、サイドバー側のくっついてくる部分です。うちは目次と広告を入れています。
[/su_spoiler]
[/su_accordion]
[/su_tab][su_tab title=”記事ページ” disabled=”no” anchor=”” url=”” target=”blank” class=””]
プレビュー画面で記事ページを表示している時に出てくるウィジェット一覧
[/su_tab][/su_tabs]
ホームページ設定
[su_tabs][su_tab title=”説明” disabled=”no” anchor=”” url=”” target=”blank” class=””]
変更なし
[/su_tab][su_tab title=”画像” disabled=”no” anchor=”” url=”” target=”blank” class=””]
[/su_tab][/su_tabs]
追加CSS
追加cssはまた長くなるので別記事に書きますねd(╹◡╹*)
まとめ
って事で、すっごく長かったですけどｗ
最初のシンプルな外観↑からこんな感じの外観↓になりました。d(＞＜*
多少記事がないと画像(アイキャッチやカルーセル)の設定出来ないので、記事を追加後も、ちょこちょこ修正して初期画面より賑やかになっていますが(笑)外観カスタマイズすることでだいぶ自分好みになったかなーと思います(*´▽｀*)
他にタイトルや見出しなどは、追加ｃｓｓの方で変更しているので、追加ｃｓｓの記事はまた別に書きますね。皆さんも自分好みのサイト作り、頑張ってくださいねｐ(^-^*)