• 締切済み

CSSについて

ホームページにブログを載せるのに以下のjavascriptを使用したいのですが、 CSSでタイトルの文字色などは変更できても、ブログ本文の文字色だけどうしても変更できません。 •javascript <script type="text/javascript"> google.load("feeds", "1"); var FA = new Array( "http://*****" ); function initialize() { var feedsArr = new Array(); var numEntr = 3; var container = document.getElementById("feed"); var cnt = FA.length; for (var k=0; k<FA.length; k++) { var feed = new google.feeds.Feed(FA[k]); feed.setNumEntries(numEntr); feed.setResultFormat(google.feeds.Feed.JSON_FORMAT); feed.load(function(result) { if (!result.error) { for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var eimg = ""; var imgCheck = entry.content.match(/(http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG)|(\.gif))/); if(imgCheck){ eimg += imgCheck[0]; } var attributes = ["title", "link", "publishedDate", "contentSnippet"]; var ind = feedsArr.length; feedsArr[ind] = new Array(); feedsArr[ind][0] = Date.parse(entry[attributes[2]]); feedsArr[ind][1] = entry[attributes[1]]; feedsArr[ind][2] = entry[attributes[2]]; feedsArr[ind][3] = entry[attributes[3]]; feedsArr[ind][4] = entry[attributes[0]]; feedsArr[ind][6] = eimg; } } cnt--; if (cnt == 0) { feedsArr.sort(); feedsArr.reverse(); for (var j = 0; j < feedsArr.length; j++) { var aE = document.createElement("A"); var h3 = document.createElement("H3"); var p = document.createElement("P"); var spanD = document.createElement("SPAN"); aE.href=aE.title=feedsArr[j][1]; aE.appendChild(document.createTextNode(feedsArr[j][4])); h3.appendChild(aE); spanD.appendChild(document.createTextNode(feedsArr[j][2])); spanD.appendChild(document.createTextNode(" ("+feedsArr[j][5]+")")); p.appendChild(document.createTextNode(feedsArr[j][3])); p.appendChild(spanD); container.appendChild(h3); container.appendChild(p); var img_link = document.createElement("img"); img_link.setAttribute("src", feedsArr[j][6] ); img_link.setAttribute("width", "300" ); container.appendChild(img_link); } } }); } } google.setOnLoadCallback(initialize); </script> •html <div id="feed"></div> ブログ本文の文字色の変更方法をご教授お願い致します。

  • CSS
  • 回答数2
  • ありがとう数5

みんなの回答

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.2

試してみたけど リンクのところ以外は 白くなったわよ?

hkjhkhiuhu
質問者

お礼

そうなんですか... 他に何か問題があるのでしょうか? 少し試行錯誤してみます。 ありがとうございます!

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

文字色を変えているような箇所が見当たらないけど

hkjhkhiuhu
質問者

お礼

ご回答ありがとうございます。 申し訳ありません。 #feed { color: #ffffff; font-size: 12px;} というCSSで変えようとしています。 サイズは適用されるのですがカラーだけ無反応です。

hkjhkhiuhu
質問者

補足

申し訳ありません。 #feed { color: #ffffff; font-size: 12px;} というCSSで変えようとしています。 サイズは適用されるのですがカラーだけ無反応です。

