WordPress

【Simplicity2】 デザインカスタマイズ備忘録

スポンサーリンク

ようやくブログのデザインが自分の好みのデザインになったので、自分用の備忘録として記事に残しておきたいと思います。

※【Simplicity2 child】のstyle.cssへ追加

 

記事一覧に関するカスタマイズ

記事と記事の間に区切り線を入れる。

・border-bottom: 2px dotted #ddd; →2pxの数字を変えるとドットの細かさが変わる。

 

記事を読む ボタンの装飾

・4行目、5行目のカラーコードを同じにすると1色になる。(上が中の色、下が枠の色)

・background-color:#fff7e6;

・border:3px solid #20b2aa; →3pxの数字を変えると枠の太さが変わる。

 

「記事を読む」ボタンを右に移動

 

関連記事のカスタマイズ

記事一覧と同じデザインにしました。

区切り線

記事を読む ボタンの装飾

 

サイドバーウィジェットのカスタマイズ

サイドバーメニューのデザイン

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 …

画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。全体…

上記サイトを参考にさせて頂きました。

16番のデザインを借りました。

これを記事一覧、関連記事のカスタマイズと同色に変更して使用させて貰っています。

・padding: .4em .75em; →.4emの数字を変更すると高さが変わる。

 

人気記事の順位のカスタマイズ ※WordPress Popular Posts

※人気記事はプラグインのWordPress Popular Postsを使用しています。

デフォルトだと順位のカラーはグレーで順位自体が見にくいので、色を変更しました。

 

人気記事一覧に区切り線を入れるカスタマイズ  ※WordPress Popular Posts

※人気記事はプラグインのWordPress Popular Postsを使用しています。

記事一覧・関連記事とデザインを統一したくて、同じように区切り線を入れました。

 

新着記事リストに区切り線を入れるカスタマイズ

記事一覧・関連記事・人気記事とデザインを統一する為に入れました。

 

カテゴリーデザインのカスタマイズ

※【functions.php】と【style.css】の2か所に追加。

 

こちらの記事を参考にさせていただきました。

 IRODORU 
「Simplicity2」サイドバーのカテゴリー一覧をカスタマイズしてみた

https://momoura.com/post-581
ウチの愛犬真っ黒黒助のミニチュアダックスが祝14歳になりました。白い物もチラホラ混ざって来ましたがまだまだ元気いっぱい。ももうら(@28momoura)です。 テーマ 「Sim…

【functions.php】

 

【style.css】

・9行目

font-size: 14px;  →14px;の数字を変えると文字の大きさが変わる。

・14行目

color: #2098A8;  →カテゴリー一覧の文字の色

・29行目、30行目

color: #000; →右の数字の色

background: #fff; →右の■の色(このブログでは白にしているので■が見えません)

 

サイドバーの文字サイズの変更

記事一覧と同じ文字サイズだと、くどく感じたので文字サイズを小さくしました。

 

ABOUT ME
イブ
イブ
現在はオフゲー(積みゲー)をメインに時々【FF14】を遊んでいます。 FF14★アウラ・レン:学者/白魔/占星 【積んでるゲーム】 ウィッチャー3、KH2.8、Horizon、DQ11、閃の軌跡Ⅱ改 【発売待ちのゲーム】 TES6、KH3
スポンサーリンク
スポンサーリンク

COMMENT

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)