これからの教養を考える フリーランス系アカデミアン としちるのブログ

ブログカスタマイズ

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

投稿日:2016年1月19日 更新日:

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

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

ブログのテーマ-「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;/* -- 左から順に「上、右、下、左」-- */
}

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

1 画像を用意する

2 はてなフォトライフにアップロードする

3 アップロードした画像のURLをコピーする

4 「はてなフォトライフの画像URL」を消して、コピーしたURLを張り付ける

5 画像が上手く表示されるか確認する

6 「padding」や「margin」に入れる数値をいじるか、画像を加工し直して調整する

7 以下、繰り返し

※注意

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

f:id:toshitiru:20160120012356p:plain

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

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

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

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

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

f:id:toshitiru:20160117175428g:plain

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

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

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

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

注意点

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

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

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

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

moonnote.hateblo.jp

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

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

注意点2-別の方法の方が人によっては合うかも?

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

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

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

f:id:toshitiru:20160117193304p:plain

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

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

こんな感じです。

では!

ブログ管理人

としちる

日本サッカー協会に入るため筑波大学体育専門学群を目指すも、受験前に父親が逃亡し、やむなく部活を辞める。教材費と受験費を稼ぐためにバイトしながらの宅浪生活を2年間送った後、国際総合学類に入学。タイにて日本語指導と留学も経験。帰国後、「人から始まる学問の見える化」を旗印とした『入門学術メディア Share Study』を創設。運営サイトは4つ、記事執筆数は250以上、イベント運営に携わった数は50以上(17年8月現在)。最近、VALUも動かしてます。

この記事が気に入ったら
いいね!しよう

Twitter で

「教養」をテーマにフリーランス系アカデミアンとして活動するとしちるのLINE@を始めました。ブログやTwitterではなかなか語れないことやLINE@登録者限定の資料も公開していく予定でっす!つれづれちるままに基本不定期更新で、執筆した記事をまとめて配信。確実に購読して、よりよく生きたい方どうぞ登録してやってくださいーッ!

-ブログカスタマイズ

Copyright© TIRU LABO , 2017 All Rights Reserved.