Hatena::ブログ(Diary)

はてなダイアリー日記 このページをアンテナに追加 RSSフィード

使い方に関するご質問、不具合報告やご要望は、お問い合わせ窓口で承ります。
使い方のコツなどを知りたい時は、人力検索はてなの「はてなの使い方」カテゴリーをご利用ください。
※コメント欄へのご質問には対応できない場合がございますのでご了承ください。

2010/06/07

「Twitter記法」に関わるHTML構造・CSSについて

12:04

5/27 のバージョンアップに伴い、Twitterhttp://twitter.com/ )のつぶやきブログへ簡単に紹介できる「Twitter記法」 が はてな記法に加わりました。

Twitter記法」に関わるHTML構造CSSの詳細を以下に記載します。ブログテーマカスタマイズ作成にご利用ください。

Twitter記法」とは

twitter:123456789:titleのようにtwitter:ツイートID:〜〜と入力する事で、Twitterhttp://twitter.com/ )のつぶやきをいろいろな形で引用する事ができます。

また、それぞれの記法は[(ツイートURL):twitter:〜〜]という形でも引用する事ができます。

例:下記2つの記法は、同じ内容を表示します

[twitter:123456789:title]

[http://twitter.com/hatenadiary/status/123456789:twitter:title]

Twitter記法」の種類

twitter:123456789:title

つぶやきを簡単な形で引用します。ある程度長い場合省略されます。twitter:123456789:title:10のように書けば、表示する文字数を指定する事ができます。

f:id:hatenadiary:20100604191844p:image:w620

HTML構造
<span class="twitter-tweet-title">@<a class="twitter-user-screen-name" href="[ツイートのURL]">ユーザー名</a> / コメント本文</span>
base.cssの指定
/*CSSの指定はありません*/

twitter:123456789:tweet

twitterでの表示とほぼ同じように引用します。

f:id:hatenadiary:20100604191842p:image:w620

HTML構造(ツイート内容によって記述されない情報もあります)
<div class="twitter-tweet">
  <p class="twitter-tweet-text">
    <span class="twitter-tweet-text-user">@<a class="twitter-user-screen-name" href="[ユーザーのURL]">hatenadiary</a>: </span>コメント本文<a target="_top" href="[ツイートに含まれるURL]" class="twitter-tweet-url"><span>URL</span></a>
  </p>
  <p class="twitter-tweet-info">
    <a class="twitter-tweet-info-permalink" href="[ツイートのURL]"><span class="twitter-tweet-info-date">2010-00-00</span> <span class="twitter-tweet-info-time">00:00:00</span></a> <span class="twitter-tweet-info-source">via <a rel="nofollow" href="[投稿したクライアントのURL]">クライアント名</a> <a class="twitter-tweet-info-map" href="[地図のURL]"><span>MAP</span></a> to @<a href="[返信のURL]" class="twitter-user-screen-name">返信ユーザー名</a></span>
  </p>
</div>

base.cssの指定
div.twitter-tweet {
  text-align:left;
  margin:1.5em 0;
}

p.twitter-tweet-info {
  font-size:0.85em;
}

div.twitter-tweet p.twitter-tweet-text,
div.twitter-tweet p.twitter-tweet-info {
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
}

twitter:123456789:detail

twitterでの表示とほぼ同じように引用し、さらに横に引用された人のアイコンを表示します。twitter:123456789:detail:rightや、twitter:123456789:detail:leftのように書くと、つぶやきのどちら側にアイコンを表示するか指定できます。

f:id:hatenadiary:20100604191841p:image:w620

HTML構造(ツイート内容によって記述されない情報もあります)
<div class="twitter-detail twitter-detail-left">
  <div class="twitter-detail-user">
    <a class="twitter-user-screen-name" href="[ユーザーのURL]">
      <img height="48" width="48" alt="[ユーザー名]" src="[ユーザーアイコンのURL]">
    </a>
  </div>
  <div class="twitter-detail-tweet">
    <p class="twitter-detail-text">
      コメント本文 <a class="twitter-tweet-url" target="_top" href="[ツイートに含まれるURL]"><span>URL</span></a>
    </p>
    <p class="twitter-detail-info">
      <a class="twitter-detail-info-permalink" href="[ツイートのURL]"><span class="twitter-detail-info-date">2010-00-00</span> <span class="twitter-detail-info-time">00:00:00</span></a> <span class="twitter-detail-info-source">via <a rel="nofollow" href="[投稿したクライアントのURL]">クライアント名</a> <a class="twitter-tweet-info-map" href="[地図のURL]"><span>MAP</span></a> to @<a href="[返信のURL]" class="twitter-user-screen-name">返信ユーザー名</a></span>
    </p>
  </div>
</div>
<div class="twitter-detail twitter-detail-right">
  <div class="twitter-detail-user">
    <a class="twitter-user-screen-name" href="[ユーザーのURL]">
      <img height="48" width="48" alt="[ユーザー名]" src="[ユーザーアイコンのURL]">
    </a>
  </div>
  <div class="twitter-detail-tweet">
    <p class="twitter-detail-text">
      コメント本文 <a target="_top" href="[ツイートに含まれるURL]" class="twitter-tweet-url"><span>URL</span></a>
    </p>
    <p class="twitter-detail-info">
      <a class="twitter-detail-info-permalink" href="[ツイートのURL]"><span class="twitter-detail-info-date">2010-00-00</span> <span class="twitter-detail-info-time">00:00:00</span></a> <span class="twitter-detail-info-source">via <a rel="nofollow" href="[投稿したクライアントのURL]">クライアント名</a> <a class="twitter-tweet-info-map" href="[地図のURL]"><span>MAP</span></a> to @<a href="[返信のURL]" class="twitter-user-screen-name">返信ユーザー名</a></span>
    </p>
  </div>
</div>
base.cssの指定
div.twitter-detail {
  overflow:hidden;
  text-align:left;
  margin:1.5em 0;
}

div.twitter-detail:after {
  content: ".";
  font-size: 0.1em;
  line-height: 0;
  display: block;
  height: 0.1px;
  visibility: hidden;
  clear: both;
}

div.twitter-detail-user {
  margin:auto;
  width:58px;
}

div.twitter-detail-left div.twitter-detail-user {
text-align:left;
}

div.twitter-detail-right div.twitter-detail-user {
text-align:right;
}

div.twitter-detail div.twitter-detail-user,
div.twitter-detail-left div.twitter-detail-user {
  float:left;
}

div.twitter-detail-right div.twitter-detail-user {
  float:right;
}

div.twitter-detail-tweet {
  margin-left:60px;
  margin-right:60px;
}

div.twitter-detail div.twitter-detail-tweet {
  _height: 1%;
}

div.twitter-detail-tweet p.twitter-detail-text,
div.twitter-detail-tweet p.twitter-detail-info {
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
  clear:none;
}

p.twitter-detail-info {
  font-size:0.85em;
}

twitter:123456789:tree

指定したツイートIDから返信をたどってツリー表示します。

f:id:hatenadiary:20100604194558p:image:w620

HTML構造(ツイート内容によって記述されない情報もあります)
<div class="twitter-tree">
  <div class="twitter-detail twitter-detail-left">
    <div class="twitter-detail-user">
      <a class="twitter-user-screen-name" href="[ユーザーのURL]">
        <img height="48" width="48" alt="[ユーザー名]" src="[ユーザーアイコンのURL]">
      </a>
    </div>
    <div class="twitter-detail-tweet">
      <p class="twitter-detail-text">
        コメント本文 <a class="twitter-tweet-url" target="_top" href="[ツイートに含まれるURL]"><span>URL</span></a>
      </p>
      <p class="twitter-detail-info">
        <a class="twitter-detail-info-permalink" href="[ツイートのURL]"><span class="twitter-detail-info-date">2010-00-00</span> <span class="twitter-detail-info-time">00:00:00</span></a> <span class="twitter-detail-info-source">via <a rel="nofollow" href="[投稿したクライアントのURL]">クライアント名</a> <a class="twitter-tweet-info-map" href="[地図のURL]"><span>MAP</span></a> to @<a href="[返信のURL]" class="twitter-user-screen-name">返信ユーザー名</a></span>
      </p>
    </div>
  </div>
  <div class="twitter-detail twitter-detail-right">
    <div class="twitter-detail-user">
      <a class="twitter-user-screen-name" href="[ユーザーのURL]">
        <img height="48" width="48" alt="[ユーザー名]" src="[ユーザーアイコンのURL]">
      </a>
    </div>
    <div class="twitter-detail-tweet">
      <p class="twitter-detail-text">
        コメント本文 <a target="_top" href="[ツイートに含まれるURL]" class="twitter-tweet-url"><span>URL</span></a>
      </p>
      <p class="twitter-detail-info">
        <a class="twitter-detail-info-permalink" href="[ツイートのURL]"><span class="twitter-detail-info-date">2010-00-00</span> <span class="twitter-detail-info-time">00:00:00</span></a> <span class="twitter-detail-info-source">via <a rel="nofollow" href="[投稿したクライアントのURL]">クライアント名</a> <a class="twitter-tweet-info-map" href="[地図のURL]"><span>MAP</span></a> to @<a href="[返信のURL]" class="twitter-user-screen-name">返信ユーザー名</a></span>
      </p>
    </div>
  </div>
   ・
   ・
   ・
</div>
base.cssの指定
/* twitter:123456789:detailに使用しているCSSを使用しています */

twitterユーザリンクする

[twitter:@hatenadiary]のように入力する事で、そのユーザtwitterページにリンクする事ができます。

@anywhere機能を有効にしていると、マウスを上にのせるだけで、そのユーザtwitter情報ポップアップで表示させる事ができます。

f:id:hatenadiary:20100604191839p:image:w620

HTML構造
@<a class="twitter-user-screen-name" href="[ユーザーのURL]">ユーザー名</a>

@<a class="twitter-anywhere-user" href="[ユーザーのURL]">ユーザー名</a>
base.cssの指定
/*CSSの指定はありません*/

毎日のツイートのまとめ

その日にTwitterに投稿したつぶやきを毎日自動エントリーにまとめる事ができます。設定で指定した時間に24時間前までのつぶやきをまとめたエントリー作成されます。設定で画像位置情報のまとめを行なうようにしていた場合つぶやきエントリーの下部に画像位置情報がまとめて表示されます。

f:id:hatenadiary:20100604191838p:image:w345

HTML構造(ツイート内容によって記述されない情報もあります)
<div class="twitter-tweet-wrapper">
  <div class="twitter-tweet">
    <p class="twitter-tweet-text">
      <span class="twitter-tweet-text-user">@<a class="twitter-user-screen-name" href="[ユーザーのURL]">hatenadiary</a>: </span>コメント本文<a target="_top" href="[ツイートに含まれるURL]" class="twitter-tweet-url"><span>URL</span></a>
    </p>
    <p class="twitter-tweet-info">
      <a class="twitter-tweet-info-permalink" href="permalink"><span class="twitter-tweet-info-date">2010-00-00</span> <span class="twitter-tweet-info-time">00:00:00</span></a> <span class="twitter-tweet-info-source">via <a rel="nofollow" href="[投稿したクライアントのURL]">クライアント名</a> <a class="twitter-tweet-info-map" href="[地図のURL]"><span>MAP</span></a> to @<a href="[返信のURL]" class="twitter-user-screen-name">返信ユーザー名</a></span>
    </p>
  </div>

 ・
 ・
 ・

  <h4> 画像</h4>
  <div class="tweet-images">
    <a href="[投稿した画像のURL]"><img src="[画像のURL]"></a>
  </div>
  <h4> 地図</h4>
  <div class="tweet-locations">
    <iframe scrolling="no" height="300" frameborder="0" width="100%" hspace="0" vspace="0" marginheight="0" marginwidth="0" name="map" src="[地図情報のURL]"></iframe>
  </div>
</div>
base.cssの指定
/*twitter:123456789:detailに使用しているCSSに加え、下記のCSSを使用しています*/

div.twitter-tweet-wrapper {
  overflow:hidden;
}

div.twitter-tweet-wrapper div.twitter-tweet span.twitter-tweet-text-user {
  display:none;
}

div.twitter-tweet-wrapper div.twitter-tweet span.twitter-tweet-info-date {
display:none;
}

div.tweet-images {
  width:95%;
  margin-left:auto;
  margin-right:auto;
}

デザイン編集「かんたん」に含まれる、はてな提供デザインテーマ及びテーマ作者様からいただいたデザインテーマに関しては、はてなによるCSS更新を検討しております。CSS更新を行った際には改めて本ブログにてお知らせします。

また、テーマ作者さまでご自身でテーマ更新希望される方は、お手数ですがはてな問い合わせ窓口までご連絡ください。

e531Kirbye531Kirby 2010/06/07 21:37 DSiブラウザでダイアリーにアクセスすると勝手にiPhone向けページがでてしまいます。
アドレスから[touch]を消しても勝手に追加されます。これなんとかできませんか? PC,モバイル版もみたいので…
(今もiPhone版です。DSiですから。)

YuichirouYuichirou 2010/06/07 22:54 id:e531Kirbyさん>iPhone向けページの一番下にある「PC版」リンクをタッチしてみては?

e531Kirbye531Kirby 2010/06/08 06:54 >id:Yuichirouさん
できました。ありがとうございます。
でも何故アドレス変更じゃだめなんだ?

ere10061ere10061 2010/06/08 20:43 △画像は便利でした。これでははてなのトップページに戻ってサービスを変えるしかないですね。

onesingleearthonesingleearth 2010/06/10 06:54 こういうのは突然やるのではなく、便利に使ってる人もいるでしょうから、事前にアンケートなりしたほうがいいのでは?

onesingleearthonesingleearth 2010/06/10 06:54 これに限らず、ですが。

toguotoguo 2010/06/10 23:45 Twitter記法は、はてなグループに対応してくれないのでしょうか?
記法系はすぐにはてなグループにも対応してくれるイメージでしたのでびっくりです。

U40U40 2010/06/11 08:22 不便なり ?堯福?ァ?|||)

