1月28日の勉強会

現状のロゴのサイズを確認する

サンプルページにある現行のロゴのサイズを確認し、新しくロゴを作成する時の参考にする。 

① 編集中のページをプレビューモードにし、

② ロゴを右クリックし「検証」をクリック、

③ 表示される HTML ソースで、ロゴのソース部分にマウスを載せる。

④ 表示される画像サイズをメモする。

 

ロゴを作成する

スケジュール表から、各自 Squarespace のサイトをアクセスし、団体名(「素晴らしき仲間たち」)入力、また friends で検索しヒットしたイラスト群から一つを選択し、tagline (Wonderful Best Friends)を入力し、それぞれの位置とサイズを調整した。英字入力した Tagline 文字列はフォントの設定で好みのフォントに変更した。

 

ロゴをダウンロードする

作成したロゴは、[低解像度]を選び、「save log」ボタンを押してダウンロードした。

ダウンロードされたロゴは、PC傘下の「ダウンロード」フォルダーに、ロゴに入力した団体名(「素晴らしき仲間たち」)でのファイル名で png 形式で保存された。

 

ロゴの周りを切り取る - Word のトリミング機能

ダウンロードしたばかりのロゴ画像ファイルは、入力あるいは選択した文字や画像の周りに広く空白の領域をとっている。

Webページに挿入するには、空白部分は必要無いので、これを切り取ることにする。

 

画像の余分な部分を切り取るには、いろいろなツールがある。

Word でのトリミング方法を紹介いただいた。

① Word を白紙で起動し、白紙部分にダウンロードしたロゴ画像を挿入する。

② 画像を選択し、「書式」タブにある「トリミング」>「トリミング」をクリックする。

③ 表示される太い直線あるいは角線(トリミングハンドルと言う)をドラッグして切り取る位置まで移動する。

④ エンターを押すか、「トリミング」アイコンをクリックすると、切り取られる。

 

※ この後、トリミングした画像をファイルとして保存する方法は不明。

 

ロゴの周りを切り取る - Pixlr Editor

今回は、Pixlr Editor を使ってトリミングを行った。トリミングしたロゴ画像を保存した。

① ブラウザでPixlr Editor を起動する

※ 起動する度に、毎回 Flash Player を許可するかどうかが求められる。

※ その場合は「許可」をクリックする。

②「コンピューターから画像を開く」をクリックする

③ ダウンロードしたロゴ画像を選択し、「開く」をクリック

④「切り抜きツール」を使い、切り取る領域を囲む

⑤ ダブルクリックすると、切り取られる

⑥「ファイル」から「保存」をクリックする

⑦「マイコンピューター」が選ばれているのを確認し「OK」をクリックする

⑧ 保存するフォルダーを選択し、ファイル名を指定し、「保存」する。

 

ロゴ画像の入れ替え

Jimdo 編集ページを表示し、

① 既存のロゴ画像をクリックする。

② 雲のマーク(画像アップロードを意味する)をクリックする。

③ アップロードするロゴ画像を選択し、開く。

④ ロゴ画像がアップロードされるので、画像のサイズや配置を決める

⑤[保存]をクリックする

挿入されたロゴ画像の大きさのバランスを見て、必要な調整(サイズ変更など)を行う。