賢威7のヘッダー画像サイズとスマホ用コードの位置について

この度、賢威7で新しくサイトを解説したところヘッダー画像でさっそく躓きました(汗)。

僕はstingerシリーズ、賢威6.2、賢威7とやってきましたがヘッダーサイズ及びスマホヘッダーサイズと位置を整えるのに今回は少し手こずりました。

その内容について解説していきます。

賢威7のヘッダー画像サイズ

賢威7になってヘッダー挿入がとても簡単に細かい設定が出来るようになりました。

6.2でも出来たと思うのですが、視覚的により簡単になったという印象です。

まず、ダッシュボード画面の『賢威の設定』を選びます▼

2117_c

 

次にロゴ画像の『画像を設定する』をクリック▼

2117_d

 

『ファイルを選択』を選び指定のヘッダー画像を選びます▼

2117_e

 

ヘッダー画像は1600×427画像を使ってみます。こちらを指定します▼

2117_b

 

するとこんな感じで選択されてるので、▼

2117_f

 

『投稿に挿入』を選択します▼

2117_g

 

プレビューするとこうなります▼

2117_h

丁度いい感じになります。

 

では、スマホ表示はどうなるのか?

チェックしてみるとこうなります▼

2117_j

 

ん~別に問題ないんですが、縦幅が狭く感じます。

スマホ用サイズのヘッダー画像の設定

賢威7に関してヘッダーのレスポンシブがどうも上手く対応していない雰囲気なので、スマホ用ヘッダー画像を用意してPCと切り替える設定を行うことにします。

まずはスマホ用サイズの画像ですが、600×200を用意しました▼

2117_a

 

この画像URLをbase.cssの下記コード場所に書き込みます▼

 

スマホの表示を確認すると・・・▼

2117_k

 

上下の余白位置は今回特に気にならなかったのですが、もしも埋めたい場合はbass.cssの設定をいじれば対応できます。

ただ、下の余白位置は埋めてしまうと記事を閲覧時にルートの表示が重なってしまうため今くらいの位置がギリかなと思います。

 

記事を表示した際のヘッダー画像下はこんな表示が出てくるのでスペースが少し空いているんです▼

 

余白設定も、もう少し設定を変えればもっとスマートなヘッダーレイアウトになるかもしれませんが今回は特にそこまでの設定をするつもりもなかったのでPC用とヘッダー用で画像を別に用意して対応しました。

恐らく賢威7はまだ自分も設定していないたくさんの便利要素があると思うので、今後取り入れる時にまた報告していきます!

 

 
スティーブン倉田の無料メルマガ
 

   

コメントを残す

サブコンテンツ

このページの先頭へ