ページが増えてくると、あとから編集するときに大変になってきますよね。
例えばサイトのタイトルを変えたとき、
1ページずつタイトルを変更しようとすると面倒になります。
なので、<title></title>の間にCSSか何かしらを使って定型文挿入する方法はありませんか?
これだとCSSで変えるだけですべてのページで適用できますよね?
ところでCSSを使う場合、ページ一つ一つでは文字とし検索に反映されますか?
というのも、フレームを使うと、ページの文字としてカウントされない弱点があってヒットが上がらない弱点があったりしますよね。
No.3ベストアンサー
- 回答日時:
>特定ボックスをCSSで登録しておけば、それを配置したすべてのHTMLで
>一括して扱える如く、同じ原理で商品名をCSSで登録しておけば、一括
>で全HTMLに適応できるみたいなものはないかなと思っているんです。
それは、繰り返しますが、SSIを使用するのが楽です。ご利用のサーバーでSSIは有効になっていると思いますので、次のようなファイルを用意して、test.shtmlというファイル名で保存します。簡単なのでHTML5で記述します。HTML4.01の場合は、それぞれを<div class="section">のように書き換えて、スタイルシートもdiv.sectionのように書き換える。
また、タグを含まないものでしたら、テキスト、画像、クォーテーションなどの簡単なものはスタイルシートのcontent:プロパティで加えることができます。
★タブは_に置換してあるので戻すこと。
<!doctype html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
<style media="screen">
<!--
body{counter-reset: section;}
section h2:before{content: counter(section) "章: ";
_counter-increment: section 1;
}
section h2:after{content:"--------\Aここから始まるよ";white-space:pre;font-size:0.8em;}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav>
<!--#include file="nav.htm" -->
__</nav>
_</header>
_<section>
__<h2>A smaller heading</h2>
__<p>
__</p>
_</section>
_<section>
__<h2>A smaller heading</h2>
__<p>
__</p>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>
別途、nav.htmを用意します。
___<ul>
____<li><a href="#">Some</a></li>
____<li><a href="#">navigation</a></li>
____<li><a href="#">links</a></li>
___</ul>
そして、サーバー上(ファイルじゃない)でtest.shtmlを開くと、nav.htmlの内容が追加されて表示されます。
★htmlの拡張子でSSIを動作させるためには.htaccessの編集が必要です。
No.2
- 回答日時:
ちょっと待ってください。
titleは、
【引用】HTML4.01____________ここから
著者は、当該文書の内容を識別するためにTITLE 要素を用いる必要がある。 ユーザは文脈抜きで文書を参照することがあるため、著者は文脈を踏まえたタイトルを提供する必要がある。 つまり、著者は、「概説」などの文脈不明なタイトルではなく、「中世の養蜂についての概説」のようなタイトルを提供しなければならない。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
【引用】HTML5____________ここから
The title element represents the document's title or name. Authors should use titles that identify their documents even when they are used out of context, for example in a user's history or bookmarks, or in search results. The document's title is often different from its first heading, since the first heading does not have to stand alone when taken out of context.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4 The elements of HTML — HTML5( http://www.w3.org/TR/2011/WD-html5-20110525/sema … )]より
言い換えれば、それぞれのページに個別のtitleを付けるべきで、しかもそれはtitleだけ読んで内容が推測できる適切なものでなければなりません。
CSSは、HTMLがこの様に文書構造を記述するものであり、titleがHTMLの要素であるのです。ブラウザはスタイルシートを読む前にtitleをタイトルバーに表示します。CSSでは変更できないことを意味しています。
あなたがgoogleなどで検索した結果を元にそのリンク先に進むのは、そのタイトルを見ているはずです。
それはともかく、ページの一部の要素が、複数のページで同一の場合は、単純にSSIを使うほうが良いでしょう。
たとえば
[HTML4.01]
<body>
<div class="header">
<div class="hgroup">
<h1>サイトの見出し★</h1>
<h2>このページの見出し</h2>
</div>
<div class="nav">
ナビゲーション★
</div>
</div>
・・・【中略】・・・
[HTML5]
<body>
<header>
<hgroup>
<h1>サイトの見出し★</h1>
<h2>このページの見出し</h2>
</hgroup>
<nav>
ナビゲーション★
</nav>
</header>
・・・【中略】・・・
というHTMLの場合
[HTML4.01]
<body>
<div class="header">
<div class="hgroup">
<!--#include file="ssi/h1.htm" -->
<h2>このページの見出し</h2>
</div>
<div class="nav">
<!--#include file="ssi/nav.htm" -->
</div>
</div>
・・・【中略】・・・
[HTML5]
<body>
<header>
<hgroup>
<!--#include file="ssi/h1.htm" -->
<h2>このページの見出し</h2>
</hgroup>
<nav>
<!--#include file="ssi/nav.htm" -->
</nav>
</header>
・・・【中略】・・・
としておけば、それらは共通化されます。
※ HTMLがSSIとして動作するように.htaccessで指定しておく。
なお、titleはこの場合<h2>内容と同じものにしておきます。ページの見出し(heading)とtitleは同じものである必要はありませんが、titleは内容と一致するものでなければなりません。
この回答への補足
いやはや、初耳の言葉だらけで難しいですね・・・。だけどここで諦めるわけにはいきません。
確かにタイトルに関してはおっしゃるとおり。
私の例えが悪かったです。
実はタイトルでなくともなんでもよく、特定ボックスをCSSで登録しておけば、それを配置したすべてのHTMLで一括して扱える如く、同じ原理で商品名をCSSで登録しておけば、一括で全HTMLに適応できるみたいなものはないかなと思っているんです。
そうすると商品名などを全ページにわたって一つ一つ変更する作業を効率良く行えるので。
もちろんその場合、CSSはではなくほかの何かを必要があるというところまではt_ohtaさんの説明からも理解致しました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
min-heightとheightの違いについて
-
<!-- #BeginLibraryItemとは
-
1時間30分を簡単に表したいで...
-
画面を拡大すると横幅が切れる
-
CSSを使って定型文を挿入できま...
-
div要素が重なってします
-
HEADタグとheaderタグ
-
iframeを使わずに上下50%ずつに...
-
html の divとtable の役割
-
ブラウザの表示幅で100%指定が...
-
ヘッダーとフッターだけ背景を...
-
【CSS】HTML直書き→外部ファイ...
-
ヘッダーを左右に二分割する方...
-
グリッドレイアウトで"auto-fit...
-
IE11へグリッドを対応させたい
-
htmlの文字が縦書きになる
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
要素間、要素内に隙間が空く
-
セクションをdivで囲むと見出し...
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報