1月23日の勉強会

画像サイズを揃える ー 高さを同じにする

【ボランティア活動】ページの編集:

前回からの続きで、使用するイラスト4個の幅と高さがバラバラだったので、高さだけでも揃えて見栄えをよくしようとした。

始めにそれぞれのイラストの幅と高さを調べた。その結果最大の高さの値にそれえることにした。

Pixlr Editor を使って「画像」>[画像サイズ]で、高さを指定してサイズ変更した。

 

サイズを変更したイラストをページに挿入する際に、古いイラストが残っている状態で上書きの状態の挿入をすると、新しいサイズでは必ずしも表示されないというのがあった。新しいサイズの画像を挿入する時に、これまで挿入されていた画像があると、古い画像のサイズで挿入・表示されるということらしい。

 

画像サイズを揃える ー アスペクト比を揃える

【チャレンジ】ページの編集:

3カラムを使って、同じカラム幅に別々な画像を挿入すると、画像が揃わないで表示されている。

縦横比(アスペクト比)3:2のものと、4:3のものがあるので、こういうことになると判断し、全部同じアスペクト比3:2に揃えることにした。

 

Pixlr Editor で「切り取りツール」を選択し、サイズを指定するが、「アスペクト比」で指定するケースと「出力サイズ」で指定するケースとがある。

ここでは「アスペクト比」で、それぞれ幅3と高さ2を指定した

 

サイズ変更した画像を、カラムに挿入すると綺麗に画像が揃った。

 

見出しを中央揃えから左揃えに変更するのをトライ

使用している Tokyo レイアウトでは、大見出しと小見出しは中央揃え、中見出しは左揃えとなっている。

これを、例えば小見出しを左寄せにしてはどうか、ということになりその方法を探した。

 

小見出しの文字揃えは、「管理メニュー」>「デザイン」>「スタイル」>「詳細設定をオン」にして、「小見出し」をクリックすると表示される編集メニューにある文字揃えから「左寄せ」を選択することで可能となることが分かった。

 

この方法では、当サイトの全ての「小見出し」が左寄せに変わる。

 

最後に設定した「左寄せ」を、「標準」に戻して、試行を終了した。