◆当サイトで使っているCSSと記述場所
◆【CSS】WordPressテーマCocoon
ルクセリタスは 旅行と食べ歩き で使っていましたが後に止めました。
見出し
/*見出し*/ .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