LION MEDIAのサイドバーウィジェットリストをカスタマイズ&アイコンフォントの使い方

カスタマイズLION MEDIA

LION MEDIAのサイドバーに表示するウィジェットで、リストタイプで出力されるもののカスタマイズです。

 

個人的に少し「間延び」している感じをギュッと詰めてエリアを節約しようと以下の2点を変更しましたのでその方法です。

 

 1.リストの前の「・」を消す
 2.行間を詰める

 

初期デザインのCSSも載せていますので、編集したい場所のクラス名を指定して好みのデザインにカスタマイズする際にご利用下さい。

 

LION MEDIAのその他のカスタマイズについては以下もご覧ください。

LION MEDIAの記事

 

 

BEFORE → AFTER

 

8324_02

 

カスタマイズ

 

CSSを追記

上記で説明した2点の修正は以下のCSSで可能です。

  • リストの前の「・」を消す
  • 行間を詰める

 

 子テーマのスタイルシート(style.css)に追記します。

 

.widget .sub-menu{margin-top:10px;}
.widget ul li{
padding-top:5px; /*上余白*/
margin-bottom:10px; /*下余白*/
line-height:1.2; /*行の高さ*/
}
.widget ul li:before{
content:none; /*デフォルトの「・」を打消し*/
}

 

 

行間の線を変える例

以下のCSSで、カラーや太さ、線種を変えれば簡単に可能です。

.widget ul li{
border-top:sorid 1px #D8D8D8; /*色・線種・太さ*/
}

 

 

アイコンフォントを使った例

こちらにアイコンフォントなどを指定するカスタマイズは以下です。

※例では矢印(三画)アイコン

8324_03

.widget ul li:before{
font-family: "Font Awesome 5 Free";
content: "\f152";
font-weight: 900;
}

 

アイコンの色を変える例

8324_06

.widget ul li:before{
font-family: "Font Awesome 5 Free";
content: "\f152";
font-weight: 900;
color:#5787b7; /*色指定*/
}

 

その他の矢印アイコンフォントは以下も参考にして下さい。

 

 

アイコンフォントの使い方

LION MEDIAは、SNSアイコンなど「Font Awesome」のフリーのもので、特定のアイコンフォントのみ使えるようになっています。(ダウンロード方式)

自分でアイコンフォントを使う場合は、無料のフリーアイコンフォントをCDNで利用する事で簡単に使用できます。

CSSリンクを貼る事で、今回のカスタマイズに限らず、どこででも自由にアイコンフォントを利用出来ます。

 

LION MEDIAでCSSのリンクを貼る場所は、以下です。

 「外観」→「カスタマイズ」→「高度な設定[LION用]」

8324_04

 

 </head>直上の自由入力エリアにフリーアイコンフォントのCSS用コードを貼ります。

8324_05

 

当記事作成時の「Font Awesome」バージョン(5.7.2)でよければ以下のコードをご利用下さい。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

 

「Font Awesome」詳細は以下をご覧ください。

 

ウィジェットエリア全体に影響

クラス名「.widget ul li」を使うので、ウィジェットエリア内でリスト形式の表示になる部分はすべて同様のデザインに変更されます。

 

フッターウィジェットの例

8324_07

 

 

CSSが反映されない場合

 

CSSコードを記述したのに変化がない場合は、キャッシュをクリアして下さい。

 

以下も参考にして下さい。

 

 

初期CSS

ちなみに初期デザインでは以下のようになっています。


/*基本リスト*/
.widget ul{list-style-type: none;}
.widget ul li{
position:relative;
padding:15px 0 0 20px;
margin-bottom:15px;
border-top:dotted 1px #D8D8D8;
line-height:1.5;
}
.widget > div > ul > li:first-child,
.widget > ul > li:first-child{
padding-top:0;
border-top:0;
}
.widget ul li:before{
content:"・";
position:absolute;
left:0;
}
.widget .sub-menu{margin-top:15px;}

 

以上です!

 

 

  • WordPressランキング
  • にほんブログ村 IT技術ブログ Webサイト構築へ