前回、プラグインのインストールや設定を行いました。
今回は、ホーム画面を作成、画像加工を行います。
まずは、画像を集めます。
私はこちらのサイトで無料ダウンロードしました。https://www.photo-ac.com/
2は、私の修理中の手です。
サイズバラバラで、3つファイルが集まりました。
こんな並びで載せたいなと思います。
では、WordPressで画像を並べて表示させるにはどうすれば良いのか。
私はギャラリー機能を使用します。
＋からメニューを表示し、ギャラリーを選択します。
アップロードをクリックします。
3つの画像をアップロードしたら、メディアライブラリを開いて並べる順にチェックを付けて
次へ進めます。
キャプション（文字）を入力も出来ますが、ここで入力しても
文字が小さいと思いますのでやめて、次へ進めます。
すると、ホーム画面に画像が3つ並びました。
しかし、画像のサイズが異なる写真を使ったので、うまいこと表示していません。
この時、まだこのままの画像で進めてみようと思っています。
画像を編集しようと思います。
私はバナー工房を使っています。
バナー工房https://www.bannerkoubou.com/
画像に文字入れや画像のサイズ変更に使えます。
もっと色々と使えそうですので、使ってみてください。
開いて、画像を選択して画像を加工するを選びます。
文字入れを選択し、テキスト入力欄に文字入れしたい文字を入力します。
大きさや書式など、微調整を行ってから、文字設定を変更・反映をクリックします。
画像の真ん中に文字が来るように移動し、現在の位置で文字を確定をクリックします。
その後、保存をクリックすると、画像がダウンロードできます。
こんな感じの画像の出来上がりです。
3つのファイルを同じように文字入れしました。
そして、ギャラリーの機能でもう一度画像を並べてみました。
失敗ですね！！
文字のサイズを同じにして画像を作ったのに、画像のサイズがバラバラなので
文字が小さい画像も出来てしまいました。
もう一度、バナー工房で。
今度は横幅を400に統一するために、拡大縮小を選択します。
横と縦の長さを指定で、横幅を400と入力し、「サイズを変更する」をクリックすると
横幅400、縦幅は画像の比率を保ったまま加工されます。
併せて、文字入力も行います。
この画像では縦幅が調整されていませんが、この後、縦幅も270になるように調整しています。
画像のサイズ調整してから、文字入れするようにしてください。
加工前の画像だと、画像の中心が分からなくなるためです。
加工が終わった画像は、このようになりました。
※画像の加工は、私はWindowsユーザですので、ペイントで行っています。
選択をクリックし、□で囲むと533×199pxのように表示しますので、
その数字を400×270になるように調整します。豆知識
全て横幅400、縦幅270に合わせたため、ホームにギャラリーで並べても
きれいに並びました。
もう一つ、ホームですので、最初に画像でお迎えした方が良いかと思い、
以前のホームページでも使用していた画像を採用します。
画像をクリックします。
ファイルをアップロードし、画像を選択します。
画像を幅広にして、ホームの最初の位置に配置します。
画像上にテキストを追加します。
身近なSEとは、を書いてみました。
以前はもう少し長く書いていましたが、ホームページでは文字はあまり読まれない
と、アドバイスを頂きましたので、今回は減らしています。
画像とメニューの間に、文字を入力し、見出しレベルを上げました。
このような画面になりました。
メニュー画像の下に、文章を入力してみます。
まぁ、今はこのままでもいいかなぁ。
画像をクリックすると、他のページに飛ばしたかったのですが、
標準のままだとキャプションが表示されて、そこをクリックすると飛ぶ
という動きになってしまいました。
訪問修理のURLを貼り付けましたが、飛ぶには飛ぶが、キャプションに文字は要りません。
そこで、困った時のプラグイン。
Gallery Custom Links
をインストールし、有効化しました。
画像を選択する際に、右のLink URLに飛ばしたい先のURL
を、
Link Targetは、ブラウザを別画面で開くか同じ画面で開くかを選べます。
今回は同じ画面で開きたいので、Same Pageを選びます。
これで、画像をクリックすると、別のページに飛ぶようになりました。
最後に、文章の中でお問い合わせはこちらから。と書いてみました。
そして、こちらをリンクにしてみました。
こちらの部分を範囲指定して、Linkのマークをクリックします。
そして、お問い合わせページのURLを貼り付けると、リンクになります。
7日目は不要な記事の削除やメニューの検討を行います。
以上
コメント