三昧三昧、更新頻度が高くなっております笑。

 

荷物引っ越し作業の際にブログ始めのカスタマイズ記事を久しぶりに見ておりました。そして改名もあってかイメージが沸きましたので少し触ってみました~。具体的には「ヘッダー画像挿入/タイトル・説明文・画像の位置の変更」のみになります。

 

 

一先ず画像検索です、直ぐに好みのテイストのものが見つかりましたので一気にいけました。色無しで砕け過ぎず現実的過ぎず、正しくイメージ通りです(絵師ノートさん勝手ながら頂戴しております汗笑)。

 

ただ画像の端が綺麗に切れてしまっていたので編集ソフトでぼかしを入れました。そのままサイズ調整を行い下拵えはOKです。

 

あとはCSSの編集、タイトル・説明文・画像の位置を調整して完了です。

 

↑Before

After↓

 

うむ、此度もよろしいですな。個人的にはやり過ぎない域に留まっているかと。タイトルのフォントも変えようと思ったのですが、かなりイメージが変わってしまうので一旦変更無しであります。

 

 

今回は赤色を挿入し、数字を少しずつ弄りながら好みの位置へ持っていきました。

 

/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
background-image: url(https://stat.blogskin.ameba.jp/blogskin_images/20200507/12/00/C7/p/o02500167tulonnote1588823042168.png);
background-repeat:no-repeat;
background-position: bottom 15px right 600px;

}

/* (2-2) ヘッダータイトル、説明文
--------------------------------------------*/
/* ブログタイトルエリア、ヘッダー画像の下にテキストを隠す */
.skin-blogTitle {
z-index: -1;
}

/* ブログタイトル */
.skin-blogMainTitle {
color: #333333;
margin-bottom: 10px;
font-size: 30px;
position:absolute;
top:50px;/*上から*/
left:200px;/*左から*/

}

/* ブログ説明文 */
.skin-blogSubTitle {
color: #878687;
font-size: 16px;
margin-top: 50px;
margin-right: 130px;

}

 

タイトルと説明文で位置調整の単語が違いますが、調べながらコピペを繰り返した所為ですね。結果として思い通りになれば良し笑。本当にインターネット検索の便利なこと、かなり適当な言葉・文章でも直ぐに必要な情報が見つかります。

 

そして相変わらず少し触っただけで散髪したくらいのスッキリ感がありますね~いや、模様替え或いは家具の買い替え並でしょうか。フォントは触るやら触らんやら~。