個別記事にサイドバーをつける……コツだけ！紹介
公開日：
:
ブログ全体の設定・カスタマイズ, 記事カスタマイズ
リニューアル前のデザインでは、個別記事・カテゴリ別・月別には、サイドバーがありませんでした。
そこで、頑張ってテンプレートを編集してサイドバーをつけた方も居られるでしょうし、また、今現在、取り付けようと四苦八苦されている途中の方もあると思います。
思います、が。
解説できないんです(爆
なぜかというと、それぞれのテンプレートによってやり方が違ったりするために、ひとつひとつ解説していくことがムリなんです…
申し訳ない。
そこで、個別記事にサイドバーをつけるにあたって、どういうところを気を付けながらやればいいのかを、解説します。
＜コツ＞ってやつですね。
ポイントさえ分かっていれば、サイドバーはつけやすいです。
今まで、他のサイトに書いてある方法を試してみてもうまくいかなかった経験のある方は、是非、ゆっくりと取り組んでください。
そのブログ・サイトで解説されるままにやってみて、うまくいかなかった方は…「木を見て森を見ず」の状態ですので…
まずは、無料レポート読んで、環境を整えてくださいね！
ダウンロードはコチラから≫
さて、準備できましたか？
無料レポートの最後のほうにも書いてあるのですが、枠線を表示させておいてください。
やり方は、ＣＳＳファイルの以下の要素について、
border:1px solid (色指定：それぞれに違う色をしてください);
を追加してください。
- container
- banner
- description
- content (重要！)
- blog
- blogbody
- links
さてさて。テンプレート解剖をします。
ブログ用テンプレートも、ＨＴＭＬと同じルールがあります。
開始タグと終了タグがあって、それぞれが対になる、というルールです。
|
|
|
|
さてさて、違いがわかりましたか？
個別記事には、id=contentというのがないんです。
また、id=linksという、サイドバー用の要素もありません。
※contentという要素には、幅指定がしてあります。
divは幅指定してやらないと、１００％横幅を占拠します。
なので、個別記事では【 id=content 】で記事部分をくくってやり、
また、サイドバー用の【 id=links 】を追加してやらないといけません。
これが、個別記事にサイドバーをつけるコツです。
■もひとつ、追加。以上の説明では、分かりにくいがな！という方へ。コツを紹介。
トップページと個別記事を見比べながら、<div>の数・構成をあわせること
結局、トップページと個別ページのHTML構成をあわせればいいわけですから、
見比べながらやると、ここが違うのね～♪とか、よくわかりますよ！
ぜひ、やってみてくださいね。
個別記事には、コメント投稿用のHTMLとか
たくさん変なものが含まれてますが、
そういうのに惑わされずに(笑)、
<div>の数・構成にのみ注意して、変えてみてくださいね！
divタグが多く出てきますので、きちんと【対(つい)】になっているかどうかを、
チェックしてくださいね！
トップページのdivの状態と、個別記事のdivの状態が同じになったら、
ブログの管理画面でそのテンプレートを上書きしてブログの再構築をしてください♪
関連記事
-
-
最新記事の表示数を変える方法
トップページに並ぶ記事の数を変更する方法です。 多すぎる場合は少なく、少ない場合は多くすることが出来
-
-
デザインカスタマイズが楽に
ブログテンプレートを編集しようとすると わりと面倒な画面遷移が必要だったのですが とうとう！管理画面
-
-
トップページに目次を作る
トップページに目次を用意しましょう。 たくさんの記事を書いていると、 サイドバーに表示される「最新
-
-
独自ドメインにする…ムームードメイン×ライブドア
この「モテるブログ」は、もともと、 http://blog.livedoor.jp/moteblog
-
-
ブログ全体の文字を、ワンサイズ大きく・小さくするには？
ブログの文字、ちょっと小さい方がデザイン的にはちょっとかっこよく見えます。 でもね、誰もが小さい文字
-
-
個別記事にサイドバーをつける……デザインがズレた？！
前回、個別記事にサイドバーをつけるコツをお知らせしたのですが、 どうやら、デザインが横にズレてしまう
-
-
独自ドメインにする…バリュードメイン◎ライブドア
この「モテるブログ」は、もともと、 http://blog.livedoor.jp/moteblog
-
-
ブログのデザインがちゃんと反映されていないとき
ブログのデザイン変更をしたり、カスタマイズをしてみた後に、自分のブログを見てみても……なんだか、変わ
-
-
ライブドアのヘッダー広告HTMLを一番下に配置する方法
このカスタマイズは、ブログの管理画面の「デザイン設定」右下「カスタマイズ」にて行います。 デザイン変
-
-
ライブドアブログの閉鎖
事情があり、ブログの閉鎖をされたい方もいると思います。 ですので、その方法をば… ブログの記事を
Comment
アドバイス通りにしてみたのですが、プラグインの部分がめちゃめちゃに表示されてしまいます。
各プラグインの文字は画面左(予想通り)に表示されているのですが、プラグイン枠とプラグインタイトル枠がページのセンターにあり、メインと混同した感じになっています。
CSSも見てみたのですが、変更すべき箇所がよくわかりませんでした。対応方法がありましたら教えていただけませんでしょうか。
ちなみに使っているテンプレートはキャラクターのバニーです。
よろしくお願いいたします！
＞ここあさんへ
お返事遅れて申し訳ないです(>_< ) サイドバーの追加には、CSSの編集は必要ないですよ！ 多分、テンプレート内できちんと
こんばんは！はじめまして。
私の投稿したテーマに、トラバをしてくださって、
ありがとうございます☆
トラバのリンクから、お伺いしましたが、
いろいろと、解説をしてくださっていて、
とても、勉強になります♪
私も、マイ・ブログのカスタムの際には、
参考にさせていただきたく思います☆
これからも、がんばってくださいね！
ではでは、また☆
ごめんなさい。。。
名前に、「こんばんは☆」なんて、
間違えて、タイトルを入れちゃいました…(>_<) 「ぽてと」と申します。 よろしくお願いします☆
いつも楽しくカスタムしています。笑）
個別記事のサイドバーが落ちてしまいます。涙）
よろしくお願いします。
お助けください。
id=content と id=links を追加したら、確かにサイドバーは表示されましたが、
個別記事の本文の左端が切れて表示されました。
「※contentという要素には、幅指定がしてあります。
divは幅指定してやらないと、１００％横幅を占拠します。」
という事に関連するのでしょうか？
かなり横幅のある画像を使用しています。
それが原因なのでしょうか？
宜しくお願いします。
17:38 に、個別記事の本文の左端が切れるので、ということでお助けを！とお願いしましたが、解決しました。
試しに、カテゴリー別、月別もやってみたら問題なかったので、原因は個別記事と判断しコメント書き込み欄のサイズを変えたら、成功しました。
お騒がせしました。
＞haranaさんへ
よかったです☆
すばやいレスできなくて、申し訳ないです(汗
はじめまして。
CSSとか全くわからないのに、HTMLがちょっと特殊？で、カスタマイズの仕方がわからず、検索であちこち行ったました。
そんな時に、こちらの記事が大変参考になりました！こちらのヒントを参考にして、パズルのように無理やりやったら、なんとかカスタマイズも成功し、満足してます。
ありがとうございました。
＞kei☆さんへ
はじめましてです☆
お役に立てたようで、よかったです～