コピペでOK!Simplicityのサイドバーをカスタマイズしよう

  • このエントリーをはてなブックマークに追加
  • 0

mockDrop_MacBook Pro
こんにちは、machiです。今回はSimplicityのサイドバーをカスタマイズしていきます。基本的には子テーマのstyle.cssにコピペするだけでOKです。

見出しやその他のカスタマイズはこちらを参考にしてください。

Simplicityの見出しをカスタマイズしよう。コピペでできる5つのデザインを紹介
SimplicityはWordpress初心者でも簡単にカスタマイズできますし、SEO対策も...
コピペで簡単!Simplicityのカスタマイズまとめ。
このサイトはWordpressを使っています。テンプレートはSimplicityです。これま...

Simplicityのサイドバーをカスタマイズしよう

Simplicityのサイドバーはタイトルの文字が左寄せになっています。これから紹介するものは全て中央寄せになっています。左寄せのままでもいいならば、そのまま進んでください。

サイドバーのタイトル文字を中央寄せしたい方は、まずはこちらを追加します。

吹き出し風のサイドバー

ピンクバージョン

吹き出し風

吹き出しっぽいデザインにしてみました。頭文字を大きさを変更しています。CSSにこちらを追加してください。

ブルーバージョン

吹き出し風サイドバー

ステッチ風のサイドバー

ピンクバージョン

スティッチ風

可愛いステッチ模様のサイドバーです。CSSはこちら。

ブルーバージョン

ステッチ風サイドバー

ネイル風サイドバー

ネイル風サイドバー

ちょっと変わったサイドバーのデザインです。ネイルみたいでおしゃれですね。
CSSはこちら。

リボン風のサイドバー

リボン風のサイドバー

リボン風のサイドバーです。最近よく見かけますね。

ミツバチ風サイドバー

ミツバチ風サイドバー

配色のイメージはミツバチです。

クールなサイドバー

クールなサイドバー

男性向けにクールなサイドバーを作ってみました。モノクロ風のデザインが好きな人におすすめですね。

切り出し風のサイドバー

切り取り風のサイドバー
紙を切り取ったイメージのサイドバーです。

Simplicityカスタマイズまとめ

上記で紹介したコードはSimplicityの子テーマに追加するだけでOKです。文字の色や大きさを変更したい場合は下記のコードを追加します。

最後に今回のカスタマイズをする際に参考にしたサイトを載せておきます。

  • このエントリーをはてなブックマークに追加
date-entry
トップへ戻る