WordPressテーマ「Simplicity2」のサイドバーの装飾

サイドバーのタイトル文字が私には大きすぎたのもあり、もう少し可愛らしく仕上げたかったので装飾してみました。

サイドバーの装飾

初期の状態から、変更したのは、文字の大きさを少し小さめにし、文字を中央寄せにしてみました。
角はborder-radiusを使って少し丸くしてみました。
出来上がりはこんな感じです。

Simplicity2 child: スタイルシート (style.css) に以下を追加しました。

#sidebar h3{
text-align:center; /* 文字を中央表示 */
line-height: 24px;
font-size: 18px;
color: #fff; /* 文字色を白 */
background-color: #ecb3af; /* サイドバーの色 */
border-radius: 5px; /* 角を少し丸くする */
padding: 5px 10px;
}

今回は、「text-align:center;」で文字を中央寄せにして表示しています。

補足:「text-align:left;」を適応した文字は左寄せに、「text-align:right;」を適応した文字は右寄せに表示されます。

【マメ知識】border-radius50%に設定すると上の吹き出しのように〇が描けるので便利ですよ。

にほんブログ村 IT技術ブログへにほんブログ村 IT技術ブログ WordPressへ

スポンサーリンク
スポンサーリンク
SNSフォローボタン

フォローする

シェアする

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