はてなグループのレイアウトについてです

はてなグループで、テーマを ugomemo-greenにすると
f:id:AAA0506:20110818172040p:image
のようになり、とても不格好です。
f:id:AAA0506:20110818172546p:image
のように、囲う方法はありますか?
あれば教えてください

回答の条件
  • 1人50回まで
  • 登録:2011/08/18 17:28:00
  • 終了:2011/08/25 17:30:02

ベストアンサー

id:xnissy No.1

xnissy回答回数1029ベストアンサー獲得回数2032011/08/18 21:50:02

サイドバーのリンク集を枠で囲うということですよね。現在どのような設定になっているかわかりませんので、はじめから説明させていただきます。


すでにサイドバーがあるのであれば、設定の「ページのフッタ」欄に

<div class="sidebar">
 サイドバーの中身(ブログパーツなど)
</div>

という記述があるかと思います。その部分に、

<div class="hatena-module">
	<div class="hatena-moduletitle">リンク集</div>
	<div class="hatena-modulebody">
		<ul class="hatena-urllist">
		<li><a href="http://g.hatena.ne.jp/help">はてなグループ ヘルプ</a></li>
		</ul>
	</div>
</div>

という記述を加えてください。


もし、現在サイドバーがないのであれば、「ページのヘッダ」欄に

<div class="main">

「ページのフッタ」欄に

</div>
<div class="sidebar">
<div class="hatena-module">
	<div class="hatena-moduletitle">リンク集</div>
	<div class="hatena-modulebody">
		<ul class="hatena-urllist">
		<li><a href="http://g.hatena.ne.jp/help">はてなグループ ヘルプ</a></li>
		</ul>
	</div>
</div>
</div>

という記述を行ってください。


f:id:xnissy:20110818213623p:image

という表示になるはずです。

id:AAA0506

サイドバーではなく、メインのところ、、、

ブログで言うと本文を書くところです。

あまり内容を写したくなかったので…すいません

2011/08/19 08:08:36
  • id:AAA0506
    画像リンクされませんでした。すいません
    http://h.hatena.ne.jp/AAA0506/243583453188011862
    ハイクに貼りました
  • id:xnissy
    勘違いしていてすみませんでした。
    テーマugomemo-greenだと、本文を書くところは角丸の枠で囲われていると思うんですが……。http://ugomemo.g.hatena.ne.jp/xnissy/ ←ugomemo-greenを使っています。
  • id:AAA0506
    すいません。グループのトップページです。そちらのグループのトップページもそうなっていました。なんとかする方法は無いんでしょうか?
  • id:xnissy
    大変失礼しました。

    トップページのHTML(HTMLタグ利用可):

    <div class="calendar box-top"></div>
    <hatena name="groupabout" template="diary"> ←枠で囲みたい部分
    <div class="box-bottom"></div>

    スタイルシート:
    div.box-top {
    background:url('/theme/ugomemo-green/bg_box_header.png') top center no-repeat;
    _background:url('/theme/ugomemo-green/bg_box_header.gif') top center no-repeat;
    }

    div.box-bottom {
    background:url('/theme/ugomemo-green/bg_box2.png') bottom center no-repeat;
    _background:url('/theme/ugomemo-green/bg_box2.gif') bottom center no-repeat;
    padding-bottom:15px;
    }
    div.main div.box-top {
    background:url('/theme/ugomemo-green/blog-main-top.png') top center no-repeat;
    _background:url('/theme/ugomemo-green/blog-main-top.gif') top center no-repeat;
    }

    div.main div.box-bottom {
    background:url('/theme/ugomemo-green/blog-main-bottom.png') bottom center no-repeat;
    _background:url('/theme/ugomemo-green/blog-main-bottom.gif') bottom center no-repeat;
    }

    以上でいかがでしょうか?
  • id:AAA0506
    なるほど、「枠」という設定を入れればよかったんですね。
    何度も質問内容の訂正などをしてすいませんでした
  • id:AAA0506
    といったものの、今度は
    f:id:AAA0506:20110825215242p:image
    「最新キーワード」の部分が開き、サイドバーが下に行きました(画像には映ってませんが)
    http://ugodou.g.hatena.ne.jp/
    このページです
  • id:AAA0506
    サイドバーの件解決しました
    変に<div>を挟んだかららしいです
  • id:xnissy
    「最新キーワード」の部分がおかしいですね。
    スタイルシートに以下を追記してみてください。
    div.recentitem_diary {
    background:url('/theme/ugomemo-green/bg_boxbody.png') repeat-y;
    _background:url('/theme/ugomemo-green/bg_boxbody.gif') repeat-y;
    zoom:1;
    clear:both;
    text-align: center;
    }
  • id:AAA0506
    すいません。コメント気付けませんでした。

    一応スタイルシートとHTML貼っておきます

    【HTML】
    <div class="main">
    <div class="calendar box-top"></div>
    <hatena name="groupabout" template="diary">
    <div class="box-bottom"></div>
    <div class="calendar box-top"></div>
    <hatena name="keyword" template="diary">
    <div class="box-bottom"></div>
    </div>

    <div class="sidebar">
    <hatena name="keywordcontent" template="hatena-module" word="リンク集" edit="true">
    <hatena name="groupantenna" template="hatena-module" icon="true" dateformat="%Y-%m-%d %H:%i:%s">
    <hatena name="groupsearchform" template="hatena-module">
    <hatena name="keywordform" template="hatena-module">
    <hatena name="keyword" template="hatena-module">
    </div>

    【スタイルシート】
    span.highlight {
    color: black;
    background-color: yellow;
    }
    img.photo {
    float: right;
    margin: 10px;
    border: 0;
    }
    a.keyword {
    text-decoration: none;
    border-bottom: 1px solid gray;
    }
    a.okeyword {
    text-decoration: none;
    border-bottom: 1px dotted gray;
    }
    div.body {
    clear: both;
    }
    //以下コピペ
    div.box-top {
    background:url('/theme/ugomemo-green/bg_box_header.png') top center no-repeat;
    _background:url('/theme/ugomemo-green/bg_box_header.gif') top center no-repeat;
    }

    div.box-bottom {
    background:url('/theme/ugomemo-green/bg_box2.png') bottom center no-repeat;
    _background:url('/theme/ugomemo-green/bg_box2.gif') bottom center no-repeat;
    padding-bottom:15px;
    }
    div.main div.box-top {
    background:url('/theme/ugomemo-green/blog-main-top.png') top center no-repeat;
    _background:url('/theme/ugomemo-green/blog-main-top.gif') top center no-repeat;
    }

    div.main div.box-bottom {
    background:url('/theme/ugomemo-green/blog-main-bottom.png') bottom center no-repeat;
    _background:url('/theme/ugomemo-green/blog-main-bottom.gif') bottom center no-repeat;
    }

    //二次コピペ
    div.recentitem_diary {
    background:url('/theme/ugomemo-green/bg_boxbody.png') repeat-y;
    _background:url('/theme/ugomemo-green/bg_boxbody.gif') repeat-y;
    zoom:1;
    clear:both;
    text-align: center;
    }
  • id:dorafujico
    Thank you!

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません