スティンガー5 カスタマイズ第6回目「サイドバーの変更」企業のホームページみたいに!!

1
今回はスティンガー5 カスタマイズ第6回「サイドバーの変更」を紹介したいと思います。

サイドバーで必要ないメニューの削除

2
今回は企業のホームページ用として「スティンガー5」をカスタマイズしているので、必要ないものがたくさんあります。
ワードプレスを使っている人でしたらあたりまえのことですが、サイドバーはワードプレスダッシュボードの「外観」から「ウィジェット」を選択すれば簡単に、メニューの削除や追加ができます。

今回はリサイクルショップのホームページを作成しているのでいろいろ削除しました。
・最近の投稿
・新しいコメント
・アーカイブ
・カテゴリー
・メタ情報
こちらを全部削除しました。カテゴリーはうまく使えば、リサイクルショップのサイドバーのメニューとして使用できるとも思ったのですが、とりあえずやめました。

サイドバーの「New Post」文字の変更

6
次にサイドバーの上記画像「New Post」と表示される文字の変更方法です。

5
ワードプレスダッシュボードの「外観」→「テーマの編集」から「sidebar.php」を選択して、上記画像の6行目の「New Post」部分を削除して変わりに表示させたい、文字をいれます。今回は「新入荷&新着情報」にしました。

7
上記画像が変更後の画像です。
いまいちインパクトが無いのでスタイルシートをいじって、インパクトをつけたいと思います。

8
今度は「style.css」ファイルを開きます。
少しスクロールしていくと、真ん中より少し上の位置ぐらいに、上記画像のような「サイドバー」と表示されている部分があります。
こちらを変更すれば、先ほどの部分が変わります。

10
上記画像のように変更しました。

コードは下記になります。簡単にコピペできます。

aside h4 {
	font-size: 20px;
        color: #fff;
        border-radius: 15px 15px 0px 0px;        
        -webkit-border-radius: 15px 15px 0px 0px;   
        -moz-border-radius: 15px 15px 0px 0px;
	font-weight: nomal;
	line-height: 30px;
        background-color: #FF4500;
	margin-bottom: 5px;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 65px;

}
.menu_underh2{
	        color: #fff;
       }



変更後のサイドバーはこちら

12
変更後のサイドバー上記画像になります。
今回はここまでで終わりにしますが、次回もサイドバーのカスタマイズの続きをしたいと思います。

stinger5カスタマイズ、今回までの記事

[stinger5]スティンガー5をビジネステンプレートみたいに、カスタマイズする方法 第1回「企業ロゴの追加」

[stinger5]スティンガー5をビジネステンプレートに、カスタマイズする方法 第2回「ヘッダーに企業電話番号の追加」

[stinger5]スティンガー5をビジネステンプレートに、カスタマイズする方法 第3回「グローバルナビの変更」

スティンガー5 カスタマイズ 第4回「グローバルナビの下に「Meta Slider」を使用して、スライド画像の挿入」

スティンガー5 カスタマイズ 第5回「トップページ 新着情報表示の変更」

スティンガー5のカスタマイズまとめ記事はこちら

ワードプレスのテーマ「stinger5」をカスタマイズして、企業のホームページとして2015年1月から運用します

The following two tabs change content below.
AKIRA

AKIRA

上尾市在住の、リサイクルショップで働くサラリーマン。 Twitter・Facebookやってます。 小心者なので、誰か声かけてくれると嬉しいです。
スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

  1. […] スティンガー5 カスタマイズ第6回目「サイドバーの変更」企業のホームページみたいに!! […]

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です