予報では今日はC国から黄砂が飛んで来るとかの話ですが、今の所その気配はありません。

黄砂ならまだ良いのですが、ミサイルでも飛んできたら大変な事になりますね(笑

 

さて、今日は電子工作の部品待ちなので、アメブロのヘッダ画像についてつぶやいてみます。

アメブロには沢山のデザインがありますが、世界でたった一つのデザインを作ってみませんか。

やる気があれば簡単にできます。

それでは、ぼちぼち始めてみます。

ヘッダー画像とは、パソコンで自分のアメブロを開いた時に出て来るホーム画面上の部分です。

赤丸部分がヘッダ画像

 

この部分を自分で撮影した写真や文字でオリジナルの表紙画面を作るものです。

(スマホではオリジナルのヘッダ画面は作れないらしいが有名人は設置できるらしいとか)

P C用

1・ヘッダーに使用する画像をデスクトップに表示して置く(自分で撮影した写真、他)

2・キャンバと云う無料アプリをダウンロードする

3・キャンバのアプリを開きホーム画面からカスタムを選択

4・上部の長方形内に画像の大きさを入力する(推奨1120px X 400px)寸法は大き過ぎればこの数字を小さくすれば変えられる)

5・指定した寸法の白枠ができるので、左のアップロードからファイルアップロードする。

6・アップロードした画像を右にドラッグして白枠いっぱいに広げる。

7・テキスト(文字)を入れる場合は左のTをクリックするとプルダウンにいろいろな文字が出て来るので指定する。(色も変えられる)

8・入力が終わったら左上のファイルからダウンロードを選択

9・右にプルダウンメニューからダウンロードを選択

10・アプリを閉じる

これで、横1120px X 400pxの横長のヘッダに使う画像が完成です。

11・ダウンロード場所からデスクトップ上に横長のヘッダ画像を出して置く

 

次にアメブロを開く

1・ホーム画面からブログ管理

2・デザイン設定

3・デザインカテゴリーの中ならカスタム可能を選択

4・下部にCSS編集用デザインがあるので好きなものを選択

5・ブログ確認・レイアウト変更で自分の好きなレイアウトを選択

6・CSSの編集をクリック

7・ブログデザインヘッダ・背景用画像の追加をクリック

8・ファイルを選択(予めデスクトップに用意して置いた画像を選択)

9・横長のヘッダ画像として作った画像が表示

10・すぐ下に現在使用中のブログデザインのCSSのパスが表示されるのでコピーする

11・すぐ下のCSS画面を一番下までスクロールして最終の表示から一段下げ、下のCSSを貼り付ける。⤵️

 

/* ▼ヘッダー画像の設定▼*/ /* ヘッダー画像を設置 */ .skin-bgHeader { background: no-repeat scroll center top; background-image: url(ヘッダー画像のURL); } /* ヘッダーの高さを設定 */ .skin-bgHeader a { height: 400px; } /* ブログタイトルと説明文を消す */ .skin-headerTitle { display: none; }/* ▲ヘッダー画像の設定▲*/

*注 カッコや1文字でも抜けてしまえば反映されないので注意

 

12・削除した赤い部分に10でコリーしたCSSのパスコードを貼り付ける

13・これで終了

オット・・これでまだ完成ではないのだ(笑

14・すぐ下の欄外にある表示を確認で上手くできたか確認

15・よければ保存をクリックすとホーム画面に反映して完成です

 

おめでとうございます。👏

 

還暦になり猛勉強したHTMLやCSSですが今はほとんど置いて来てしまいました。(笑

アメブロなどはほとんどがこのHTMLやCSS一部JavaScriptで基本の中身はアルファベットや記号で組み立てられています。

(誰でも書きやすいように日本語化されているだけ)