2017/09/17

WordPressテーマ『ELEPHANT』でフルワイド画像を使う時の注意

 

スポンサーリンク

プロフィール

この記事を書いている人 - WRITER -


子どもと一緒に自分も楽しめることを探すのが得意なアラフォーシングルマザー。ライフツールはMac Book Air/iPhone7/ジブン手帳/EOS kiss X4/EOS M10など。昨日より今日・今日より明日が最高に幸せ!と言えるような日々を送ることが目標。

mariko

この記事を書いている人 - WRITER -

子どもと一緒に自分も楽しめることを探すのが得意。お金の話はずっと苦手だったけど、離婚してシングルマザーになったのを機に勉強する。使うところ締めるところのメリハリをしっかりしつつ、昨日より今日・今日より明日が最高に幸せ!と言えるような日々を送ることが目標。

このブログで使っているテーマは

ELEPHANT SINGLE

です。

こちらの「使い方&解説ページ」を参照しながら設定をしていくと、現在の私のページのようなブログが悩まず作れます。

初期設定でも作り込んだブログのように見えるのに、

”細かいカスタマイズでも、cssやphpファイルをいじることなく、視覚的にわかりやすくできる!”

が実現されたテーマで使いやすいです。

 

そして、特徴の一つに、

という機能が実装されています。

 

どーん!と画像がフルワイドで表示されるのはインパクト大ですよね!

そんな便利な機能を使うときのちょっとした注意点をご紹介します。

フルワイドにしたい画像の選び方

フルワイドな画像を使う場合、両サイドが少しカットされます。

例えば、写真を自宅プリンターで『フチなし印刷』するときを思い浮かべてみてください。

縦横比などにもよりますが、フチが出ないように用紙より少し大きめに印刷されると思います。

 

ELEPHANTでフルワイド画像を挿入し、表示する場合も似ています。

両サイドを少し外側に出して、しっかりフルワイドに表示されるようになっています。

 

例えば、この写真(サイズ2000×500)をフルワイド画像として表示してみようと思います。

このようにビジュアルモードに記述して表示させると、

実際のフルワイド画面としての見え方は、このようになります。

両サイドが少し見切れているのがわかりますでしょうか。

実際は画像そのものが切れているわけではないので、ブラウザの画面縮小機能を使うと(ここではSafariの場合)

このように全部観ることができます。

ですが、知らない方はそこまでしないかもしれません。

フルワイドで表示させる画像を選ぶ際は、表示させたい部分が少し真ん中に寄っているものを選ぶのがいいですね。

 

フルワイド画像に直接文字を書き込む場合

画像に直接文字を書き込んだ場合も、場所によっては見切れたように見えてしまうこともあります。

こちらの画像を使うと、

ブラウザ上ではこのように見えます。(これもブラウザの縮小機能で縮小すると上の文字も出てきます)

画像に直接文字を乗せる場合は、あまり両サイドに寄りすぎないように気をつけてくださいね。

 

フルワイド画像を背景にして文字を乗せる場合

ELEPHANTのデモページ『ELEPHANTで使える便利なショートコード』の中に

今風の画面いっぱいに広がるランディングページで画像の上に文字やボタン・画像などを設置

といった項目があります。

 

上のフルワイド画像だけの場合、ショートコードの間に画像を挟んだので、wordpressはビジュアルモードのままでもうまくいきました。

この、画像の上に文字やボタンなどを設置する場合は、ショートコードの中に画像のURL(アドレス)を入れるので、wordpressはテキストモードでURLを貼り付けてくださいね。

  1. ELEPHANTのデモページからショートコードをコピーして、まずはビジュアルモードでショートコードを貼り付けます。

  2. 次に、”メディアを追加”ボタンを押して、追加したい画像を選択し、その画像のURL(アドレス)をコピーします。

  3. そして、テキストモードに変えて、”ここに画像のURLを入力”を選択します。

  4. 先ほどコピーした画像のURLを貼り付けましょう。

まとめ

フルワイドなランディングページでフルワイドな画像を使うときの、気にしておいたほうがいいポイントはいかがでしたでしょうか?

  • 両サイドが切れて見える場合があるので、表示したい部分が少し真ん中寄りの画像を選ぶ。
  • 画像に直接文字などを書き込む時は、両サイドに寄らないようにする。
  • フルワイド画像を背景にして文字を乗せる時、ショートコード内への画像URLのペーストはテキストモードで。

WordPressテーマ『ELEPHANT』は、デモページだけでも使い方や解説の情報が盛りだくさんです。

でも、

「さらに初心者向けに教えて欲しい」とか、

「こういう機能はないのかな?」とか、

もっともっと思うことがあるかもしれません。

ELEPHANTには、Blog Marketing School(通称:BMS)に半年間在籍できるというサポートがついています。

BMSは、ELEPHANTを作ったJUNICHIさんが運営するブログのオンラインスクールで、わからないことを質問するだけでなく、在籍するみんなでブログを書くことを楽しむ企画がいっぱいです。

ELEPHANTに興味を持った方は、↓こちらからELEPHANTの説明ページをご覧くださいね。

また、別のテーマを使っていても、Blog Marketing Schoolに参加できますよ!

ELEPHANTだけでなく、WordPressの一般的なことなども質問したりでき、企画される各種イベントは使っているテーマに関係なく開催されることがほとんどです。

一人でブログ書いているのつまらないなぁ〜と思ったら、ぜひ参加を検討してみてくださいね。

 

この記事を書いている人 - WRITER -

子どもと一緒に自分も楽しめることを探すのが得意。お金の話はずっと苦手だったけど、離婚してシングルマザーになったのを機に勉強する。使うところ締めるところのメリハリをしっかりしつつ、昨日より今日・今日より明日が最高に幸せ!と言えるような日々を送ることが目標。

Copyright© まいにちたのしい , 2017 All Rights Reserved.