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
STEP3-3.WordPressテーマ『ELEPHANT SINGLE』の外観のカスタマイズをしよう! | 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

      2017/07/24

STEP3-3.WordPressテーマ『ELEPHANT SINGLE』の外観のカスタマイズをしよう!

 

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は、とても楽しくサイトのカスタマイズができるように作っています。

初心者さんでも色の設定がとても細かく、簡単にできます。オシャレなサイトが誰でもできるようになっています。

 

今回は、ELEPHANTの『カスタマイズ機能』を使って、ブログの見た目を変更する方法を解説していきます。

1.タイトルロゴを設定しよう

タイトルロゴっていうのは、あなたのブログ名の文字の代わりの画像の事です。例えば以下のようなものがロゴ画像です。

 

あらかじめ、ここに設定したい画像を作る必要はありますが、画像さえ作ってしまえばおしゃれなブログにできますね。

ロゴ画像の変更方法は以下の動画で解説しています。

2.サイトタイトル・キャッチフレーズ・サイトアイコンの変更

3.サイトカラー(色)の変更をしよう

WordPressテーマ『ELEPHANT』では、サイトの見た目の色の自由度が高く設計されています。

以下の動画を見ながら、あなた好みのサイトにデザインしてみましょう!

4.ヘッダー画像の変更をしよう

ヘッダー画像とは、トップページに表示されるあなたのサイトの『顔』になるイメージ画像です。

↓↓ ここに設定されている画像です ↓↓
ヘッダー

この部分は、あなたの好きな画像に変更することができます。

こちらは、大きく分けて2つ設定をする必要があります。

  1. パソコンから見たときのヘッダー画像
  2. スマホやタブレットから見たときのヘッダー画像

こちらの2つについて順番に解説していきます。

 

4-1.パソコンから見たときのヘッダー画像の設定

まずはヘッダー画像に使いたい画像を準備しましょう!

ヘッダー画像のおすすめのサイズは横2000px × 縦1000pxの画像です。(pxは画像の大きさの単位:ピクセル)

例えばこんな感じの画像を用意してみてください。

 

もしも画像の大きさの変更の仕方などが分からない場合は、以下の動画を参考にしてみてください。

パソコンから見たときのヘッダー画像を設定しよう!

では動画を見ながら一緒に作業をしてみてください↓↓

※パソコンから見たときのヘッダー画像を設定するときの注意点
ヘッダー画像は基本的に横幅2000px×縦1000pxのサイズを推奨しています。
ただし、見る人のパソコンによって、またその画面の大きさによって見え方が変わってきます。
動画中でも解説していますが、イメージとしては以下のような感じになっています。

パソコンで見た場合

ですので、『ここの部分は絶対見えるようにしたい!』という部分は以下のイメージで、中央寄りのやや下あたりに持ってきてください。

以下に、おすすめの例、悪い例をご紹介しますので参考にしてみてください。

良い例

画像の中央寄りやや下に人物が写っています。この場合、PC・タブレット・スマホでは以下のように、見せたい人物の顔はどの端末で見てもしっかりと写っています。


パソコンから見るとこうなる↓

悪い例

このような画像(人物の顔が画像の上の方にあるもの)はパソコンから見ると顔が切れてしまいます。

パソコンからみるとこうなる↓

 

 

4-2.スマホやタブレットから見たときのヘッダー画像の設定

ELEPHANT SINGLEでは、スマホやタブレットから見たときのヘッダー画像を、別に設定することができます。

というのもスマホやタブレットとパソコンでは画面の大きさが違うため、それぞれの端末に合う画像を設定した方がより美しく見えるからです。

では動画を見ながら一緒に設定をしてみましょう。

 

準備する画像は「横1000px × 縦1000px」の正方形の画像

例えば以下のような正方形の画像を用意してください。

 

以上で、STEP3のELEPHANT SINGLEの基本的なカスタマイズについては終わりです。

是非あなた好みのサイトに仕上げていきましょう!

 

>>次のページ『WordPressの基本的な使い方を覚えよう』へ進む

 

 

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




Copyright© ELEPHANT SINGLE , 2017 All Rights Reserved.