id:AAA0506
ベストアンサーあり
はてなの使い方ウェブ制作

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

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

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

ベストアンサー

id:xnissy No.1

回答回数1029ベストアンサー獲得回数203

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


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

<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

コメント（10件)

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

    トップページの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
    タカト 2011/08/25 21:40:43
    なるほど、｢枠｣という設定を入れればよかったんですね。
    何度も質問内容の訂正などをしてすいませんでした
  • id:AAA0506
    タカト 2011/08/25 21:55:15
    といったものの、今度は
    f:id:AAA0506:20110825215242p:image
    ｢最新キーワード｣の部分が開き、サイドバーが下に行きました(画像には映ってませんが)
    http://ugodou.g.hatena.ne.jp/
    このページです
  • id:AAA0506
    タカト 2011/08/25 21:57:42
    サイドバーの件解決しました
    変に<div>を挟んだかららしいです
  • id:xnissy
    xnissy 2011/08/25 22:42:35
    「最新キーワード」の部分がおかしいですね。
    スタイルシートに以下を追記してみてください。
    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
    タカト 2011/09/04 11:13:11
    すいません。コメント気付けませんでした。

    一応スタイルシートと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
    _ 2013/05/16 18:14:45
    Thank you!

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

トラックバック

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

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

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