Sibatabi

旅の経験を情報として配信するブログ

【STINGER6】サイドバーカスタマイズ!記事一覧に合わせてカード化するよ!もちろん見出しも!

 2016/01/19 
stinger6

昨日の記事で、記事の一覧をカード型のデザインにカスタマイズしたので、今度はそれに合わせてサイドバーのデザインもカード化します。

 【STINGER6】コピペでOK!記事一覧のカード化カスタマイズ

 

見出しをカード化する

子テーマのstyle.cssに上記を追加。

margin-bottomでコンテンツと切り離してカードっぽくしました。

 

「stinger6」サイドバー見出しカスタマイズ

こんな感じ。

 

人気記事を記事毎にカード化する

人気記事については、見出しと記事毎にカード化しました。

上記をstyle.cssに追加。

 

「stinger6」サイドバー人気記事デザインカスタマイズ

こんな感じです。

最新記事一覧についても、人気記事とデザイン(cssのコード)と統一しているので、上記コードをcssに追記するだけでカード化されます。

【STINGER6】サイドバーの「人気記事一覧」と「最新記事一覧」のデザインを統一するカスタマイズ

 

テキストウィジェットをカード化する

テキストウィジェットについては、phpファイルのどこを編集していいかわからなかったので、テキストウィジェットに直接コードを書き込んで、CSSでレイアウトしました。

 

「stinger6」サイドバーテキストウィジェットカスタマイズ

こんな感じで、テキストウィジェット内のコンテンツを囲んでいます。

 

style.cssには上記のように追記しています。

 

微調整

ウィジェット毎の間隔が狭かったので、上記をstyle.cssに追記してウィジェット毎の間隔を空けました。

 

以上で、サイドバーのカード化カスタマイズは完了です!