アプリ版：「スタンプのみでお礼する」機能のリリースについて

キャプション付きの複数画像を複数ランダムに表示

解決済

  • 質問者：de_viant
  • 質問日時：
  • 回答数：4件

タイトルの通りなのですが、キャプションなしは検索して分かったのですが、キャプション付きだと分かりません。どなたかお教えください。

参考にしたプログラムは、以下の通りです。

<HTML>
<HEAD>
<TITLE></TITLE>
<script language="javascript">
<!--//
var arrImage = new Array(
"img/img0.jpg",
"img/img1.jpg",
"img/img2.jpg",
"img/img3.jpg",
"img/img4.jpg");
var arrLink = new Array(
"01.html",
"02.html",
"03.html",
"04.html",
"05.html");

var arrFlag = new Array(999,999,999);
function Show(){
document.imgNumber1.src = arrImage[StartRandom(0)];
document.links[0].href = arrLink[nTemp];
document.imgNumber2.src = arrImage[StartRandom(1)];
document.links[1].href = arrLink[nTemp];
document.imgNumber3.src = arrImage[StartRandom(2)];
document.links[2].href = arrLink[nTemp];
}
var nTemp, nLoop;
function StartRandom(nIndex){

nLoop = 0;
nTemp = Math.round(Math.random()*(arrImage.length-1));

if (nIndex != 0){
for (nLoop = 0; nLoop < nIndex ; nLoop++){
if (nTemp == arrFlag[nLoop]){
StartRandom(nIndex);
}
}
}
arrFlag[nIndex] = nTemp;
return nTemp;
}
//-->
</script>
</HEAD>
<BODY onLoad="Show()">

<a href="01.html"><IMG name="imgNumber1" src="img/img1.jpg" width="170"

height="170" border="0"></a>
<a href="02.html"><IMG name="imgNumber2" src="img/img2.jpg" width="170"

height="170" border="0"></a>
<a href="03.html"><IMG name="imgNumber3" src="img/img3.jpg" width="170"

height="170" border="0"></a>

</BODY>
</HTML>

<BODY>から</BODY>のプログラムでなぜ表示できるかもよくわかっていません。（これについてはおいおい学ぶとして、できればとっかかりのヒントをお願いします）

あと、スクリプトが利かない場合の表示は、<NOSCRIPT>～</NOSCRIPT>で間に変わりのものを書けばいいのでしょうか。

すいませんが、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞複数表示させるにはどうすればいいのでしょうか。


　単にスタイルシートだけの問題になりますから(^^)・・HTMLもjavascriptもほとんど手を加える必要がない。そもそも、そうすべき事はわかりますよね。
1) javascript部分の変更
　外部スタイルシートにしたほうが良い
var css = new Array(
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/1.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/2.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/3.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/4.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/5.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/6.css">'
);

スタイルシート 6タイプ
[1.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:list-item;}
div.section div.nav ol li+li+li{display:none;}
div.section{background-color:fuchsia;}
div.section div.nav{border-color:red;}


[2.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:list-item;}
div.section div.nav ol li+li{display:none;}
div.section div.nav ol li+li+li{display:list-item;}
div.section div.nav ol li+li+li+li{display:none;}
div.section{background-color:silver;}
div.section div.nav{border-color:gray;}

[3.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:list-item;}
div.section div.nav ol li+li{display:none;}
div.section div.nav ol li+li+li+li{display:list-item;}
div.section{background-color:aqua;}
div.section div.nav{border-color:blue;}

[4.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:none;}
div.section div.nav ol li+li{display:list-item;}
div.section div.nav ol li+li+li+li+li{display:list-item;}
div.section{background-color:yellow;}
div.section div.nav{border-color:orange;}

[5.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:none;}
div.section div.nav ol li+li{display:list-item;}
div.section div.nav ol li+li+li{display:none;}
div.section div.nav ol li+li+li+li{display:list-item;}
div.section{background-color:lime;}
div.section div.nav{border-color:green;}

[6.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:none;}
div.section div.nav ol li+li+li{display:list-item;}
div.section div.nav{border-color:silver;}

