ヘッダー画像がずれてしまいます・・・(画像のトリミング編) | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。


わたくしが書いた記事『エクセル(Excel)でヘッダー画像を作るには』を見て、一念発起して(!?)ご自分でヘッダー画像を作った方から、次のようなご質問をいただきました^^




やり直しやり直しで、やっと満足のいくヘッダー画像が完成しました。
プロフィールページに設置しているヘッダーが右よりにずれて、左には隙間ができてしまいました(^_^;)

ずれを調整する方法はありますか?


確認をすると、確かにずれている・・・

でも、

・設置場所が違っているんだろうなぁ~
・画像の前に余計なスペースかタグが入っているんだろうなぁ~
・background-positionがうまくなっていないのだろうなぁ~

なんて予想していたのですが・・・

みんなはずれてました<m(_ _)m>


CSS設定は全部うまくいっている・・・^^;


・・・で、画像を見てみると・・・

川上雄大のワンポイントレッスン

わ・わ・わかりました!

そう、
ずれの原因は・・・

右側写真のさわちゃん!

ではなく(笑)
(というのも、この方が真っ先にソレが原因でしょうか?って…たぶん('◇')ゞ)


画像自体にあったのです^^!

画像をよく見てみると、左と下と右に少しグレーと白の格子模様が見えます。

川上雄大のワンポイントレッスン

画像に余分な透明な部分も一緒に保存されていたのです。

これは余分ですので、ペイントでトリミングしてあげて、

1.「選択」で画像をドラッグして
2.「トリミング」をクリック


川上雄大のワンポイントレッスン

保存しなおすとOKです。
サイズも再度調整しておくとよいですね^^


なお、Macの方は、Macの「プレビュー」で簡単にトリミングできますので。
■Macで画像のトリミング■
1.まずは、画像をプレビューで表示します。(通常はFinderから画像をダブルクリックします)
2.「長方形で選択」状態にします。
3.トリミングしたい場所をドラッグすると、長方形にトリミング範囲を選択することができます。
4.[ツール]-[切り取り]を選択します。
([編集]-[カット]ではありませんのでご注意を。)

川上雄大のワンポイントレッスン
(↑この写真はFacebookで投稿したものです。こんなんでよければ、友達申請していただけると嬉しいです^^!ただし、メッセージは添えてくださいね^^)



<補足>
・Shiftキーを押しながらトリミングしたい場所をドラッグすると、正方形に選択することができます。
・更に、Shift + Optionキーを押しながらトリミングしたい場所をドラッグすると、正方形の中心を基点に選択することができます。


・・・で、

うまくいったかどうか・・・

は、こちらをご覧になって確認してくださいませ!うまくできたことを期待していますので(笑)




以上、パソコンワンポイントレッスンでした。


LIDS澄川・ライフデザインスクール
川上 雄大