おすすめサイト 
[テンプレート]サイトマップ用
- サイドバーをスッキリとカスタマイズ♪(04/15)
- サイトマップ用テンプレート（チェック）(04/09)
サイドバーをスッキリとカスタマイズ♪
たくさん増えてきた記事を整理し、ＳＥＯ対策にも有効だというお話をしました。
その際、コメント頂いた中に、「サイドバーに使ってみたい」というご意見がありました。
カテゴリーを表示するのに、皆さん分類をされていますね。
例えば
●おすすめポイントサイト(10)
●おすすめＡＳＰ(8)
●おすすめリードメール(15)
このように大まかな分類でカテゴリーに含まれる記事の数で表示されます。
これを各記事ごとに表示させるカスタマイズを「ツリー化」と言います。
●おすすめサイト
├Ａ
├Ｂ
└Ｃ
このように表示された方が記事を探しやすくなりますし、
サイトを訪れた方の目にも触れやすくなりますね♪
ＳＥＯ対策にも有効です。
しかし、ツリー化はＨＴＭＬの編集が必要なので不安があるという方にもおすすめなのが、
簡単なテーブルを利用した 『 ツリー化もどき 』です♪
こちらのような簡単なテーブルを利用します。| ◆コンテンツ ├ ├ ├ ├ └ ◆コンテンツ ├ ├ ├ ├ └ |
このテーブルに各記事へのリンクを挿入するのです。
次はこちらです。
| ◆コンテンツ ├ ├ ├ ├ └ ◆コンテンツ ├ ├ ├ ├ └ 同じテーブルなのですが、 『 table border="0" 』 なので線が見えませんね。 つまり、罫線の太さが「０」なのです。 |
では、編集方法をご説明します。ソースはこちらです
記事を書く時と同様に、テキストエディターで編集します。
まずはテーブルのソースをコピーします。
テキストエディター左上の「ソース」をクリックしてから貼り付けます。
再度「ソース」をクリックするとテーブルが表示されます。
位置を確認しながら、それぞれリンクを貼りましょう。
仕上がったら再度ソース表示にし、『右クリック→全てを選択→コピー』
『プラグインの追加→フリースペース』にコピーしたものを貼り付けます。
終わりましたらブログを確認してみてください。
サイドバーに表示されていますよ♪使用例です（わかりやすいように罫線を引いてあります）
| おすすめＡＳＰ ├電脳卸 （詳細） ├Ａ８.net  （詳細）├アフィリエイトEasy ├リーフィー （詳細） ├リンクシェア ├ トラフィックゲート （詳細） ├アクセストレード ├Cross-A （詳細） ├ＪＡＮet （詳細） └アフィリエイトパーク おすすめブログライター├ブログルポ  （詳細）├BloMotion （詳細） ├ブログクリップ  （詳細）└ブログのカンヅメ  （詳細）おすすめポイントサイト├秘密屋（詳細） ├げん玉 （詳細） ├まんぷく島 （詳細） ├ＥＣナビ （詳細） ├だぶるくりっく （詳細） ├ちょびリッチ （詳細） └Get Money! （詳細） おすすめ記事├コストコとは？ └カスピ海ヨーグルトとは？ |
『 ◆コンテンツ 』のところの『 ◆ 』をお好みの画像に替えても個性的で素敵ですょ♪ テーブルの幅は指定してありません。ご自分のサイトに合わせて調整してください。
＜TABLE ＞のところを＜TABLE width="180"＞というように width="数値"と指定します。
サイドバーは200px程度の幅が多いので、180pxが無難かと思います。
大きすぎるとサイドバーが下に落ちてしまいますのでご注意下さいね。
ランキングに参加中。応援して頂けると嬉しいです。
サイトマップ用テンプレート（チェック）
紹介したいサイトや記事が増えてくると、前の記事が埋もれてしまいますよね
カテゴリーをツリー化したりも良いけど、HTMLの編集が不安な方も多いことでしょう。
そこでおすすめなのが『サイトマップ』です。
サイトマップとはご自分のブログの目次のようなものですね。
特にSEO対策としてgooglesitemapは有効だと言われています。
今回ご紹介するのは視覚的なサイトマップです。
記事を一覧表にして表示しておく事で、ブログを訪れた方が記事を探しやすくなりますよ
過去の記事からの登録者が増えるかも
使用の際のご注意をお守り頂ければご自由にお使い下さい。
幅の変更、行数の増減はご自由にどうぞ。使用している絵文字はご自分のお好みのアイコンに変更OKです。「design by pumo」のリンク表示は外さずに お使いください。 ＦＣ２ブログ以外のブログサービスをお使いの方は画像が表示されない可能性があります。画像をご自分のＰＣに保存し、アップロードしてお使い下さいね。
画像はこちら
ワンポイントアドバイス
｢background="http://〜"」 の部分をご自分の画像ファイルのURLに書き換えて見て下さい。
背景画像がお好みのイメージに替わりますよ
「background="http://〜"」 を削除して 「bgcolor="色番号"」 とすると背景が無地になります。
シンプルがお好きな方はお試し下さいね
|
||||||
| design by pumo |
ピンク系サイトマップのソースはこちら
|
||||||
| design by pumo |
オレンジ系サイトマップのソースはこちら
|
||||||
| design by pumo |
ブルー系サイトマップのソースはこちら使用例
|
|||||||
ランキングに参加中。応援して頂けると嬉しいです。
