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

2019-03-19カスタマイズ

 

ルクセリタスの既存デザインを少し変えたい場合の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-content\themes\luxeritas

 

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

 

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

 

サイトネーム

#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

 

記事タイトル

.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

 

 

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

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