こんにちは、カプリです。
今回はワードプレスのいくつかの箇所で
画像をアップロードして、テンプレート上の画像を
変更していくやり方についてご紹介します。



(動画準備中)



ここでは賢威7テンプレートを使用していますので、
テンプレートによっては表示されていない項目があると思います。



ただし基本的は使い方は同じなので、
参考にされてみて下さい。



賢威7の管理画面には「賢威の設定」という項目があります。
ここにカーソルを置くと「賢威の設定」「トップページ」「一覧ページ」
「SNSの設定」「フッター」が表示されます。



まずはロゴ画像をアップロードしていきましょう。
管理画面の「賢威の設定」から「賢威の設定」をクリックして、
画面の中ほどを見て下さい。



すると「ロゴ画像」という項目がありますので、
そこにある「画像を設定する」をクリックして
ロゴ画像をアップロードしていきます。
ただし、ここでアップロードできる画像の容量は最大で30MBです。



画像をドロップするか「ファイルを選択」をクリックします。
アップロードしたいファイルを選択したら
「開く」をクリックします。



「タイトル」は必須項目になるので必ず記入します。
「リンクURL」のところは「ファイルのURL」を
クリックして画像URLを表示させます。



配置やサイズは自由に選んで下さい。



配置については後で表示させてみて、
歪みなどがある場合は調整が必要です。



「投稿に挿入」をクリックして画面の一番下にある
「変更を保存」をクリックします。
画面左上の「サイトの表示」から反映状態の確認をします。



位置の確認ですが、パソコン、タブレット、スマホと
媒体別にチェックしていきましょう。



簡単に確認する方法は管理画面の「外観」から
「メニュー」を選択して「ライブプレビューで管理」をクリックします。



すると画面の左側にパソコン、タブレット、スマホの
アイコンが並んでいますのでそれぞれクリックします。



ここでは例としてロゴ画像を変更する方法をご紹介しましたが、
これと同じ手順で「賢威の設定」⇒「トップページ」の
「メイン画像」、「SNSの設定」の「共通のサムネル画像」、
「ランディングページ一覧」⇒「新規追加」・「投稿の編集」の
画面下にある「フルスクリーン用画像」、「キャラ設定一覧」⇒
「キャラ登録」の画像も変更できます。



次に「固定ページ」や「投稿」にある「メディアを追加」から
画像をアップロードしてコンテンツに
挿入していく方法を説明します。



まずは管理画面の「固定ページ」か「投稿」から
「新規追加」をクリックして編集画面を開きます。



編集画面は「ビジュアル」と「テキスト」の
2つが用意されていますが「テキスト」の画面を
使用した方がコードなどを書き込むことが
出来ますから便利です。



メディアを追加をクリックします。
ファイルをアップロードする場合はアップロードする
ファイルを画面中央にドロップするか「ファイルを選択」を
クリックしてアップロードする画像を選択したら
「開く」をクリックします。



ここでの注意点ですが、画像のファイル名は半角英数を使用して下さい。
ファイル名が日本語の場合、URLが非常に長いものになり
SEO上好ましくありません。



タイトルを記入したら「配置」を決めます。
次にリンク先ですが、メディアファイルにすると
画像をクリックして拡大することができます。



なので拡大画像を見て頂きたい場合は
メディアファイルにします。
通常は「なし」になるかと思います。
サイズはコンテンツに合わせて選択します。



そうしたら「投稿に挿入」をクリックします。
テキスト画面には画像ファイルのコードが挿入されます。
ここに「alt=””」という個所がありますからSEO対策
として必ず画像の簡単な説明を入れます。



以上がワードプレスに画像をアップロードする方法です。



ただし、この方法で画像をアップロードするよりも
FTPソフトを使いサーバーに直接アップロードする方が
作業効率がいいです。



なのでFTPソフトは必ず使用してみて下さい。
始めは使いにくいですが、慣れてくれば作業を
加速化させることが出来ます。
おすすめは無料で使うことができるFFFTPとFileZillaです。



FFFTPはWindowsの定番ソフトでMacでは使用できませんが
FileZillaはWindowsとMacの両方で使用可能です。



FFFTPのインストールと使い方は
以下のリンクを参考にされてみてください。



無料のFTPソフトFFFTPのインストールと使い方



FileZillaのインストールと使い方は
以下のリンクでご紹介しています。



FileZillaのダウンロード方法と使い方(MACも対応)



それでは最後までお読み頂いてありがとうございました。