Warning: Use of undefined constant ‘thumb240’ - assumed '‘thumb240’' (this will throw an Error in a future version of PHP) in /home/junichi-2nd/blog-marketing-school.com/public_html/elephant-single/wp-content/themes/elephant-single/functions.php on line 66
ELEPHANTでスマホ用ヘッダー画像が設定できるようになりました&設定方法と注意点 | ELEPHANT SINGLE
Warning: count(): Parameter must be an array or an object that implements Countable in /home/junichi-2nd/blog-marketing-school.com/public_html/elephant-single/wp-content/plugins/wordpress-ping-optimizer/cbnet-ping-optimizer.php on line 533

   

ELEPHANTでスマホ用ヘッダー画像が設定できるようになりました&設定方法と注意点

 

Warning: Use of undefined constant full - assumed 'full' (this will throw an Error in a future version of PHP) in /home/junichi-2nd/blog-marketing-school.com/public_html/elephant-single/wp-content/themes/elephant-single/single.php on line 63

この記事を書いている人 - WRITER -
JUNICHI
ELEPHANT SINGLEの開発者。得意なのはブログ集客・SNS活用法・SEOライティング。 ※このおっさんの取扱注意点:ブログと漫画を描くのが好きで、書けない日が続くとストレスで爆発する。
詳しいプロフィールはこちら

ヘッダー画像とはWordPressテーマELEPHANTで言うとブログのトップページの一番上にでかでかと出てくる画像部分です。

ヘッダー↑これがヘッダー画像です。

 

ですが、せっかく頑張って設定したヘッダー画像ですが、実はスマホで見るとこんな風に見切れてしまう可能性がありました。

スマホ用ヘッダー画像

なんでこんなことになるかというと、PCで見たときのヘッダー画像って横長の長方形なんです。

そしてスマホから見たときのヘッダー画像ってどちらかというと正方形に近い形です。

なので、左右の端っこあたりにある部分は見えなくなってしまうんです。

 

 

そこでこの度、ELEPHANTのバージョンアップでは、

  • パソコンにはパソコン用のヘッダー画像
  • スマホにはスマホ用のヘッダー画像(タブレットもね)

の2種類が設定できるようになりました。今回は新しくELEPHANTで設定できるようになったスマホ・タブレット用のヘッダー画像の設定方法を解説していきます。

動画解説編と画像解説編があるのでお好きな方をご覧ください。

【動画解説】スマホから見たときのヘッダー画像の設定手順

スマホ&タブレット用ヘッダー画像の設定手順

 

スマホ&タブレット用ヘッダー画像に文字やボタンを載せる方法

 

↓使うコードはこちら

 

 

【画像解説】スマホから見たときのヘッダー画像の設定手順

■まず初めに■

この作業は、ELEPHANT SINGLEのバージョン1.1.3以降でしかできません。

まだバージョンが1.1.2以下の数字であれば、WordPressのダッシュボードにいき、

『ダッシュボード』⇒『更新』

の順にクリックし、ELEPHANT SINGLEの新しいバージョンに更新してみてください。

 

 

手順1)まずは横幅1000px × 縦1000pxのサイズの画像を用意しよう

例えばこんな感じの正方形の画像です。(大きさは必ず横×縦、それぞれ1000px以上の大きさにしてください)

 

手順2)WordPressでスマホ用ヘッダー画像を設定

↓WordPress管理画面で「外観」⇒「カスタマイズ」の順にクリック

 

↓次の画面で新しく『ヘッダー画像(スマホ&タブレット用)』というメニューが出来ています。こちらをクリック。

 

↓スマホ&タブレット用に見せたい画像をここで選んでいきます。『画像を選択』をクリック

 

↓『ファイルをアップロード』をクリック

 

↓あらかじめ用意しておいた画像を自分のパソコンからアップロードしてワードプレスの中に取り込みます。

 

↓ ここで先ほどアップロードした画像を選択し、右下の『画像の選択』をクリック

 

↓ そうするとここに入りました。

 

↓タブレットでの見た目を確認します。下の『タブレット画面型のアイコン』をクリックしてみてください。

 

↓そうすると、右側にプレビュー(タブレットで見たときの様子)が分かります。

用意した正方形の画像全てが見える訳ではなく、ある程度このあたりの部分が切り取られて設定されます。

 

↓ 続いてスマホでの見た目を確認しましょう。『スマホ型のアイコン』をクリックします。

 

↓ スマホのア場合はこんな感じで切り取られます。

注意:スマホの画面の大きさによって切り取られる部分や範囲が変わります。

 

これで、スマホ&タブレット専用のヘッダー画像が設定できました。

 

手順3)スマホ用ヘッダー画像の上に文字やボタンを載せる場合

続いて、このような感じでスマホやタブレットから見たときのヘッダー画像の上に文字やボタンを載せる方法を解説します。

 

↓まずは「外観」⇒「ウィジェット」をクリックします。

 

↓『ビジュアルエディター』というパーツがありますのでこれを選びます。(「テキスト」でもOKです)

 

↓ このビジュアルエディターというパーツを『15.特殊ヘッダー画像(SP&タブ)』という中に入れます。

 

↓ するとこんな感じの小さめの画面が開きます。

この赤枠の部分に以下のコードをコピペしてください。

 

↓ こんな感じで貼り付けます。

 

 

↓ボタンには必ずリンクを張らないといけないので注意です。

 

↓透明なボタンを使う場合も同じく文字の部分にリンクを張ってください。

 

↓ 最後に『保存』ボタンをクリック。

 

これで完成!!

 

■タブレットで見たとき

 

■スマホで見たとき

 

スマホ・タブレット用のヘッダー画像に文字やボタンを載せる時の注意点です。

もともとのスマホ用のヘッダー画像上に文字やボタンを載せるショートコードは以下のようになっていました。

↓↓このspeheaderの「spe」の「e」を抜いてspheaderになっていますのでご注意を!!

 

×speheader

〇spheader

 

です。

パソコンで見たときのヘッダー画像に文字やボタンを載せるショートコードに変更はありません。
これまで通り「speheader」をお使いください。

 

この記事を書いている人 - WRITER -
JUNICHI
ELEPHANT SINGLEの開発者。得意なのはブログ集客・SNS活用法・SEOライティング。 ※このおっさんの取扱注意点:ブログと漫画を描くのが好きで、書けない日が続くとストレスで爆発する。
詳しいプロフィールはこちら




Copyright© ELEPHANT SINGLE , 2017 All Rights Reserved.