関連するQ&A

  • innerHTML

    JavaScript初心者です。 下記のコード(1)がGoogleの公式サンプルに載っていますが、 私としては(2)の方が分かりやすいと思っています。 コードとして問題がありますでしょうか? 1. var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); div.appendChild(document.createTextNode(entry.title)); container.appendChild(div); } 2. var container=document.getElementById("feed"); var htmlsrc=""; for(var i=0;i<result.feed.entries.length;i++){ var entry=result.feed.entries[i]; htmlsrc+="<div>"+entry.title+"</div>"; } container.innerHTML=htmlsrc; } 参考サイト http://www.ajaxtower.jp/googleajaxfeed/before/index2.html

  • Google AJAX Feed API

    Google AJAX Feed APIでRSSを読み込んでタイトルなどの文字のみの表示をすることはできたのですが、(下の記述でやっています。) 画像が投稿されているブログ記事の画像を読み込み、表示させることはできるのでしょうか? その場合の方法はどのように、すればできるのでしょうか? お手数をおかけしますが、よろしくお願い致します。 <script type="text/javascript" src="http://www.google.com/jsapi?key="></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://");  <!--表示したいエントリー数--> feed.setNumEntries(10); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a");a.href = entry.link;  <!--別窓で表示しない場合は削除してください--> a.target = "_blank" ; a.appendChild(document.createTextNode(entry.title)); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script>

  • Google AJAX Feed APIについて

    ブログのRSSを使って自動的にホームページに新着ブログ記事の日付とタイトルを表示されるようにしたいと思い、Google AJAX Feed APIを使用しました。 下記のソースだとこのように表示されます。 ・タイトル(2009年6月22日) ・タイトル(2009年6月20日) 表示方法をもう少し変えたいんですが、文字サイズと行間の変更はどのようにすれば可能か、ご存知の方は教えて下さい。 1.文字サイズをもう少し小さく(10pxに)したい 2.行間がくっ付いているのでもう少し広くしたい <script type="text/javascript" src="http://www.google.com/jsapi?key=APIキー"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("フィードのアドレス"); feed.setNumEntries(10); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a"); a.href = entry.link; a.target = "_top" ; var date = new Date(entry.publishedDate); a.appendChild(document.createTextNode(entry.title + " (" + date.toLocaleDateString() + ")" )); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> <div id="feed"></div>

  • JavaScriptで表示文字数を制御したい

    Google Feed APIを使い、JavaScriptで自分のホームページにRSSのニュースを表示しています。 文字の大きさ と 行間 は、以下のような <style type="text/css"> #feed { font-size:16px; } #feed li { height: 4em; } </style> のcssを書くことによって調整できましたが、現在の状態だと全部のニュースを表示してしまうので 表示する文字数を「先頭から40文字」までにしたいのですが、 そのやり方が分かりません。 具体的に、どうすればよいのか、ご教示いただければと思っています。 大変困っているので、何卒よろしくお願い致します。 以下、参考までにjavascriptも載せておきます。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { //RSSフィードの取得 var feed = new google.feeds.Feed("RSSフィードのアドレス"); //表示したいエントリー数 feed.setNumEntries(4); //実際に読む込む feed.load(function(result) { //読み込めたか判別 if (!result.error) { //表示部分を選択 var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a");a.href = entry.link; a.target = "_blank" ; //日付を取得 var date = new Date(entry.publishedDate); var yearNum = date.getYear(); if (yearNum < 2000) yearNum += 1900; a.appendChild(document.createTextNode(entry.title)); //タイトルと日付の行を変える a.appendChild( document.createElement( "br" ) ); //a.appendChild(document.createTextNode(" (" + date.toLocaleDateString() + ")" )); //↑chromeで年月日が表示されない a.appendChild(document.createTextNode("(" + yearNum + "年" + (date.getMonth()+1)+"月"+date.getDate()+"日"+")" )); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script>

  • scriptリンクの別画面表示

    はじめまして。 ホームページのトップにブログの件名をニュースとして一覧表示したくて Google AJAX Feed API を利用しました。 表示自体はうまくいったのですが、 この記事へのリンクを別ウィンドウで開くようにするにはどうすればいいのでしょうか? 当方、JavaScriptは全く分からずで困っております・・・ おわかりの方、いらっしゃいましたらよろしくお願いいたします。 【html header 部分】 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://blog.XXXXX.XXX"); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var li = document.createElement("li"); var a = document.createElement("a"); a.href = entry.link ;       var date = new Date(entry.publishedDate); var titlelink = entry.title; a.appendChild(document.createTextNode( "・" + date.toDateString() + " " +titlelink)); li.appendChild(a); container.appendChild(li); } } }); } google.setOnLoadCallback(initialize); </script> 【html body 部分】 <div id="feed"></div> 以上、どうぞよろしくお願いいたします。

  • Google AJAX Feed APIキー

    http://okwave.jp/qa/q7289256.html ↑こちらの記事を参考にしてサイトのTOPページにWPのタイトル表示を試みました。 表示はされるものの、そのタイトルを更にリンク(各記事にとぶ)にしたいのですが、 以下のソースのどこをいじればリンクになるのか教えて下さい。 ------------------------------------------------------- ■タイトル表示させたいページの<head>内に以下入れる。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("★RSS★"); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); div.appendChild(document.createTextNode(entry.title)); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> ■HTMLのタイトル表示させたい部分に以下入れる。 <div id="feed"></div> ------------------------------------------------------------------------------- よろしくお願い致します。

  • Scriptを読み込み中の表示について

    HTML <script language="JavaScript" type="text/javascript" src="AAA.js"></script> 外部JS <!-- google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("RSSURL"); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById("mini_feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); var entry = result.feed.entries[i]; var dd = new Date(entry.publishedDate); // now var yearNum = dd.getYear(); if (yearNum < 2000) yearNum += 1900; var date = yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日"; container.innerHTML += "<div>【"+"<b>" + date+"</b>" +"】<br /><a href='" + entry.link + "'>" + entry.title + "</a></div>"; } } }); } google.setOnLoadCallback(initialize); //--> を設置し、RSSをスクリプトで表示しています。 2秒くらい読込みが遅いので、その部分が、一時空白状態のままになります。 そこで、読み込み中に読込みしていますというぐるぐる回る画像を表示したいのですが、どのように記述すれば宜しいのでしょうか?

  • borderの指定方法

    var tbl = document.createElement("table"); var tbd = document.createElement("tbody"); var tr = document.createElement("tr"); var td = document.createElement("td"); td.appendChild(document.createTextNode("テストテーブル")); tr.appendChild(td); tbd.appendChild(tr); tbl.appendChild(tbd); DOMで書いたテーブルのTD要素のボーダーの指定方法で、下線だけ表示しないで枠をつけたいのですが、どのようにすればよいのでしょうか? どなたか教えてください。 よろしくお願いします。

  • javascript マウスイベント

    動的に生成したテーブルのマウスイベントについてご質問します。 var body = document.getElementsByTagName("body")[0]; var tbl = document.createElement("table"); var tblBody = document.createElement("tbody"); for (var j = 0; j < 20; j++) { var row = document.createElement("tr"); for (var i = 0; i < 1; i++) { var cell = document.createElement("td"); var cellText = document.createTextNode("cell is row "+j+", column "+i); cell.id="dt1"; cell.height="15" cell.appendChild(cellText); row.appendChild(cell); } tblBody.appendChild(row); } tbl.id="tbl1"; tbl.width="200" tbl.appendChild(tblBody); body.appendChild(tbl); 上記のようなソースでテーブルを作成しています。 tbl.onmousedown このあたりだと思うのですが、記述方法がわからず困っています。 具体的には下記のような動きを目指してます。 http://www.programming-magic.com/20071215024226/ 初歩的な質問かもしれませんが、ご教授頂けると幸いです。

  • スクリプトで<div id="links">

    下記スクリプトで<div id="links"></div>のところを 開いた瞬間 <ul> <li><a href="http://foo.com/">foo</a></li> <li><a href="http://bar.com/">bar</a></li> </ul> に変換したいのですがうまくいきません どこをどのように変更すれば変換されるのでしょうか 【スクリプト】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> var URL = new Array("http://foo.com/","http://bar.co.jp/"); var TITLE = new Array("foo","bar"); // 表示用コンテナ var container = document.getElementById('links'); // リセット container.innerHTML=''; var ul=document.createElement('ul'); container.appendChild(ul); for(var i=0;i<URL.length;i++){ var li=document.createElement('li'); var a=document.createElement('a'); // 'href'属性の設定 a.setAttribute('href',URL[i]); // ラベル a.appendChild(document.createTextNode(TITLE[i])); li.appendChild(a); ul.appendChild(li); } </script> </head> <body> <div id="links"></div> </body> </html>

専門家に質問してみよう