naoyanaoya 2010/06/11 11:45 id:toguo さん

はてなグループ対応、現在進めてます! もう少しお待ちください。

toguotoguo 2010/06/11 11:46 id:naoya
お返事有り難うございます。期待して待っています!

chinjuhchinjuh 2010/07/13 22:31 ツイートのまとめで、URLを[URL]←こういうリンクにしないで、もとの表記のままにしていただけないでしょうか。
たとえば、はてなココからURLつきの文章をツイッターに送り、ダイアリーにまとめると「本文[URL][URL]」となってしまい、意味不明です(二番目ははてなココへのリンクです)。

ツイッター上の表記にするか、さもなければ、はてなとの連携を表すURLの表記を[はてなココ][フォトライフ][ダイアリー]など、連携URLであることがわかるようにしてください。

chinjuhchinjuh 2010/07/13 22:35 それから(これはアイデアにも出したし、ダイアリーではなくはてなココ側の問題かもしれないんですが)、しばらく前から地図が作製されなくなりました。以前は地図になっていたし、その頃と設定を変えていないので不具合ではないかと思うのですが。

chinjuhchinjuh 2010/07/13 22:40 話が前後してすみません。
>「本文[URL][URL]」
こういう風にまとまった時、本文が長いと最初のURLの末尾が省略されていることがあります。しかし[URL]のようなリンクになってしまうので、省略されていることに気づきにくく、404とかが出るので「なんだこれ?」ってなってしまうんです。やっぱりツイッター上で見ているようなもとの表記にしてほしいです。

mamakun_6v6mamakun_6v6 2013/07/25 22:35 本文の例の通り、[twitter:123456789:tweet]の記法で、ツイートしたユーザ名(@xxxxx)が表示されていたのですが、2013/7/25より表示されなくなってしまう不具合が発生しています。元に戻していただきたく、至急ご対応のほどお願い致します。