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です)

 

テーマ『Modernist』ver.1.4 に更新しました

大変長らくお待たせしました。やっと表示の不具合直し、できました?

 

特にPCビューが、ヒドイ事になっていて、すみませんでした_:(    _´ω`):_

サイドバーをホバー(マウスオン)したら、色反転とか…_:(    _´ω`):_? すみません…_:(    _´ω`):_?

 

エントリーページも、記事部分が短い場合、表示崩れがあったのですが、直しました。

 

クロスブラウザ表示にも、なるべく対応しました

後、これは既に利用されている方には、あまり関係ないかもですが。

様々なブラウザでも、同じように表示されるように対応しました? ただ、どうしても新し目のCSSスタイルを使用しているため、どうしても旧バージョンのPCやブラウザだと、うまく表示されないかもしれません。その際は何卒ご容赦下さいませ(。•ㅅ•。)?

 

テーマVer.1.2 に更新しました

放置気味だった、PCビューをメインに細かい箇所を幾つか修正・カスタムしました。

 

特に「サイドバー」の「アクセスランキング」はテーマと合うか微妙だと思い最後まで悩みましたが、実装しました。

   - ホバーアクション(マウスオン時の動き)

   - Blur(ぼかし効果)

   - 黒系フィルター効果

 

等少し凝ってみました?

 

皆さんって自分の記事読み返したりします?

僕はざっとですが、読み返したり、「あれなんだったっけ?確かブログに書いてたはず」と自ブログを検索したりするような使い方をします。これって珍しいんですかね、それとも皆んなもそういう使い方ってします?(* ॑꒳ ॑*)??

純粋な疑問で、みなさんがどういう使い方されてるのかも少し気になったりする今日この頃ですw

 

もしお手隙でしたら、「こんな使い方してるよー」「いや、それはないな」など、教えてくださると嬉しいです~٩(⁼̴̀ꇴ⁼̴́٩)♪ ただの好奇心ですw|*´-`)

 

【カスタマイズ (PCユーザー) 】"ヘッダー画像背後の色" を変える

 PCから観覧した場合、フルスクリーン等にすると、ヘッダー画像の左右や下に、茶色の部分が現れます。これは、その色を変える解説です。

 

 

色の変え方

以下のコードBを「ダッシュボード」→ 「デザイン」→「詳細設定」→「デザインCSS」の一番下にコピペして下さい。

 コードB

body:not(.page-entry) #container #blog-title {

	background: transparent; /*透明 */

	}

 

ちなみに、コードBをそのままコピペした場合は、色は透明になります。初期設定のまま(ブログ全体の背景を変えずに)、この部分だけを透明にした場合は、小さいドットの背景が表示されます。

 

透明以外の色にする

background:  transparent ;

赤色箇所を、自分の好きな「色のコード」に変えてから、「デザインCSS」にペーストして下さい。

 「色のコード」は以下のサイトを参照して下さい(•ᵕᴗᵕ•)⁾⁾?

 

www.color-sample.com

 

#◯◯◯◯◯◯ の形で表記されている文字列が、「色のコード」です。HEX とも表記されています?

 

代表的な色のサンプル書き方の例を書いておきます。

 

白  #ffffff  → background: #ffffff;

黒  #000000 → background: #000000;

灰色  #aaaaaa  → background: #aaaaaa;

水色  #00bdff  → background: #00bdff;

【Q&A】ヘッダー画像の変更時 | タイトル部下側に" 空白 " ができてしまう

画像の上半分側を切り取り指定する

切り取る選択部分[ ] の"一番上はし"から、画像が表示されます。なので、もし「画像の真ん中より下側」を選択してしまうと、タイトル部・タイトル部下に" 空白 "ができてしまいます。縦の長さが足りなくなってしまうからです。

 

なるべく「画像の半分より上側」を、切り取り指定してみて下さい。そうするとうまく表示されると思います?

 

 

画像が横長の場合

また、画像が横長の場合も、下側に空白ができてしまう場合があります。

解決方法

●画像編集等で上下にフレームを追加して画像の縦長を長くする

 

無料の画像編集アプリケーション( Windows→Windows Store | Mac → App Store )

で高機能で使いやすいものも出ていますので、宜しければご利用ください。

 

またOnline 画像編集サイトもあります。

PIXLR - Autodesk

https://pixlr.com/web

 

f:id:DDramonQ:20161005213844p:plain

f:id:DDramonQ:20161005213852p:plain

f:id:DDramonQ:20161005213858p:plain

Autodeskさんは、工業設計系の、老舗の信頼性の高い会社です。宜しければこちらもご活用ください(* ˊ˘ˋ)*_ _))? 僕も既に何度か使ってみましたw(੭ˊ꒳ˋ)੭✧

 

実際に試してみた

 上

f:id:DDramonQ:20161005220349p:plain

 

f:id:DDramonQ:20161005220355p:plain

 

 

f:id:DDramonQ:20161005220403p:plain

f:id:DDramonQ:20161005220430p:plain

 

 

f:id:DDramonQ:20161005220437p:plain

f:id:DDramonQ:20161005220442p:plain