Luxeritas カスタマイズ(外観) コンテンツ領域とサイドバー

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

テーマを導入して一般的にカスタマイズをしたいと思う理由としては「かわいく見せたい」「サイトテーマらしい感じを出したい」「ありきたりじゃなくてオリジナリティーを出したい」「見やすく機能性を高くしたい」などさまざまでしょうけど、カスタマイズしたい場所としては記事部分についてが一番多いと思います。そこを読みにくるわけでどう見せたいか?どうあった方がより印象よく読んでもらえるか?に直結しますから。Luxeritasカスタマイズ(外観)メニューの「コンテンツ領域とサイドバー」は項目は少ないですが、記事部分の幅と位置に関して変更できて有効だと思われます。

「コンテンツ領域とサイドバー」の項目だけ見ると記事部分の幅を広げたり、あるいは縮めることはできないように見えます。限界はありますが、ある程度の記事部分の幅の調整が可能です。私もいろいろ変更していて気付きました。

コンテンツ領域

コンテンツ領域に枠線をつける

Luxeritas020

コンテンツ領域(記事部分)に枠線がつきます。
ただし、カスタマイズ(外観)→「カラム操作」で「領域の分離と結合」「コンテンツ領域とサイドバーを結合」を選択しているとコンテナ外枠は表示されているのでここでは、追加的にさらにサイドバーとの枠線と記事の下の各コンテンツの枠線が増えます。

ページャー表示領域に枠線をつける

※ コンテンツ領域分離時のみ

Luxeritas021
二行目に「コンテンツ領域分離時のみ」とあるので「コンテンツ操作」メニューから「コンテンツ領域を項目ごとに分離」を選択確認します。

Luxeritas023

さらにこの「コンテンツ領域とサイドバー」→「ページャー表示領域に枠線をつける」の「コンテンツ領域に枠線をつける」が選択してあることを確認します。「コンテンツ領域に枠線をつける」が選択されていないとページャーの枠も表示されません。ページャーもコンテンツ領域に含まれているので「コンテンツ領域で枠線をつける」が有効になっていないと表示できないとのことです。

角の丸み

Luxeritas024

枠線の角が丸く表示されます。20と大きめの数字記入でかなり視認できます。枠線を表示させて数値を記入して丸みをわかりやすくした場合です。

Luxeritas025

「コンテンツ領域に枠線をつける」チェックボックスにチェックしないで枠線をつけないと、コンテンツ領域の角が丸く表示されます。枠線が無いだけ、少しさりげなくなりますが、丸さはあまり目立たないのでデザイン的にどちらが良いのか判断しだいです。

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

ここでコンテンツの表示幅をある程度決められます。パディングですから決められた範囲内ではありますけど、上下45px左右68pxですから、上下左右ともに広げたり縮めたりするとかなり表示幅の変更ができます。

Luxeritas002

前にも書きましたけどここまでカスタマイズできると私みたいに「cssなんて知らないままでいいや、それでもカスタマイズしたい」って方もいると思うので私が数少ない知識から説明するとパディングはcssで設定する記入領域と外枠との間のすき間(余白)です。余白を小さくすると文書領域を広げることになります。ただし、外枠幅という限度がありますけど。数値を入れてお好みの幅に変更できます。分からなくなったら上下45px左右68pxに戻せば最初の設定で表示されます。

サイドバーウィジェットの幅

パディングでコンテンツ領域の表示幅を広げたり、縮めたりできます。そしてさらにまだ別の方法もあってさらに広げたり、縮めたりできます。

xserverwordpress262

PC表示ではコンテナの幅の中に記事部分とサイドメニューが並んでいまして、コンテナ幅が一定の時にサイドバーウィジェット(サイドメニュー)の幅を狭くするとコンテンツ領域の表示幅(記事部分)が広がります。もちろん記事部分の表示幅を固定してあったりするとダメですが、レスポンシブルでPCモニターが16:9になって横に広くなったこともあって通常、サイドメニュー幅が小さくなるとコンテナ幅の設定限界値まで記事部分幅が広がるわけです。

Luxeritas026

2カラムの設定で「サイドバーウィジェットの幅」2カラム目「336」デフォルトのままです。

Luxeritas027

2カラムの設定で「サイドバーウィジェットの幅」2カラム目「100」と入力します。
サイドバーの幅が狭くなった分、記事部分の幅が広がりました。

サイドバーの位置

サイドバーを枠線で囲む

コンテンツ領域のようにサイドバーの各パーツを枠線で囲むことができます。

角の丸み

コンテンツ領域と同じようにサイドバーの枠線、背景色の角も数値を挿入して任意に丸く表示できます。

ダッシュボード→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 クチコミ探し