Luxeritas カスタマイズ(外観) 全体レイアウト

2017/09/26Luxeritas カスタマイズ(外観)

LuxeritasはCSS、HTMLを変更しなくても様々なカスタマイズがダッシュボードから変更できます。外観のデザインの変更は「カスタマズ(外観)」メニューとして独立していてそのメニューから変更できます。

「カスタマズ(外観)」メニューの一番上の「サイト情報/サイトアイコン」ではサイトアイコンを設定できます。
「Luxeritas」 カスタマイズ(外観) サイト情報/サイトアイコン

その下に「全体レイアウト」メニューがあってここではコンテナと言って、サイトの一番大きな領域幅を決めたり、パンくずリンク、ナビゲーションの表示、非表示などレイアウト変更もできます。

カスタマズ(外観)→「全体レイアウト」を表示させる

ダッシュボードから「カスタマズ(外観)」メニューへアクセスします。
xserverwordpress230
ダッシュボードの左側にLuxeritasテーマの場合、専用の「Luxeritas」メニューが表示されます。
マウスでその中にある「カスタマズ(外観)」をクリックします。

xserverwordpress231
「カスタマズ(外観)」メニューの上から2番目「全体レイアウト」をクリックします。

xserverwordpress232
左側のメニューでの変更がすぐに右側の自分のサイトでその変更結果を確認できます。
「保存して公開」をクリックしない限り、有効化されないのでいろいろ試す事ができます。
xserverwordpress233
変更をすぐに確認できます。コントロールメニューの一番下に「コントロールを非表示」で、このコントロールメニュー全体が隠れます。サイトだけの表示になります。「コントロールを非表示」の左側のマークだけ残るので、マークをクリックすることでコントロールメニューが再表示されます。

xserverwordpress234
さらにLuxeritasテーマはレスポンシブルなのでPC、タブレット、スマホでのその変更を確認しないとならない場合が多いのですが、WordPressダッシュボードのカスタマイズでは一番下にある3つのマークをそれぞれクリックすることで3パターンでの表示で確認できます。

コンテナの最大値

xserverwordpress261 xserverwordpress262
コンテナとはブログの全体を包む箱(コンテナ=入れ物)です。記事部分とサイドメニューなどの部分を包み込んでいるので、このコンテナ幅を伸張するとそれに応じて、記事とサイドメニューなどが横に収縮したり伸びたりします。記事とサイドメニューがピクセルで最大値が指定してある場合はそれらは広がる幅は指定されたピクセルまでです。
コンテナ幅を小さく表示させて、ある設定値を超えると通常はサイドメニューが滑り落ちてスマホ閲覧の縦長表示になったりします。表示バランスを見ながら変更してください。
コンテナ幅を縮めることで要素のサイドメニューが下に滑って表示されるのがレスポンシブルテーマです。
xserverwordpress262
サイトデザインも大きく変わるので記事とサイドメニューとコンテナのバランスを見ながら変更します。

全体イメージ

全体の色の基調をホワイトかブラックかの二種類から選べます。デフォルトではホワイトになっています。

xserverwordpress263
デフォルトでは全体イメージは「ホワイト」になっています。

xserverwordpress264
ブラックにすると背景が黒色、文字が白抜きに変わります。イメージが重くなってあまり一般的な配色では無いので「ブラック」にする人は限られると思います。一般的にな読みやすさを求めるのなら「ホワイト」のままで良いでしょう。

投稿一覧の表示方法

xserverwordpress265
トップページやカテゴリー欄のページでは、投稿一覧が表示されます。その時の表示をどこまで表示させるのか決められます。「抜粋+サムネイル表示」「記事全文表示(moreタグまで)」のに二通り選択できます。
だた、「カスタマズ(外観)」→「グリッドレイアウト」が新しく導入されて「通常スタイル」からタイル型、カード型を選択して表示をグリッドスタイルにしている場合、表示は「記事全文表示(moreタグまで)」を選択しても適用されずにグリッドレイアウトで選択した表示で一部の抜粋とサムネイルのままで表示されます。
xserverwordpress246

先頭固定の投稿は全文表示にする

xserverwordpress267

「先頭固定の投稿」はTwitterとかYOUTUBEのメッセージ欄で常に一番上に固定されている投稿を見かけると思いますけど、同じようにWordPressでも特定の投稿を投稿一覧表示されるトップページ、カテゴリーページなどで一番上に表示できます。

手順

まず、先頭に表示させたいページの編集ページを表示させます。

xserverwordpress268
WordPressの自サイトにログインして投稿一覧から目的のページの編集をクリックします。
またはこれ以外にもログイン状態で目的のページから上にある「投稿の編集」からも表示できます。

xserverwordpress266
編集ページの記事編集部分の右側の一番上には「公開」エリアがあるので、そこの「公開状態」となっている部分の「編集」をクリックします。この部分では現在のページが書きかけで非公開にしたりする時に「非公開」設定したり、非公開から公開に切り替えたりするのですが、それ以外にも設定があります。

