解決済
記事とプラグインの位置関係のデザインについて
ライブドア側が用意している下記のデザインなんですが右側にあるプラグインが、ブログの投稿記事部分よりも若干下の位置から設置されています。
右斜め上にあるイラストを考慮してのデザインとは思いますが、
これを現在使用している
こちらのテンプレートジャンル・シンプルの、テンプレート名はMirrorをベースに
uncleのような表示方法にカスタマイズしようと考えています。
当方も、タイトルや背景に右上に少し大きめの画像を置きたいと考えているので、
プラグインの位置を記事部分よりも少し低めの位置から始まるようにデザインできればと考えています。
自分なりにカスタマイズの方法を考え、過去にも何度か質問をさせていただいたのですが、
#banner,#subbanner{background:url
で指定しているトップ画像の下に本記事のcontainer部とプラグインのlinks部がくるデザインになってしまい、
uncleのようにcontainer部がトップ画像の一部と被さる様なデザインに出来ません。
一時はuncleをベースにカスタマイズしたデザインも考えていましたが、uncleは３カラムの上に使用している画像が多すぎて
調整に難航して挫折してしまいました。
そこでその前まで使っていた２カラムのmirrorのテンプレートのCSSをベースに作ろうと考えているのですが、
どのような文字列を加えればいいか、参考を載せていただけませんでしょうか。
回答(3)
1.
サイドカラムにはpaddingとかmarginで余白を与えてあげてください。
2.
3.
コメント(9)
人に聞く前に
自分なりに
もっと
試行錯誤してみようよ。
僕、結構思いつくまま質問してるよ。
質問したあとで、「あっ」と気づいて
削除していたりしています。
質問あってのKnowledge。
どんどん質問しよう。
＞万年床生活者さん
その回答の内容は理解したつもりですし、その回答を基にいじってみたのですが、
表示が思い通りにいかないんです。
確かにプラグインの位置を動かすことには成功しました。
試した上で成功したので回答者の方には感謝してますし、ベスト回答も出したんです。
ただ、この回答をいただいた時点で実践してみたのはプラグインの位置を変えることだけで、
uncleと同じデザインにできるかまでは検証していなかったんです。
あとからトップ画像を用意して、はじめてそこでこの質問だけでは解決しないことに気づいたのです。
非常にお恥ずかしい話ですが。
本記事の部分と比較してプラグインの位をが下げるのは解しましたが、uncleのデザインを確認してもらえるとわかると思いますが、
http://blog.livedoor.com/design_demo/uncle.html
このデザインのトップに使われている画像はこれです。
http://parts.blog.livedoor.jp/img/usr/uncle/m_top....
見てわかるように、トップの画像に重なるように本記事の部分が表示されています。
┏━━━━━━━┓
┃ ┃
┗━━━┓ ┃
┏━━┓┗━━━┛
┃ ┃┏━━━┓
┃ ┃┃ ┃
このような感じです。
しかし、以前いただいた回答を基に自分がいじった結果では
┏━━━━━━━┓
┃ ┃
┗━━━━━━━┛
┏━━┓
┃ ┃┏━━━┓
┃ ┃┃ ┃
このように表示されてしまうのです。
そこで追加するのではなく、根本的にいじらないとダメなのかと考えて質問した次第です。
自分なりに悩んだつもりですが、安易に考えていた部分はあるかもしれません。
回答も一応いただけたので、もう少し悩んでみたいと思います。
どうもすみませんでした。
>>#6
冷たくあたってごめんなさいm( _ _;)m
>>#4
>>#5
よくわかりました。
>>3 補足
#blogcontainerの上マージンをマイナスにする事により、ブログ本体がトップの画像に食い込むと思うので、是非お試しください。
うまくいったらあとは
#contentと#linksの位置を調整すれば一丁上がりです。
>風。さん
>万年床生活者さん
丁寧に回答ありがとうございます。
実際に試して調整したので報告いたします。
#blogcontainerの項目が見つからなかったのですが、#containerという名前でありました。
風。さんの回答にあるとおり、まず背景の指定をこちらの項目に移しました。
すると、ブログ記事本体とプラグインがトップ画像に食い込みました。
あとは#linkskにpadding-top:○○px;と書き足して、プラグインの位置を調整することであっさり解決できてしまいました。
あっけないもので、自分でも質問していたのが恥ずかしい限りです。
どちらの方の解答で解決できたとも考えづらかったので、均等分配で解決とさせていただきました。
本当にありがとうございました。
また知恵を借りることもあるかと思いますが、そのときはよろしくお願いします。
