ルクセリタスの既存デザインを少し変えたい場合のCSS編集用セレクタ名一覧です。
カスタマイズで利用したものと、わかっているもの少しを掲載していますが、もちろんすべてではありません。
またカスタマイズで使用するために調べることがあれば、追記していく予定です。
セレクタとは？
HTMLで指定した要素（タグ）型のものや、任意のclass名やid名を使ったセレクタなどがあります。
CSSの基本書式
font-size ＝ プロパティ名
18px ＝ 値
ルクセリタスのクラス名の紹介です。
バージョンと初期デザインについて
当サイトで使用中のバージョンは以下です。（記事作成時）
Luxeritas Child Themeバージョン: 3.0.0
Luxeritasバージョン: 3.5.9
ルクセリタスに用意されている「デザイン選択」からのデザイン変更はせずにデフォルトからカスタマイズしています。
クラス名
元のCSS記述がある場所はルクセリタス親ディレクトリ内です。
簡単なCSSの説明は以下も参考にして下さい。
サイトネーム
#sitename
ヘッダーナビ
#gnavi ul
#nav, #gnavi ul, #gnavi li a, .mobile-nav
ヘッダー上の帯上メニュー
.band
.head-band
.band-menu
.menu-item
.snsf
カルーセルスライダー
.swiper-slide
投稿記事の背景
.grid
.grid{background-color: #XXXXXX;} /*背景色*/
.grid{background-image: url("http://XXXv.jp/wp-content/uploads/20XX/XX//XXXX.jpg"); /*背景画像
記事タイトル
.entry-title
見出し
記事見出し２ .post h2
記事見出し３ .post h3
記事見出し４ .post h4
サイドバー見出しH3 #side h3
サイドバー見出しH4 #side h4
【例】記事見出し編集CSS
.post h2{
padding: 10px;
margin: 5px 0;
background: #779dc4;
border-radius: 8px;
color:#fff;
font-size:22px;
}
関連記事タイトル
#related h3
ページメイン
#main .grid
【例】記事枠を外すCSS
/*記事枠を外す*/#main .grid {
border: none;
}
目次
div#toc_container
.toc_list ul
見出し２ #toc_container > .toc_list
見出し３ .toc_list li .toc_list li
見出し４ .toc_list li .toc_list li .toc_list li
HTMLサイトマップ
#sitemap li
吹き出し
.balloon
.balloon-left
.balloon-right
【例】横幅を指定する
.balloon {
max-width: 600px;
}
カテゴリー説明文
.category-description
パンくずリストリンク
#breadcrumb
ブログカード
.blogcard
タイトル .blog-card-title
アイキャッチ画像 .blogcard-img
アイキャッチ画像 <A>タグ .blogcard-href
抜粋文 .blog-card-desc
アドレスリンク .blogcard-link
新着記事ウィジェット
#thk-new .term img,
#thk-new .term amp-img /*サムネイル*/.new-title /*タイトル*/
記事一覧
カード型 div[id^=”card-“]
タイル型 div[id^=”tile-“]
アイキャッチ画像 #list .term img
記事を読むリンク .read-more-link
記事一覧上、中、下ウィジェット枠の編集
記事一覧上 .posts-list-upper-widget
記事一覧中 .posts-list-middle-widget
記事一覧下 .posts-list-under-widget
【例】ウィジェット枠を外す場合
.posts-list-upper-widget {
border: none;
}
その他ウィジェットエリア
ヘッダー下 head-under
記事タイトル上 post-title-upper
記事タイトル下 post-title-under
記事下の Next Prevリンク
#pnavi
【例】ホバー色を変える
#pnavi a:hover {
color: #fb8a8a;
}
記事一覧下のページャーリンク
#paging.pagination
#bottom-area
【例】ホバー色を変える
.pagination > .active > span,
.pagination > li > a:hover {
background: #fb8a8a;
color:#666;
}
【例】枠を消す
/*ページネーション・SNSシェアボタンの外枠*/#bottom-area{
border:none;
}
PageTopボタン
#page-top
表示位置を変える
#page-top {bottom: 80px;}
コメント送信ボタン
#comments [type=”submit”]
コピーライト
#copyright .copy で、自サイト部分だけの編集が可能です。
#copyright だけだと、全体の装飾編集が可能です。
それぞれのカスタマイズ方法などについては以下も参考にして下さい。
View Comments (4)
初めまして、ド素人で、いろいろとカスタマイズに挑戦している者ですが・・・(^^ゞ
ネット中を探しまくって(^^ゞここに辿り着きました。♪♪
実は、Luxeritasの投稿記事部分の背景を画像にしたく、ソースなどをのぞき込んで(^^ゞ
該当のcssを探すのですが見つけることが出来ませんでした(^^ゞ
/*記事枠を外す*/
#main .grid {
border: none;
}
も試してみたのですが、記事背景のcssでないようで変更できませんでした(T_T)
色だけでしたらデフォルトで設定できるのですが・・・良きアドバイスを頂けたら
幸いですｍ＜＞ｍ
はじめまして
投稿記事の背景でしたら
これでどうでしょうか
画像
.grid{background-image: url("XXXX.jpg");}色
.grid{background-color: #XXXXXX;}※コメント欄ではHTMLコードがほとんど使えないので、コピーOKに出来ずすみません。
この記事に「投稿記事の背景」で追記しておきます。
綾糸さん、早速のアドバイスありがとうございましたmm
ほんと、助かりました。 早速,投稿背景に画像を使用できました(^o^)
まだまだ、勉強不足で、投稿画面だけに背景画像をつけたいのですが、
貼り付けたいイメージは、関連記事領域にしか反映できてませんでした(^^ゞ
付け加えたcssは、以下のものですが、また時間がありましたら、
アドバイス頂ければ幸いです。
background-repeat: no-repeat;
background-position: center;
background-size:cover;
お役に立てたならよかったです★