アメブロを見る９割以上のかたは
スマホと言われているなか
スマホからもヘッダーが見えるようにすると
一気にオリジナリティが出せますよ♡
ある程度「HTML」や「CSS」を
触ったことのあるかたは
ぜひチャレンジしてみてください(*^^*)
まずは「CSS」に追加するので
アメブロ管理トップから
デザインの設定ページに行き
CSS編集デザインになっているか確認。
「CSS」が編集できるようでしたら
編集できる画面へクリック
ブログデザインのCSSの編集
というページに行きましょう。
.sp_header{
display:none;
}
}
上記コードをコピーして準備ができたら
CSSの編集画面の1番下までスクロール
コピーしたものを最下部に貼り付け
これで「CSS」の編集は完了。
緑色の保存ボタンをクリック
これで下準備はOKです♡
ブログの記事を書く画面に行き
記事の一番上に
ヘッダーの画像を貼り付け。
＼今回はテスト用にこちらをデザインしてみました♡／
画像を貼り付けたら
記事を書くページをスクロールして
下の方にあるこちらのボタンで
▼▼▼
「HTML表示」にしてもらい
編集ページへ。
画像URLの後ろにclass="sp_header"を
追加したいので
<a href="画像URL"><img">
を探しましょう。
画像URLは結構長いので
わかりにくいけれど
一行目の最初の方に「<a href="」
後半のほうに「jpg" ><img 」があります。
場所が確認できたら
をコピーして
<a href="画像URL"★★><img">
★★の部分にコピーしたものを貼り付ける
URLが多少違う場合がありますが
だいたいこのパターンです
①<a href="~~~~jpg"class="sp_header"><img src="~~~~~~~">
②<a href="~~~~jpg"class="sp_header"><img alt="~~~~~~~">
①<a href="~~~~png"class="sp_header"><img src="~~~~~~~">
これでスマホからヘッダーが見えて
パソコンからは二重に見えないように♡
完了したらまた通常表示に戻して
いつも通り記事を書いてください(*^^*)
表示を確認しましょう♡
記事を書くの隣にあるプレビューをクリック
そうすると
まずはパソコンでの表示が見られるので
設置したスマホ用ヘッダーが
見えないようになっているか
確認してください
もしここで
スマホ用ヘッダーが見えているようだと
「CSS」もしくは「HTML」にミスがあるので
やりなおしてみてください
そのあと
スマートフォンでのプレビュー画面を
クリック
ドキドキ・・・・・♡
ドキドキ・・・・・♡
できてますーーー(*^^*)
素敵なオリジナルブログページになりました♡
プレビューで確認できたら
投稿ボタンをクリックして
もう一度
パソコンとスマホから
ご自分のページを見て確認してください
画像ひとつなんですが
味気なかったスマホのアメブロが
一気に華やぎ
伝えたいことが
一目でわかるブログになりますよ♡
画像を作るときは自由なサイズで
お作り頂いてOKです♡
スマホの記事画面に貼ると
自動的に画面枠の横幅に調整してくれるため
基本的にはどのサイズでも大丈夫となっております
画質を考えるとおすすめとしては
１０００×４００pxくらいが丁度良いです！
わたしはパソコンと同じサイズ
１１２０×５００pxで作っております♡
実は慣れてしまえば３STEPでできちゃう
簡単デザインテクニック♡
管理画面のcss編集に下記を追加。
@media screen and (min-width: 481px){
.sp_header{
display:none;
}
}
記事のトップにスマホヘッダー画像を貼る。
HTML表示にして、<a href="〇〇"★★><img src="〇〇">
★★の位置にclass="sp_header"を入力。
これだけなので
ぜひぜひ気になる方はチャレンジしてみてくださいね♡
お役立ち♡関連記事
▶雑誌掲載の営業がきたので「お金払えばだれでも載せるんですか？」と聞いてみた
