はてなブログでタイトル画像を設置する方法2パターンとスマホ表示の見切れ対策

こんにちわ、かまさんです。

CSS&HTMLを【はてなブログ】を使って勉強しています。

まだまだ初心者ブロガーの域を抜け出すことができませんが、少しづつ色んな機能の使い方がわかってきました。

※スマホで編集、作成を行っていますのでスマホよりの説明になっています。その他のデバイスも表示が多少違うだけでやり方は変わりません

タイトル画像を用意する

タイトル画像を設置する為には・・・まず、タイトル画像を作る必要があります・・・

なんか当たり前のことを言ってしまいましたm(__)m

タイトル画像はブログサイトの【顔】ですからやっぱりいい感じに作りたいですよね(^^)

タイトル画像を作成するオススメサイト

オススメしたいサイトはCanvaというところです。

このサイトは基本無料で使うことができて、素材なども豊富にあるのでとても重宝します。

よくオススメの画像作成サイトに出てきていて使ってみたら使いやすかったので、ずっと使っています。

もちろんブログのアイキャッチやYouTubeのサムネイルもこのサイト、というよりアプリがあるのでアプリを使っています。

アプリをダウンロードしたいときはGoogle Playさんで検索しましょう(^^)

※何分、勉強中の為、ボタンの用意ができませんでしたm(_ _)m

画像サイズ

推奨の画像サイズは、

横1000px:縦200pxらいしいですが、小さくなる分には全然大丈夫だと思います。

小さすぎるのは別です。

大きい場合は切り抜きが入ります。

タイトル画像の設置方法①デフォルトで設置する

はてなブログにはデフォルト的にタイトル画像を設置できる場所があります。

デフォルト的にと表現したのには理由がありまして・・・

違う方法でも設置できるのであえて、デフォルト的と書いています。

もう一つの方法(ヘッダーに設置)は後程ご紹介します(^^)

設置手順

タイトル画像ができていれば手順どおり進めるだけです ^^

それでは、進めていきましょう。

まず、はてなブログの【ダッシュボード】を開いてPC表示に切り替えます。

そして、⇩画像のと同じように進んでいきます。

【タイトル画像】と書いてある下に【ファイルを選択】とあります。

そこをタップすると端末(スマホ)から画像を選ぶことができます。

画像を選んだらアップロードされるのでちょっとまってください。

その後、画像調整と続きますが、推奨サイズであればそのまま適用して大丈夫です。

タイトルの表示設定

次に、すぐ下の表示設定です。

画像+タイトル文字を表示する場合と画像だけを選べます。

任意の設定です。好きな(見た目がいい)方を選びましょう(^^)

終わったら【変更を保存】してどうんな表示になっているか確認しましょう。

※タイトル画像のレスポンシブ設定を忘れないようにしましょう(^^)

終わったら必ずPC表示、スマホ表示で確認しましょう。

きれいに設置できていれば問題ありませんが、そうでない場合はさらに設定(デザインの変更)が必要です。

タイトル画像の見切れ調整

タイトル画像の設置後、スマホ表示を確認すると画像が見切れていることがあります。

こんな感じに⇩

せっかく作ったタイトル画像こうなってしまったら台無しですね(-_-;)

対処方法① CSSでデザイン編集(変更)

それじゃーどうやってキレイに表示させるのかというと、CSSデザインというところでテーマのデザイン自体に変更を加えないといけません(^_^;)

はてなブログ】にはブログのテーマデザインをCSSを使って見た目を変更(上書き)することが出来る場所があります。

間違った記述をすると思い通りのデザインにならないのでちょっと難しいです。

ここで少しブログのデザインがどうなってるのか考えてみましょう(^^)

ブログの外観デザイン=BOXの集まりと解釈してもらえると早いかと思います。

タイトル画像がはまっているところもBOXがあるので、そのBOXに対して〇〇の表示をしてと要素を追加することができれば外観(見た目)も変わるということです。

CSSをコピペで実装

今回は追加するただけで設定が終わるようにCSSの記述を用意しています(^_^)

まずは⇩の記述をコピーしましょう。

@media (max-width:640px) {
.header-image-only #blog-title #blog-title-inner {
background-size: cover;
height: 75px;
}
}

または⇩

@media (max-width:640px) {
.header-image-only #blog-title #blog-title-inner {
background-size: contain;
height: 75px;
}
}

background-sizeはBOXに入っている背景サイズの指定ができる要素です。

二つの違いはcovercontainどちらも縦横比を保持したままbackground(背景)のサイズを変更してくれますが、少し表示のされ方が違います。

coverでは背景範囲を覆って表示して、containでは背景範囲内に収めて表示します。

自身のデザインにあった方を選んでしようするといいと思います。

追記場所

それでは次に進んでいきます。

⇩の画像に沿って進んでいきます。

画像で追記箇所はわかったと思いますが、追記なので元からある記述を消さないように注意しましょう。

追記後は変更を保存してそれぞれ表示(PC、スマホ等)の確認をしましょう。

CSSでの編集がいらない方法

CSSを触って戻せなくなったら怖いな・・・難しいなと思う方もいらっしゃると思います。

