• TOP
  • Web戦略
    • Web戦略全般
    • インバウンド・マーケティング関
    • 動画マーケティング
    • メールマーケティング(リスト活用)
    • Webマーケティングツール
  • SEO
    • SEO(検索エンジン最適化)
    • SEO一般
    • Googleに関するSEO
    • Googleアップデート/変更
    • リンクビルディング・構築
    • LocalSEO(Googleプレイス)
    • Search Marketing Expo関連
    • Moz(SEOmoz)
    • SEM(広告)
  • コンテンツ
    • コンテンツ作成一般
    • キラーコンテンツを作るには
    • ブログ/ビジネスブログ
    • podcast
    • ケーススタディ
  • HP制作
    • ホームページ作成・運用
    • マーケティングとWebデザイン
    • ランディングページ最適化(LPO)
    • ウェブ製作技術
    • スマートフォン対応術
    • アクセス解析・ウェブ解析
    • ECサイト運用
  • SNS活用
    • ソーシャルメディア活用
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • SNS活用その他
  • Webinar
    • 音声セミナー(Podcast)
    • 動画セミナー(Youtube)
  • 運営会社
中小企業Web戦略ラウンドナップ
  • TOP
  • Web戦略
    • Web戦略全般
    • インバウンド・マーケティング関
    • 動画マーケティング
    • メールマーケティング(リスト活用)
    • Webマーケティングツール
  • SEO
    • SEO(検索エンジン最適化)
    • SEO一般
    • Googleに関するSEO
    • Googleアップデート/変更
    • リンクビルディング・構築
    • LocalSEO(Googleプレイス)
    • Search Marketing Expo関連
    • Moz(SEOmoz)
    • SEM(広告)
  • コンテンツ
    • コンテンツ作成一般
    • キラーコンテンツを作るには
    • ブログ/ビジネスブログ
    • podcast
    • ケーススタディ
  • HP制作
    • ホームページ作成・運用
    • マーケティングとWebデザイン
    • ランディングページ最適化(LPO)
    • ウェブ製作技術
    • スマートフォン対応術
    • アクセス解析・ウェブ解析
    • ECサイト運用
  • SNS活用
    • ソーシャルメディア活用
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • SNS活用その他
  • Webinar
    • 音声セミナー(Podcast)
    • 動画セミナー(Youtube)
  • 運営会社
中小企業Web戦略ラウンドナップ
No Result
View All Result

h1に画像を入れたいけどSEOも気にしたい時は

中山陽平(Webコンサルタント) by 中山陽平(Webコンサルタント)
in 未分類
Reading Time: 10min read
A A
Share on FacebookShare on TwitterはてなでシェアLineでシェア

相も変わらずWindowsの和文フォントは汚いままなので、”Yahoo! Japan”の様に、ホームページの題名となる様なタイトルを示す部分は、画像で作られます。

HTMLとしても、SEO対策としても本来はh1で囲みたいところですが、正直しんどいのが現状です(‘A`)

そんなところに、両者を満足させる方法が、Ten CSS tricks you may not know : evolt.org, Codeという記事に。

なんでこんな簡単なことに気がつかなかったのだろう… onz

具体的には <h1><span>タイトル</span></h1>

としてマークアップして、cssでh1の背景に従来の画像を出し、さらにh1の中のspanの内容を見えないところに配置するだけです。

h1   {

    background: url(header_img.gif) no-repeat;

    width : 768px ;

    height : 200px ;   }

h1 span   {

    position: absolute;

    left:-2000px;   }

という感じで。

spanが気になる人はspanを取って、h1に直接text-indent : -3000px とかでも良さそうです。

ところで、うちのサイトもそうですが、ページ全体を常にウィンドウの真ん中に表示するレイアウトは沢山使われています。

そしてそこに、別にcssで絶対配置したオブジェクトがあった場合、ウィンドウサイズによって絶対配置された要素とその他の要素の位置関係が変わってしまって参ったことはありませんか。

あれ、自分だけ…?(‘A`)

