700×420サイズ 【 ↓ このHTMLを編集してください】
【トップページの流れるスライドショーの写真を変更するやり方】
①画像サイズ変更ツールで画像サイズを変更する
上記サイトでスライドショーに追加したい写真のサイズを「700×420」に変更する。
【手順】画像を読み込む→ファイルから写真を選択→縦長写真の場合は先に「画像の一部を切り抜く(トリミング)」で上下の余分な箇所をカット→「画像全体のサイズを変更」で「W:700 H:420」と入力し、縦横比固定とスムージングのチェック✓を外して実行→「保存」”pngで保存”にてファイルに保存する。
②サイズ変更した写真をホームページのメディアに追加する
ホームページ編集画面のメディア→新しいメディアファイルを追加→ファイルを選択→700×420のサイズにした写真を選択してアップロード→追加した写真をクリックし、右下にある画像のURLをコピー
③固定ページ「スライドショー」を編集する
固定ページ「スライドショー」(このページ)に入ります。上記四角BOXに書いてある暗号(HTML)のなかで、「http:// ～ .png」と書かれているのが、今スライドショーに使用されている７枚の写真のURLです。このうち、変更したい写真のURLを②でコピーした写真のURLと入れ替えます。どのURLがどの写真に対応しているかは、上記四角BOXをクリックし「HTML→プレビュー」を押して確認してください。
ちなみに編集する前のHTMLは下記のようになっています。「img01.jpg」～「img07.jpg」が２段書きになっており、同じ数字のところに同じ画像のURLを挿入する必要があります。下にさらに分かりやすく色分けして書いています。
<div class=”slider1″>
<ul>
<li><img src=”img01.jpg“></li> ←01の部分に写真のURLを挿入する
<li><img src=”img02.jpg“></li>
<li><img src=”img03.jpg“></li>
<li><img src=”img04.jpg“></li>
<li><img src=”img05.jpg“></li>
<li><img src=”img06.jpg“></li>
<li><img src=”img07.jpg“></li>
</ul>
<ul>
<li><img src=”img01.jpg“></li> ←上の01と同じ写真のURLを挿入する
<li><img src=”img02.jpg“></li>
<li><img src=”img03.jpg“></li>
<li><img src=”img04.jpg“></li>
<li><img src=”img05.jpg“></li>
<li><img src=”img06.jpg“></li>
<li><img src=”img07.jpg“></li>
</ul>
</div>
④トップページを編集する
一番上の四角BOX内で、写真のURLを入れ替えたら、そのHTML全体をコピーします。
（ <div class=”slider1″> ～ </div> まで全部）。そして右上の「更新」をクリックし、編集画面に戻ってください。
戻ったら左にあるメニューの「外観→カスタマイズ」をクリック。トップページが表示されるので、スライドショーの左上にあるえんぴつマークをクリックします。すると、変更前のスライドショーのHTMLが表示されるので、これを先ほど編集してコピーしたHTMLに差し替えてください。
（中身を削除して、ペーストすればいいです）差し替えたスライドショーが、変更後の写真になっていることを確認したら左上の「公開⚙」ボタンを押して、ホームページを更新したら終了です。
【参考】下記HPを見ながら作りました。
【WordPressで使える】ずっと右から左へ流れ続ける画像スライダーアニメーションの作り方【追加CSSのみ】 – 格安ホームページ制作のEM Web Create