Luxeritasルクセリタスのカスタマイズに使えるクラス名一覧

ルクセリタスの既存デザインを少し変えたい場合のCSS編集用セレクタ名一覧です。

カスタマイズで利用したものと、わかっているもの少しを掲載していますが、もちろんすべてではありません。

またカスタマイズで使用するために調べることがあれば、追記していく予定です。

 


 

セレクタとは?

HTMLで指定した要素(タグ)型のものや、任意のclass名やid名を使ったセレクタなどがあります。

CSSの基本書式

 

セレクタ{プロパティ:値;}
【例】 h1{font-size:18px;}

 

h1 =セレクタ
font-size = プロパティ名
18px = 値
上記の例を記述したCSSを読み込んだサイトでは、HTMLで <h1>タイトル</h1> と書くだけで、すべての<h1>タグのフォントサイズが18pxで表示されます。
このように、装飾やスタイルをまとめてCSSに記載する事で、サイト内でのデザインを統一でき、いちいちHTMLで装飾のタグを入力する必要もなくなり作業効率も上がります。

 

デザイン装飾用のIDやクラス名は、テーマにより異なります。
ルクセリタスのクラス名の紹介です。

 

バージョンと初期デザインについて

 

当サイトで使用中のバージョンは以下です。(記事作成時)

Luxeritas Child Themeバージョン: 3.0.0
Luxeritasバージョン: 3.5.9

ダウンロードはこちら

ルクセリタスに用意されている「デザイン選択」からのデザイン変更はせずにデフォルトからカスタマイズしています。

 

クラス名

 

元のCSS記述がある場所はルクセリタス親ディレクトリ内です。

wp-contentthemesluxeritas

 

それぞれのクラス名が記述されているファイルがある場所を記載しています。初期設定で、どのような定義がされているかを確認された上、カスタマイズにご利用下さい。元のファイルを直接編集しないようにご注意下さい。

 

簡単なCSSの説明は以下も参考にして下さい。

CSSとは? CSSの基本とセレクタ・プロパティ一覧+使用例
CSSとは? CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページをデザインする為、スタイルを記述する言語です。 CSSは、HTMLと組み合わせて使用します。 HTML(エイチティーエ...

 

サイトネーム

#sitename

 

ヘッダーナビ

#gnavi ul

#nav, #gnavi ul, #gnavi li a, .mobile-nav

記述のある場所:style.css

 

ヘッダー上の帯上メニュー

.band
.head-band
.band-menu
.menu-item
.snsf

記述のある場所:style.css

 

カルーセルスライダー

.swiper-slide

記述のある場所:styles thk-swiper.css

 

投稿記事の背景

.grid

.grid{background-color: #XXXXXX;} /*背景色*/
.grid{background-image: url("http://XXXv.jp/wp-content/uploads/20XX/XX//XXXX.jpg"); /*背景画像

 

記事タイトル

.entry-title

記述のある場所:style.css

 

見出し

記事見出し2 .post h2
記事見出し3 .post h3
記事見出し4 .post h4

サイドバー見出しH3 #side h3
サイドバー見出しH4 #side h4

記述のある場所:style.css

 

【例】記事見出し編集CSS

.post h2{
padding: 10px;
margin: 5px 0;
background: #779dc4;
border-radius: 8px;
color:#fff;
font-size:22px;
}

 

関連記事タイトル

#related h3

 

ページメイン

#main .grid

記述のある場所:style.css

 

【例】記事枠を外すCSS

/*記事枠を外す*/#main .grid {
border: none;
}

 

目次

div#toc_container
.toc_list ul

見出し2 #toc_container > .toc_list
見出し3 .toc_list li .toc_list li
見出し4 .toc_list li .toc_list li .toc_list li

 

記述のある場所:styles toc.css

 

 

HTMLサイトマップ

#sitemap li

 

記述のある場所:style.css

 

吹き出し

.balloon
.balloon-left
.balloon-right

 

記述のある場所:styles balloon.css

 

【例】横幅を指定する

.balloon {
max-width: 600px;
}

 

カテゴリー説明文

.category-description

 

パンくずリストリンク

#breadcrumb

 

記述のある場所:style.css

 

ブログカード

.blogcard
タイトル .blog-card-title
アイキャッチ画像 .blogcard-img
アイキャッチ画像 <A>タグ .blogcard-href
抜粋文 .blog-card-desc
アドレスリンク .blogcard-link

 

記述のある場所:styles blogcard.css

 

新着記事ウィジェット

 

#thk-new .term img,
#thk-new .term amp-img /*サムネイル*/.new-title /*タイトル*/

 

 

記事一覧

カード型 div[id^=”card-“]
タイル型 div[id^=”tile-“]

アイキャッチ画像 #list .term img
記事を読むリンク .read-more-link

 

記述のある場所:style.css

 

記事一覧上、中、下ウィジェット枠の編集

記事一覧上 .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

 

記述のある場所:style.css

 

【例】ホバー色を変える

#pnavi a:hover {
color: #fb8a8a;
}

 

記事一覧下のページャーリンク

#paging.pagination

#bottom-area

 

記述のある場所:style.css

 

【例】ホバー色を変える

.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 だけだと、全体の装飾編集が可能です。

 

記述のある場所:style.css

 

それぞれのカスタマイズ方法などについては以下も参考にして下さい。

ルクセリタスLuxeritasの約40ヵ所をカスタマイズ!高速・高機能無料テーマ
高機能でスピード抜群の無料テーマ「ルクセリタス」を、いろいろカスタマイズしていますので、少しまとめてみます。 カスタマイズ済みの当サイトオリジナルデザインファイルは以下をご覧ください。 ルクセリタスについて 今のところテーマはこの一択と決め...
綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています

View Comments (4)

  • 初めまして、ド素人で、いろいろとカスタマイズに挑戦している者ですが・・・(^^ゞ
    ネット中を探しまくって(^^ゞここに辿り着きました。♪♪
    実は、Luxeritasの投稿記事部分の背景を画像にしたく、ソースなどをのぞき込んで(^^ゞ
    該当のcssを探すのですが見つけることが出来ませんでした(^^ゞ
    /*記事枠を外す*/
    #main .grid {
    border: none;
    }
    も試してみたのですが、記事背景のcssでないようで変更できませんでした(T_T)
    色だけでしたらデフォルトで設定できるのですが・・・良きアドバイスを頂けたら
    幸いですm<>m

    • はじめまして
      投稿記事の背景でしたら
      これでどうでしょうか

      画像
      .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;