読者です 読者をやめる 読者になる 読者になる

Modernist - テストブログ -

テーマ「Modernist」のテストブログです。

記事タイトルの背景を変える

ある程度CSS等について知っている人は、いきなり手順の4. からでOKです。

また、CSSやURL という言葉に馴染みのない人は、手順の1. から順番に読み進めていくとよいかと思います。

 

それでは説明していきます。

概要

次のコードAを「デザインCSS」の一番下にペーストすればOKなのですが…(下に続く)

コードA

.page-entry .entry-header {
   background: #222 url(http://img.f.hatena.ne.jp/images/fotolife/D/DDramonQ/20161226/20161226224820.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   }

f:id:DDramonQ:20170103234113p:plain

 

 

コードA赤色の部分自分の設定したい画像のURLに置き換える必要があります

  そのために先ずは、はてなフォトライフに、自分の設定したい画像をアップロードする必要があります。

 

手順

1. 設定したい画像を「はてなフォトライフ」にアップロード
2.画像のURLをコピー(ページ最下部の「解説」にジャンプ)
3.赤色部分を消して、その部分に画像URLをペースト
4. コードA を丸ごと「デザインCSS」最下部にコピペ

 

因みに、上のコードのまま「デザインCSS」にコピペした場合は、こんな感じになります🌟

 

f:id:DDramonQ:20170103233414p:plain

 

画像ソース: Joshua Earle --- Unsplash.com - Night Sky - 

unsplash.com

フリーライセンスなので、ご自由にお使い下さいとの事です。

 

 背景画像の設定パターン4 種

f:id:DDramonQ:20170103225205p:plain

 

分かりやすいように、この画像を使って説明していきます。

背景画像の設定方法は色々あるのですが、ここでは比較的分かりやすい4パターンに絞りました。

 

上 

f:id:DDramonQ:20170103225550p:plain

.page-entry .entry-header {
   background: #222 url(bg.jpg);
   background-repeat: no-repeat;
   background-position: center top;
   background-size: cover;
   }

 

中 

f:id:DDramonQ:20170103225516p:plain

.page-entry .entry-header {
   background: #222 url(bg.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   }

 

f:id:DDramonQ:20170103225629p:plain

.page-entry .entry-header {
   background: #222 url(bg.jpg);
   background-repeat: no-repeat;
   background-position: center bottom;
   background-size: cover;
   }

 

中-❷

f:id:DDramonQ:20170103225619p:plain

.page-entry .entry-header { 
   background: #222 url(bg.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   }

  

[注意]こちらの設定4種類のコードをコピペする場合も、bg.jpg の部分を、自分の設定したい画像URLに書き換えてから、「デザインCSS」に丸ごとコピペして下さいね🌟

 

[補足] 画像のURL ってどこにあるの?

 

( i )「フォルダを編集」をクリック

 f:id:DDramonQ:20170104002613j:image

 

( ii ) 「編集」をクリック

f:id:DDramonQ:20170104002636j:image

 

( iii )☑️が入ったことを確認後、「ブログに貼り付ける」をクリック 

f:id:DDramonQ:20170104002717j:image

 

青マーカーの部分をコピーし、コードA赤色部分にペースト 

f:id:DDramonQ:20170104002656j:image

<img src="http://img.f.hatena... .png" alt="...'>

の青色部分

(末尾が.jpg の場合もありますがそれでOKです)