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

ジトメカツモク!☆漫画連載中☆
「ジトメカツモク!~陰キャ女子の日常ウォッチング!!~」
コミックウォーカー版は毎週水曜日更新・
コミックエッセイ+版
は金曜日更新です☆

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

CSS

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

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

コード

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

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

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


白いドット線にする

コード

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


本文と違う色にしたい

コード
参考サイトLuxeritas の見出しCSSセレクタ一覧【ルクセリタスカスタマイズ用】

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

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

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

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

コード

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

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

背景色をいれた角丸に

コード

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

↓↓↓

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

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


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

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

コード

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

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

そのままコピペ

可愛いボックス


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

コード
参考サイトコピペで可愛く装飾! CSSのみでデザインする囲み枠(ボックスデザイン)

目次のデザイン

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

コード
参考サイトLuxeritas の目次のつかい方&カスタマイズ

プラグイン

Shortcodes Ultimateを入れてみた

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

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

LINEで更新情報を受け取れます
ブログランキング・にほんブログ村へ
※LINEでライブドアブログとお友達になっておいてください。更新情報が届きます。