パソコン初心者日記

Simplicityのサイドバーのタイトル文字を変更

色々とスタイルシートを変更していても子テーマに変更箇所を書き込めばそれで良いので子テーマは実にありがたいです。

このSimplicityはタイトル通りシンプルなのでチョッと自分での変更をしたくなります。

サイドバーがチョッとシンプルすぎるので変更しましたが文字の色を変更せずに枠で囲って、文字を少し小さくして中央に寄せました。

今回はそれだけなんですがその変更の仕方を下に記載います。

スポンサードリンク
スポンサードリンク

サイドバーのタイトル変更

Simplicityの子テーマに貼りつけるだけなのですが、変更する際は全て元のスタイルシートが元になってますからもともとのスタイルシートを見て変更したい部分をコピーしてメモ帳に貼りつけてそのメモ帳の上で変更をしてみます。

カスタマイズする場所を選んだら子テーマに貼って為してみますが、順番が違ったりしただけで変更されない時がありますので、今回はチョッと時間がかかりました。

特に文字タイトルの中央に寄せるのに順番があるらしく中々変更できませんでした。

それでは一応子テーマに貼った部分を載せて行きます。

/************************************
** サイドバー(Sidebar)・ウィジェットなど
************************************/
#sidebar h4{
margin-bottom: 10px;
font-size:18px;
text-align:center; /* タイトルの中央寄せ *
color: #000000; /* 文字色 */
border-top:1px solid #004488; /* 背景色 */
border-right:5px solid #004488;
border-left:5px solid #004488;
border-bottom:1px solid #004488;
}

チョッとサイドバーのタイトル下の文字も大きいようなそうでもないような~

サイドバー・ウィジェットのリストマーク

サイドバーなどのタイトルは変更できましたが、その下に写真じゃなくてリストマークを付けたい人がいると思いますが、写真じゃ表示時間がかかるという人の為に、私の知っているマーク一覧を載せときます。

disc 黒丸 ●

circle 白丸 ○

square 四角 ■

decimal 数字 1.2.3.

upper-alpha A.B.C. 大文字アルファベット

lower-alpha a.b.c. 小文字アルファベット

upper-roman Ⅰ.Ⅱ.Ⅲ. 大文字ローマ数字

lower-roman ⅰ.ⅱ.Ⅲ. 小文字ローマ数字

list-style:url(画像)

list-style-image:(画像のURL)

使い方の1例として

.widget-area .widget ul {
list-style: disc; /* リストマーク */
padding-left:20px; /* 左に余白 */
}

このようにスタイルシートに書き込んでいけば写真でなくリストマークが表示されます。
表示されない時はブラウザの更新ボタンを押してみたら表示される場合があります。

結局は元のスタイルシートが参考になるので元のスタイルシートにタイトル事に分かれていて
「サイドバー(Sidebar)・ウィジェットなど」って記載があるから私も大体わかりますが、記載がなかったらどこがどうだかさっぱりわかりません。

このテーマはサイドバーはh4になっていますが、twentytwelveってテンプレートはh3でしたが文字が大きくなったりするのかな~

● Simplicityヘッダーのブログタイトル位置と大きさの変更

● Simplicityの記事タイトルと見出し2の装飾

● Simplicityのメニューバーの色を変更

モバイルバージョンを終了