上から落ちてくるホバーウィンドウの時に悩んだんですが…。

とりあえずこれは、同じ記事の項目9番にも便利な例が載っています。

親要素の配置をrelativeにしておけば、その要素の中でabsolute指定された要素は、その親要素の原点を基準に配置することが出来ます。

つまり、ウィンドウサイズが変わっても、相対的な位置関係が維持できます。

————- しかし、このevolt.orgでも、WinIEのサイズ計算のバグ対策が乗っていますが、これはDoctype宣言で標準モードにすれば良い気もするのですが、なぜ未だに語られるのでしょう。

…何か罠が?

 #追記05/07/25    WindowsIEの6より前ではDoctypeスイッチが効かないとのこと。うぅむ…。

それはともかく、CSS周りはまだまだ苦労するところが多いですね。

ちなみに、個人的には、WinIEの「floatさせた要素のmarginが2倍くらいになってしまう」というバグが一番今のところ悩みの種です。

他は個人的にはあんまり不満は無かったり。

どちらかというと、CSSをどう書けば、他の製作者に意味が伝わりやすいか、他の人が読みやすいか等の方が最近は気になります。

CSSもHTMLもフリーな記述形式なので、非常に製作者ごとに書き方に差が出やいですね。

また、少し大きなサイトになれば、量も結構な量になります。

自分が書いたものでさえ、後で見ると意味不明だったり。

