ワードプレステーマ「Luxeritas」をカスタマイズ自分用メモ

posted in: 雑談 | 0

ブログをカスタマイズしたので忘れないように書き出し(勉強中)
※ワードプレステーマ「Luxeritas」です

CSS

本文の見出しデザイン変更

H2:背景色+角丸+1文字目おおきく
H3:白抜き〇+下線

コード

.post h2{
border-left: 0 none;
padding: .5em .75em;
background-color: #f5b1aa;
border-radius: 6px;
}
.post h2:first-letter {
margin-right: .1em;
font-size: 1.5em;
}

.post h3{
border-left: 0 none;
border-bottom: 1px solid #f3a68c;
color: #333;
padding: 10px 10px 10px 50px;
position: relative;
}
.post h3:before{
background-color: #ef857d;
background-image: linear-gradient(180deg, #ef857d 0%, #ff6a88 55%, #ff99ac 100%);
border-radius: 50%;
content: ”;
display: block;
position: absolute;
top: 10px;
left: 5px;
width: 30px;
height: 30px;
}
.post h3:after{
background-color: #fff;
border-radius: 50%;
content: ”;
display: block;
position: absolute;
top: 15px;
left: 10px;
width: 20px;
height: 20px;
}

※Luxeritasは.postで指定
※見出しの左側に線が出るとき「border-left: 0 none;」

参考サイト CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】
シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

サイドバーの見出しデザインを変える


白いドット線にする

コード
#side h3, #col3 h3, #side h4, #col3 h4{
border-bottom: 5px dotted #ffffff;
}

サイドバーのリンク色を変える


本文と違う色にしたい

コード
/* サイドバーの文字色リンク色 */
#side a:link{
text-decoration: none; /*文字装飾*/
color: #ffffff; /*文字色*/
}
#side a:visited{
text-decoration: none; /*文字装飾*/
color: #ffffff; /*文字色*/
}
#side a:hover{
text-decoration: none; /*文字装飾*/
color: #00afcc; /*文字色*/
}
参考サイトLuxeritas の見出しCSSセレクタ一覧【ルクセリタスカスタマイズ用】

サイドバーに目次を設置してスクロール固定にする

ヴィジェット設定でスクロール固定サイドバーに目次を追加する
CSSセレクタ→#side #side-scroll

サイドバーとフッターのカテゴリーにFontAwesomeのアイコンを追加

参考サイトLuxeritas(ルクセリタス)の子テーマをカスタマイズ(カテゴリ見出し)
アイコン一覧はこちら→https://fontawesome.com/icons?d=gallery

コード
/* カテゴリーfaアイコン表示 */
#side .widget_categories ul li:before {
font-family: FontAwesome;
content: “\f14a”;
margin-right: 5px;
display: inline-block;
color: #e95464; /* アイコンの色 */
}
/* 子カテゴリーfaアイコン表示 */
#side .widget_categories ul li li:before {
font-family: FontAwesome;
content: “\f141”;
margin-right: 5px;
display: inline-block;
color: #e95464; /* アイコンの色 */
}

※フッターのほうも上記の色違い #sideを#foot-inにする

フッターの見出しデザイン変更

背景色をいれた角丸に

コード
/* フッター見出し装飾 */
#foot-in h3, #col3 h3, #foot-in h4, #col3 h4{
border-left: 0 none;
background: #f3981d; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: #fff;/*文字を白に*/
border-radius: 0.5em;/*角の丸み*/
}

トップページ記事一覧のデザイン変更

↓↓↓

コード

