こんばんは。
エクセルで簡単
アメブロヘッダーも作れる写真編集 講座
です。
***************************************************************
昨日はエクセルのデータをペイントを使ってJPEGに変換する方法を
お伝えしましたが、いかがでしたか
できましたか
その変換したデータを
アメブロのCSS編集に入れ込んでいきましょう
ちょっと難しいかもしれませんが、できるだけ細かくしてみましたので
是非、挑戦してみてくださいね
作ったヘッダーのデータを読み込む方法
① アメブロのマイページを開き、右上にある『 設定 』をクリックする
② ブログデザインの『 ブログデザイン変更 』をクリックする
③ 自分が選んでいるデザインが『 CSS編集用デザイン 』になっているか確認する
『 CSS編集 』をクリックする
私が選んでいるデザインは旧デザインと呼ばれるものです。
新デザインは、色々と不具合？不都合？が生じているという話を
耳にしたので旧デザインにしています。
＜旧デザインと新デザインの見分け方＞
プロフィール欄の写真で見分けることができます。
写真が□ならば、旧デザイン。
写真が〇ならば、新デザイン。
④ 『 ファイルを選択する 』をクリックする
⑤ 『 ヘッダーにしたいファイル 』をクリックする
⑥ 『 開く（O) 』をクリックする
⑦ 『 アップロードする 』をクリックする
□の部分のように、データが読み込まれます
入力してみよう！CSS編集
実際にデータを入れてみましょう。
① CSS編集画面を一番下までスクロールする
ここまでスクロールしてください。
ここに下記の文章を入力して下さい。
**********
→ 先ほど取り込んだ画像のURLをコピーして入力します
URL部分をクリックすると全選択できるようになります。
(1) 右クリック → 『 コピー 』をクリックする
(2) 『 CTRL 』＋C
380px → 画像の設定した高さを入力する
ここまでやったらあとは確認するだけ
ゴールはもう目の前です
□部分の『 表示を確認する 』をクリックする
こんな風に表示のされ方を確認することができます。
イメージと違えばもう一度画像データのサイズを変えたりしてみてください。
「 OK 」ならばあとは登録するだけ。
戻って、□部分の『 保存 』をクリックすると、終了です
お疲れさまでした
最後に・・・
保存をする前だったら□の『 編集前の状態に戻す 』をクリックすると基に戻せます。
CSS編集をする場合は、色々と変更して、調整しながら理想の形を作っていきます。
なので、元のほうがよかった
なんてこともしばしばあります。
そんな時は、Windowsの『メモ帳』や『ワード』などを使って変更する前のCSS編集のデータを
コピーして保存します。
こんな感じに。
今日はハードルが高めだったと思います
私もCSS編集でヘッダーが表示されるようにするまでにものすごく時間がかかりました。。
ネットで色々と調べてながら挑戦するも「表示されない
なぜ！？
」
を繰り返して、どうにか表示することができました。。
------------------------------------------------------------------------
〈追記〉
ヘッダーが表示されない理由に多いのが
「キャッシュ」にあります。
キャッシュをクリアすると大抵表示せれますが
私の場合はそれでもできませんでした
だから余計になぜ
となりました。。
ただ、上でコピーしていただいたものでやったらできましたので、
試していただく価値はあるかなと思ってます
ちなみに、キャッシュとは…
ウェブ上で一度みたページを次に見るときに
速やかにページを表示するためにデータを
蓄積しておく仕組み
------------------------------------------------------------------------
焦らず、ゆっくりと挑戦をしてみてください！
最後までお付き合いありがとうございました。
happy life lab
ライフオーガナイザー® ごとう さちこ
過去の記事はこちらから
