WordPress(ワードプレス)のテンプレート「Simplicity」の編集

今回の講義は、前回の講義でワードプレス(WordPress)にインストールしたSimplicityのカスタマイズについての解説です。

あなたのサイトを訪れた方が、まず一番最初に目にする大切な場所です。ここの第一印象であなたのネットビジネスがどのような内容なのかを訪問者は把握するでしょう。

ですので、あなたが訪問者に向けて発信したいメッセージをキチンと受け取って貰えるように精魂込めてしっかり作りましょう。

動画では、初心者の方にも理解しやすように解説していますので、ぜひご覧ください。

目次<非表示>

①WordPress(ワードプレス)のテンプレート「Simplicity」の編集の解説動画
②Simplicityのヘッダー画像サイズについて
③Simplicityのヘッダー画像設定
・ヘッダー画像がジャストサイズの場合
・ヘッダー画像が違うサイズの場合

     ④ヘッダーの高さ調整
     ⑤ロゴ画像設定
     ⑥カラー編集
     ⑦スキンと背景画像設定

WordPress(ワードプレス)のテンプレート「Simplicity」の編集の解説動画

ヘッダー画像の作り方は【Mac版】Photoscape Xの導入と使い方で解説しています。

【Mac版】Photoscape Xの導入と使い方

Simplicityのヘッダー画像サイズについて

Simplicityのヘッダー画像のサイズ:「1070×100ピクセル」

➡️このサイズで作っておくと画像挿入時に編集作業をしなくて済むので効率的

Simplicityのヘッダー画像設定

次は、WordPress(ワードプレス)でカスタマイズしていきます。

ワードプレス(WordPress)にログイン

管理画面のダッシュボードの左サイドメニューで「外観」から「ヘッダー」を選択

「現在のヘッダー」から「新規画像を追加」を選択

「ファイルをアップロード」のタブを選択し「ファイルを選択」をクリック

使用したい画像を選択して「開く」をクリック

画像のアップロードが終了したら「選択して切り抜く」を選択

ヘッダー画像がジャストサイズの場合

上記で説明した「1070×100ピクセル」のヘッダー画像のサイズで作成した場合、画像を切り抜く必要はありませんので「切り抜かない」をクリックすればヘッダー画像の設定は完了となります。

ヘッダー画像が違うサイズの場合

逆に、違うサイズの画像を選択した場合、「選択して切り抜く」をクリックすると画像の一部がハイライトされた画面が表示されますので、お好きな箇所をドラッグして切り抜く範囲を指定します。

位置を指定が終わったら「画像切り抜き」をクリック

ヘッダーの高さ調整

ヘッダーの高さ:ヘッダーの上の部分から、グローバルメニューの上までの幅のこと

➡️Simplicity初期設定では「100」ピクセルで、任意の数字を入力して変更が可能

ロゴ画像設定

ロゴ画像設定:サイトタイトル(ヘッダー画像の上に表示されている文字)をロゴ画像に変更可能

サイトタイトル:クリックすると、どのページにいてもトップページに戻る

サイトタイトルにカーソルを合わせて、カーソルの形が手の形に変わればトップページへのリンクが貼られていることになります。

➡️Simplicityは、サイトタイトルにトップページへ移動するリンクが自動で貼られいる

このサイトタイトルをロゴ画像に変更することが可能で、ロゴ画像にも自動的にトップページのリンクが貼られます。

【変更の手順】

「ロゴ画像」欄にある「画像を選択」をクリック

「ファイルを開く」から「ファイルを選択」をクリック

使いたい画像を選択して「開く」をクリック

画像のアップロードが終了したら「画像を選択」をクリック

画像挿入後、「ロゴを画像にする」のチェックボックスにチェック

※ロゴ画像は事前に作成して準備しておくことが望ましいです

カラー編集

色の編集:あなたのサイトをオリジナリティ溢れるものに演出できる

ダッシュボードの左サイドメニューから「外観」の中から「カスタマイズ」を選択

「色」を選択する

お好みの色に変更する

【色をカスタマイズできる種類】

・背景色

・リンク色

・リンクホバー色(カーソルをリンクに合わせた時の色)

・サイトタイトル色

・サイト概要色

・グローバルナビ(グローバルメニュー)色

・グローバルナビリンク(グローバルメニューの文字)色

スキンと背景画像設定

スキン:豊富な種類でサイトの背景画像をカスタマイズできる

➡️Simplicityの特徴でもあり、とても使い勝手がいいためおすすめ

動画の方がイメージをつかみやすので、ぜひご覧頂ければと思います。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする