*

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

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


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

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

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

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

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

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

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

無料レポートの最後のほうにも書いてあるのですが、枠線を表示させておいてください。
やり方は、CSSファイルの以下の要素について、
border:1px solid (色指定:それぞれに違う色をしてください);
を追加してください。

  1. container
  2. banner
  3. description
  4. content (重要!)
  5. blog
  6. blogbody
  7. links

さてさて。テンプレート解剖をします。
ブログ用テンプレートも、HTMLと同じルールがあります。
開始タグと終了タグがあって、それぞれが対になる、というルールです。

トップ
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は幅指定してやらないと、100%横幅を占拠します。

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

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

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

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

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

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

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

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

関連記事

no image

トップページの個別記事のタイトルをリンク文字にする

トップページから、個別記事へと移動するときに、 10:51 といった時間や、 Comment(0)と

記事を読む

no image

トップページに目次を作る

トップページに目次を用意しましょう。 たくさんの記事を書いていると、 サイドバーに表示される「最新

記事を読む

no image

ライブドアブログの限界

リニューアル後のライブドアブログの限界について、語っています。 ※「ブログの設定/管理」の画面を

記事を読む

no image

個別記事の最後に固定の文章・HTMLをつける

個別記事のテンプレートの編集をします。 場所は、 <$ArticleBodyMore$>

記事を読む

no image

独自ドメインにする…ムームードメイン×ライブドア

この「モテるブログ」は、もともと、 http://blog.livedoor.jp/moteblog

記事を読む

no image

個別記事にサイドバーをつける……デザインがズレた?!

前回、個別記事にサイドバーをつけるコツをお知らせしたのですが、 どうやら、デザインが横にズレてしまう

記事を読む

no image

ページトップの画像を変更する

既存のデザインも、トップの画像を差し替えるだけで、 随分と、印象が変わります☆ そこで! トップ

記事を読む

no image

ライブドアのヘッダー広告HTMLを一番下に配置する方法

このカスタマイズは、ブログの管理画面の「デザイン設定」右下「カスタマイズ」にて行います。 デザイン変

記事を読む

no image

管理画面説明

トップ画面の様子です。 この画面では、以下の項目が確認できます。 ブログのタイトル利用中のサービ

記事を読む

no image

ブログ全体の文字を、ワンサイズ大きく・小さくするには?

ブログの文字、ちょっと小さい方がデザイン的にはちょっとかっこよく見えます。 でもね、誰もが小さい文字

記事を読む

Comment

  1. ここあ より:

    アドバイス通りにしてみたのですが、プラグインの部分がめちゃめちゃに表示されてしまいます。
    各プラグインの文字は画面左(予想通り)に表示されているのですが、プラグイン枠とプラグインタイトル枠がページのセンターにあり、メインと混同した感じになっています。
    CSSも見てみたのですが、変更すべき箇所がよくわかりませんでした。対応方法がありましたら教えていただけませんでしょうか。
    ちなみに使っているテンプレートはキャラクターのバニーです。
    よろしくお願いいたします!

  2. >ここあさんへ
    お返事遅れて申し訳ないです(>_< ) サイドバーの追加には、CSSの編集は必要ないですよ! 多分、テンプレート内できちんと

    タグが閉じてないのが原因だと思うので、よくよく確認してみてくださいね!

  3. こんばんは☆ より:

    こんばんは!はじめまして。
    私の投稿したテーマに、トラバをしてくださって、
    ありがとうございます☆
    トラバのリンクから、お伺いしましたが、
    いろいろと、解説をしてくださっていて、
    とても、勉強になります♪
    私も、マイ・ブログのカスタムの際には、
    参考にさせていただきたく思います☆
    これからも、がんばってくださいね!
    ではでは、また☆

  4. ぽてと より:

    ごめんなさい。。。
    名前に、「こんばんは☆」なんて、
    間違えて、タイトルを入れちゃいました…(>_<) 「ぽてと」と申します。 よろしくお願いします☆

  5. ミパリス より:

    いつも楽しくカスタムしています。笑)
    個別記事のサイドバーが落ちてしまいます。涙)
    よろしくお願いします。

  6. harana より:

    お助けください。
    id=content と id=links を追加したら、確かにサイドバーは表示されましたが、
    個別記事の本文の左端が切れて表示されました。
    「※contentという要素には、幅指定がしてあります。
    divは幅指定してやらないと、100%横幅を占拠します。」
    という事に関連するのでしょうか?
    かなり横幅のある画像を使用しています。
    それが原因なのでしょうか?
    宜しくお願いします。

  7. harana より:

    17:38 に、個別記事の本文の左端が切れるので、ということでお助けを!とお願いしましたが、解決しました。
    試しに、カテゴリー別、月別もやってみたら問題なかったので、原因は個別記事と判断しコメント書き込み欄のサイズを変えたら、成功しました。
    お騒がせしました。

  8. >haranaさんへ
    よかったです☆
    すばやいレスできなくて、申し訳ないです(汗

  9. kei☆ より:

    はじめまして。
    CSSとか全くわからないのに、HTMLがちょっと特殊?で、カスタマイズの仕方がわからず、検索であちこち行ったました。
    そんな時に、こちらの記事が大変参考になりました!こちらのヒントを参考にして、パズルのように無理やりやったら、なんとかカスタマイズも成功し、満足してます。
    ありがとうございました。

  10. >kei☆さんへ
    はじめましてです☆
    お役に立てたようで、よかったです~

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

no image
Hello world!

WordPress へようこそ。これは最初の投稿です。編集もしくは削除

おすすめ記事

【モテるブログ】総合メニューモテるブログ ■ライブドアブログカスタ

no image
他人が書いた不都合な記事を検索結果から削除する方法

琉海も過去に何度か「記事内容を削除してください」という依頼を受けて削除

no image
ブログをアクセスアップさせる裏技

私自身は「やりません」が、アクセスアップに効果があるのでご紹介しておき

no image
有料ライブドアブログからMTへお引越しする方法

このブログもそうなのですが、 独自ドメイン&有料ライブドアブログPRO

→もっと見る

PAGE TOP ↑