メリ姐自己紹介
・Adobe Illustrater(アドビイラストレーター）
インストラクター
・Adobe Illustrater (アドビイラストレーター）
教室運営
・ヘッダー制作(Amebaブログ・Instagram など)
・デザインワークショップリーダー
・東京在住(56歳)
オリジナルのヘッダーを作ったら
アメブロに設置してみよう〜！
あわてずにやれば
わりと出来ちゃうと思いますよ〜
作ったヘッダーをブログに設置しよう！！
CSSの編集はパソコンからしか出来ませんので
パソコンで自分のアメブロにログインしまーす！
まずは！
ホーム画面の一番上
「ブログ管理」へGo！
左にずらっと並んでいるメニューの下の方。
「デザインの設定」へ！
ここで使用するデザインを選びますが
下の方までスクロールして
「カスタム可能」へ。
「CSS編集用デザイン」の中から
お好きなデザインを選んでください
レイアウトの選択画面になるので
好きなのを選んで「適用する」をクリックします。
ページの上の方に
選んだデザインとレイアウトが表示されていますので
デザインの方の
「CSSの編集」を
クリックして編集画面に入ります。
上の方に
ブログデザインヘッダ・背景用画像の追加
という項目があります。
ここで作ったヘッダーをブログに表示するために
アメーバのサーバーにアップロードします。
「ファイルを選択」をクリックすると
ファイルの選択画面に変わるので
お目当てのファイルをクリックして選択。
「アップロード」をクリックします。
すると元の画面に戻って
選択したファイル名が表示されているので
「アップロード」をクリック
ファイルがちゃんとアップロードされました！
さあ！プログラムに書き込んでいきましょう！
画像のアップロード画面から
そのまま下へスクロールすると
このようにCSSの編集画面があります。
何やら難しそうですけれど
ここはなにもいじりません
この画面を一番下までスクロール。
↓これが一番下。
この一番下のさらに下に
ヘッダー表示用プログラムを
コピーしてペーストします。
ヘッダー表示用プログラム
枠内全部コピーしてください
/* ▼ヘッダー画像の設定▼*/
/* ヘッダー画像を設置 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(オリジナルヘッダー画像のURL);
} /* ヘッダーの高さを設定 */
.skin-bgHeader a {
height: 400px;
} /* ブログタイトルと説明文を消す */
.skin-headerTitle { display: none; }/*
▲ヘッダー画像の設定▲*/
※青文字の400pxはヘッダーの高さです。300〜600pxの間で好きな高さに変えられるので
作ったヘッダーの高さに合わせます。
ちなみにメリ姐のヘッダーは500pxで作っているので500pxに設定しています。
貼り付けられましたか？
そうしたら
また上に戻って
先ほどアップロードしたヘッダー画像のURLを
コピーします。
コピーした画像のURLを
ヘッダー表示用プログラムの
赤字の部分を消して貼り付けます。
これでCSSの編集は出来上がりです！
編集画面の下にある
表示を確認する
をクリックして
正しく表示されているか確かめてみましょう！
ドキドキドキ、、、
ばっちりOKのようです！
確認画面は新規タブで開いているので
OKだったら元の画面に戻って
「保存する」
をクリックしてすべて完了です！！！
自分で出来ると
ホント達成感があって嬉しくなります
このヘッダーは
パソコンからブログを見たときしか見られないのですが
スマホからでも
擬似的ではありますが
ヘッダーっぽく表示させることが出来ます。
メリ姐のブログには
スマホからもヘッダーが見られるようになってますので
見てみてね
スマホ用の設置方法も
そのうちご紹介しますねー
近日募集開始します！
ヘッダー制作のお申し込みは
公式LINEからになります
メリ姐公式LINE
↑こちらをポチッとでカンタン登録！
今日はヘッダー作れんかった〜
こんなのいかがですか〜
メリ姐公式LINE
ヘッダー制作のお申し込みは
公式LINEからとなります。
ご質問・サンプルヘッダーのご感想なども
いただけたらすっごく
喜びます！！