/*記事一覧タイトル*/
div[id^=”tile-“] h2, div[id^=”card-“] h2 {
color: #333;
font-weight: bolder;
padding-top: 3px;
padding-right: 13px;
padding-bottom: 5px;
padding-left: 13px;
margin: 0px;
font-size: 18px;
}
@media only screen and (max-width:575px){
div[id^=”tile-“] h2, div[id^=”card-“] h2 {
font-size: 17px;
}}
.entry-title a {
display: block;
}
/*記事一覧の日付*/
.meta, .post .meta {
border-top: 0px;
padding-top: 4px;
padding-right: 13px;
padding-bottom: 0px;
padding-left: 13px;
color: #b5b5b5;
font-weight: bolder;
}
/*記事一覧のカテゴリー*/
span.tags a {
color: #e95464;
font-weight: bold;
text-decoration: none;
}
span.tags a:hover {
color: #dc143c;
}
#list span.category {
text-align: center;
position: absolute;
top: 13px;
left: 13px;
height: 22px;
border-radius: 14px;
background: #e95464;
font-size: 11px;
padding: 0 10px;
line-height: 22px;
vertical-align: middle;
transition: .3s;
color: #fff;
}
#list span.category a{
color: #fff;
font-weight: bold;
text-decoration: none;
}
#list .fa-folder:before {
content: none;
}
#list span.category:hover {
background-color:silver;
}
/*記事一覧アイキャッチサイズ*/
#list .term img {
margin-bottom: 0px;
border-radius: 6px 6px 0px 0px;
padding: 0px;
}
#list div[id^=”tile-“] .term img, #list div[id^=”card-“] .term img {
max-width: 575px;
width: 100%;
}
/*記事一覧ボックス形状*/
div[id^=”tile-“] .toc:not(#bottom-area):not(.posts-list-middle-widget):not(#bottom-area):not(.posts-list-under-widget) {
padding: 0px;
border: 2px solid #ccc;
transition: .3s;
border-radius: 6px;
}
div[id^=”tile-“] .toc:not(#bottom-area):not(.posts-list-middle-widget):not(#bottom-area):not(.posts-list-under-widget):hover {
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
transform: translateY(-5px);
}
/*記事一覧の日付余白*/
div[id^=tile-] .meta {
margin-bottom: 5px;
}
/*カレンダーアイコン*/
.fa-calendar:before {
content: “\f017”;
font-size: 115%;
}
/* コンテンツ間余白 */
@media only screen and (min-width:576px){
.container {
padding: 0 0px;
}}
@media only screen and (max-width:575px){
.container {
padding: 0 10px;
}}
@media print, (max-width: 991px){
.grid {
margin: 0px -10px 20px -10px;
}}

参考サイトLuxeritasの記事一覧をSANGO風にカスタマイズ

Luxeritas標準の引用ボックスのデザインを変更


参考サイトCSSで作る!魅力的な引用デザインのサンプル30(blockquote)

これの29をいじって角丸に

コード
/* 引用ボックス */
blockquote {
border-radius: 10px; /* 角の丸み */
border-left:none;
margin: 20px 10px; /* 上下 左右 */
padding: 10px 20px 10px 30px; /* 上 右 下 左 */
position: relative;
box-sizing: border-box;
color: #4e4e4e;
background: #fff0f0;

}

blockquote:before{
display: inline-block;
position: absolute;
top: 7px;
left: 10px;
vertical-align: middle;
content: “\f10d”;
font-family: FontAwesome;
color: #ffdfdf;
font-size: 58px;
line-height: 1;
}

blockquote:after{
display: inline-block;
position: absolute;
bottom: 5px;
right: 15px;
vertical-align: middle;
text-align: center;
content: “\f10e”;
font-family: FontAwesome;
color: #ffdfdf;
font-size: 40px;
line-height: 1;
}

blockquote p {
position: relative;
padding: 0;
margin: 10px 0;
z-index: 3;
line-height: 1.7;
}

blockquote cite {
position: relative;
z-index: 3;
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}

ページネーションをかわいくした

参考サイトLuxeritas(ルクセリタス)の見た目をオシャレに! 13のカスタマイズしたことまとめ【WordPressテーマ】

そのままコピペ

可愛いボックス


htmlは <div class=”mybox”>sample text</div> これ

コード
/* 囲みボックス赤 */
.mybox{
background-color: #fff;
border: 2px solid #ef857d;
border-radius: 5px;
margin: 40px 5px 5px 20px;
padding: 20px 20px 10px 20px;
position: relative;
}
.mybox:before{
background-color: #ea5550;
border-radius: 5px;
color: #fff;
content: ‘CHECK!’;
padding: 5px 20px;
position: absolute;
left: -10px;
top: -20px;
}
.mybox:after{
border-top: 12px solid #ea5550;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
content: ”;
position: absolute;
top: 10px;
left: 15px;
}
参考サイトコピペで可愛く装飾! CSSのみでデザインする囲み枠(ボックスデザイン)

目次のデザイン

角を丸く・文字のサイズ・ナンバリング消し・(※まだ途中)

コード
/*————————————————————
目次
————————————————————-*/
.toc_title {
font-weight: bold;
font-size: 1.5em;
}
.toc_number{
display:none;
}
.toc_toggle::before{border:none;font-family:FontAwesome;content: “\f0da 表示”;}
#toc_toggle:checked + .toc_toggle::before{border:none;font-family:FontAwesome;content: “\f0d7 非表示”;}
#toc_toggle:checked+.toc_toggle+.toc_list{margin-top:5px;margin-bottom:10px;}
参考サイトLuxeritas の目次のつかい方&カスタマイズ

プラグイン

Shortcodes Ultimateを入れてみた

参考サイトこんなことがしたい!Shortcodes Ultimateで簡単記事装飾

参考にさせていただいたサイト様ありがとうございました。

Comments are closed.