ページが増えてくると、あとから編集するときに大変になってきますよね。
例えばサイトのタイトルを変えたとき、
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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- SEO 関係ないページを検索エンジンが拾ってしまう 1 2022/05/14 11:16
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS リストの並べ替え 1 2022/09/13 15:27
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- HTML・CSS ワードプレスで太字が反映されません PC(MacBook)の画面上には、太字は反映されるのに、スマホ 3 2022/12/18 18:56
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数のボタンを等間隔に、かつ...
-
htmlのolやulなどlistにtitleや...
-
ヘッダーとフッターだけ背景を...
-
【html&css】太さの違う2本線の...
-
HTML属性での「""」 「''」違い
-
html,css初心者です。ヘッダー...
-
divを横に並べる方法
-
一括で全体を右にずらす
-
CSS 余白を作る方法
-
固定幅+可変幅レイアウトがな...
-
HTMLのフォーマットとしてXHTML...
-
inline-blockをネストすると表...
-
フッタの背景画像をリピートxで...
-
hタグの右横に画像を表示
-
HTMLに同じコードを一括挿入
-
IE・NNの独自タグについて
-
画面を縮小するとカラムが落ち...
-
レスポンシブかつ、スマホ、携...
-
WEBデザイン ― ブラウザの横幅...
-
<div id="container">の使いか...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
スペースを使わず文字位置を揃...
-
1時間30分を簡単に表したいで...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
hタグの右横に画像を表示
-
divを横に並べる方法
-
インラインフレームのページ内...
おすすめ情報