ローカルビジネスのホームページをWordpressで手掛けていると、記事タイトルがどうしてもテキストだけの表現力では限界にぶちあたります。そこで固定ページの記事タイトルを画像化したいニーズって結構あると思うんですが、皆さんどうやっているんでしょうかね。
[ad#adtop]
こちらの記事で紹介されている方法が、割と主流なのかもしれません。
ページスラッグやカテゴリスラッグを取得し、各ページタイトル部分を画像で出力[WordPress使えそうなスニペットシリーズ]
ただし、この方法だと、page.phpから変更するため、全固定ページに適応されちゃう問題点があります。
確かに全ページに適応された方が統一感は保たれますが、固定ページって、わりとそのページのみこのスタイルを適応したいというニーズがありまして、何かしら方法ないかと探してたどり着いたのが、body classのid指定でcssで実現する方法
該当の固定ページのソースを見るとbody classの部分はこんな感じになっています
<body class="page page-id-** page-template-default">
**はページに振られているID
投稿だとこんな感じ
<body class="single single-post postid-** single-format-standard">
んでCSSで
.page-id-** .entry-header{
background-image: url(画像のパス);
background-repeat: no-repeat;
}
こんな風に指定してあげると画像を表示できます。
ただしこの方法だと、固定ページのタイトルをブランクにしないと重なって表示されてくるのとalt指定もできないので、
個人的には以下の方法を採用しています。
.page-id-** .entry-header{
display:none;
}
一旦display noneで消しちゃって、記事内の最上段に画像を配置するようにしています。
SEO的にどうなのか、ちょっと微妙ですけど、他にもいい方法ご存じの方いましたら教えてください。
※ちなみにこの応用で特定のページだけ適応させる背景画像とかもできます。こんな感じ
.page-id-*** .entry-content {
background-image: url(画像のパス) ;
background-repeat: no-repeat;
background-attachment: scroll;
background-position:85% 2% ;
}
[ad]