Canva+αでサイトロゴ+ファビコン作成&変更してみた件

WordPressでブログを更新するようになって2ヶ月半くらいが経過しました。

この記事を上げる前までも、画像を変えてみたりだとかちょこちょこブログの編集はしていましたが、本日、ずっと変えたいと思っていたサイトロゴを変更してみました。

今回は変更してみたことについて、まとめた記事となります。

スポンサーリンク

サイトロゴの変更

サイトロゴは、その名の通り、サイト名をロゴにしたものです。

ブログだと、ブログロゴという言い方をする場合もありますね。

サイトロゴを作ってみたい!という憧れはずっとあったのですが、一度作成した時にうまく表示する事が出来ず、結局WordPressのテーマcocoonのデフォルト状態であるテキストでの表示のままになっていました。

ただ、たまたま目についたこちらのサイトロゴ作成の説明がすごくわかりやすくて、自分でも出来そうな気がしてきたので、早速作ってみることにしました。

初心者でも簡単にできるサイトロゴ画像の作り方 | 1から始める!女性のためのアフィリエイト講座
ワードプレスのテーマをインストールしたら、次はサイトのデザインを少しずつ整えていきましょう。 まずは、初心者でも簡単にできるロゴ画像の作り方をご紹介します。 当サイトの一番上に表示されている「1から始める!女性のためのアフィリエイト講座」という文字も、画像として作成したものです。 簡単&無料でブログやサイトのロゴ画像を...

基本的に、この記事の通りの手順で作成していて、サイトロゴはCanvaというサイトで作成しました。

Amazingly Simple Graphic Design Software – Canva
Create beautiful designs with your team. Use Canva's drag-and-drop feature and layouts to design, share and print business cards, logos, presentations and more.

Canvaは無料で利用できますが、会員登録が必要になります。

ただ、GoogleやFacebookのアカウントでもログインする事が可能なので、実際に利用してみて面倒さは特に感じませんでした。

トップページに「ロゴ」の項目があるので、そこからベースとして使えそうなテンプレートを選んで編集していけば大丈夫です。この画像のテンプレートのロゴは英語ですが、日本語への変更も問題なくできました。

本当はテンプレートを利用せずに一からロゴを作ることも可能だそうですが、テンプレートでイメージが湧きやすい分、私には作りやすかったです。

画像作成後は↑のサイトの説明通り、バナー工房で画像を切り取り(トリミング)し、PEKO-STEPで画像背景部分を透過させるように編集しました。バナー工房でも背景透過編集は可能でしたが、文字の中の空白部分が透過出来ていませんでした。

この手順が最善手なのかと聞かれると正直微妙ではあるんですが、どちらのサイトも会員登録やインストールは不要だったので気楽に使えたことは良かったです。

サイトロゴが完成したらWordPress内のcocoon設定の「ヘッダー」にあるヘッダーロゴの項目に画像を設定して完成です。

ヘッダーの背景画像も設定した結果、こんな感じになりました。

PCから見た場合
スマホ・タブレットから見た場合

画像も、この夏にスマホで撮影したもの(撮影場所は京都府北部にある父の実家の近くでした。 興味ないと思うけど、伝えたかったw)をCanvaで編集したものになります。

全く狙っていなかったのですが、PCから見た場合とスマホ(タブレット)から見た場合で画像の色の雰囲気が違っているので、個人的に面白いなと思っています。

このサイトロゴで100点!とは思えないので、どこかで変更するかもしれませんが。

とりあえずテキスト表示のままよりは自分のブログっぽさが出たような気がします

ファビコンも変更しました

サイトロゴと同時に、ファビコンも新たに設定し直しました。

ファビコン…と聞いてピンと来ない人も多いと思います。

サイトアイコンという言い方をする事もあるので、そっちの方がわかりやすいかもしれません。

ファビコンは、この画像を見ていただければ見覚えのある方も多いと思いますが、サイト名の横にある小さなロゴのことになります。Amazonだと左隣にある「a」のロゴですね。

WordPressを始める際、とりあえずファビコンは設定しておく方がいいという話を聞いたので、プロフィールに使用している画像だったり、フリーのアイコンだったりを設定してはいたのですが、どこかでちゃんと作ったものを設定させたいと思っていまして。

そして、どんなファビコンにするか考えている時に、ブログタイトルの中の1文字を使用したものにしたいと思っていました。

悩みましたが、一番強調したいと思っていた「」の文字をファビコンに使うことしました。

こちらも画像はCanvaで作成し、PEKO-STEPで背景透過の編集したものを、こちらのファビコン作成サイトで完成させました。

ファビコン作成。favicon.ico 無料で半透過マルチアイコンが作れます。
ファビコン(ファブアイコン)faviconを作ろう!。16x16と32x32と48x48ピクセルのマルチアイコンが簡単に作れます。作成したファビコンの画像はプレビューで確認できます。プロ仕様の詳細データ表示付き。

「緑」という文字が画数の多い文字となってしまうため、パソコンでもぎりぎり見えるくらいの状態なので、スマホから見た時は文字が潰れてしまうかもしれないな…と思います。

しかし、とりあえず緑色のファビコンが見えていたら良し!と割り切ることにしました。

合わせてグローバルナビゲーションも編集してみました

サイトロゴ、ファビコン変更に合わせて、ホーム画面に表示されているグローバルナビゲーションも変更しました。

私自身WordPressを始めるまで「グローバルナビゲーション」という言葉は知らなかったのですが、ホーム画面のブログロゴの下にあるカテゴリーやリンク集、問い合わせ欄の項目が並んでいるところの名称となります。

ずっとデフォルトのままにしていたのですが、「ホーム」の項目はブログロゴの部分をタップ(クリック)すればホーム画面にジャンプ出来るので無くてもいいかな?と思い削除しました。

そして、特にサイドバーが常時表示されないスマホでは、カテゴリー別の記事がホーム画面から確認しづらくなっていたので、主要なカテゴリーを表示してみました。

こちらもまだまだ見づらい部分などあるかもしれないので、気になったら随時変更していきたいです。

ブログの設定はやっぱり時間泥棒

今回、これらの変更に合わせてcocoonのスキン(簡単なデザイン変更機能)もこれまでとは違うものにしてみたので、個人的にはかなりページ全体の雰囲気が変わったような気がしています。

ここまでがっつりデザインを変更したのはWordPressを始めた数週間の時ぶりでしたが、改めて思ったのはWordPressのデザイン変更は時間泥棒だな…という事ですw

色々記事を書いたり、過去記事をリライトしようと思っていたのに、あっという間に半日が過ぎていた感じです。

ただ、時間がかかった分、それぞれは小さい変更ではありましたが知識は増えたと思うので、やってみて良かったと感じています。

まだまだWordPress(とcocoon)は出来ることが多すぎて分からないことだらけですが、記事も増やしつつデザインの事も調べて、より見やすいブログのページになればと思っています。

それでは、今回はこのへんで。

コメント