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

アフィリエイト初心者講座：TOP PAGE » カスタマイズで考えるべき事 » サイドバーをカスタマイズする

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

最近は依頼を受けているサイトの制作で忙しいのですが
クライアントが法人のため、かなり気を使います…

この暑さで皺が延び延びになった脳なので
なかなか良いアイディアが浮かんで来ません…（涙

サイト制作は、SEO対策も含めてやらなくちゃならないので
面倒なんですよねぇ…本当は受けたくない仕事なのですが
お世話になっている所なので損得抜きでやっています。

今回クライアントが利用するために契約したサーバーは
DNSレコードも自由に設定出来るので面白そうなのですが
設定が複雑になり脳みそが爆発しそうです。

他の運営しているブログもメンテナンスをやらなきゃいけないし
メルマガの配信システムの検証もしなければならない…

優先順位をつけるだけでもひと苦労しそうなんですけど
まぁ、なんくるないさーって呑気に構えています…

今回のお題は、サイドバーのカスタマイズなんですけど…
このサイトのサイドバーは、全て手動で更新してるんです。

サイドバーのリスト表示

このサイトのサイドバーは全てフリースペースを使って作ってます。
SEO対策を考えたらデフォルトの構造では使えない…

その代わり記事投稿時は手動で更新しなきゃならないわけです
ハッキリ言って…面倒くさいです（笑

最近の記事やカテゴリにしてもリスト表示なのにリストタグを使ってないし
なぜなのか理解に苦しむのですが、テーブルタグを多用している。
基本システムがそのような仕様になってるんだろうけどどうなんでしょう…？

こんな事は絶対おすすめしないのですが、フリースペースを使う時に
役立つかもしれませんねっ…

HTMLはソースを見てもらえば解る通り、そのまんまです。
最近の記事を例にすると…

<h3>★ 最近の記事</h3>
<div class="sidebar_text">
<ul>

<li><a href="https://fanblogs.jp/crescent/archive/150/0">ダイレクトレスポンスマーケティング</a></li>

<li><a href="https://fanblogs.jp/crescent/archive/149/0">楽丸で始める楽天アフィリエイト</a></li>

<li><a href="https://fanblogs.jp/crescent/archive/148/0">ツイッターでアフィリエイトは成功するのか</a></li>

<li><a href="https://fanblogs.jp/crescent/archive/147/0">ブログのカスタマイズに想うこと</a></li>

<li><a href="https://fanblogs.jp/crescent/archive/146/0">販売力を上げるマーケティング手法　第２章</a></li>

<li><a href="https://fanblogs.jp/crescent/archive/145/0">販売力を上げるマーケティング手法　第１章</a></li>

<li><a href="https://fanblogs.jp/crescent/archive/144/0">文字コードと改行コードを理解していますか</a></li>

<li><a href="https://fanblogs.jp/crescent/archive/143/0">サイト内を上手に誘導できていますか　第２章</a></li>

<li><a href="https://fanblogs.jp/crescent/archive/142/0">サイト内を上手に誘導できていますか　第１章</a></li>

<li><a href="https://fanblogs.jp/crescent/archive/141/0">GREEに学ぶフリー戦略の秘訣</a></li>
</ul>
</div>

10件ほど省略して書いてますが、こんな感じで書いています。
デフォルトでは10件までしか表示出来ないのですが、20件の表示にしています。

基本的に箇条書きのものはリストタグを使ってHTMLを
書かなければならない事を覚えておいて下さい。
枠線やタイトルの背景画、hタグの指定はスタイルシートで指定してます。

スタイルシートでの指定

このサイトのCSSを見てもらえば解ると思うので、まずCSSを見て下さい。

　https://fanblogs.jp/crescent/style.css

探すのも面倒かと思うので抜粋しておきます。

■ h3タグのフォントサイズ指定
h3 { font-size: 12px; }
hタグはリセットCSSですべてボールド指定してるのでここではしていしていません。

#sidebar h3 {
margin: 0;
padding: 7px 4px 6px 4px;
color: #640125;
text-align:left;
border: solid 1px #8B0000;
background: url(https://fanblogs.jp/crescent/file/129/dC1iYWNrNHw.gif) repeat-x;
}

h3タグは、記事本文でも小見出しとして使っていて、設定が違うので
サイドバーで使うために#sidebarを属性としてh3の前につけています。

■ クラス属性の指定
ここで枠線やフォントなどを指定しています。

.sidebar_text {
margin-bottom: 20px;
padding:10px 10px 15px 10px;
color:#333333;
text-align:left;
font-size:10px;
line-height:1.4em;
border-right: solid 1px #8B0000;
border-bottom: solid 1px #8B0000;
border-left: solid 1px #8B0000;
}

■ リストタグの指定
リストタグはカテゴリマップでも使っていて指定が違うので属性を変えて使ってます。

.sidebar_text ul {
margin: 0;
padding: 0;
}

.sidebar_text li {
margin: 0;
padding: 0 0 4px 12px;
list-style-type: none;
background: url(http://gamadasuzo.com/image/fc2/arrow-01.gif) no-repeat;
}

.sidebar_text li a {
text-decoration: none;
}

.sidebar_text li a:hover {
text-decoration: none;
}

スタイルシートを見る時は必ず、リセットCSS、CSSハックが冒頭に書いてあるので
何をリセットしているのか、何をハックしているのかを理解しておくことが必要です。

スタイルシートの指定で分からない所などあれば気軽に質問して下さい。

編集後記

結構、難しいかもしれませんが、HTMLを記述するのにリストタグは必須です。
スタイルシートでの指定方法も合わせて覚える事をすすめます。

覚えるためには自分でHTMLとCSSをメモ帳などのテキストエディタで書いて
ローカルの環境でトライ＆エラーを繰り返すことをして下さい。

トライ＆エラーのやり方が分からなければコメントをください。
次回にでもやり方を書きます。

カスタマイズもSEO対策を意識すればこのように大変なんですょ…
どこまでやれば良いのかはあなたの判断だと思っていのます。

私の場合、SEO対策で基準にしているのが文章構造です。
文章構造が理屈に合ってないと判断した所をカスタマイズしています。

わたしのようにカスタマイズをやらなくともデフォルトのままで良いと思います。
このサイトでどこまでカスタマイズが出来るのかを検証してるだけなので…（笑

まっ、サイドバーはここまでやる必要は無いと思うのだけれど…

出来ないと思うのではなく、やってみようと思う勇気があなたの進化を生み出す。

いつも笑顔で。。
寿一太朗