「はてなダイアリー」について RSSフィード
 

2011年7月15日をもちまして、はてなサポート掲示板は新規投稿の受付を停止致しました。
今後は、人力検索はてなの「はてなの使い方」カテゴリーをご利用ください。
※ご要望や不具合のご報告ははてなアイデア、はてなからのご返信が必要な質問はお問い合わせページをご利用ください。

361rikuorikuo   339  Re:ハテナダイアリーとフォトライフについて

帯のような形というのはこのようなデザインでしょうか。

こうしたレイアウトにする最も簡単な解決策は、このデザインをインポートして使うことです。こちらは rssモジュールを使っていますので、ヘッダの

<hatena name="rss" url="http://f.hatena.ne.jp/domu/rss" template="hatena-photo" moduletitle="Okinawa Photo">

の http://f.hatena.ne.jp/domu/rss の部分を http://f.hatena.ne.jp/amy-ax/rss に書き換えることで自分のフォトライフの写真を表示できます。



そうではなく d:id:amy-axさんの現在のデザインに適用する場合、上記のデザインは幅が一定の状態で利用されるのを想定した作りなので、いま利用されているデザインのようにウィンドウの大きさに応じて幅が変動するレイアウトにマッチするためには

<div id="exhibition">
  <!-- 「url」を自分のFotolifeのRSSに「moduletitle」には写真のテーマ名を入れてください -->
  <hatena name="rss" url="http://f.hatena.ne.jp/amy-ax/rss" template="hatena-photo" moduletitle="写真のタイトル" listlimit="30">
  <!-- 「listlimit」は表示する写真の枚数です -->
</div>

をページのヘッダ、またはフッタに入力し

スタイルシートの欄に

#exhibition{
  float: none;
  clear: both;
  height:110px;
  width: auto;
  overflow-y: hidden;
  /* チェック */   background: #E7AEA5 url("http://f.hatena.ne.jp/images/fotolife/d/domu/20061108/20061108124445.gif");
  /* フラット background:#E7AEA5; */    
  /* セメント background:url("http://f.hatena.ne.jp/images/fotolife/d/domu/20061108/20061108115611.gif"); */        
  /* 薄い木目 background:url("http://f.hatena.ne.jp/images/fotolife/d/domu/20061108/20061108115033.gif"); */          
  /* 濃い木目 background:url("http://f.hatena.ne.jp/images/fotolife/d/domu/20051210/20051210101654.gif"); */            
  border-left: 0px dashed #eee;
  border-right: 0px dashed #eee;
  border-top: 1px dashed #eee;
/*  border-bottom: 5px dashed #0ff;*/
  position: relative;
}
#exhibition:after{
 content: ".";
 display: block;
 visibility: hidden;
 height: 0.1px;
 font-size: 0.1em;
 line-height: 0;
 clear: both;
}

#exhibition .hatena-module{
  width: auto; 
  margin: 0;
  border: none;
  float: none;
  background: transparent;
}

#exhibition .hatena-module-rss .hatena-moduletitle{
  position: absolute;
  top: 30px; /* タイトルの長さにあわせて調整してください */              
  left: 15px; /* タイトルの長さにあわせて調整してください */              
  background: transparent;
  text-align: left;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 12px;
  font-style: normal;
}

#exhibition .hatena-module-rss .hatena-moduletitle a{
  height: 30px;
  padding: 8px 15px 0px 15px;
  background: transparent;
  color: white;
}

#exhibition .hatena-modulebody ul.hatena-photo{
  margin-top: 0px;
  margin-left: 140px; /* タイトルの長さに合わせて調整してください */    
}

#exhibition .hatena-modulebody ul.hatena-photo li{
  display: block;
  float: left;
  width: 50px;
  margin-top: 25px;
  margin-right:10px;
  margin-bottom: 10px;
  padding: 0;
  border: none;
  background: #FFF;
  text-align: center !important;
}

#exhibition .hatena-modulebody ul.hatena-photo li a{
  margin-top: 4px;
  margin-bottom:12px;
  margin-right: auto;
  margin-left: auto;
  width: 40px;
  height: 40px;
  overflow: hidden;
  display: block;
  border: 1px solid #E2D2D1;
}

#exhibition .hatena-modulebody ul.hatena-photo li a img{
  background: #FFF;
}

を加えます。

ただこの場合、元のデザインとは異なり横のスクロールバーが表示されない設定になりますが。


また、

新しい写真をアップしてもダイアリーの方にはいつも同じ写真ばかり表示されています。

とのことですが、d:id:amy-axさんのダイアリーを確認したところページ下部のフォトライフの部分には最新の写真が表示されています。

どうでしょうか、http://f.hatena.ne.jp/amy-ax/ で表示されている順序と同じ並びで表示されています。こちらについては状況が確認できませんでした。

返信2008/01/24 20:34:29