xserverwordpress269
「公開」エリアの「公開状態」編集→「公開」ボタンを選択して「□この投稿を先頭に固定表示」にレ点を入れて「OK」ボタンをクリックして、「更新」をクリックします。これで目的のページは投稿一覧ページで先頭に設定表示されます。

例えば
xserverwordpress270
このページはトップページはグリッドデザインで3番目に表示されていました。
このページを先頭に固定表示してみました。

xserverwordpress271
先頭に表示されます。

xserverwordpress272
「先頭固定の投稿は全文表示にする」にレ点を入れて「保存して公開」をクリックします。
xserverwordpress271
グリッドデザインではこういう画像と記事抜粋が前提のデザインですから何も変わりませんでした。

xserverwordpress274
そこで試しにトップページを「通常スタイル」に戻してみます。

xserverwordpress273
通常スタイルでは設定通り先頭固定指定したページのみ全文表示され、残りは抜粋表示となりました。Luxeritasは常に最新バージョンで変更があるので2017年7月8日時点ではこうなりましたが、また先頭ページの表示なり、固定ページの表示は変わるかもしれません。今のところ、先頭固定はグリッド表示は避けないと表示できないようです。グリッド表示じたいタイル表示とも言って等質に並べる表示ですからそうしたものかもしれません。

ページャー表示

ページャーとは現在のページと前後のページへの移動できる数字を表示機能です。表示されているのは何ページ目なのかわかるので最新ページに戻ったり、遡ったりを数字で確認できます。
デフォルトでは「ページャー表示」が有効になっているようにページが増えるにつれてあったほうが便利です。特殊なサイトでカテゴリーとか無関係だったり他にサイト移動の手段を講じる場合はいらないのかもしれません。
xserverwordpress275
下に並んだ数字がページャーです。4ページあるうちの1ページ目を表示していることがわかります。
「ページャー表示」のレ点を付けないで無効にすることができます。その場合この表示は消えます。

xserverwordpress276
表示が少しは軽くなるので記事一覧が必要無いという方には良いかもしれません。私は自分のサイトでも忘れてしまって前のページを何ページも戻って確認することがあるので必要ですけど、カテゴリーが多くて記事数はカテゴリーに数記事とか、トップから各記事に飛ぶ必要の無いサイトもあるでしょうから選択しだいです。

パンくずリンクの配置

一般的にパンくずリストですけど、今のところluxeritasでは「パンくずリンク」となっています。同じことです。カテゴリの階層を表示して現在ページのサイト全体から見たナビ的な位置と表示を示してくれます。きれいに階層がなされていて記事を気に入ると読み手がパンくずリストからカテゴリーに沿った移動をしやすくなるので、直帰する率が減ります。私のサイトが正直思いつきで記事を書いているのであまり役立っていませんが・・・。

xserverwordpress277
「コンテンツ領域の中」「コンテンツ領域の外」「表示しない」の3種類選択できます。

  • xserverwordpress278
    「コンテンツ領域の外」を選択すると記事タイトルの上の記事の枠から出た情報に設置されます。
  • xserverwordpress279
    「コンテンツ領域の中」を選択すると記事タイトルのすぐ上に表示されて設置されます。
  • xserverwordpress280
    「表示しない」を選択すると、表示は消えます。表示が少し軽くなるのでしょうけど、アクセスシビリティーから言っても、SEO的にも良くないと思われます。カテゴリーが単一だったりする場合やデザイン的にどうしても邪魔な場合とか特殊な場合には消す必要があるかもしれません。

ダッシュボード→Luxeritas→カスタマイズ(外観)攻略法

Luxeritas270[6]
サイトタイトル変更とサイトアイコンを設定手順説明
Luxeritas271[6]
横幅、記事一覧、パンくずリンク、関連記事とナビ表示
Luxeritas272[6]
タイル型、カード型グリッドレイアウト表示手順説明
Luxeritas273[5]
カラム変更とサイドバーなどの領域分離or結合を選択
Luxeritas274[6]
ヘッダー/フッターのカスタマイズ
Luxeritas275[4]
コンテンツ&サイド枠線とサイドバー幅変更
Luxeritas276[8]
コメント欄の表示or非表示、枠線
Luxeritas277[4]
キャッチフレーズ、ホーム、PAGE TOP変更
Luxeritas278[3]
メタ情報の表示or非表示と配置
Luxeritas279[7]
サムネイル(アイキャッチ)大きさと配置
Luxeritas280[4]
フォントの変更
Luxeritas281[6]
タイトル、記事など文字サイズの変更
Luxeritas282[3]
文字色の編集
Luxeritas284[3]
背景色と枠線色の編集
Luxeritas283[7]
背景とタイトルとロゴ画像挿入による編集
Luxeritas285[3]
パンくずリンクの配置変更と編集
Luxeritas287[7]
ヘッダーナビ(グローバルナビ)編集
Luxeritas288[3]
ヘッダー上の帯状メニュー編集
Luxeritas289[3]
マウスオンアニメーション

Posted by クチコミ探し