extension」は、トップページのファーストビューが印象的です。メインビジュアルとしてキャッチコピーとサイト紹介文を掲載できるのですが、それがシンプルでカッコイイんですよね。ベースとなる配色を5色から選べる上に、背景には若干グラデーションもかかっているのがまた素敵!でも、このエリアに写真を掲載したいという場合があるかもしれません。いうわけで、メインビジュアルに写真を使う方法です。キャッチコピーとサイト紹介文の色を変える画像を用意し、アップロードするまず、背景とする画像を準備します。今回は1枚画像を横幅いっぱいに表示することを想定しています。現在主流であるフルHDサイズ(1920px*1080px)のサイズがあれば良さそうですね。キャッチコピーとサイト紹介文の可読性を損なわないために暗い画像のほうが良さそうです。(明るい画像を使いたいときはキャッチコピーとサイト紹介文を黒い文字に変更するなどで対応できます)背景画像を作ったら、Wordpressの管理画面の「メディア>新規追加」でアップロードします。対象ファイルのメディアの編集画面で「ファイルのURL」をコピーします。上記の赤枠の部分ですね。後ろのほうが切れて見えないのですが、マウスでグリっと選択するか、カチカチカチっとクリックしていれば全選択できます笑これは別途テキストファイルに貼り付けるか、別タブでこの画面を開いておくなどしておきましょう。デベロッパーツールでCSSを確認ではCSS関連の修正です。【Xeoryカスタマイズ】スマホ表示時の妙な隙間が気になるので修正バズ部が提供している無料Wordpressテーマ「Xeory」。インストールから設定まで、バズ部のサイトやXeory公式サイトを見ればマニュアルは揃っているので躓くことなく出来ると思います。id=”main_visual”>であることがわかります。center;}ですね。これを子テーマのstyle.cssに記述します。記述箇所はココらへんがわかりやすいと思います。宣言の記述は必要な分だけでOK先ほど、該当するCSS記述のなかに宣言が5個出てきました。center;記述するのは先ほどのCSS記述の全てではなく、該当する箇所のみでOKです。今回は背景画像を配置するので、「background-image」が該当します。あと、関連する宣言を2つ、追記します。記述するのは以下の3つです。100%;そして忘れてはいけないのが画像のパスの指定。url();」のカッコ内に記述します。これでメインビジュアルに背景画像を設定することが出来ました。id=”main_visual”>にきっちり収まるようになっています。幅の広いPCなどでは横幅が、幅の狭いスマホなどでは高さが収まるような表示方法です。この値(cover)を変更すると表示方法が変わります。「background-size:100%;」と記述すると画像が100%つまり横幅1920pxの大きな画像が表示されます。background-sizeの仕様」がわかりやすいかと。http://dresscording.com/blog/responsive/background-size.htmldresscording.comキャッチコピーとサイト紹介文の色を変える最初のほうで「明るい背景画像を使う場合は黒い文字に変える」と書いたので、それについてちょこっと触れますね。#fff;」が文字の色を指定している箇所です。#000;」と指定すればOKです。耳垢?髪の毛?耳の中がカサコソ、耳掃除でも異物が取れないときの最終手段!レンジ&オーブンOK!ダイソー耐熱ガラス食器が常備菜やパスタソース保存に超便利!NHKを解約するには?受信契約の解除方法&受信料の精算(返金)原因不明?指の腫れと内出血。ドス黒きこと山のごとし。FEBRUARY29.。