マルチスクリーン対応WEB制作

K-OFFICE

静岡市清水区

054-369-3016

Web

WordPressで写真の加工

WordPressでホームページを作成するとコンテンツの更新だけでなく、簡単な写真の加工(トリミングや回転・反転など)もこのWordPressの管理画面内でできてしまいます。ローカルで写真加工ソフトを使用しての作業は必要ありません。

下記写真のはアイキャッチ画像の被写体が写真の中央にありません。これを修正するためにフリーサイズの画像を写真加工ソフトで修正して再UPしても良いのですが、アイキャッチ画像のために全ての画像のロケーションが変わってしまいます。

WordPressには「すべての画像サイズ」「サムネイル」「サムネイル以外の全サイズ」から選択して画像を編集できます。今回はサムネイルのトリミングについての説明です。

 

【メディア】→【ライブラリー】から対象の画像をポイントして【編集】をクリックします。

 

【メディアの編集】画面が表示されるので左下の【画像を編集】をクリックします。

 

【画像のトリミング】の【縦横比】を1:1 【変更を適用】を【サムネイル】とします。

 

① 写真の船体部分をドラッグして選択します。『shift』キーを押しながらドラッグすると正方形となります。

② 【トリミング】ボタンをクリックします。

 

トリミングされた画像が表示されたら【保存】ボタンをクリックします。

 

上部に①『保存されました』と表示されたら完了です。
サムネイル画像が変更されているか確認のため② 【画像を編集】をクリックします。

 

右下の①【現在のサムネイル画像】の船体部分が中央に表示され変更されているのが確認できます。
② サムネイル以外の画像は変更されていないことが確認できます。

サムネイル画像が更新され船体部分が画像の中央に表示されるようになりました。

 

 

WordPressの画像について

WordPressでは、ひとつの画像をアップロードする毎に、追加で3種類のサイズの画像が自動で作られています。

下図のように【サムネイルのサイズ】【中サイズ】【大サイズ】の3種類の画像が自動生成されアップロードした画像(フリーサイズ)と合わせて4枚の画像がWordPressに保存されます。

ただしアップロードした画像サイズが上図の上限値を超えた場合は写真が自動生成されますが150×100の写真をUPしてもフリーサイズ(150×100)1枚のみしか保存されません。

900×600の画像をUPすると150×150、300×200、900×600の3枚が保存されます。

3000×2000の画像をUPすると150×150、300×200、900×600、3000×2000の4枚が保存されます。

画像サイズにより以下のクラス名が付与されます。

●サムネイル:size-thumbnail
●中サイズ:size-medium
●大サイズ:size-large
●フルサイズ:size-full

 

文書に大サイズの写真を挿入すると、表示スピードが遅くなるので小サイズの写真を挿入し、それをクリックするとメディアファイルが表示されるように設定した方がベターです。

下図は画像挿入時の設定方法です。

 

 

WEBでぶら下げインデントの設定

スクリーン幅の狭いスマホ表示では、タイトルが長いと折り返される事があります。下図のようにタイトルの行頭にアイコンを使用している場合は、1行目の文字の始まりと2行目の文字の始まりにズレが発生します。

 

CSSで以下の設定をすると2行目以降の文字を1.2文字下げることができます。
h2{
text-indent: -1.2em;
padding-left: 1.2em;
}

 

 

備忘録を整理します

Word、Excelの便利な機能も使用頻度が高い場合は繰り返し使っているうちに身について使いこなすことができるようになりますが、年に数回しか使わないと身につかず忘れてしまいます。

そのため備忘録として書き溜めて置き、問題が発生し解決策が解らない時に参考にしておりましたが、今はネットでググれば簡単に発見できます。WordPressのphpやhtml/cssなどやり方を思い出せない時などには良く活用して助かっております。

ですから今回の備忘録は問題の解決策を探すというよりは、タイトルを見て『こんなことが出来る』という事を知っていただき、活用できるタイトルがあったら、そのスキルをマスターして日常の作業に活用していただければと思います。

範囲はMS OFFICEとWEBのhtml/CSS関係です。