アメブロブログヘッダー変えたら味が出た（PC編）


いつでもハロウ！

まじかるクラウン元イラストレーター25年歴/

頑張りすぎる人間関係専門カウンセラー

もりわきまりこです

 

【自己紹介 ①】不登校になるまで

【自己紹介 ②】働く引きこもりイラストレーター

​【自己紹介 ③】自分を棚に上げたままでカウンセラーになりました(最終話)

 

焦ってもいい、間違えてもいい
ゆっくりやるの、それでいい
 
間違えたらやり直せばいいだけ。
 
 
メルマガのステップメールに続き
パソコンのブログヘッダーも
3年ぶりリニューアルです。
 
遠い昔に描いたカットイラストを
コラージュしました。
 
パチパチパチ👏👏👏
 
 
しかし！ここからだっ
 
ヘッダー画像作っても
アメブロ設定デザイン画面に
埋め込んで行かなければ
反映されません。
 
わたしは、涙が出るほどの
ガチの機械操作音痴！！！
 
今日もネットでいろんな親切な人の
手取り足取り情報を
3つくらい見ながら
 
やっとなんとか形になりました。
 

  まずはパソコン用ブログヘッダー設置から！

 

🔸下準備
新CSS：横1,120px× 縦400〜600サイズで
ブログヘッダーを作っておく。
(わたしは縦450サイズで作ってます)
 
画像加工ソフトおすすめです！
 

 

❶
アメブロの「ブログ管理」(マイページ)
→設定→デザインの設定の順にクリック
 
 

下にスクロールしていく
「カスタム可能」を選択

 
↓

①好きなレイアウトを決めて

②「適用する」ボタンをクリック

image
↓
「css編集をする」をクリック
image
 

❷

「ブログデザインのcssの編集」画面に

切り替わる。

①「ファイルを選択」からヘッダー画像を選び

②「アップロード」をクリック

 

 

❸

アップロード成功するとこの画面になる

↓

③この画像のパス

「http://〜…」から始まるURLをコピーする

 

❹

そのままモリモリ同画面

一番下までスクロールしていく。

 

❺

下記コードを、マルっとコピーして

/* ▼ヘッダー画像の設定▼*/

/* ヘッダー画像を設置 */

.skin-bgHeader {

background: no-repeat scroll center top;

background-image: url(ヘッダー画像のURL);

} /* ヘッダーの高さを設定 */

.skin-bgHeader a {

height: 400px;

} /* ブログタイトルと説明文を消す */

.skin-headerTitle { display: none; }/*

▲ヘッダー画像の設定▲*/

 

スクロールした画面の一番下に貼り付ける

 

ここから、今、貼り付けたものを編集する。
 

❸ でコピペした

③「この画像のパス」URLを

上記枠内にある

ヘッダー画像のURLという文字を

まずは消してから、同じ場所にペーストする

 

 

ヘッダーの高さは、400pxとありますが

300～600pxサイズ内なら

サイズは自由に変えられるのだそう。

 

はい！一応でけた！！

 

❻

しかし！保存ボタン

押す前に

 

必ず「表示を確認する」ボタンクリックして

プレビュー見て

ブログヘッダーが反映されているか

確認しよう。

 

 

➓

画面反映確認できたら
「保存」をクリック！
すごい旅路・・
 
皆様のリニューアルを祈る！

 

こだわりを諦めることでふっと気楽さが蘇るメルマガ、ご登録後暮らしの中ですぐできる7通のワークもあなたの応援団しています

 

初日7日間『お金の悩みに特化した』ステップメールつき。


 

 

メールマガジンはセッションの優先予約・セミナーメニュー情報をお知らせしています

 

心理カウンセラーの棒読みラジオです

きいてねーーー