gush2アレンジ!サイドバーをカスタマイズする初心者に役立つテクニック


スポンサーリンク

ここではサイドバーのアレンジ方法を紹介。まずはガッシュの製作者エローラさんが推奨しない404でのアドセンス広告の非表示。初心者は必ずバックアップをとってから、編集しましょう。

gush2のサイドバーカスタマイズ編

404
誰もが最初にてこずる楽しくもあり、面倒なカスタマイズですがわかるようになれば、断然楽しくなってきます。でも時間はあまりかけずに記事作成に時間をかけましょう。

404ページのカスタマイズ

ちなみに私はタブレットをもっていないので、タブレット編集はしていません。(確認できないので)

外観→テーマの編集で404PHPの編集を選びます。

そうすると下段にく!–?php get_sidebar(); ?–>があるので削除して完了。

確認方法はhttp://自分のブログのアドレス/abcとでも打ってみましょう。そしたら上記のあんな可愛らしい画面が出てきますので、完了確認しておきましょう。


そもそも404エラーページにサイドバーは不要だと思います。そこからほかのページを探す人のほうが少ないと思います。

ほとんどの人が去っていくから、あまり気にしなくてもよいと思います。たぶん・・・


サイドバーの見出し編

同じく外観のテーマの編集で (style.css)を編集します。ここではPCでの表示のアレンジ
/*————————————–
1024px サイド
————————————–*/
#contents #sub {
float: left;
margin: 0;
width: 300px;
text-align: center;
padding: 0;
1.color:#000000;
2.background: #ffffff;
}
<中略>
少ししたへ行くと

#sub h4 {
3.font-size: 18px;
text-align: left;
4.padding-left: 10px;
border: none;
5.color: #ffffff;
font-weight: bold;
margin: 0 0 18px 0;
}


1と2は最初は記述がないので追加でコピペしてください。1はサイドメニュー本文の文字色。


2はその背景の色になります。同じ色なら#fffの3つだけでも色は変わりますが、初心者用ということで6つ入れています。

カラーチャートなどでお好きな色を入力しましょう。


ちょっと凝った色にしたい人は、コピペでできるhttp://lea.verou.me/css3patterns/を参考にしてください。

スポンサーリンク

このブログのサイドバーの背景は、#eeeeee;にしています。背景は画像です。でもgush2は別のブログで使用しています。

要するに2の記述を入れなければ、背景と同じ色のままなので途中でやっぱり背景と一緒にしようと思った人は、2を全部消してください。


3は見出しの文字サイズ。カテゴリーとか最近の投稿とかそういう見出しのことです。右の文字を確認してください。人気記事と書いてある部分です。

4はその見出しの横の余白。背景色を見出しにつけたら、見出しが左によっているので、少しスペースを空けたい人が数字をいれて広げましょう。(スマフォの表示はここを変更しても変わりません)


このブログで言えば、初心者向けの稼ぐコツの初の左横のスペースを指します。

5はその見出し文字の色です。例えば人気記事の文字の色のことです。


サイドバーのSNSアイコンや検索フォームを動かす

テーマ編集のサイドバー(sidebarphp)に次の記述があります。

<!–検索フォーム–>
<div class=”side_contents”>
<?php get_search_form(); ?>
</div>

消したいならこれを全部消して、動かしたいなら切り取って貼りたいところに貼ってください。同じサイドバー上に動かしたいなら<!–新着記事ここまで–>の下くらいに貼ってみましょう。

あとは切り貼りして、気に入った場所が決まったら完成です。


同じくSNSのアイコン(ツイッター、Facebook、google+、RSS)の位置を動かしたい場合は、同じくテーマ編集のサイドバー(sidebarphp)に次の記述があります。

<!–アイコン–>
<div class=”side-sns”>
<!– thnx! http://www.iconsdb.com/ –>
<ul>
<li><a href=”https://twitter.com/” target=”_blank”><i class=”fa fa-twitter”></i>
</a></li>
<li><a href=”https://www.facebook.com/” target=”_blank”><i class=”fa fa-facebook”></i>
</a></li>
<li><a href=”https://www.google.com/” target=”_blank”><i class=”fa fa-google-plus”></i>
</a></li>
<li><a href=”<?php echo home_url();?>/feed/” target=”_blank”><i class=”fa fa-rss”></i>
</a></li>
</ul>
</div>


これを切りとって、検索フォーム同様に貼りたいところへ貼ってみましょう。

どこへ貼ってよいかわからない人は、削除してしまいましょう。(笑)