【CSS】WordPressテーマLuxeritasで当サイトが使っているCSSまとめ



◆当サイトで使っているCSSと記述場所
◆【CSS】WordPressテーマCocoon

ルクセリタスは 旅行と食べ歩き で使っていましたが後に止めました。

LuxeritasからCocoonに変えた理由【WordPress無料テーマ】

見出し

/*見出し*/
.post h2 {
background: #4753A7;
padding: 1.8em 1.0em;
margin: 130px 0px 35px 0px;
color: #fcfaf5;
border-radius: 0em;
font-size:x-large;
}
.post h3 {
padding: 1.2em;
color: #010101;
background: #f8f8f8;
border-bottom: solid 1px #cccccc;
}

パンくずリスト

/*パンくずリストトップページ非表示*/
.home .container #breadcrumb{
display: none;
}

ulタグ

間隔を広げて文字サイズを大きめにしました。

.post ul:not(.toc_list) {
line-height: 2.5;font-size: 20px;}

olタグ

間隔を広げて文字サイズを大きめにしました。

.post ol:not(.toc_list) {
line-height: 2.5;font-size: 20px;}

ブログカード

/*ブログカードリンク非表示*/
p.blogcard-link {
display: none;
}
p.blog-card-desc {
display: none;
}

固定ページ

/*固定ページの投稿更新日時・作成者を非表示*/
.page .meta,
.page .meta-box {
display:none;
}

リンク

/*リンク下線消す*/
.text {display: teble-cell;}
#main a {
text-decoration: none;
}

ブログカード(モバイル)

抜粋を非表示。

/*モバイルブログカード抜粋非表示*/
@media screen and (max-width: 430px) {
.blog-card-desc{display:none;}

リンクの文字サイズを変更。

/*モバイルブログカードリンクサイズ*/
p.blog-card-link{font-size: 10px;}

タイトルの文字サイズを変更。

/*モバイルブログカードタイトル文字サイズ*/
p.blog-card-title{font-size: 14px;}

吹き出し

Cocoonで設定した吹き出しをルクセリタスで表示。でも上手く表示できていません…

.speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
}
.speech-person {
float: left;
margin-right: -90px;
width: 80px;
}
.speech-icon img{
width: 100%;
height: auto;
}
.speech-balloon {
display: inline-block;
position: relative;
margin: 5px 0 0 95px;
padding: 5px 15px;
color: #555;
font-size: 16px;
background: #FFF;
border: solid 1px #6a6a6a;
border-radius: 5px;
}
.speech-ballon:after {
content: "";
display: inline-block;
position: absolute;
top: 18px;
left: -24px;
border: 12px solid transparent;
border-right: 12px solid #555;
}
.speech-ballon p {
margin: 0;
padding: 0;
}

Next/Prevナビゲーション

クラス名。

#pnavi

文字の色を変える。

#pnavi a{
color: #カラーコード;
}

線の太さと色を変える。

#pnavi a{
border: 1px solid #カラーコード;
}

画像(アイキャッチ)を非表示。

#pnavi img {
display: none;
}

ホバー時の文字の色を変える。

#pnavi a:hover {
color: #カラーコード;
}

ホバー時の画像の枠線の色を変える。

#pnavi a:hover img {
border-color: #カラーコード;
}

AMPでは非表示

当サイトの環境ではなぜかAMPだと間延びした感じになるので「Luxeritas Child Theme: style-amp.css」に記述してAMPのみ表示させないようにしています。

#pnavi{
display: none;
}

関連記事

クラス名。

#related

画像(アイキャッチ)を非表示。

#related .term img {
display: none;
}

抜粋を非表示。

#related .excerpt p {
display: none;
}

リンクの色や文字のサイズを変えたりホバーを付けたい場合はこれを指定。

#related .toc a

目次

div#toc_container

タイトル。

.toc_title

リスト。

.toc_list .toc_number

リンクのスタイル。

.toc_list li
.toc_list li a

目次の幅を広げて開閉ボタンを非表示にしました。

div#toc_container{
width:95%;
}
.toc_toggle{
display:none;
}

他のclass名

気になるものだけ列記しておきます。

新着記事。

#thk-new

記事タイトル。

.entry-title

アイキャッチ。

#list .term img

ページャー(リンク)。

#paging.pagination
#bottom-area