【WordPressでブログ作成】第2回：キャッチフレーズの変更、サイトアイコンの変更編

この記事の概要

●いろいろなサイトを見て参考にする

●キャッチフレーズを変更する

●サイトアイコンを変更する

色々なサイトを見てみる

参考にしよう

大手企業

ソニー株式会社 | ホーム

ソニー株式会社のポータルサイトです。ソニーグループ内のエンタテインメント・テクノロジー&サービス（ET&S）事業分野の企業情報、製品・サービス情報、お知らせとニュースリリース、サステナビリティ、採用情報などをご覧いただけます。

www.sony.co.jp

SONY

かっこいいですね、黒と白のソニーっぽいカラーでまとまっていてとってもシンプルでソニーブランドが好きという方に向けたHPでしょうか。

NTTドコモ

NTTドコモのオフィシャルウェブサイトです。ドコモのスマートフォンをお持ちでない方でも、ご利用になれる各種サービス、5G、Xi、FOMAなどの携帯電話情報、スマートフォン、iモードなどの料金プラン、モバイルサービス、サポート情報、ドコモ光などをご紹介します。

www.docomo.ne.jp

NTT docomo

ドコモのイメージカラー赤という感じですね。スライド画像を多用していて、宣伝目的優先という感じでしょうか。

Apple

革新に満ちたAppleの世界へようこそ。AppleのウェブサイトではiPhoneからiPad、AppleWatch、Mac、AppleTVまで、すべての製品の購入ができます。アクセサリやエンターテインメントを探す時も、専任スペシャリストによるデバイスのサポートが必要な時もこのサイトでどうぞ。

www.apple.com

Apple

すごく好き、メニューもシンプル（下に移動してもついてくるのはいいです）あとAppleロゴが無くてリンゴのマークだけという意識の高さ、参考にしたらただの意識高い系のHPになりそうなのでやめておくことにします。

ブログ

Ameba公式ジャンル | アメーバブログ（アメブロ）

アメーバブログ公式ジャンルは、新しくなったブログのジャンルが集まったページです。現在100種類以上のジャンルがあります。

blogger.ameba.jp

Ameba

アメーバブログよく聞きますね、見やすい！デザイン云々よりもこんなに多くの人がブログを書いていることに驚きました。

note ――つくる、つながる、とどける。

クリエイターが文章やマンガ、写真、音声を投稿することができ、ユーザーはそのコンテンツを楽しんで応援できるメディアプラットフォームです。だれもが創作を楽しんで続けられるよう、安心できる雰囲気や、多様性を大切にしています。

note.com

note

一目見た瞬間からこれだと思いました。シンプルでわかりやすい。よし、これをパク…参考にしようと思います。

サイトを見て分かったこと

キャッチフレーズがある

“キャッチフレーズとは”google検索してみたところ

広告や宣伝で、感覚に訴えて、強い印象を与えるように工夫された短い文句。うたい文句。

“カラダにピース。” カルピス
“Inspire the Next” 日立製作所
“あなたとコンビに” ファミリーマート
“I’m lovin’ it” マクドナルド
“つくる、つながる、とどける。” note

サイトアイコンがある

サイトアイコンは以下の画像（小さくて見づらいですが）で解ると思います。現在私のホームページはワードプレスの初期状態のアイコンになっています。

イメージカラーがある

各サイトというか各企業の色ってありますよね。

ソニー：黒白
ドコモ：赤白
LINE：緑白

キャッチフレーズを変更する

初期状態のキャッチフレーズは”Just another WordPress site”になっているので変えたいと思います。

何にしようか…ここでホームページの方向性や何を書いていくかが決まるような気がして悩むこと30分…

“石垣島での日々ブログ-移住12年目-“

これでよし！ブログを書いていくうちに変えるかもしれませんが、早速変えてみます。

ダッシュボード→外観→カスタマイズ→サイト基本情報に進みます。

サイトアイコンを変更する

石垣島っぽい図柄を考えてみた結果、石垣といえば海？マンタ？シーサー？どれも沖縄本島にもあるので八重山ミンサー柄をモチーフにしようと思います。

サイトアイコンをペイントで作る

まずはwindowsアクセサリのペイントを開いてサイズ変更で512×512ピクセルに変更

イメージカラー作り

石垣島の海はエメラルドグリーン×コバルトブルーの美しい海が広がっていてとっても綺麗なのでそのイメージの色を作って行きたいと思います。

エメラルドグリーン：RGB (0, 169, 104)
コバルトブルー：RGB (0, 71, 171)

もう少し淡い色が欲しいので6色作ってみました。メモしておきます。

エメラルドグリーン：RGB (0, 169, 104)
ちょい淡いエメラルドグリーン：RGB (0, 253, 158)
かなり淡いエメラルドグリーン：RGB (170, 255, 173)
コバルトブルー：RGB (0, 71, 171)
ちょい淡いエメラルドブルー：RGB (0, 107, 253)
かなり淡いエメラルドブルー：RGB (170, 206, 255)

ペイントで柄を作る

3種類作ってみました。サイトアイコンは目立ったほうがいいのでしょうがなんとなく一番右にしよ。

“site icon.png”という名前で保存しました。

背景の透過（背景を透明にする）

なぜ背景を透過させたいかといいますと、Appleのアイコンかっこいいなって思っただけです。

以下画像左から
Apple：背景なし
note：背景あり
Ameba：背景なし
TOYOTA：背景あり
WordPress：背景あり

私の大好きなwindowsペイントでは背景を透過することは出来ないみたいなのでgoogleで検索

PEKO STEP（ぺこすてっぷ）というサイトで出来るようです、Randllさんという方が運営しているみたいです、ありがとうございます。

これでサイトアイコン”site icon toumei.png”を作ることに成功しました。

見た目はさっきと変わらないけどきっと背景は透明になっているはず。

サイトアイコンを選択する

ダッシュボード→外観→カスタマイズ→サイト基本情報に進みます。

サイトアイコンを選択クリックさっき作った”site icon toumei.png”をアップロード

サイトアイコン完成です。