はてなブログのタイトルのこと
行ったことはタイトルを非表示にして疑似タイトルを表示するだけの事です。
しかし、はてなブログでのタイトルのカスタムは自由度が高いとは言えませんので、ちょっと遠回りする必要がありました。
当ブログがなぜはてなブログのタイトルを消して新たにデザインしたタイトルを使う事にしたのかと言うと【結局は見栄えの為】ですが、内包される理由としては『ブログは旧時代の物だから、やってる人も少ないし見る人も少ない』と言われた事にハラを立てたのも1つの理由です。でも確かに、もう2.30年ほどずっと『ブログと言えばトップにタイトル名がかかれている』と言うのが当たり前になっていてちょっとつまんないかもとは思っていました。
まぁ、上から下に向かって読み進めていく物なので、やりようがないのも確かですが、ただまぁそれならそれで少し遊んでみたいなぁと思ったわけです。
しかし、いざ疑似タイトルを作ろうと思ったら、何かと考えなければならない事が多かったので、調べたり聞いたりしながら不安を解消しつつ行いました。
タイトルのSEO的な役割
はてなブログの場合は【ダッシュボード⇒設定⇒基本設定】から設定を行います。
設定を行うと、自動的に<head>や<header>にそれらの情報が挿入されますので、はてなブログでのブログタイトルは【画像とテキストを表示 or 画像だけ表示】を選ぶ以外では編集ができませんが、この設定は絶対にやる必要があります。絶対です。
タイトルは
絶対に削除してはいけません。
WEBページの<head>内にある<title>タグは、ブラウザのタブや検索エンジンでの表示に使われるため、必須です。
しかし、<body>内のヘッダー部分に「タイトル」を表示するかどうかは、ページデザインや内容次第で決まります。
通常、ブログタイトル・サイトタイトルは、<h1>タグでページタイトルを表示するのが一般的です。これはSEOやユーザーがそのページの内容を理解するために役立ちますし、ページの主旨を伝えるためにも視覚的な「タイトル」は重要です。
はてなブログの場合は削除する事はできません。空欄なんてもってのほかです。まさしく 名は体を表す なので。
しかし、<h1>タグを連発してはいけませんので、削除するのではなく非表示にして隠すという方法をとります。
headerに自動挿入される部分を消したい
<header>に自動挿入される部分は以下です。
<h1 id="title"><a href="URL">ブログ名</a></h1>
<h2 id="blog-description">ブログのひとこと説明</h2>
この赤文字の部分をCSSを使用してそれなりに装飾する事は可能ですが、筆者の行いたいデザインはCSSだけではないので、デフォルトのタイトルを非表示にすることにします。
やり方は簡単で、まずは、ヘッダ画像を使用している人はヘッダ画像を削除します。
ちなみに、画像がない状態で表示設定にある【画像だけ表示】を選んだ場合、テキストタイトルはしっかり表示されますので、【画像とテキストを表示】でも【画像だけ表示】でもどっちでもいいと思います。
次に、デザイン⇒高度な設定⇒ デザインCSSに以下のコードをコピペするとタイトルが消えます。
/*タイトル要素全部非表示*/
#blog-title {
display:none;
}
display:noneは、あくまでも表示を隠しているだけなので、HTML的には存在していることになるからSEOにも有効だと、ざっくりですが、グーグルのマーティン・スプリット氏もそんなニュアンスのことを言っていました。
ですから、<h1 id="title"><a href="URL">ブログ名</a></h1>と<h2 id="blog-description">ブログのひとこと説明</h2>は存在したままになります。SEO的には<h2>をこの用途で使うのはちょっとビミョーらしいのですが、いじれないので仕方ないですね。
疑似タイトルを作成
何もないのもわけわからんので、テキストだけを入れた状態です。
【デザイン⇒カスタマイズ⇒ヘッダ⇒ブログタイトル下】に疑似タイトルを作って入れたらOKです。
この場合、単なるテキストの装飾ですから、CSSを使用するなりHTMLを使用するなり、自由にタイトルを作成する事が可能ですので、このメリットは視覚的なデザインをする上では、かなり大きいですよ。なぜなら、制約がないから全て自由です。
タイトルにリンクは必要？
多くのサイトではタイトルをクリックするとトップページに戻る仕様が一般的であり、ユーザーもそれを期待することが多いので、タイトルにトップページへのリンクを設定することで、ユーザーが素早くトップページに戻ることができ、利便性が高まります。
一方で、デザインにこだわったタイトルなどクリック可能なリンクにさせたくない場合もあります。装飾やアニメーションを使っていると、リンクによるスタイルの影響を受けてデザインが崩れることがあるため、慎重に設計する必要があります。
リンクによるスタイルとは、ようは、下線が出たりリンクとわかるようにリンクカラーが用いられたりなどです。これを回避するには以下のコードのようにすると良いです。
/*リンクのコード※＜＞は小文字に直してください*/
＜a href="URL" style="color: inherit; text-decoration: none;"＞ リンクテキスト
完成した疑似タイトル
このようになりました。
タイトルを枠で囲み、Bの文字だけを光らせて、TOPページへのリンクも行っており、タップすると少し拡大します。
レスポンシブなデザインにしているので、PC等の大型モニターだともっと大きく、スマホだと最小サイズに見えるようになっています。
タイトルとは言うものの、この場合は疑似タイトル＝ただの文字列ですから、自由に遊べます。
実際に変更してみた感想
『めっちゃカッコいいじゃん！』と自画自賛しています。
ただまぁ、『ブログは旧時代の物だから、やってる人も少ないし見る人も少ない』と言う点に関してはタイトルをこのようにめっちゃカッコいい感じにしたところでどうにもならないのかな？と思いました。
結局のところ、一番上にタイトルがあることには変わりがないし、大変な思いをしたわりにはBが光ってるだけなので、Gifアニメを使用すれば画像１枚で事足りるんですよね。
とは言え、テンションはMAXにブチ上がりました！
こんな事もしています。
