カスタマイズ

投稿日:2017年8月22日 更新日:

stinger8/サイドバーのリストの間隔をあけてみる

シンプルなテンプレートstinger8のカスタマイズです。
サイドバーにあるタイトルの装飾ができたので次はリストの間隔をあけてみます。

「ad」というクラスがついたdiv内にあるliに対しての指定なので
.ad liにpadding:10px;を指定してみます。

・・・が変わりません。

これはstinger8のスタイルシートで 「#side .st-aside ul li」にpadding:0;が指定されているので リストの間隔やその他指定は以下のように子テーマのスタイルシートに記載します。

#side .st-aside ul li{padding:10px;}

こんな感じに間が空いて見やすくなりました。

カテゴリに子カテゴリを追加するとちょっと間隔が変わってくるので子カテゴリのリストに対しても以下の指定を追加します。

#side .st-aside ul li{padding:10px 0;}
#side .st-aside .children li{
	border-bottom:none;
    padding-bottom: 0;
    border-top: 1px solid #ccc;
    margin-top: 10px;}

さらにアイコンなどを入れたりしても雰囲気が変わります。

指定はこんな感じ↓


#side .st-aside ul li{padding:10px 0;position:relative;}
#side .st-aside ul li a:after{
	content:"";
	background:url('画像のパス')0 0 no-repeat;
	width:18px;/*画像サイズは作成サイズに合わせて*/
	height:18px;
	position:absolute;
	right:10px;}

- カスタマイズ
-

関連記事

stinger8/サイドバーのタイトルを装飾してみる

シンプルなテンプレートstinger8のカスタマイズです。 サイドバーにあるタイトルを装飾してみます。 まずは子テーマを作成後(方法は割愛します)style.cssを作成 サイドバーのタイトルには「m ...

stinger8/記事のサムネイル画像を◯(丸型)にしてみる

シンプルなテンプレートstinger8のカスタマイズです。 カテゴリページの記事一覧などにも使える簡単なcssです。 画像を丸く表示しておいて、 オンマウス時に四角にもどします。 動きをなめらかにする ...

stinger8/オンマウス時、一覧表示の画像をズーム(拡大)させる

シンプルなテンプレートstinger8のカスタマイズです。 サイトを作ってカテゴリを作り、記事を書くとカテゴリページに記事一覧が画像と一緒に(アイキャッチ画像が設定されていれば)表示されます。 このサ ...

stinger8/トップページに新着記事を表示してみる

シンプルなテンプレートstinger8のカスタマイズです。 トップページに新着記事(お知らせ、みたいな)表示させたい事って多いですよね。 まぁブログはもともと最新記事が表示されるようになってるので必要 ...

wordpressテーマstinger8について

仕事でたまたま使うことになったwordpressのテーマ「stinger8」。 検索に強いとのこと。 管理画面はいたってシンプル。 カスタマイズ出来る部分もとっても少ないので管理画面からカスタマイズし ...