stinger5 初めに行うアレンジ-サイドバーからフッターのカスタマイズ


スポンサーリンク

ここでは、ワードプレスでstinger5を導入した際の、簡単な初心者でもわかるアレンジを紹介しています。 必ずバックアップをとってから、カスタマイズしましょう。
st
ロリポップをお使いなら月額300円でバックアップを申し込むか(10日間無料を利用)このブログ記事ロリポップFTPでワードプレスのテーマや画像等をバックアップする方法を参考にしてください。

失敗する可能性がある以上あくまで編集は自己責任でお願いいたします。

サイドバーをカスタマイズ

一応サイドバーとフッターの簡単なカスタマイズを紹介しています。しっかりデザイン化して素敵なブログに仕上げましょう。

見出しの色や404の編集などを幅広く紹介していきます。ヘッダーやメニューは下記を参考にしてください。

超初心者のためのstinger5カスタマイズ~ヘッダーのデザイン変更編
ここではワードプレスを始めて、四苦八苦している初心者のための簡単なstinger5カスタマイズ方法を紹介していきます。 必ずバックアッ...

stinger5のサイドバー見出しの色のアレンジ

初めに外観 → テーマの編集→functions.phpの編集をえらび、その下段に、 //テーマカスタマイザーで編集しない方は削除して下さい(ここから)~中略~(ここまで) という部分をすべて削除してください。

結構長い範囲です。ただしこれを消すと、今までに変えた背景の色や文字の色が初期に戻ってしまうので注意してください。


サイドバーの見出しの色を替える 外観 → テーマの編集でstyle.cssを編集します。

下にスクロールするとこんな記述があります。

/* サイドバーの見出し */
aside h4 {
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	margin-bottom: 20px;
	line-height: 28px;
}
footer h4 a {
	color: #666;
	text-decoration: none;
}

に下記記述を加えると、見出しの文字色が変わります。 color:#ffffff;←白です。お好みの色に変えてください。

/* サイドバーの見出し */
aside h4 {
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
        margin-bottom: 20px;
	line-height: 28px;
color:#ffffff;
}
footer h4 a {
	color: #666;
	text-decoration: none;
}

変更後の画像

iro


すると上記のように見出しが白になります。ちょっと背景がグレーなのでわかりにくかったですね。


ちなみに私は上記のように変更した記述を、左側に飛び出したままにしています。

そうすることで、あとで見たときに、ここを変更したんだなとすぐ分かるからです。ちょっとしたコツですね。

ちなみにサイドバー見出しの色を画像にしたい場合は、下記で変更可能です。位置の微調整が必要な場合があるので、そこは割愛します。

background-image: url(“画像のURL”);

サイドバーの中身と本文の色を替える

初期設定では、背景と同じグレーですが、ここの色だけを替える方法を紹介します。 上記と同じくテーマの編集を選ぶと、下記記述までスクロールします。

/*--------------------------------
サイドバー
---------------------------------*/
aside ul li {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
aside h4 {
	font-size: 14px;
	font-weight: bold;
	line-height: 25px;
	margin: 0px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
}
aside #mybox ul li ul li {
	font-size: 14px;
	line-height: 27px;
}
aside #mybox ul {
	margin-bottom: 10px;

この記述にbackground-color:#ffffff;を加えれば色が白にかわります。

/*--------------------------------
サイドバー 
---------------------------------*/
aside ul li {	list-style-type: none;

	margin: 0px;
	padding: 0px;
}
aside h4 {	font-size: 16px;
	font-weight: bold;
	line-height: 18px;
	margin: 0px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
background-color:#DC143C;
}
aside #mybox ul li ul li {
	font-size: 14px;
	line-height: 27px;
background-color:#ffffff;
}
aside #mybox ul {
	margin-bottom: 10px;
background-color:#ffffff;

}

ちなみに青い部分の色は見出しのバー部分の背景部分です。こんな感じになります。

oki


コピペで使ってください。もちろん色は好きに選びましょう。

ちなみにこの方法ではNEWPOST部分の色は変わっていません。

ここの背景色を変えるにはCSSの
/*——————————–
関連記事表示部分
———————————*/
の下記画像までスクロールしましょう。
newpost
上記画像のようにbackground-color: #色;を追加してください。これで背景の色が変わります。

ちなみにborder-bottom-color:色  はNEWPOSTの記事ごとの区切りの色です。変更したい人は変えてみましょう。

文字が左によっているので、次は空白を空けてみます。

サイドバーの見出しの文字の間をあける

同じくCSSでの編集になります。といっても上記のある部分をかえるだけなので、初心者にもとても簡単です。