注意)
　まず、HTMLやスタイルシートをきちんと身につけましょう。
　デザインや動作なんて、よっぽど酷くさえなければ、ユーザーはコンテンツの充実だけで訪問してくる。
『どうすれば自分のウェブサイトが独自性、価値、または魅力のあるサイトといえるようになるかを考えてみる。同分野の他のサイトとの差別化を図ります。( https://support.google.com/webmasters/answer/357 … )』
　はデザインじゃない、内要素のものなのですよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
参考になりました。

通報する
お礼日時：2014/04/20 21:55

No.3

  • 回答者： ORUKA1951
  • 回答日時：

Lynxでの表示結果忘れてましたね。


　検索エンジンには、すべてリンクが見えているということです。
「キャプション付きの複数画像を複数ランダム」の回答画像3

この回答への補足

回答ありがとうございます。
いろんな方法があるんですね。

教えていただいたサンプルでは、複数の画像からランダムに１点表示みたいなのですが、複数表示させるにはどうすればいいのでしょうか。
申し訳ありませんが、お教えください。
よろしくお願いします。

補足日時：2014/04/17 23:17
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

HTMLと同じ場所にCSSというフォルダーを作り下記４つのスタイルシートをいれておく


[1.css]
@charset "Shift_JIS";
div.section div.nav ol li+li{display:none;}

[2.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:none;}
div.section div.nav ol li+li{display:list-item;}
div.section div.nav ol li+li+li{display:none;}

[3.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:none;}
div.section div.nav ol li+li+li{display:list-item;}
div.section div.nav ol li+li+li+li{display:none;}

[4.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:none;}
div.section div.nav ol li+li+li+li{display:list-item;}

たったこれだけです。

　肝心な事は、スクリプトやスタイルシートのためにHTMLは書かない!!
　スクリプトやスタイルシートの説明サイト/書籍は、目的がスクリプトやスタイルシートの説明のためですが、現実には、HTMLがあって、それを「スクリプトでどう動作させるか」「スタイルシートでどう表現するか」になります。
　そうしないと、使い物になりません。

　これを応用すると、リストだろうが、セクションだろうが、単純なメッセージだろうが背景画像だろうが・・ランダムに変更できる。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

そんな回りくどい事しないでも。


★ナビゲーション的な要素だと思いますが、そんなものjavascript経由で提供したらダメです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
技術に関するガイドライン
　Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン（品質に関するガイドライン） - ウェブマスター ツール ヘルプ( https://support.google.com/webmasters/answer/357 … )］より

★スタイルシートにしろ、javascriptにしろ、それらが利用できないユーザーエージェントのことも考慮すべき。

★HTMLをきちんと作成することが大前提です。
　「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_ … )」


[サンプル]
★Another HTML-lint gateway( http://cetus.sakura.ne.jp/htmllint/htmllint.html )
　のHTML4.01strictです。
★添付はLynx(すなわち検索エンジン)が理解している様子
★印刷時はすべて印刷されます。(印刷プレビューで確認する)
★HTMLは簡潔で、(検索エンジンを含めて)誰にでも内容が理解できるのでメンテナンスも楽
　class名は、「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
★スマホから幅広ディスプレイまで対応(ウィンドウ幅やCtrl + ＋/－でフォントサイズを変えてみる。)

※タブは＿に置換してあるので戻す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<meta http-equiv="Content-Script-Type" content="text/javascript">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style media="screen" type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
a img{border:none;}
div.header,div.section,div.footer{width:80%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
div.section div.nav{
text-align:center;
border:ridge red 4px;
width:300px;
margin:0 auto;
}
div.section div.nav ol,div.section div.nav ol li{
list-style:none;
margin:0;padding:0;
}

body{background-color:gray;}
div.header,div.section,div.footer{background-color:white;}
-->
＿</style>
<!-- ここからがランダム表示のためのスタイルシート読み込み -->
<script type="text/javascript">
<!--
function getRand(){
return Math.round(Math.random()*(css.length-1));
}
var css = new Array(
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/1.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/2.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/3.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/4.css">'
);
rand = getRand();
document.write(css[rand]);
-->
</script>
<!-- ここまでがランダム表示 -->
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="nav"><!-- ナビゲーションだよ -->
＿＿＿<h2>おすすめ商品</h3>
＿＿＿<ol>
＿＿＿＿<li><a href="01.html">掃除機</a>
＿＿＿＿＿<p><a href="01.html"><img src="img/bqc100.jpg" width="170" height="170" alt="掃除機"></a></p>
＿＿＿＿＿<p>今月のお勧めは、掃除機の新製品です。</p>
＿＿＿＿</li>
＿＿＿＿<li><a href="01.html">扇風機(黒)</a>
＿＿＿＿＿<p><a href="02.html"><img src="img/fun101.jpg" width="170" height="170" alt="扇風機1"></a></p>
＿＿＿＿＿<p>新色(黒)のシックな扇風機</p>
＿＿＿＿</li>
＿＿＿＿<li><a href="01.html">扇風機(青)</a>
＿＿＿＿＿<p><a href="03.html"><img src="img/fun102.jpg" width="170" height="170" alt="扇風機2"></a></p>
＿＿＿＿＿<p>涼しさのただよう新色、青色の扇風機</p>
＿＿＿＿</li>
＿＿＿＿<li><a href="01.html">扇風機</a>
＿＿＿＿＿<p><a href="04.html"><img src="img/fun103.jpg" width="170" height="170" alt="扇風機3"></a></p>
＿＿＿＿＿<p>定番のシルバー色の扇風機</p>
＿＿＿＿</li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報