はてなブログのタイトルを画像に置き換えて表示する方法【PC編】

はてなブログにて、タイトルを文字から画像に変更して表示する方法をご紹介します！

上がカスタム用ので文字だけだった時のです！

ブログのテーマ－「Innocent」

まず、このブログでは半月 (id:waitingmoon)さんが作成してくださった「Innocent」を使用しています。

別のテーマでは上手くいかない可能性もありますので、その場合はブログテーマと一緒に検索をかけてみて頂ければと思います。

タイトルの文字を消す方法

まず、文字の表示を隠します。「設定」から「タイトル」を消すこともできますが、そうすると検索される際に困るのであくまで表示を消します。

下のコードをCSSにコピペします。

/* ----- 「タイトル」と「ブログの説明」を隠す ----- */
#title a {
visibility: hidden;
}
#blog-description {
visibility: hidden;
}

基本的に何かの表示を消したいときは「#title」の部分をそのカテゴリに指定して、かっこの中の「visibility: hidden」を「display: none;」とすれば消せます。

ですが、タイトルはFirefoxなどブラウザによっては上手くできないこともあるそうなので、「visibility: hidden」としました。

もし、上手く消せないときは

#title {display:none !important;}

というように後ろに「! important」と付ければ優先順位を挙げてきちんと消せるかもしれません。

タイトル画像を挿入する方法

タイトルの文字を消したら、次は画像を挿入します。

こちらはPC版のコードです。下のものをコピペしてCSSに張り付けてください。

/* ----- タイトル画像の挿入 ----- */
#blog-title {
background-image: url("はてなフォトライフの画像URL");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
margin:0px;
padding: 80px 0px 80px 0px;/* -- 左から順に「上、右、下、左」-- */
｝

下はその後に画像を調整して挿入する作業工程の一覧です。

※注意

画像のURLをコピーするのは下の画像にある「オリジナルサイズを表示」をクリックしてからでないと、粗い画像が表示されてしまいます。

「Innocent」はレスポンシブデザインを採用しているため、基本的に画像は調整されて表示されると思います。

一応、レスポンシブに画像を調整するコードを載せておきます。

#blog-title-inner{background-size:contain;}

画像などを調整するための基本知識

「margin」と「padding」ってなんだよって方は下の画像を見てみてください。

ここでは「content」がタイトル画像になります。

「padding」は「content」を表す範囲、「margin」はさらにその周辺の余白を表しています。

そこで、それぞれの大きさをCSSにて指定することで画像などの「content」の位置を調整することができます。

「content」は画像に限らずいろいろなものを表しているので、「見出し」だったり「アイコン」だったりするものを調整したいときは「padding」や「margin」を付け足して調整してみてください。

注意点

ここで二つ注意点があります。

注意点１－ホーム画面へのリンクが張れない

この方法で画像を挿入するとホーム画面へのリンクが上手く張れません。やろうとしてみたのですが、上手くできませんでした。今はそのままにしていますが、分かり次第追記していきたいと思います。

もし、画像だけ挿入してタイトルはそのまま文字にて残したいという場合はこちらを参考にして頂けるとよく分かります。

moonnote.hateblo.jp

同じテーマ作者さんが以前に作った「Blank」というものですが、「Innocent」の土台となっているものなので基本的に同じやり方で出来ます。

誰かタイトル画像にリンクを張るやり方を教えて頂けると非常に助かります…！

注意点２－別の方法の方が人によっては合うかも？

検索して探していると、こういったコードもありました。

h1#title:after {
content: url("はてなフォトライフの画像URL");
}

これでも画像は挿入することができたのですが、僕の場合このようにそのままの画像サイズで表示されてしまい画面から大きくはみ出してしまいます。

コードで調整も試みたのですが、上手くできませんでした。

原因は分かってないのですが、ブログによってはこちらで上手くできるかもしれません。

こんな感じです。

では！