最新情報はメルマガ(無料)でお知らせしています
メルマガ登録・解除 ID: 0000164859
モテるブログ通信
  
バックナンバーpowered by まぐまぐトップページへ

個別記事にサイドバーをつける……コツだけ！紹介

リニューアル前のデザインでは、個別記事・カテゴリ別・月別には、サイドバーがありませんでした。
そこで、頑張ってテンプレートを編集してサイドバーをつけた方も居られるでしょうし、また、今現在、取り付けようと四苦八苦されている途中の方もあると思います。


思います、が。
解説できないんです(爆

なぜかというと、それぞれのテンプレートによってやり方が違ったりするために、ひとつひとつ解説していくことがムリなんです…
申し訳ない。

そこで、個別記事にサイドバーをつけるにあたって、どういうところを気を付けながらやればいいのかを、解説します。
＜コツ＞ってやつですね。

ポイントさえ分かっていれば、サイドバーはつけやすいです。
今まで、他のサイトに書いてある方法を試してみてもうまくいかなかった経験のある方は、是非、ゆっくりと取り組んでください。

そのブログ・サイトで解説されるままにやってみて、うまくいかなかった方は…「木を見て森を見ず」の状態ですので…

まずは、無料レポート読んで、環境を整えてくださいね！
ダウンロードはコチラから≫

さて、準備できましたか？

無料レポートの最後のほうにも書いてあるのですが、枠線を表示させておいてください。
やり方は、ＣＳＳファイルの以下の要素について、
border:1px solid (色指定：それぞれに違う色をしてください);
を追加してください。
  1. container
  2. banner
  3. description
  4. content (重要！)
  5. blog
  6. blogbody
  7. links
さてさて。テンプレート解剖をします。
ブログ用テンプレートも、ＨＴＭＬと同じルールがあります。
開始タグと終了タグがあって、それぞれが対になる、というルールです。

トップ
id=container
id=banner
id=description

id=content
class:blog
class:blogbody

ここに、
日付とか記事タイトルとかが
配置されます


id=links

CSSで位置指定(右・左)をします


  • id=container
    • id=banner
      • id=description
    • id=content
      • class:blog
        • class:blogbody
    • id=links
個別
id=container
id=banner
id=description

class:blog
class:blogbody

ここに、
日付とか記事タイトルとかが
配置されます



  • id=container
    • id=banner
      • id=description
    • class:blog
      • class:blogbody

さてさて、違いがわかりましたか？

個別記事には、id=contentというのがないんです。
また、id=linksという、サイドバー用の要素もありません。

※contentという要素には、幅指定がしてあります。
divは幅指定してやらないと、１００％横幅を占拠します。


なので、個別記事では【 id=content 】で記事部分をくくってやり、
また、サイドバー用の【 id=links 】を追加してやらないといけません。


これが、個別記事にサイドバーをつけるコツです。

■もひとつ、追加。以上の説明では、分かりにくいがな！という方へ。コツを紹介。
トップページと個別記事を見比べながら、<div>の数・構成をあわせること

結局、トップページと個別ページのHTML構成をあわせればいいわけですから、
見比べながらやると、ここが違うのね〜♪とか、よくわかりますよ！

ぜひ、やってみてくださいね。

個別記事には、コメント投稿用のHTMLとか
たくさん変なものが含まれてますが、
そういうのに惑わされずに(笑)、
<div>の数・構成にのみ注意して、変えてみてくださいね！



divタグが多く出てきますので、きちんと【対(つい)】になっているかどうかを、
チェックしてくださいね！

トップページのdivの状態と、個別記事のdivの状態が同じになったら、
ブログの管理画面でそのテンプレートを上書きしてブログの再構築をしてください♪

「記事カスタマイズ」カテゴリの最新記事

カテゴリ：記事カスタマイズ ｜ブログ全体の設定・カスタマイズ

トラックバックURL

コメントする

名前
メール
URL
絵文字

トラックバック一覧

  1. 1. ブログカスタマイズ完了　〜全ページにサイドバーを表示！〜

    • [オンラインカジノ攻略・儲ける達人の必勝法]
    • 2005年10月28日 05:11
    • ライブドアブログの中でも古いデザインのものは個別記事などにサイドバーがつかないようで・・ かと言って新しいデザインの中にも気に入るものがない・・ 「これはどうにかしたいな〜」と思っていたところ・・

  2. 2. 個別記事にサイドバーをつける

    • [うずら日記ヾ(・◇・)ノ]
    • 2005年11月24日 13:58
    • 個別記事にサイドバーを付け足してみる。 記事の下にバーが入ったり、上手く行かないと思ったら 『保存』する前に　『トップページ』『個別記事』などをウロウロして 貼り付けた記事が消えていたのが原因らしい｡｡｡＿|￣|○||| やり方さえ理解したら、ちょちょいの...

コメント一覧

    • 1. ここあ
    • 2005年09月27日 08:05
    • アドバイス通りにしてみたのですが、プラグインの部分がめちゃめちゃに表示されてしまいます。
      各プラグインの文字は画面左(予想通り)に表示されているのですが、プラグイン枠とプラグインタイトル枠がページのセンターにあり、メインと混同した感じになっています。
      CSSも見てみたのですが、変更すべき箇所がよくわかりませんでした。対応方法がありましたら教えていただけませんでしょうか。
      ちなみに使っているテンプレートはキャラクターのバニーです。
      よろしくお願いいたします！
    • 2. 琉海＠モテるブログ
    • 2005年10月15日 11:49
    • ＞ここあさんへ

      お返事遅れて申し訳ないです(>_<)

      サイドバーの追加には、CSSの編集は必要ないですよ！

      多分、テンプレート内できちんと<div>タグが閉じてないのが原因だと思うので、よくよく確認してみてくださいね！
    • 3. こんばんは☆
    • 2005年11月16日 01:42
    • 5
      こんばんは！はじめまして。

      私の投稿したテーマに、トラバをしてくださって、
      ありがとうございます☆

      トラバのリンクから、お伺いしましたが、
      いろいろと、解説をしてくださっていて、
      とても、勉強になります♪
      私も、マイ・ブログのカスタムの際には、
      参考にさせていただきたく思います☆

      これからも、がんばってくださいね！

      ではでは、また☆
    • 4. ぽてと
    • 2005年11月16日 01:45
    • ごめんなさい。。。

      名前に、「こんばんは☆」なんて、
      間違えて、タイトルを入れちゃいました…(>_<)

      「ぽてと」と申します。

      よろしくお願いします☆
    • 5. ミパリス
    • 2006年01月14日 15:09
    • いつも楽しくカスタムしています。笑）
      個別記事のサイドバーが落ちてしまいます。涙）
      よろしくお願いします。
    • 6. harana
    • 2006年06月07日 17:38
    • お助けください。

      id=content　と id=links を追加したら、確かにサイドバーは表示されましたが、
      個別記事の本文の左端が切れて表示されました。

      「※contentという要素には、幅指定がしてあります。
      divは幅指定してやらないと、１００％横幅を占拠します。」

      という事に関連するのでしょうか？
      かなり横幅のある画像を使用しています。
      それが原因なのでしょうか？

      宜しくお願いします。
    • 7. harana
    • 2006年06月07日 21:39
    • 17:38 に、個別記事の本文の左端が切れるので、ということでお助けを！とお願いしましたが、解決しました。
      試しに、カテゴリー別、月別もやってみたら問題なかったので、原因は個別記事と判断しコメント書き込み欄のサイズを変えたら、成功しました。
      お騒がせしました。
    • 8. 琉海＠モテるブログ
    • 2006年06月14日 23:14
    • ＞haranaさんへ

      よかったです☆
      すばやいレスできなくて、申し訳ないです(汗
    • 9. kei☆
    • 2006年07月03日 17:16
    • はじめまして。
      CSSとか全くわからないのに、HTMLがちょっと特殊？で、カスタマイズの仕方がわからず、検索であちこち行ったました。
      そんな時に、こちらの記事が大変参考になりました！こちらのヒントを参考にして、パズルのように無理やりやったら、なんとかカスタマイズも成功し、満足してます。
      ありがとうございました。
    • 10. 琉海＠モテるブログ
    • 2006年07月04日 20:11
    • ＞kei☆さんへ

      はじめましてです☆
      お役に立てたようで、よかったです〜
記事検索
携帯電話から、ホームページを見る人が増えています。