WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

PeaCie WordPress Lightning カスタマイズ サイトアイコン ロゴ Pixlr Editor WordPressサイト構築

前回までにXserver上のWordPressサイトに企業向け無料テーマ「Lightning」をプラグインやコンテンツを含めて簡単にインストールし雛形サイトを構築しましたが、今回はトップページのデザインを簡単に作成する方法を紹介します。

はじめに

前回は、Xserver上のWordPressサイトに企業向け無料テーマ「Lightning」のクイックスタートにより、プラグインやコンテンツも含めて簡単にインストールして雛形サイトを構築初期設定を行いました。

ここで構築中のサイトの現状は以下です。

https%3A%2F%2Fpeacie - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!
PeaCie
PCライフを楽しむユーザー参加型PCファンサイト
Screenshot 2020 03 03 at 10.57.27 1024x789 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

今回は、この雛形のトップページ・デザインを管理画面の左メニュー「外観 > カスタマイズ」から、目的のサイト・デザインに向けて簡単にカスタマイズを行う方法を紹介します。

特に、画像編集Webアプリ「Pixlr Editor」を使ったサイトアイコンロゴの作成について詳しく紹介していますので参考にしてください。

カスタマイズ・メニュー

管理画面にログインし、左メニューから「外観 > カスタマイズ」をクリック。

Screenshot 2020 03 03 at 11.04.35 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!
Screenshot 2020 03 03 at 11.06.32 1024x578 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

サイトアイコンの作成

左メニューの「サイト基本情報」をクリック。

Screenshot 2020 03 03 at 11.08.59 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

ここで「サイトアイコン」を作成します。

私の場合は、Chromebookで使える画像編集アプリとして、オンラインで使えるWebアプリ「Pixlr Editor」を使っています。画像合成の例を以下の記事で紹介しています。

画像編集アプリの定番「Adobe Photoshop」を使う場合は、操作が簡単な仮想Windowsの「Paperspace」を使っていますが、AdobeフォトプランとPaperspaceは有料サービスなので課金があります。

今回は、サイトアイコンの作成ロゴのデザインなどを簡便に行うので、アプリのインストールなどの必要が無くすぐに使える「Pixlr Editor」を使います。Flashを許可する必要があります。

Screenshot 2020 03 03 at 11.35.38 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!
Screenshot 2020 03 03 at 11.38.29 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

CREATE A NEW IMAGE」をクリック。

Screenshot 2020 03 03 at 11.40.26 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

サイトアイコン画像のサイズは「512×512」ピクセル以上なので、今回は600×600とします。

OK」をクリック。

Screenshot 2020 03 03 at 11.40.47 1024x600 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

言語が英語になっているので、トップメニュー「Language」から「日本語」をクリック。

Screenshot 2020 03 03 at 11.41.03 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!
Screenshot 2020 03 03 at 11.41.22 1024x616 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

左ツールパレットの「A」をクリックし、テキストで「PC」を入力します。

Screenshot 2020 03 03 at 11.47.16 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

フォント」「サイズ」「スタイル」「」を好みの設定に変更します。

Screenshot 2020 03 03 at 11.53.38 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

OK」をクリック

Screenshot 2020 03 03 at 11.55.02 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

レイヤー > レイヤーをラスタライズする」をクリック。

Screenshot 2020 03 03 at 11.56.31 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

編集 > 自由歪ませ…」をクリック。

Screenshot 2020 03 03 at 11.58.48 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

四隅の青の四角をマウスドラッグして画面いっぱいに広げて変形します。

余白をクリック。

Screenshot 2020 03 03 at 12.00.48 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

はい」をクリック。

Screenshot 2020 03 03 at 12.01.59 1024x593 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

画像右上の「C」の右上をブラシ消しゴムツールで丸くします。

Screenshot 2020 03 03 at 12.04.51 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

ファイル > 保存…」をクリック。

Screenshot 2020 03 03 at 12.05.31 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!
Screenshot 2020 03 03 at 12.06.16 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

ファイル名を入力し、フォーマットを「PNG (透明、フルクオリティー)」にして「OK」をクリック。

Screenshot 2020 03 03 at 12.10.32 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

保存」をクリック。

管理画面に戻ります。

Screenshot 2020 03 03 at 12.12.19 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

サイトアイコンを選択」をクリック。

Screenshot 2020 03 03 at 12.14.14 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

ファイルを選択」をクリック。

Screenshot 2020 03 03 at 12.15.44 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

画像ファイルをクリックし「開く」をクリック。

Screenshot 2020 03 03 at 12.16.34 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

代替テキスト」を入力し「選択」をクリック。

Screenshot 2020 03 03 at 12.18.43 1024x662 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

画像切り抜き」をクリック。

Screenshot 2020 03 03 at 12.19.47 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

右上の「公開」をクリック。

PeaCieサイト再読込を行うと、タブのアイコンが以下のようになります。

Screenshot 2020 03 03 at 12.21.25 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

実際の表示は非常に小さいので、アイコンデザインではかなり大雑把に仕上げても目立たないと思います。むしろシンプルでユニークにして目立つ事の方が重要です。

Screenshot 2020 03 03 at 12.26.09 1024x577 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

ロゴの作成

プレビュー画面の左上にあるロゴSample」の左上の青い鉛筆マークをクリック。

Screenshot 2020 03 03 at 14.02.31 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!
Screenshot 2020 03 03 at 14.03.08 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

ロゴ画像の大きさは280×60ピクセルなので、Pixlr Editorの新規作成で指定します。

Screenshot 2020 03 03 at 14.06.55 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

OK」をクリック。

Screenshot 2020 03 03 at 14.07.22 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!
Screenshot 2020 03 03 at 14.11.06 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!
Screenshot 2020 03 03 at 14.14.09 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

OK」をクリックし、サイトアイコンと同様にファイルを保存します。

Screenshot 2020 03 03 at 14.16.54 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

画像を変更」をクリック。

Screenshot 2020 03 03 at 14.18.54 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

ファイルを選択」をクリック。

Screenshot 2020 03 03 at 14.20.22 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

開く」をクリック。

Screenshot 2020 03 03 at 14.21.00 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

画像を選択」をクリック。

Screenshot 2020 03 03 at 14.26.07 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

公開」をクリックし、PeaCieサイト再読込します。

Screenshot 2020 03 03 at 14.28.47 1024x703 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

スライドなどの編集

同様にスライドなどの編集対象ブロックの左上にある青の鉛筆マークをクリックして、画面の左にあるパネル上で各種設定を行い、トップページのデザインをカスタマイズします。

Screenshot 2020 03 03 at 14.30.27 1024x814 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

スライドは複数枚に対応しているので、[1]から必要な[N]までを作成すれば、サイト上で横スライドしますが、コンテンツが揃うまではトップページ用の1枚だけでかまわないと思います。

今回はここまでとします。

まとめ

Lightning」の雛形サイトから目的のサイトへのカスタマイズの第一弾として、サイトアイコンロゴ画像を作成する方法を中心にして紹介しました。

この方法は、他のブロックのカスタマイズへも応用が可能なので、チャレンジしてみてください。

次回は、トップメニュー(グローバルメニュー)のカスタマイズを管理画面の左側メニュー「外観 > メニュー」から行う方法を紹介する予定です。

Screenshot 2020 03 03 at 14.45.35 - WordPressサイトの構築?無料テーマ「Lightning」のサイトアイコンとロゴを作成?!

ではでは、きらやん

(Visited 13 times, 1 visits today)

コメント