5月8日の勉強会 - カラムの追加

「カラム」の追加

Jimdoページ「ボランティア活動」の編集に入る。

 

「ボランティア活動」ページにはこれまで何も入力していない、白紙のページだった。このページに、デザイン文書に沿って、大見出し(h1)、中見出し(h2)、それに文章を追加した。

 

そして「カラム」を追加する。追加したばかりでは2列のカラムだが、これを3列に増やすことを行った。

 

次にそれぞれのカラムに小見出し(h3)、画像、文章を追加した。

 

「余白」の追加

コンテンツが追加されたページ本体を眺めると、上下に隙間が無く詰まった感じに見える。

 

見えづらい、読みづらいページになるのを避けるため、コンテンツの間の切れ目の良い処に「余白」をいくつか挿入することにした。

 

「余白」の大きさは数字を指定する方法とともに、ドラッグして大きさを指定する方法とを紹介した。

 

その時、ドラッグして余白の大きさを指定したときは、最後に「保存」ボタンが出ないことを受講者の方が発見した。ドラッグで手を離したときが自動的に確定されるようだ。

 

いくつかの余白を追加するのだが、出来上がった余白をコピーし、コピーの余白を上下(<あるいは>の記号を縦に表示したもの)の移動キーで該当の処まで移動する方法もとった。

 

画像の大きさの不揃いを直す

4つのカラムに挿入したイラスト画像のサイズが不揃いだと目立つので高さだけでも揃えることにした。

 

まずそれぞれの画像のサイズを調べた。プレビューにして、画像の上で右クリックし「新しいタブで表示する」をクリックすると、ブラウザのタブが追加され、タブにサイズが(〇〇〇 x ☐☐☐)と表示されることを紹介した。

 

このとき、タブに表示がなされるのは、Google Chrome ではできるが Microsoft Edge では出来ないことが分かった。

 

このような方法でそれぞれのサイズを調べて白板に並べて記してみた。その結果最大の高さの値が分かったので、他の画像もそれと同じ高さとなるようにサイズ変更を行うこととした。

 

Pixlr Editor の起動

イラスト画像のサイズを変更するために、簡単に加工ができるオンライン無料版の Pixlr Editor を使うこととした。

 

お気に入り(ブックマーク)していなかった場合は、検索で「pixlr editor」と入力し、見つかった「Online Photo Editor | Pixlr Editor」(英文)を開いた。

 

Ad-block Detected(広告表示をブロックするアドオン)の小ウィンドウが表示される場合は、「YES, I'LL WHITELIST PIXLR.COM」をクリックする。ブラウザにセットされているAdblockを表示して、Pixlr Editor へのアクセスをオフにする。

 

そうするとPixlr Editor の画面に戻り、そこでは「Hi there, You"ll need Flash Player to run Pixlr Editor. To enable Flash, please click here.」と表示される。

 

そこで下線が引かれた here をクリックする。小さなウィンドウが表示され、そこには「Pixlr.com が次の許可を求めています Flash の実行 許可 ブロック」となっています。「許可」のボタンをクリックすると PIXLR EDITOR の画面が表示されます。

 

メインメニューでは「OPEN IMAGE FROM COMPUTER」をクリックする。そうするとすぐにPC内の画像を探すダイアログ画面になるので、該当の画像を選択し「開く」をクリックする。画像が Pixlr Editor のキャンバスに表示される。

 

このときメニューが全然表示されないPCが数台あった。いずれもマウスのスクロールホイールをグるグルすると表示されるようになった。

 

表示が英文になっていることが多いが、その場合は上部メニューにある Language をクリックして「日本語」に変える。

 

また、今回使ってみて、新しいバージョン(PIXLR X)があるとの表示があったが、いずれ使ってみたい。

 

画像サイズを揃える

Pixlr Editor を使って画像のサイズの変更を行った。画像は img_c001.png、img_c003.png、img_c007.png だ。なお、img_c002.png はサイズ変更しないでそのまま使うこととした。

 

メニュー「画像」から「画像サイズ」を選び、「縦横比を固定」にチェックがはいっているのを確認し、「高さ」を直接入力し「OK」をクリックする。

 

リサイズされた画像は、メニュー「ファイル」から「保存」を選ぶ。「画像を保存ダイアログ」で「名前」にはオリジナルのファイル名が入っているので、ここで自分のイニシャルを追加する。サイズが変更された画像であることをファイル名で分かるようにした。

 

保存先は、共有フォルダーでは無く、個人のフォルダーにすることを確認するよう強調した。

 

Jimdo ページの更新

最後にJimdoページ「ボランティア活動」で、リサイズされた画像を入れなおした。その際、最大化することを強調した。

 

これにより、イラスト画像は高さが揃って表示されるようになった。

ページがまとまりがあるように見えた瞬間であった。