または、めんどくさいなって思しまった方ももしかしたらいるかもしれません・・・(´;ω;`)

そんなそんな方もいると思い、ちょっと調べてみました。

タイトル画像が見切れる理由

なぜタイトル画像が見切れてしまうのかな?って、自分なりに考えました。

パソコン表示されるときはサイドバーが横にあるけどスマホ表示(レスポンシブ)のときは無い!

※横にあるテーマもあります

タイトル画像の見切れが起きるのは、決まってサイドバーが無い(下にある)テーマでした。

※全部を試したわけでわありませんm(_ _)m

そんなわけで行き着いた答えは・・・サイドバー分だけ見えなくなってる!でした。

※多分ほとんど正解だと思ってます。

ということでレスポンシブでもテーマデザインがPC表示とスマホ表示が変わらないものを選ぶとCSSの編集がいらない場合があります。

※確実ではないのであしからずm(_ _)m

まぁこれが一番手っ取り早い方法ではありますけど・・・

これではせっかくいっぱいテーマがあるのに選択肢が狭くなってしまいますね(^_^;)

タイトル画像の設置方法②ヘッダーに設置する

はてなブログにはデフォルトでタイトル画像を設置できるのに、ヘッダーにタイトル画像を設置する意味はあるのか?と、思われる方もいらっしゃると思います。

正直なところ意味があると言えばあると思いますし、無いと言ってしまえば無いかもしれません。

ただ一つ言えることは簡単な方法でデザインの選択肢が増やせるというだけです(;^_^A

テーマにないデザイン

ブログを始めてからいろんな方のブログを読むようになり、個人でブログをされている方のトップページを見て自分もこんな形にしたいな~っ・・・どうやって作るんだろう?と思い初心者ながらに考えて色んなデザインを試して、戻して、試して、戻して・・・を繰り返していました。

とっ!いうより今現在繰り返し中です。

その中で気になったのがタイトルの上にメニューバーがあるタイプですね(^^)

⇧こんな感じのですね(^^)

何分勉強中ですのでちょっとやり方がわからずにしばらく放置していました。

デフォルトのタイトルを非表示にする

勉強をしている中でdisplay: none;に出会ってしまいました。

このdisplay: none;は読んでの通りdisplay(デイスプレイ)none(しない)という意味です。

こいつをclass(BOX等)に使うとすっぽり消すことができます。

とっ、いうことわですよ・・・

display: none;を使えばタイトル表示を消して気になっていたもの(メニューバーが上にある)ができるのでは?と、安易に思い至りました。

こちらCSSを準備しました。

勉強を始めてしばらくしてソースコードを見るようになりclassは大体探せるようになってきたので出来ることが増えてきました(^^♪

#blog-title{
display: none;
}

やばいですね・・・結構な期間放置してたのにたったこれだけでした( ノД`)

※タイトルに対して他に要素を記述していた場合消えないことがあります。

デザインCSSの編集場所は先ほど説明したのでハショリます。

※ハショリ=歩合or省く

ヘッダーに画像を入れる

次に画像を挿入していきますが、直接画像を挿入するわけではなくBOXを設置して、その中に画像を設置していきます。

※使い勝手がいいためBOXを使用しています。特に深い意図はありません。

今回はHTMLとして直接CSS記述をしていきます。

<style><!--
.titlegazoubox{
width: 99%;
height: auto;
margin: 0 auto;
padding:0;
}
.titlegazoubox img{
width: 99%;
object-fit: contain;
margin:0;
padding: 0;
}
--></style>

※ヘッダー編集で直接使用できるようにスタイルタグ<style>を使いましたが、頭の<style><!--と後ろの--><style>を外してCSS編集箇所に追加して使用することもできます。

これでBOXの準備はできましたので、続いて画像を入れる為のHTMLを記述します。

<div class="titlegazoubox">
画像URL
</div>

スタイルに続けて追記して画像URL(2行目)を差し込みたい画像のURLに変更します。

ヘッダー編集エリア

入れ込む場所は⇩画像に沿って進んで・・・

タイトル下の記述スペースにHTMLで記述します。

設置ができたら変更を保存してください。

これでヘッダーに画像が挿入され、その他CSS等の記述はいりません。

⇩画像URL変更例

と、こんな感じになります。

※赤枠はわざとつけています。

上記画像では画像の上下に余白ができてますが、気になるようであれば、

<img>タグ以外のタグ<span>タグ<P>タグだったりを消してあげましょう。

記事編集から画像URLを持ってくると引っ付いてくると思います。

画像に必要なのは<img~・・・~image>までなので消しても問題ありません(^^♪

最後に

これでタイトル画像を好きな場所に設置できてデザインの選択肢も広がると思います。

設置方法の②を使えばメニューバーが上にあるデザインも作れるようになります。

メニューバーの作成方法は下記記事をお読みいただけると自分で作れるようになれます(^_-)-☆

CSS&HTMLのオススメアイテム

私自身まだまだ分からないことだらけですが、出来ることが増えると楽しくなります。

同じような方にオススメしたい本を1個だけ紹介します。

勉強しても正直すべてを覚えていられるわけではないのでとても重宝しています。

長く使うはずなのでコスパは最強といっていいと思います(^^♪

コメント

タイトルとURLをコピーしました