ベストアンサー

ホームページでの自動入力について

2012/06/13 04:42

ホームページを作ってて、お知らせ枠を作ってるんですけど、ほかのページにもお知らせ枠があっていちいち編集するのが面倒でして、トップページのお知らせ枠を更新したら自動でほかのページすべてのお知らせ枠の内容が変わるように出来ないですか？ CGI、CSSでもいいのですが、タグが全く分らなくてタグも教えてくれると助かります。説明がへたくそですみませんでした。

tsubasa0801
お礼率100% (16/16)

CSS
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2012/06/13 08:34 回答No.2

こんにちは。 jQueryというもの(JavaScript)を使って良い環境であればお知らせ用のHTMLファイルを一つ作っておき、それを表示したいページにて読み込ませるという方法もあります。 (No.1さんの仰るとおりいろいろ方法はありますが、環境に依存したりetcあります) ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7530367 上記サンプルはinformation.htmlというものを作っておきそれを読み込んで表示しています。 information.htmlを更新すれば表示しているページ全て変更されます。表示したい場所に <div id="information"></div> そのhtmlの<head>内に <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { $('#information').load ( 'information.html' ); }); </script>

質問者

お礼 2012/06/15 15:56

最初文字化けしたのですが、エンコードを変えたらうまく出来ました。ありがとうございました。助かりました。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/13 18:45 回答No.3

語句簡単な例です。表示されるデータのデザインは、[表示するページ]のスタイルで指定されます。読み込まれる外部スタイルシートで、文字だけ置換しています。　スタイルシートを解釈しないブラウザ(検索エンジンを含む)には、リンクが表示されます。もちろんjavascriptによる記事の書き換えを禁止していても利用できます。 [外部CSS] new.css HTMLと同じ場所に ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options ) で検証済み @charset "Shift_JIS"; #news p a{display:none;} #news p:after{content:"不具合がありましたらBBSで報告してください";} [HTML] HTML4.01strict+CSS3 Shift_JIS ★タブは＿に置換してあるので戻す。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options ) で検証済み <!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"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<link rel="stylesheet" type="text/css" media="screen" href="./news.css"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<p>スタイルシートで記事の一部を追加するには、content:プロパティを使う。</p> ＿＿<div class="nav"> ＿＿＿<div id="news"> ＿＿＿＿<h2>お知らせ</h2> ＿＿＿＿<p><a href="./news.html">新着情報</a></p> ＿＿＿</div> ＿＿＿<div id="siteNavigation"> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="./profile">PROFILE</a></li> ＿＿＿＿＿<li><a href="./blog">BLOG</a></li> ＿＿＿＿＿<li><a href="./link">LINK</a></li> ＿＿＿＿＿<li><a href="./bbs">BBS</a></li> ＿＿＿＿＿<li><a href="./game">ゲーム日記</a></li> ＿＿＿＿</ul> ＿＿＿</div> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>本文記事</h2> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>

質問者

お礼 2012/06/15 15:55

詳しく書いていただきありがとうございました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/13 08:14 回答No.1

この程度の簡単な文章ならiframe使うのが簡単。ただしstrictでなくなる。もちろんCGIやPHPで動的にHTMLを作成しても良いですが、サイト全体をそうする必要があリ、そこまでの必要はなさそう。 CSSのcontentプロパティを使うのがもっとも手軽ですが、古いブラウザは非対応です。　それぞれ、一長一短があります。 CSSの場合 <div class="header"> 　<h1>タイトル</h1> 　<div class="aside" id="news"> 　　<h2>お知らせ</h2> 　　<p><span><a href="./news.html">ニュース</a>があります。</span></p> 　</div> **** とでもしておいて、 #news p{position:relative;} #news span{display:none;} #news p:after{content:"不具合がありましたら・・・";position:absolute:top:0;left:0;} とか・・

質問者