WordPressでブログタイトルを画像にする方法・改｜CSSだけ編

CSSだけいじればOK編

いろんな方のブログのブランディングセクションを触らせてもらえて、かつ感想までいただける幸せタイムを満喫しております@shintarowfreshです。

ブログ「なまら春友流」の@spring_friendsさんがタイトルの画像化を記事にされていたので、ついでに私も書こうかなと指を走らせております。

元記事はこちら。

WordPressでブログタイトルを画像にする方法 | なまら春友流

WebデザインやCSSの世界には正解なんてなくて、ただなんとなくなデファクトスタンダードが存在するだけです。
私のご紹介する方法も一方法の一つであり、これが正解だ！と主張するつもりはもうとうありません。

ただ、ブログトップのh1セクション、そして、h1 a というのはかの有名な「SEO的」という奴ではけっこう大事な部分でして。
上記の方法では、完全にh1タグからテキストをぬく方法を紹介されています。

しかしまあ、かの有名な「SEO的」という奴という奴は過去の遺物であると言っても過言ではない代物、気にしすぎるもの無意味な気もしますが、少なくとも、htmlやテーマファイルをいじらなくても（index.phpとか）ブログタイトルを画像に置き換えることは可能でして、むしろ私としてはこちらの方が楽なのではないのかと思いますので、ご紹介します。

例としては
frasm企画3発目は@ushigyuさんの「おまスキャ」のブログブランディングしてみたfrasm
frasm企画4発目は@haya1111さんのブログブランディングしてみたfrasm
こちらで使ったように

background: url(画像のURL) no-repeat;
display: block;
text-indent: 100%;
overflow: hidden;

overflow要素をつかって人間にだけ見えないように消す方法。実際のソースを見れば、タイトル文字自体はどちらも生き残っています。
そして、リンク要素は今まで通り生きています。

ほかにも

画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス

いろんな方法が先人によって試されています。

またまた登場の「SEO的」という奴で、隠しテキスト・隠しリンクは検索エンジンにペナルティーをもらうと言われています。

トップイメージのaltにタイトル文字をいれておけば問題ないという意見もあります。

諸説どれを信じるか、人それぞれと言ってしまえば話は終わってしまいますが。
僕個人としてはテキストをいかして、かつCSSだけで済ませられる方法がベストじゃないかなぁと思っています。

さらにいうと「SEO的」という奴に関してはWordPress › All in One SEO Pack « WordPress Plugins 当てときゃもんだいないだろ的な考えもありますので、むりくりテキストいかさなくても大丈夫です。

ちなみにちなみに、当frasmではテーマにそもそもトップロゴを当てるオプションがあるのでそのまま画像がハメ込まれてます。

もう一つついでにお手軽CSSをご紹介すると

リンクにカーソルをあてると反応する（色が変わったり、下線がでたり）:hoverという要素があるのですが。
この:hoverに対して

a:hover {
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}

リンクのある画像にカーソルが乗ったとき、ちょっと透明になれ！

という指定を足しておくと、画像にリンクがあるのかないのか画像が反応してくれて親切だと思います。
ほっといてもリンクがあればカーソルが指に変わるので大丈夫！というよりも、一歩親切です。親切であればあるほどクリックしてもらえると確信しています。

テーマファイルをいじるのはアレだなぁとお考えの方は、こちらも併せてお試し下さい。

文：シンタロヲフレッシュ

はてブ

pocket

twitter