HOME → 6 Luxeritas → 03 カスタマイズ → 

Luxeritas サイドバー周りのカスタマイズ

Luxeritas(ルクセリタス)
サイドバー周りのカスタマイズ
 
ヘッダー周りのカスタマイズに続いて、サイドバー周りのカスタマイズを行う。
 
タイトルのカスタマイズ結果
 
以下、サイドバー周りのカスタマイズを行った記録。
 

 

スポンサー リンク

 

 
 
 
 
 
1. サイドバーウィジェットの幅を変更
 
サイドバーウィジェットの幅を狭くし、コンテンツ領域を広げる。
 
「カスタマイズ(外観)」→「コンテンツ領域とサイドバー」をクリックし、「サイドバーウィジェットの幅」を変更する。
「カスタマイズ(外観)」→「コンテンツ領域とサイドバー」クリックし、「サイドバーウィジェットの幅」を変更する
 
サイドバーウィジェットの幅を変更する前と後での、コンテンツ領域の広さ。
サイドバーウィジェットの幅を変更する前と後での、ンテンツ領域の広さ
 
サイドバーウィジェットの、幅を変更した結果。
サイドバーウィジェットの幅を変更した結果
 
 
 
2. サイドバーウィジェットの領域を分離
 
デフォルトでは、サイドバーは1つの領域となっており、全体が枠で囲まれている。これを項目ごとに分離する。
 
「カスタマイズ(外観)」→「カラム操作」をクリックし、「領域の分離と結合」→「サイドバー」→「サイドバーを項目ごとに分離」を選択する。
「カスタマイズ(外観)」→「カラム操作」をクリックし、「領域の分離と結合」→「サイドバー」→「サイドバーを項目ごとに分離」を選択する
 
サイドバーを、項目ごとに分離した結果。
サイドバーを、項目ごとに分離した結果
 
 
 
3. コンテンツ領域のパディングを変更
 
コンテンツ領域における、パディングのデフォルト値。
コンテンツ領域における、パディングのデフォルト値
 
「カスタマイズ(外観)」→「コンテンツ領域とサイドバー」をクリックし、「コンテンツ領域のパディング」を変更する。
「カスタマイズ(外観)」→「コンテンツ領域とサイドバー」をクリックし、「コンテンツ領域のパディング」を変更する
 
「コンテンツ領域のパディング」を変更する前と後での、コンテンツ領域の上下の余白の違い。
「コンテンツ領域のパディング」を変更する前と後での、コンテンツ領域の上下の余白の違い
 
コンテンツ領域のパディングを、変更した結果。
コンテンツ領域のパディングを、変更した結果
 
 
 
4. サイドバーウィジェットの作成
 
「外観」→「ウィジェット」をクリックすると、「ウィジェット」がサイドバーやフッターだけでなく、記事の中にも設定できる画面が開く。
 
 
アクセシビリティモード
 
この画面の右上に「アクセシビリティモードを有効にする」という、気になる表示がある。
この画面の右上に「アクセシビリティモードを有効にする」という、気になる表示がある
 
これをクリックすると、利用出来るウィジェットには「追加」ボタンが付き、すでに利用しているウィジェットには「編集」ボンタが付く。
利用出来るウィジェットには「追加」ボタンが付き、すでに利用しているウィジェットには「編集」ボンタが付く
 
試しに「追加」ボタンを押してみると、下図のような画面が開き、ウィジェットの内容や位置が設定できる様になっている。
試しに「追加」ボタンを押してみると、下図のような画面が開き、ウィジェットの内容や位置が設定できる様になっている
 
この方法だと、マウスでのドラッグ&ドロップが不要になる。
 
 
従来モード
 
「アクセシビリティモード」は、慣れていないせいか使いにくかったので、従来モードに戻す。
 
