のんびりよりみちきっぷ

考えた事や実施したことをのんびりと。

はてなブログ タイトル画像の設置とサイズ調整

新しいブログを作っている過程を紹介し始めて3記事目です。

 

今回は前回作った画像を、実際にブログのタイトル画像として設置したのでそれを紹介します。

 

画像の設置は「ダッシュボード」→「デザイン」→「カスタマイズ」からヘッダを選択すると、「画像をアップロード」というボタンを出てくるのでそこをクリック。

 

ここですね。

f:id:yorimichi_ticket:20170629224423p:plain

 

 

そして位置の調整画面に移ります。

 

あれ、ちゃんと収まらない。。。 

f:id:yorimichi_ticket:20170629224440p:plain

 

 

画像サイズを変えてからアップロードしようかとも思いましたが、CSSで直せました。

f:id:yorimichi_ticket:20170629230121p:plain

 

デザインCSSをクリック。

 

下のコードの追加で無事全体収まりました。 

 

タイトル画像の設定ではテキストも入れるかどうかも選べるんですが、(画像アップロードボタンの下の表示設定)それぞれCSSが異なります。

 

◆画像+テキスト表示

.header-image-enable #blog-title #blog-title-inner {

    background-repeat: no-repeat;

    position: relative;

    height: 320px;

}

 

◆画像のみ

.header-image-only #blog-title #blog-title-inner {

    background-repeat: no-repeat;

    position: relative;

    height: 320px;

} 

 

画像の大きさによってheightを変更して調整できます。

 

切れることなく全体が表示されました。

f:id:yorimichi_ticket:20170629224916p:plain

 

 

 

ちなみにCSSを記述するにあたって、ブラウザの「Google Chrome」の機能でデザインを確認できます。

今回もこれで確認しました。

 

 

 

確認したいページを表示して、画像のところで右クリック。

それから「検証」を押します。

f:id:yorimichi_ticket:20170629224523p:plain

 

コードがずらっと表示されるので、マウスポインタを色々移動させると、記事の色が変わります。

 

そこのCSSを確認して、実際に値を入れてみると、その値での確認が行えます。

 

今回はheightの初期値200pxでしたが、それを300pxとか310pxとか色々いじりながら確認しました。(まぁ、画像サイズを入力しちゃってもいいと思いますが。。。)

 f:id:yorimichi_ticket:20170629224748p:plain

 

でこの部分をコピーして「デザインCSS」に貼りつければOK。

 

 

タイトル画像の挿入は初めてのことだったので時間がかかってしまいました。。。

 

これからやろうとしている方の参考になればと思います!