コピペOK！Luxeritasサイドバーカスタマイズの方法＋デザイン4パターン

2021年1月2日2021年5月16日

本記事ではLuxeritasサイドバーカスタマイズの方法を解説していきます。

子テーマにコピペするだけで、誰でも簡単に使うことができます。

色はサイトの雰囲気に合わせて変更してください。

色を指定する部分にはメモ書き（例：/* フォント色 */）があるので、どこを変更したら良いのか迷うこともありません。

それでは早速みていきましょう。

シンプル

このサイトで使っているカスタマイズです。

点線で、シンプルかつかわいらしいデザインです。

/* サイドバー */
#side .side-title{
	color:#ef97e8;/* フォント色 */
}
#side h3, #col3 h3, #side h4, #col3 h4{
 border-bottom: 1px dashed #6a859c; /* 点線の色 */
}

SANGO風

別サイトで行っているカスタマイスです。

タイトルに背景をつけて、SANGO風のデザインにしてみました。

/* サイドバー */
#side .side-title {
    color: #6a859c; /* フォント色 */
    background: #cde7ee; /* 背景色 */
    padding: 10px;
    margin: -20px -14px 20px -14px;
}
#side .widget, #col3 .widget {
    border: none;
}

JIN風

タイトル下にカラーのボーダーで、シンプルながらおしゃれなカスタマイズです。

/* サイドバー */
#side .side-title{
	color: #6a859c; /* フォント色 */
}
#side h3, #col3 h3, #side h4, #col3 h4{
 border-bottom: 2px solid #ef97e8; /* ボーダー色 */
}
.wpp-list li{
border-bottom: 1px solid #ddd;/* 人気記事リストの下線色 */
}

吹き出し風

ポップでかわいい吹き出し風デザイン。

擬似要素で吹き出しの三角形を作ります。

/* サイドバータイトル */
#side .side-title {
    background: #cde7ee; /* 背景色 */
    padding: 10px;
    margin: -20px -14px 20px -14px;
}
#side .side-title:before{
	content: "";
  position: relative;
  top: 50px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #cde7ee; /* 吹き出しの三角形の色 */
}