Luxeritasのサイドバーは、デフォルトでは「汎用サイドバー(タイトルH3タイプ)」に3つのウィジェットが設定されている。
Luxeritasのサイドバーは、デフォルトでは「汎用サイドバー(タイトルH3タイプ)」に3つのウィジェットが設定されている
 
追加したいウィジェットを開き、配置したい場所「汎用サイドバー(タイトルH4タイプ)」を選択し、「ウィジェットを追加」をクリックすれば設置出来る。
 
追加したいウィジェットを開き、配置したい場所「汎用サイドバー(タイトルH4タイプ)」を選択し、「ウィジェットを追加」をクリックすれば設置出来る
 
配置場所にウィジェットが追加されるので、マウスを使って上下の位置を変更する。
配置場所にウィジェットが追加されるので、マウスを使って上下の位置を変更する
 
ウィジェットを追加した画面。
ウィジェットを追加した画面
 
 
 
5. サイドバーウィジェットタイトルのカスタマイズ
 
ウィジェットのタイトルを、CSSで装飾する。
 
子テーマのCSSに追記した、CSS.
/*-----------------------------------------------------*/
/* サイドバー ウィジェット 見出しのデザイン */
/*-----------------------------------------------------*/
#side h3, #col3 h3, #side h4, #col3 h4 {
	border: 1px solid #800000;
	padding: 0.3em 1.0em; /* 上下 左右 */
	background: #008080;
	color: #fff;/*色*/
	text-transform: none;
}
 
ついでに、タイトルの文字サイズを小さくする。「カスタマイズ(外観)」→「文字サイズ 」→「サイドバー:H4」の値を変更。
ついでに、タイトルの文字サイズを小さくする。「カスタマイズ(外観)」→「文字サイズ 」→「サイドバー:H4」の値を変更。
 
タイトルのカスタマイズ結果。
タイトルのカスタマイズ結果
 
 
 
6. Luxeritasオリジナルウィジェットを使う
 
Luxeritasには、オリジナルなウィジェットが用意されている。
#1アドセンス(Luxeritasオリジナル):
#2 再利用ブロック (Luxeritas オリジナル):
#3 カルーセルスライダー (Luxeritas オリジナル):
#4 目次 (Luxeritas オリジナル):
 開いている記事の目次をサイドバーに表示させるウィジェット。
#5 新着記事 (Luxeritas オリジナル):
 サムネイル付きの新着記事一覧ウィジェット
#6 最近のコメント (Luxeritas オリジナル):
 デザインが作りこまれたコメント一覧表示用のウィジェット。
#7 SNS フォローボタン (Luxeritas オリジナル):
#8 RSS / Feedly 購読ボタン (Luxeritas オリジナル):
#9 QR コード (Luxeritas オリジナル):
 
#5 新着記事 (Luxeritas オリジナル)を、使ってみる。
#5 新着記事 (Luxeritas オリジナル)を、使ってみる
 
サムネイル表示が、デフォルトになっている。
サムネイルが、デフォルト表示になっている
 
表示結果。
表示結果
 
 
 
7. サイドバーの固定ページ一覧・カテゴリー一覧の項目に下線を引く
 
固定ページ一覧・カテゴリー一覧の項目に、下線を引くCSS。
/*----------------------------------------------*/
/* 固定ページ一覧のリスト表示に下線を引く    */
/*----------------------------------------------*/
#side .widget_pages li{
    border-bottom: 1px solid #e9e9e9;
}
/*----------------------------------------------*/
/* カテゴリ一覧のリスト表示 項目に下線を引く   */
/*----------------------------------------------*/
#side .widget_categories li{
    border-bottom: 1px solid #e9e9e9;
}
#side .widget_categories li li {
	border-top: 1px solid #e9e9e9;
	border-bottom: 0;
}
 
下線を引いた、固定ページ一覧とカテゴリー一覧。
下線を引いた、固定ページ一覧とカテゴリー一覧
 
 
「Simple GA Ranking」を使い ランキングを表示する:
 
以上。
(2020.02.17)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください