2月27日の勉強

PC画面の設定

毎回の勉強会開始にあたり、全員のPC画面を揃えておくとすすめるのに分かり易いと考えた。

今回は、「スケジュール」と「メモ帳」を画面半分の幅にし左右に並べることにした。「スケジュール」は前回の内容を振り返り、今回の内容を確認するのに必要だし、「メモ帳」は編集内容がメモ書きしたものだ。特に「メモ帳」は、共有フォルダーにあったものを個人のフォルダーに移しておいて、必要に応じて参照するものだが、参照するときに意外とフォルダーを探すことが多い。あらかじめいつでも表示できるようにしておくものだ。

 

ロゴ作成サイトを開き、ロゴを作る

PC画面半分に表示されているスケジュールから、Web上のロゴ作成サイトSquarespaceにアクセスする。

団体名を入力し、次にロゴに使うアイコンを探す(Search)。ここは英単語で入力しなければならないので苦労するところだ。表示されたアイコン群から適当なものをクリックすればロゴに挿入される。別なものに変更する時は、変更するアイコンをクリックするだけで入れ替わってくれる。

次にタグライン(Tagline)を入力する。

揃った部品の、サイズを変更したり、フォントを変更したり、色を設定してロゴを整える。

 

 

ロゴに付ける色を確認する

作成中のJimdoページに戻り、ページに使われている色を参考にし、ロゴの色を決めることにする。

 

作成中のロゴページをプレビューモードで表示し、ページの中で使われている色のある該当の場所を右クリックし「検証」をクリックする。ソースコードとCSSが表示される。

 

ソースコードが青色でハイライトされていて、ページ上のコンテンツがハイライトされているのを確認する。その状態でのCSS内容で色を指定している記述箇所にある四角をクリックすると、「カラーピッカー」が表示される。

下部にはページ内で使われているすべての色も表示されている。その中から好みの色を選択するとその色のコード番号が表示されるのでそれをメモしておく。

 

ロゴに色を付けたり、書体を変更する

ロゴ作成サイトに戻り、ロゴの各部品に色を付けたり、書体を変更したりする。

 

なお、アクセスしているブラウザがGoogle Chrome以外のブラウザ(例えば、FireFox)の場合、各部品の色の設定メニューが表示されていなく、使えないものもある。 

 

 

作成したロゴをPCへダウンロードする

画面に従って作成したロゴを無料でダウンロードする。

ダウンロードの最後のステップで、ウィルス検査が自動で行われるはずだが、これを確認したい。

ダウンロードが完了すると、ロゴファイルがPCの「ダウンロード」フォルダーに保存されているのを確認する。ファイル名は、入力した団体名が使われている。ファイル形式はpng。

 

ロゴ作成サイトは、閉じないでおこう。この先のステップで作成したロゴを微調整する場合に、開いたままにしておけばすぐ使えることになる。

 

ロゴ以外の部分を切り取る

ダウンロードされたロゴファイルのサイズは、キャンバスのサイズ(400 x 400)なので、ロゴマークの外側の空白部分をできるだけ少なくしておきたい。

Pixlrエディターを使って切り取る。

切り取ったファイルを名前を付けて保存する。

 

Pixlr エディターも開いたままにしておこう。

 

ロゴを入れ替える

Jimdo ページを開き、ロゴを入れ替える。

ページ内でのロゴの位置、色など、他のコンテンツとのバランスをチェックしましょう。必要に応じて変更してみます。

 

ナビメニューのスタイルを変更する