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

Luxeritas フッター周りのカスタマイズ

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

 

スポンサー リンク

 

 
 
 
 
 
1. フッターウィジェットエリアの表示数の変更
 
デフォルトのフッター周り。
デフォルトのフッター周り
 
デフォルトのウィジェット設定は、横3列でフッターにはウィジェットが設定されていない。
デフォルトのウィジェット設定は、横3列でフッターにはウィジェットが設定されていない
 
横3列のフッターにウィジェットを設定すると、こんな感じになる。
横3列のフッターにウィジェットを設定すると、こんな感じになる
 
「カスタマイズ(外観)」→「ヘッダー / フッター」→「フッターウィジェットエリア表示数」で、【横2列(左・右)】を選択する。
「カスタマイズ(外観)」→「ヘッダー / フッター」→「フッターウィジェットエリア表示数」で、【横2列(左・右)】を選択する
 
 
 
2. フッターへのウィジェットの設置
 
「外観」→「ウィジェット」で追加したいウィジェットを開き、配置したい場所「フッター左(タイトルH4)」と「フッター右(タイトルH4)」に、「ウィジェットを追加」をクリックして「ウィジェット」を設置する。
「外観」→「ウィジェット」で追加したいウィジェットを開き、配置したい場所「フッター左(タイトルH4)」と「フッター右(タイトルH4)」に、「ウィジェットを追加」をクリックして「ウィジェット」を設置する
 
ウィジェットが追加されたフッター周り。
ウィジェットが追加されたフッター周り
 
 
 
3. フッターの見出しをカスタマイズ
 
ウィジェットのタイトルを、CSSで装飾する。
 
子テーマのCSSに追記した、CSS。
/*----------------------------------------------*/
/* ウィジェット フッター 見出しのデザイン    */
/*----------------------------------------------*/
#foot-in h4 {
	border: 1px solid #800000;
	padding: 0.3em 1.0em; /* 上下 左右 */
	background: #008080;
	color: #fff;/*色*/
	text-transform: none;
}
 
ついでに、タイトルの文字サイズを小さくする。「カスタマイズ(外観)」→「文字サイズ 」→「フッター:H4」の値を変更。
ついでに、タイトルの文字サイズを小さくする。「カスタマイズ(外観)」→「文字サイズ 」→「フッター:H4」の値を変更。
 
フッターの見出しをカスタマイズした結果。
フッターの見出しをカスタマイズした結果
 
 
 
4. コピーライト表示のカスタマイズ
 
コピーライト表示欄の、背景色を変更。
 
子テーマのCSSに追記した、CSS。
/*----------------------------------------------*/
/* コピーライト表示のカスタマイズ    */
/*----------------------------------------------*/
#footer .copy {
    background-color: #006400;
    padding: 10px 0;
    color: white;
}
 
フッター周りの、カスタマイズ結果。
フッター周りの、カスタマイズ結果
 
 
以上。
(2020.02.18)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

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

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