きちんとポリシーを作ってやろうと思っても、途中で辛くなってきて適当になってしまったり(‘A`)

…CSSの各セレクタごとにタグをつけて管理できるツールが切に欲しいです。

適用箇所、作った意図、注意点、作成日などを参照できるようなものが。

————- ちなみに自分がやっていることは、

「全体に適用されるCSSと個別のページごとのCSSの分割」

「CSSへのコメント付け」

「全体を”header”、”menu”、”contents”、”footer”のような感じでIDを振り、セクションに分割。そしてその中の要素は特に必要が無くとも、それらを親とした、子孫セレクタとして記述」 「クラス名を考えてつけることをサボらない」

くらいでしょうか。

Share187Tweet117BookmarkShare
Previous Post

CSSだけで、フレキシブルな角丸ボックスを作る方法

Next Post

WWWは実際は”World Wide Wait”だと言ってみたり。

中山陽平(Webコンサルタント)

中山陽平(Webコンサルタント)

今こそ「ウェブを頑張りたい」小さな会社のウェブ活用パートナー 距離の近い「リモート型コンサル」で、一緒に目標達成・不安解消・未来への道づくりを 緊急事態下でも平常対応・毎日コンサルに依頼や相談が可能・中小企業特化ノウハウ・HP制作運用も対応可能

この記事を読んだ人はこちらも読んでいます

マーケティングとWebデザイン

日本のマーケティングが10年遅れているというのは本当?

2019年1月9日
Web戦略全般

経営戦略全体の中で「ウェブで何ができるか」の結果がウェブ戦略だということ

2018年11月9日
Googleに関するSEO

SEOは無意味じゃない、ただ、ビジネスモデル的に情報発信から入っているサイトは注意

2018年10月8日
Next Post

WWWは実際は"World Wide Wait"だと言ってみたり。

なぜ検索結果の上位2サイトにアクセスが集まるんだろう

Discussion about this post

人気記事.

メールからの反応率を改善する細かくて大事なTips

2014年10月15日

8秒以内?今の買い手のコンテンツの読み方を押さえて離脱率を下げよう

2015年12月4日

最新の記事

日本のマーケティングが10年遅れているというのは本当?

2019年1月9日

経営戦略全体の中で「ウェブで何ができるか」の結果がウェブ戦略だということ

2018年11月9日

SEOは無意味じゃない、ただ、ビジネスモデル的に情報発信から入っているサイトは注意

2018年10月8日

MENU

  • TOP
  • Web戦略
    • Web戦略全般
    • インバウンド・マーケティング関
    • 動画マーケティング
    • メールマーケティング(リスト活用)
    • Webマーケティングツール
  • SEO
    • SEO(検索エンジン最適化)
    • SEO一般
    • Googleに関するSEO
    • Googleアップデート/変更
    • リンクビルディング・構築
    • LocalSEO(Googleプレイス)
    • Search Marketing Expo関連
    • Moz(SEOmoz)
    • SEM(広告)
  • コンテンツ
    • コンテンツ作成一般
    • キラーコンテンツを作るには
    • ブログ/ビジネスブログ
    • podcast
    • ケーススタディ
  • HP制作
    • ホームページ作成・運用
    • マーケティングとWebデザイン
    • ランディングページ最適化(LPO)
    • ウェブ製作技術
    • スマートフォン対応術
    • アクセス解析・ウェブ解析
    • ECサイト運用
  • SNS活用
    • ソーシャルメディア活用
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • SNS活用その他
  • Webinar
    • 音声セミナー(Podcast)
    • 動画セミナー(Youtube)
  • 運営会社
Facebook Twitter Soundcloud Youtube
中小企業Web戦略ラウンドナップ

“ウェブが苦手な中小企業をゼロにしたい”
「まず、どうすれば」「苦手意識が…」とお悩みの方へ
ウェブ活用の道を作り、全国対応で常に不安解消・各種依頼が可能。
安心実績700社のWebコンサルティング/各種制作なら。

Follow Us

カテゴリー

  • ECサイト運用
  • Facebook
  • Google+
  • Googleに関するSEO
  • Googleアップデート/変更
  • LocalSEO(Googleプレイス)
  • Moz(SEOmoz)
  • Pinterest
  • podcast
  • Search Marketing Expo関連
  • SEM(広告)
  • SEO(検索エンジン最適化)
  • SEO一般
  • SNS活用その他
  • Twitter
  • Webマーケティングツール
  • Web動画マーケティング
  • Web戦略全般
  • アクセス解析・ウェブ解析
  • インバウンド・マーケティング関連
  • ウェブ製作技術
  • キラーコンテンツを作るには
  • ケーススタディ
  • コンテンツ作成一般
  • スマートフォン対応術
  • ソーシャルメディア活用
  • ブログ/ビジネスブログ
  • ホームページ作成・運用
  • マーケティングとWebデザイン
  • メールマーケティング(リスト活用)
  • ランディングページ最適化(LPO)
  • リンクビルディング・構築
  • 業務日誌・お知らせ

© 2021 ラウンドナップWebコンサルティング(株式会社ラウンドナップ)

No Result
View All Result
  • TOP
  • Web戦略
    • Web戦略全般
    • インバウンド・マーケティング関
    • 動画マーケティング
    • メールマーケティング(リスト活用)
    • Webマーケティングツール
  • SEO
    • SEO(検索エンジン最適化)
    • SEO一般
    • Googleに関するSEO
    • Googleアップデート/変更
    • リンクビルディング・構築
    • LocalSEO(Googleプレイス)
    • Search Marketing Expo関連
    • Moz(SEOmoz)
    • SEM(広告)
  • コンテンツ
    • コンテンツ作成一般
    • キラーコンテンツを作るには
    • ブログ/ビジネスブログ
    • podcast
    • ケーススタディ
  • HP制作
    • ホームページ作成・運用
    • マーケティングとWebデザイン
    • ランディングページ最適化(LPO)
    • ウェブ製作技術
    • スマートフォン対応術
    • アクセス解析・ウェブ解析
    • ECサイト運用
  • SNS活用
    • ソーシャルメディア活用
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • SNS活用その他
  • Webinar
    • 音声セミナー(Podcast)
    • 動画セミナー(Youtube)
  • 運営会社

© 2021 ラウンドナップWebコンサルティング(株式会社ラウンドナップ)