人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ブログのカスタマイズについて質問です(HTML/CSS)。

ブログの上部にお知らせバナー的なものを設置したいと思っています。

そこで、僕が考えたのが…
?Twitterに専用アカウントを作成
?そのアカウントにてお知らせ内容をつぶやく
?ブログパーツ等でそのアカウントのつぶやきを表示
という方法です。

しかし、まだまだ初心者なのでFlash等によるブログパーツを作成することはできません。
表示させたいものは、一行程度のバナーです。
ブラウザの上部に常に表示されている(FC2ブログの検索バーのようなもの)タイプが理想ですが、ページ上部に普通に表示されるものでも構いません。

何かいい方法は無いでしょうか?
これをするのに適当なブログパーツなどあれば教えてほしいです。
ちなみにFC2ブログを利用しています。

ポイント
・ブログ上部に、Twitterのつぶやきをシンプルに表示したい
・または、一行程度のメッセージを上記のように表示させたい
・Flashの自作は出来ない
・それに使う画像の自作は出来る


●質問者: Elise Motoo Alex
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● うぃんど

下記のプロフィールウィジェットを使えば、
FLASHではなくJAVAScriptのコードを作ってくれます
http://twitter.com/about/resources/widgets

手順を説明してくれている人のブログ
http://snsjack.blog75.fc2.com/blog-entry-402.html


2 ● Cherenkov
ベストアンサー

最新のつぶやきを1行表示するものをjQueryで書いてみました。
fc2ブログは自由にテンプレートを変更できるので適当な場所(</html>の前とか)に以下のコードをコピペして確認してみてください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
 url: 'https://api.twitter.com/1/users/show.json?screen_name=dave_spector&callback=?',
 dataType: 'json',
 success: function(json) {
 var tweet = json.status.text;
 var img = json.profile_image_url;
 $('<div style="text-align:center;position:fixed;top:50px;width:100%;background-color:pink;"><img src="'+ img +'" style="width:30px;"><span>'+tweet+'</span></div>').appendTo(document.body)
 }
})
});
</script>

Cherenkovさんのコメント
>> <img src="http://gyazo.com/da6b5b97872b155e95d897fb6f0aaae9.png?1333015934"> << こんな感じで表示されます。このサンプルではfc2の検索バーがあるので意図的に位置を下げてます。CSSで検索バーを消して、コードを調整すれば置き換えることもできます。

Cherenkovさんのコメント
このコードをhtmlで保存してブラウザにドラッグアンドドロップしても表示確認できるので、firebugを活用したりしてデザインを整えてからテンプレを更新するといいかも。

Elise Motoo Alexさんのコメント
とても参考になりました! このコードをベースに、自分なりに改良してブログに貼りたいと思います! ありがとうございました!

Elise Motoo Alexさんのコメント
自分なりに改良を加えた結果、思い通り(というかそれ以上)のモノが出来ました!本当にありがとうございました(^-^) 結果:http://darkofchicken0.blog79.fc2.com/
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