/*--------------------------------
サイドバー
---------------------------------*/
aside ul li {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
aside h4 {
	font-size: 14px;
	font-weight: bold;
	line-height: 25px;
	margin: 0px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
background-color:#DC143C;

}

padding-left: 0px;の部分を10~20PXに、お好みの幅で替えてください。これだけで完了です。 こんな感じになります。

aida

ちなみにこの幅は10pxです。参考にしてください。

サイドバーPHPの編集

ここからはしくじると真っ白になったりエラー表示されます。

バックアップ必須かロリポップをお使いなら月額300円でバックアップを申し込むか(10日間無料を利用)このブログ記事ロリポップFTPでワードプレスのテーマや画像等をバックアップする方法を参考にしてください。

スポンサーリンク

サブドメインをうまく使った賢い方法も掲載しています。

購読するの位置と検索フォームの位置を動かす

st5
外観→テーマの編集→sidebar.phpを開きます。

RSSボタン(購読する)の位置を動かしたい時は赤い□部分を切り取って、任意の場所に貼り付けましょう。どこに貼ってよいかわからない人は、あちこちに記述がしてある/div>のすぐ後ろなどに貼って、どこに動いたかを確認してみましょう。

検索フォームの位置を動かしたい場合は上記緑の部分を1行だけ切り取って、同じく/div>のあとに貼り付けて位置を確認してみましょう。

RSSボタンの色を変えたい場合は外観→テーマの編集でスタイルシート (style.css)を変更します。下記までスクロールしましょう。

rss

赤い部分がボタンの色で水色が文字色の変更です。

検索フォームの色を変えたいときは同じくCSSの
/*——————————–
検索フォーム
———————————*/
kensaku
赤い部分が検索の左側の色で水色が右側の色の変更になります。

404エラーページの編集

404とは訪問者がブログ内で存在しないページを訪問した場合に表示されます。カテゴリー変更やページのurlを変更した時によくあるケースです。こんな感じで表示されます↓
404

自分のブログで表示を確認したい場合は、自分のブログのURL/のあとに123でも入力してenterキーを押して確認してみましょう。

ここの表示文字を変えたい場合は外観→テーマの編集→404テンプレートを選択します。下へスクロールすると

4042

赤い部分が英語表記なので、お好きなコメントに書き換えましょう。

緑も同様です。保存したらまた適当にURLのあとに数字などを打ち込んで確認してみましょう。

フッターの色と文字をカスタマイズ

ここではフッターをカスタマイズしていきます。 フッターの色を替えるので、今までと同じく 外観 → テーマの編集でstyle.cssを編集します。

/* フッター文字 */
#footer h3 {
	font-size: 14px;
	margin-bottom: 10px;
}
#footer .copy {
	font-size: 12px;
	color: #999;
	line-height: 15px;
	-moz-opacity: 0.5;
	opacity: 0.5;
}

このまま色を替えると、ちょっとくすんだ色になるので、上記の青い部分を削除しておきましょう。

/* フッター文字 */
#footer h4 {
	font-size: 14px;

	margin-bottom: 10px;
}
#footer .copy {
	font-size: 12px;
color: #fff;

	line-height: 95px;
	background-color:#009F59;
}

赤い部分が文字の色で、茶色の部分がフッターの高さになります。

初期設定ではつぶれたようになっているので、ちょっと高くしておきましょう。 緑の部分が背景の色になります。
もちろん好みなので、好きにカスタマイズしてください。


ちなみに私は、フッター部分のタイトルとブログ説明部分も削除しています。
上記にも同じことが書いてあるので、不必要という判断です。SEO的にどうかはわかりませんが・・・
これは私の勝手な判断なので、削除はご自分の判断にお任せします。


ついでに削除方法も記載しておきます。

フッターのタイトルと説明文を削除する方法

ここからはCSSではなくPHPファイルでの削除となります。なので壊れる確率が高いので必ずバックアップを取っておきましょう。

今度は外観のテーマの編集でフッターPHP(footer.php)を選んでください。

<footer id="footer">
  <h3>
    <?php if (is_home()) { ?>
    <?php bloginfo( 'name' ); ?>
    <?php } else { ?>
    <?php wp_title(''); ?>
    <?php } ?>
  </h3>
  <p>
    <?php bloginfo('description'); ?>
  </p>
  <p class="copy">Copyright&copy;
    <?php bloginfo('name');?>
    ,
    <?php the_date('Y');?>
    All Rights Reserved.</p>
</footer>

すると上記の記述になっているので、赤い部分を全部削除します。すると下記画像が変更前です。

huta

変更後は、こんな感じになります。

saigo

あいかわらず色的にわかりにくいですが、初期の設定なので我慢してください(笑)

色の変更などは上記を参考にしてください。

おまけ

as

外観→テーマ編集→フッターPHPを開くと、上記赤い部分にアクセス解析エースアナライザーや、nendなどのクリック型広告を貼れば、読み込みスピードに影響なく動作します。覚えておいてください。