The post WordPressでアップロード済み画像を置き換える一番簡単な方法 first appeared on Fukuro Press.
]]>
WordPressには一度アップロードした画像を他のものに置き換えする機能はありません。
しかし、「Enable Media Replace」というプラグインを使うと既にアップロード済みであっても画像の置き換えが簡単に可能です。
ここではそれを使って画像を別の画像に置き換えする手順について詳しく紹介します。
Enable Media Replace の機能
WordPressを使っていると不便だと感じること・・・
それが冒頭でも書いたように一度アップした画像の置き換えができないことです。
もし置き換えようとすると次のような手順が必要で少し面倒ですよね。
- 一度置き換えたい画像を削除
- 同じ名前でもう一度画像をアップ
本当なら削除とかせず一発で置き換えできると便利なのですが、残念ながら現在のWordPressにはそのような機能はついていません。
その画像の一発置き換えができるのが Enable Media Replace のメイン機能です。画像を削除せずに単純に新しい画像をアップロードするだけで置き換えできます。
そしてこのプラグインでの画像の置き換えには種類があって、それが次の２つ
- 画像とそのファイル名を新しい画像に置き換え
置き換え対象の画像ファイルだけを新しいものに変更する。アップロードしたての画像を置換するのに便利
- 画像に加えて記事内の画像リンクも置き換え
画像ファイルに加えて、記事内でその画像がリンクされていればそれらも全て変更する。アップロード済み画像を置換するのに便利
純粋に画像だけを置き換えるか、あるいは記事内のリンクも含めて全て置き換えるかの２つの方法が選択可能
しかも使い方も簡単なので画像の置換作業が大幅に楽になること間違いなしです。
プラグインの導入と使い方
それでは最初にこのプラグインをインストール＆有効化していきます。
その手順は次の通り
まずWordPressメニューから「プラグイン」ー＞「新規追加」を選択
新規追加画面が開いたらプラグインの検索欄に「enable media replace」と入力して検索
しばらくすると検索結果に次のプラグインが表示されるので「今すぐインストール」ボタンを押すとインストールが始まります。
ちなみにこのプラグインは次のページから直にダウンロードして使うことも可能
https://ja.wordpress.org/plugins/enable-media-replace/
インストールが完了すると「今すぐインストール」ボタンが「有効化」ボタンに変わるので必ずそれを押して有効化も忘れずに
これで画像の置き換え機能が使えるようになりました。
アップロード済み画像の置き換え手順
Enabel Media Replaceが導入したら実際に画像を置換してみましょう。その手順は次に説明する通りです。
まず投稿編集画面上の「メディアを追加」ボタンをクリック
＊補足＊ : 投稿の編集画面からだけでなく、メニューから「メディア」ー＞「ライブラリ」を開いても置換作業は可能です。
「メディアを追加」ボタンを押すと次のようなダイアログが表示されるので、その中から置換したい画像をクリック
画像選択したら右の詳細情報の中にある「新しいファイルをアップロード」ボタンをクリック
すると次のようなメディアのアップロード画面が表示されます。
この画面上で置換する画像や置換方法について設定していきます。
その設定手順は次の通り
まず初めに画面上にある「ファイルを選択」ボタンを押して、置き換えたい画像をアップロードしましょう。
アップロードすると対象の画像の右にそれと置き換えられる画像が表示されます。
次は「メディアを置換する方式を選択 : 」の下の選択肢から置換方式を選びましょう。
先ほど機能説明でも書いたように置換方法は次の２つ
- ファイルの置換のみ
画像ファイルだけを新しい画像に置き換える。記事内のリンクは更新されないのでアップロードしたばかりの画像ならこちらを選ぶ
- ファイルを置換して...リンクを更新する
画像ファイルの置換に加えて、その画像が使われている全て投稿ページのリンクも更新する。既に他のページで使われている画像ならこちらを選ぶ
このどちらを１つを選択してください。
そして置換設定が完了して問題ないなら「アップロード」ボタンをクリック
しばらくすると置換作業が完了し、メディアの編集画面に進みます。
そして画面上に「メディアファイルの更新に成功しました」と表示されていれば画像の置き換え作業は完了でです。
以上が Enable Media Replace を使った画像の置換手順
ここまで紹介したように画像の置き換えがかなり楽になります。
それからあと１つ注意点・・・
もし記事内リンクごと置き換える設定を選んだなら、実際のページで画像が正常に表示されているかも確認しておきましょう。
まとめ
WordPressだと削除してからでないと画像の置き換えができないのが不便ですよね。
なので画像の置換作業をもっと楽にしたい、記事内の画像リンクまで置き換えしたい、という場合はこのプラグインを使用するのがおすすめです。
以上 Enable Media Replace の導入と使い方についてでした。
The post WordPressでアップロード済み画像を置き換える一番簡単な方法 first appeared on Fukuro Press.
]]>The post 画像のSEO対策が楽になる！SEO Friendly Imagesプラグインの詳解 first appeared on Fukuro Press.
]]>
SEO対策というとタイトルやデスクリプション、見出しを変えることばかりが注目されますが、それだけではありません。
画像検索する人向けに画像にalt属性やtitle属性を指定しておくこともSEOの１つです。
そうしておけば画像検索時にどういう画像なのか分かりやすくなり、クリック率も上がり多くの人に記事を見てもらえるかもしれません。
ただalt属性やtitle属性を全部手動で設定するのは大変だし、付け忘れることもあるかもしれませんよね。
そこでここでは画像にalt属性やtitle属性を自動的・半自動的につけてくれる便利なプラグイン「PB SEO Friendly Images」の設定手順を詳解していきます。
alt属性とtitle属性について
まず初めに画像のalt属性とtitle属性について簡単に説明します。
これは画像をimgタグを使って表示する時、次のように画像に補足的な説明を付けるのにも使われる属性のこと(imgタグ専用の属性ではない)
<img src="neko.png" title="猫の画像" alt="全身黒色で小さな猫の画像">上の例のように画像の補足的な説明をするという点ではどちらも似たような役割ですが、ただ全く同じものではなく明確な違いがあります。
その違いとは次で説明するようなこと
まずalt属性の方ですが、こちらは次のような特長を持つ属性です。
- 画像の代替テキストになる
もし何らかの原因で画像が表示できないとき、代わりにaltで設定したテキストが画面上に表示される
- ユーザー補助に使われる
視覚に障害を持つ人や画像が見れない環境で、画像の内容を音声などで説明するのに用いられる
- 検索エンジンに画像の内容を伝える
検索エンジンのクローラーは画像まで認識できないので、代わりに画像のalt属性のテキストを読む
alt属性は画像にとっては代替テキストになったり、画像の説明に使われたりなど結構重要な役割を持っています。
また検索エンジンはalt属性の内容を読み込むので、それが画像のSEO対策に効果があると言われている理由でもあります。
次にtitle属性ですが、こちらの方は次のような特長を持つ属性
- 全ての要素につけられる
画像だけではなくHTMLで使用可能な全てのタグに設定可能
- title属性はチップ表示される
画像にカーソルを重ねるとツールチップ(吹き出し)が表示される
このように画像に関わらず全ての要素にタイトルを付けるために使われるのがtitle属性です。
以上がalt属性とtitle属性の違い
読者や検索エンジンにとって画像を把握しやすくできるように２つの属性はなるべく付けておきたいですね。
とは言ってもこれを手動で設定していくのは少し大変です。
ですがWordPressなら SEO Friendly Images を使えばその手間を省くことができて画像のSEO対策が楽になります。
SEO Friendly Imagesの導入
それでは SEO Friendly Images をインストールしていきましょう。
その手順は次の通り
まずメニューから「プラグイン」ー＞「新規追加」を選択
すると新規追加画面が出てくるので、その中の検索欄に「seo friendly images」を入力
しばらくすると検索結果の一番上に次のプラグインが表示されるので、「今すぐインストール」ボタンを押してインストールします。
ちなみにこのプラグインは以下のページから直接ダウンロードすることも可能
https://ja.wordpress.org/plugins/pb-seo-friendly-images/
インストールが終わると「今すぐインストール」ボタンが「有効化」ボタンに変わるので、必ずそれも押して有効にしておきましょう。
SEO Friendly Imagesの設定手順
このプラグインを有効にすると記事内の画像に対して次のような機能が使用可能です。
- 画像にalt属性とtitle属性の自動付与
- altとtitleの内容を同期的に設定
- 決まった形式でaltとtitleの内容を指定
そしてこの機能は自分の好みに合わせてカスタマイズもできます。
ではカスタマイズ画面を開くにはメニューから「設定」ー＞「SEO Friendly Images」を開きましょう。
するとこのプラグインの設定画面が開きます。
そして画面上では画像最適化について設定項目から色々変更可能です。
その設定項目について重要なオプションをいくつか紹介すると次の通り
最適化する画像の種類
SEO最適化する画像の種類は次のオプションから指定可能
デフォルトだと投稿サムネと投稿内の画像全てを最適化する設定になっています。
この画像種類は選択肢から投稿サムネだけ ( only post thumbnails ) または投稿内の画像だけ ( only images in post content ) に変更することも可能です。
ただ画像最適化はサムネにもしておいた方がいいと思うので、あまり変更する必要性はないかもしれません。
alt属性とtitle属性の同期
alt属性かtitle属性のどちらか一方が変化したとき、そちらの内容をもう片方に合わせる同期機能がこのプラグインにはあります。
その同期方法については次のオプションから指定が可能
デフォルトでは「alt<=>title」となっていて、どちらか一方が変化すればもう片方もそれに合わせた内容になります。
もしalt属性が変わった時だけtitle属性を変えたいなら「alt => title」、
逆にtitle属性が変わった時だけalt属性を変えたいなら「alt <= title」
を選んでおけばOKです。
属性の上書き
もし既に設定済みのalt属性とtitle属性がある場合、
その属性の内容の書き換えを許可するかどうかは次の２つのオプションから変更可能
デフォルトでは両方とも書き換えしない設定になっています。
もし画像の属性を上書きしても問題ないなら次のようにチェックを入れておきましょう。
ただしこのオプションを有効にすると手動でalt属性とtitle属性が設定不可になってしまうので、手動でも画像テキストを指定したい場合はチェックすることはおススメしません。
画像テキストの書式
alt属性やtitle属性には書式を指定することで記事タイトルや画像名を含めることが可能です。
その設定を行うのが「alt scheme」（または「title scheme」）と表示されたオプションの横にあるテキスト欄
上の画像のオレンジ色で囲った部分のように「%name - %title」と表示されているので書式です。
このオプションでは次のように % から始まる変数を使うことで書式を好きなように指定可能
- %title
投稿記事につけられたタイトル
- %desc
投稿記事に指定されている抜粋
- %name
投稿記事内で表示している画像ファイル名
- %category
投稿記事につけられたカテゴリー
- %tags
投稿記事につけられたタグ
- %media_title
メディアダイアログの「タイトル」から指定した画像タイトル
- %media_alt
メディアダイアログの「代替テキスト」から指定したalt属性の内容
- %media_caption
メディアダイアログの「キャプション」から指定したキャプション
- %media_description
メディアダイアログの「説明」から指定した画像の説明
例えば「%name - %title」なら「画像ファイル名 - 投稿記事のタイトル」のようなテキストがalt属性に指定されます。
まとめ
画像にはalt属性・title属性を必ず指定する必要があるわけではありませんが、指定しておけば読者や検索エンジンが画像を把握しやすくなります。
特に検索エンジンは画像自体は読めないので、alt属性を指定しておくことはSEOに一定の効果はあるはずです。
ただし全て手動で設定となると大変なので、代わりにその作業を行ってくれる SEO Friendly Images の使い方について紹介しました。
無駄な作業がなくなり手間が減るので画像のSEO対策をしたい人は是非お試しを！
The post 画像のSEO対策が楽になる！SEO Friendly Imagesプラグインの詳解 first appeared on Fukuro Press.
]]>The post WordPressでリストの点部分をオリジナル画像に置き換える手順 first appeared on Fukuro Press.
]]>
リストを作るには「ul」や「ol」あるいは「dl」などのリストタグが使われます。
そのリストの各項目の横にはulタグなら点（ドット）マーク、olタグなら数字が表示されますが、この点部分はCSSを使えば好きな画像に置き換え可能です。
ここではWordPressでリスト項目の点部分を画像にする方法を解説します。
点（ドット）部分に使用する画像を用意しよう
まず点部分に表示したい画像を用意する必要があります。
あまり大きな画像を使えないので小さ目な画像が探せる次のアイコンダウンロードサイトを使うのがおすすめです。
１．イラストAC
イラストAC はクオリティの高いイラストを無料でダウンロードできるサイト
全ての画像は加工や商用利用OKで著作権やライセンスをサイトに明記する必要もありません。ダウンロードできる画像の種類としては JPEG、PNG、AI-EPS の３種類に対応しています。
とにかく素材数が豊富で記号系の素材も見つかりやすいので素材探しに役立つと思います。
２．Icon8
Icon8 は約68300個の無料フラットアイコンをフリーでダウンロードできるサイト
メールアドレスとパスワードを入力するだけで簡単に登録でき、自分の探したいアイコンのキーワード入力で検索できます。
ただしサイトで使う場合は Icons8 へのリンクが必要になるようです。
３．Material Icons
Material Icons は９００種類以上のマテリアルアイコンを無料ダウンロードできるサイト
登録不要ですぐにダウンロードできるうえにクレジットやリンクの表記は不要です。アイコン色は黒か白かのどちらかが選べます。
その他のダウンロードサイト
無料で商用利用できる便利な画像素材系サービスについては次の記事でジャンル別にさらに詳しくまとめて紹介してあります。
著作権やライセンス表示も一切必要ないので安心して利用できます。素材探しに困っているは是非この記事もご覧ください。
リスト項目を画像に置き換える方法
WordPressでリスト項目の点部分を用意した画像に置き換える手順は次の通りです。
１．CSSを扱えるプラグインの導入
ここではテーマの切り替えをしても同じCSSコードが適用されるように「Simple Custom CSS and JS」というプラグインを使います。
テーマで用意されているcssファイルを編集してもいいですが、デザインを崩す恐れがある上にテーマが変わる度にCSSコードを編集しなおす必要があるのでプラグインを使った方が確実です。
ではメニューから「プラグイン」ー＞「新規追加」と進んで「custom css」などと検索すると次のようなプラグインが検索結果の上あたりに出てくるので「今すぐインストール」を押してインストールしてください。
以下のプラグインページから直接ダウンロードして使うことも可能です。
https://ja.wordpress.org/plugins/custom-css-js/
インストールしたら「今すぐインストール」ボタンが「有効化」ボタンに変わるので必ずそれを押して有効化しておきましょう。
２．リストの点部分に使う画像のアップロード
次にリストの点部分に使用する画像をアップロードします。その手順は次の通りです。
まずメニューから「メディア」ー＞「ライブラリ」をオープン
そしてライブラリ画面で次の画像で示したように「新規追加」ボタンを押し（①）、「ファイルを選択」ボタンを押して（②）点部分に表示したい画像をアップロードしてください。
アップロードが完了すると下の方にアップロードした画像のサムネが表示されているのでそれをクリックしてください。
そうすると「添付ファイルの詳細」が開くので「URL」という部分に表示されている画像URLをコピーしてください。
ここでコピーしたURLがリストの点部分を置き換えるのに使われる画像URLになります。
３．リストの点をカスタムするcssの追加
最後にリストの点部分をオリジナル画像に置き換えるカスタムCSSを追加します。
まずメニューから「Custom CSS & JS」ー＞「Add Custom CSS」をオープン
すると次のようなカスタムCSSの新規追加画面が表示されます。
新規追加画面の「ここにタイトルを入力」と書かれたテキスト欄にはカスタムCSSの分かりやすい名前をつけてください。
そしてその下のCSSコード記入欄に次のようなCSSを記述します。
.entry-content ul {
list-style-type:none;
}
.entry-content ul li{
background-image: url('[コピーした画像URL]');
background-repeat:no-repeat;
background-position:left center;
background-size: contain;
-moz-background-size:contain;
-webkit-background-size:contain;
padding-left: 2em;
}ただし、[コピーした画像URL] は先ほどメディアライブラリ画面でコピーした画像のURLに置き換えてください。
このCSSではliタグの背景画像を設定することでドット部分を置き換えています。ここで背景部分に関わっているのは次のプロパティです。
- background-image
背景画像を設定するプロパティ。「url('画像のURL')」のような形式を指定するとその要素内の背景が画像になります。
- background-repeat
背景画像を繰り返すかどうか指定するプロパティ。デフォルトだと繰り返されてしまうので「no-repeat」を指定しています。
- background-position
背景画像を要素のどの位置に表示するか指定するプロパティ。ここでは「left center」という値を指定することで左方向で垂直方向には中央寄せで表示されるようになります。
- background-size
背景画像のサイズを指定するプロパティ。ここでは「contain」を指定して背景領域に収まる最大サイズになるように設定しています。
以上の内容を入力したら「公開」ボタンを押してCSSを公開しましょう。
サイトでリストがあるページを開いてみると次のようにドット部分がオリジナルの画像に置きかわっています。
もし置き換わっていないようならブラウザのキャッシュをクリアしてみてください。
読みやすい記事を書くには次の工夫も必要！
ここまでがリストの点部分をオリジナル画像に置き換える手順
注意事項とかチェック事項を並べるときに便利なテクニックです。
また今紹介した以外にも読みやすい記事を作るテクニックは他にもあります。
例えばいくつか例を挙げるとすると・・・
- アイキャッチを最適化する
- 行間・文字間隔を調整する
- 語尾のバリエーションを増やす
- 誤字脱字を少なくする
- 定期的に記事のリライトをする
・・・などなど
私自身、こういった工夫を記事を書くときに必ずしています。
詳しくは次の 読みやすい記事の作り方レイアウト編＆書き方編 で解説しました。
１つ１つは地味なテクニックです。でも、面倒くさがらず工夫していけば今までの数倍・数十倍も読みやすい記事にできます。
誰でも簡単にできることオンリーなので、是非お試しあれ
まとめ
以上、WordPressでリストのドット部分を画像に置き換える方法でした。
画像を用意してカスタムCSSを追加すれば簡単にできます。リストを目立たせて表示したい場合に役立つこと間違いなしですね。
The post WordPressでリストの点部分をオリジナル画像に置き換える手順 first appeared on Fukuro Press.
]]>The post 画像圧縮系プラグイン “TinyPng”、”EWWW”、”WP Smush” の比較 first appeared on Fukuro Press.
]]>
WordPressには画像圧縮系のプラグインがいくつかありますが、その中でもインストール数が多く使いやすいのが次の３つのプラグインです。
- EWWW Image Optimizer
- Compress JPEG & PNG images(TinyPng)
- Smush Image Compression and Optimization
この３つのプラグインを 圧縮率 という点から比較してみました。
各プラグインでの画像圧縮方法
最初に、各プラグインでの画像圧縮方法について簡単に紹介します。
１．EWWW Image Optimizer
まずメニューから「プラグイン」ー＞「新規追加」をオープン
そして新規追加画面のプラグイン検索欄に「ewww」というキーワードを入力
すると検索結果に次のプラグインが表示されるので「今すぐインストール」ボタンを押すとインストールが始まります。
インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるのでそれを押すとWordPress内でこのプラグインが使用可能になります。
このプラグインを使って画像を圧縮する方法ですが・・・
まずメニューから「メディア」ー＞「一括最適化」をオープン
すると次画面が表示されるので「最適化されていない画像をスキャンする」を押すと、
プラグインが圧縮するべき画像ファイルをスキャンし初めます。
スキャンが終わると最適化の準備が完了するので「最適化を開始」ボタンをクリック
次のように画像の最適化処理が始まり現在の進捗状況が表示されます。
ファイル数によってかかる時間は異なりますが、
もし千件以上のファイルが最適化対象になっている場合は数時間程度はかかります。
２．Compress JPEG & PNG images
「Compress JPEG & PNG images」は、
有名な「TinyPng」の開発元が配布している画像圧縮系プラグインです。
画像に使われている色数を減らすことで圧縮しているので、
完全なロスレス圧縮ではないものの画質劣化はほとんど分からないレベルです。
このプラグインの導入方法や使い方は ↓つぎの記事で解説した通り
TinyPngはかなり圧縮率が高くなることで有名ですが、このプラグインもTinyPngを使うのでその分かなり時間がかかります。
数百個程度の画像でも数時間かかることがあるので、画像数が多い場合はかなりの時間がかかると思っておいた方がいいかもしれません。
３．WP Smush
このプラグインは Smush Image Compression and Optimization が正式名称。
その導入・方法は次の通りです。
まずメニューから「プラグイン」ー＞「新規追加」をオープン
そしてプラグイン新規追加画面の検索欄に「wp smush」というキーワードを入力
しばらくすると検索結果の一番上に次のプラグインが表示されるので「今すぐインストール」ボタンを押すとインストールが始まります。
ちなみに手動インストールする場合は次ページからzipでのダウンロードも可
https://ja.wordpress.org/plugins/wp-smushit/
インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるので、それを押すのも忘れずに
このプラグインによる、画像圧縮方法は次の通りです。
まずメニューから「メディア」ー＞「WP Smush」をクリック
開くと次のようなプラグインページが表示されるので、その中にある「BULK SMUSH」と書かれたボタンを押すと圧縮が始まります。
ただし無料版では一回の圧縮で50個の画像ファイルしか圧縮できないことに注意！
画像数が多い場合は複数回に分けて圧縮する必要があります。
各プラグインの画像圧縮率はこんな感じ
各プラグインを使って 700個ほど画像を圧縮 してみると、次の結果になりました。
１．EWWW Image Optimizer
圧縮前
画像ファイル数 : 714個 合計ファイルサイズ : 約20.2 MB
圧縮後
画像ファイル数 : 714個 合計ファイルサイズ : 約17.9 MB
合計ファイルサイズが 約20.2MB ⇒ 約17.9MB まで減ったので・・・
圧縮率は 約11.3% くらい
圧縮率としてはそこそこですね。
２．Compress JPEG & PNG（TinyPng）
圧縮前
画像ファイル数 : 714個 合計ファイルサイズ : 約20.2 MB
圧縮後
画像ファイル数 : 714個 合計ファイルサイズ : 約11.1 MB
合計サイズが 約20.2 MB ⇒ 約11.1 MB まで減ったので・・・
圧縮率は 約45% ほど
ロスレス圧縮で多少の劣化があるとはいえかなり圧縮率が高いです。
３．WP Smush
圧縮前
画像ファイル数 : 718 合計ファイルサイズ : 約20.1 MB
圧縮前
画像ファイル数 : 718 合計ファイルサイズ : 約18.5 MB
合計ファイルサイズは 約20.1MB ⇒ 約18.5MB まで減ったので・・・
圧縮率は約7.9% ほど。
他の２つと比べるとかなり圧縮率は悪いですね。
あと１回５０個しか圧縮できないので、他の２つより性能は劣るかもしれません。
まとめ
３つのプラグインをここでの圧縮率の結果で順位付けすると次のようになります。
- Compress JPEG & PNG
⇒ 圧縮率約４５%
- EWWW Image Optimizer
⇒ 圧縮率約１１.３%
- WP Smush
⇒ 圧縮率約７.９%
やはりTinyPngプラグインが圧倒的に圧縮率が高いです。
ただTinyPngは高圧縮率の代わりに画像数が数百個でもかなり時間がかかり、
さらに一カ月の画像数はプレミアム会員でなければ５００個まで制限されています。
もし、すぐに画像圧縮したい場合は「EWWW Image Optimizer」を使うのが良いと思います。こちらは画像数に制限はない上に完全ロスレス圧縮なので。
ただ本当にサーバー使用量を節約したいなら、時間や費用がかかっても TinyPng プラグインを使うのがベストですね。
以上、WPの画像圧縮系プラグインの使い方＆圧縮率比較でした。
The post 画像圧縮系プラグイン “TinyPng”、”EWWW”、”WP Smush” の比較 first appeared on Fukuro Press.
]]>The post WordPressでの画像の貼り付け方を丁寧に解説【初心者向け】 first appeared on Fukuro Press.
]]>
簡単な操作で誰でも貼り付けできるんだ
どんなサイトやブログでも字ばかりの記事だと読者は飽きてしまうので分かりやすく物事を伝えるのに適度に画像を使うことは重要です。
なのでWordPressでサイトやブログを始めるなら画像の貼り方は絶対に覚えておかなくてはなりません。
そこでここではWordPress初心者の人向けに記事への画像の貼り方・カスタマイズ方法について解説します。画像貼り付けは記事作成で頻繁に行うことだと思うのでしっかりと貼り付け方をマスターしましょう。
基本的な貼り付け方
まず何もオプションを指定せずに純粋に記事に画像を貼り付ける方法について紹介します。
そのやり方はとても簡単でまず投稿ページや固定ページの編集画面のツールボタンの中から「メディアを追加」と書かれたボタンを押します。
すると「メディアを追加」ダイアログが表示されるのでその中で「ファイルをアップロード」と書かれたタブを押して開いてください。
そのタブを開くと次のような画面に切り替わるので中央に表示されている「ファイルを選択」ボタンを押してファイル選択ダイアログを開きます。
するとWindowsの場合は次のようなファイル選択ダイアログが出てくるので記事に挿入したい画像を１つ以上選び(①)、ダイアログ下の方にある「開く」ボタンを押します(②)。
他のWindows以外の端末でも画像を選んで開くという手順は同じです。
画像を開くと「メディアを追加」ダイアログ内のメディアライブラリに画像が追加されるので画像が選択されていることを確認(①)して、「投稿に挿入」ボタンを押しましょう(②)。
すると次のように記事内に選択した画像が挿入されます。
また「テキスト」タブを開くと次のようにimgタグで画像が挿入されていることが分かります。
ちなみにimgタグを直接入力して画像を挿入するときは次のような書き方をします。
<img src="[画像URL]" alt="[画像の説明]" width="[画像幅]" height="[画像高さ]">本来はこのようにimgタグを手打ちで入力しなくてはなりませんが、WordPressではタグを手打ちしなくても簡単なボタン操作だけで画像が挿入できるようにできています。
これが記事内への画像の基本的な挿入方法です。
挿入画像のカスタマイズ
挿入したい画像のカスタマイズをするには「メディアを追加」ダイアログの「添付ファイルの詳細」と書かれたエリア(下の画像でオレンジ色の枠で囲った部分)から画像の位置やサイズ、画像情報などが設定可能です。
次はこのエリアで挿入画像のカスタマイズを行う方法について紹介します。
画像情報
「添付画像の詳細」エリアの下にある項目から画像についての情報を設定できます。
上の画像で示したように画像情報として設定可能なのは次の５つの項目です。
- URL
WordPress内での画像の場所であるURLが表示されています。この項目は変更できません。
- タイトル
画像のタイトルです。これは変更可能でページ上ではタイトルは表示されませんが画像検索する場合に役に立ちます。
- キャプション
この項目に入力したテキストが画像の下に表示されます。画像にコメントなどを入れるときに役立つ項目です。
- 代替テキスト
画像がリンク切れ等で見れない場合に代わりに表示されるテキストのことです。html上ではalt属性として扱われます。
- 説明
画像に関する簡単な説明を書ける項目です。画像を検索するときここに入力した内容も検索対象に含まれます。
WordPressでは画像に対してこの５つの項目が設定可能です。
特に代替テキストは検索エンジンなどのクローラーが画像を認識するためのテキストであり、さらにalt属性にも使われます。
なのでSEO(検索エンジン最適化)にも効果があると言われているので画像を挿入するときは画像の内容を表すキーワードなどを入力しましょう。
画像の位置
記事内での画像の一は「添付画像の詳細」エリアの下の方にある「添付ファイルの表示設定」の「配置」と書かれた項目から設定できます。
画像の配置位置として選択可能な場所は次の４つです。
- 左
- 中央
- 右
- なし
「なし」を選んだ場合、画像位置は記事内で左に表示されるようになります。
リンク先
画像のリンク先は「添付画像の詳細」エリアの下の方にある「添付ファイルの表示設定」の中で「リンク先」と書かれた項目から設定可能です。
このリンク先として選べるのは次の４つです。
- なし
画像にリンク先を指定しない
- メディアファイル
次のような画像が実際に置かれている場所への直リンク
https://fukuro-press.com/wp-content/uploads/2018/04/wordpress.png
- 添付ファイルのページ
次のような添付ファイルページを表すURL
https://fukuro-press.com/?attachment_id=1918
- カスタムURL
これを選ぶと画像をクリックしたときなどに開きたいURLを好きに設定可能
ここで「なし」以外のリンク先を選ぶとhtml上ではimgタグがそのリンク先へのaタグで囲まれるようになります。
<a href="[リンク先]">
<img class="alignnone wp-image-2739 size-full" src="[画像URL]" width="287" height="217" />
</a>そしてページ内で画像をクリックしたときにそのリンク先の画像が開かれるようになります。「なし」を指定した場合は画像は開けません。
画像サイズ
画像のサイズは「添付画像の詳細」エリアの下の方にある「添付ファイルの表示設定」の中で「サイズ」と書かれた項目から指定できます。
サイズとして選べるのは次の３つです。
- サムネイル(150x150)
- 中(300x196)
- フルサイズ(元の画像サイズ)
記事内に表示する画像は基本的にはフルサイズで設定しますが、記事のアイキャッチ画像をつけるときはサムネイルを選ぶとアイキャッチ用の150x150の長方形画像が指定できます。
挿入画像の編集
一度記事内に挿入した画像の設定を変更するには編集画面の「ビジュアル」タブを開き、挿入した画像をクリックするとメニューが出てくるのでその中からペンマーク( 
←このアイコン)を押します。
すると次のようなダイアログが表示されます。
ここでは画像について次の項目の変更が可能です。
- キャプション
ページ内に挿入した画像の下に表示されるテキスト
- 代替テキスト
画像が表示されないときに代わりに表示されるテキスト。html上ではalt属性に指定されます。
- 配置
記事内での記事の配置。「左」「中央」「右」「なし」の４つから指定可能です。
- サイズ
記事内での画像サイズ。「サムネイル」「中」「フルサイズ」「カスタムサイズ」の４つから指定可能で、「カスタムサイズ」を選ぶと元の縦横比を保ったまま画像を好きなサイズに変更できます。
- リンク先
画像をクリックしたときに開かれるリンク先。「なし」「メディア」「添付ファイルのページ」「カスタムURL」の４つから指定可能です。
これらの項目を変更したら右下にある「更新」ボタンを押すと変更内容が反映されます。
画像の検索
一度メディアライブラリに追加した画像は後から再利用することができます。ただ画像ファイルが膨大になってくると目的のファイルを探すだけでも苦労し、時間の無駄になってしまいます。
そこで便利なのでメディアライブラリでの画像検索です。
画像検索の仕方ですがまず「メディアを追加」ダイアログを開き、「メディア項目を検索...」と書かれたテキスト欄に検索キーワードを入力するだけです。
そしてキーワードを入力すると画像に設定された次のような情報を元にそれに該当する画像が一覧表示されます。
- タイトル
- キャプション
- 説明
画像に設定されたこの３つの情報からキーワード検索で画像を探すことが可能ですが、「URL」と「代替テキスト」は検索対象に含まれていないので注意が必要です。
サイトの規模が大きくなってくると画像数もそれに比例して膨大になってくるので必要な画像は検索機能を使って探すようにすると楽です。
画像アップロードに役立つプラグイン
アップロード時に画像に何か加工処理が必要ならアップロードの度に手動で行うよりプラグインを使った方が楽になります。
もしまだプラグインを一度も使ったことがないなら次の記事でプラグインの導入方法について解説してあるので参考にしてください。
次に紹介するようなプラグインを使うとアップロード時に画像が自動的にリサイズや圧縮されて作業が効率化できるので便利です。
Resize Image After Upload
これは画像アップロード時に自動的に画像のリサイズを行ってくれるプラグインです。
画像をアップロードしたとき記事の幅より大きい画像は自動的に縮小表示されますが、このプラグインを使うとリサイズされるので容量の節約になります。
導入方法については次の記事で書いてあるので大きい画像をアップロードすることが多いなら使ってみると作業が楽になると思います。
Compress JPEG & PNG images
これは画像アップロード時に「TinyPng」を使ってPNGとJPEG画像を自動的に圧縮してくれるプラグインです。
「TinyPng」と言えば画像の圧縮率が高いことで有名なサービスで完全なロスレス圧縮でないものの人間の眼にはほとんど分かりません。
また画像は他のコンテンツと比べて読み込みに時間がかかるので、圧縮するとページの読み込み時間が減ってサーバー使用量の節約にもなるのでおススメです。
プラグインの導入方法については次の記事で解説してあります。１か月に圧縮できる画像数は無料版だと制限がありますが導入する価値はあると思います。
まとめ
WordPressではタグを直打ちすることなく簡単操作で手間なく画像を貼り付けできるのでとても便利です。
ただし記事内で画像を見やすくするために位置やサイズを調整してリンク先を指定したり、読者や検索エンジンに画像の情報を伝えるためのキャプションや代替テキストなどの入力は忘れずに行った方がいいと思います。
以上ここではWordPress初心者の人向けに記事への画像の貼り方・カスタマイズ方法について解説しました。
The post WordPressでの画像の貼り付け方を丁寧に解説【初心者向け】 first appeared on Fukuro Press.
]]>The post 画像圧縮率が高い Compress JPEG & PNG ( TinyPNG ) の使い方＆注意点 first appeared on Fukuro Press.
]]>
画像はサイズを少しでも減らすのに有効なのが圧縮すること。
画像圧縮系のサービスやサイトは数多くあります。
その中でもpngやjpegの圧縮率がよくて劣化もしにくいのが・・・
あの有名な「TinyPng」というサービス
実はWordPressでも「Compress Jpeg & PNG images」プラグインを使えば、
TinyPngで一括圧縮したり、アップロード時に自動圧縮させることが可能なんです。
ここではその Compress Jpeg & PNG images を使い、画像圧縮する方法をご紹介！
TinyPngは無劣化圧縮？実は…
まずプラグインの紹介をする前に TinyPngを使うときの注意点 を説明します。
よくTinyPngにありがちなのは「ロスレス(無劣化)で圧縮できる」という誤解です。
ですが TinyPng本家 の説明には、圧縮について ↓こう書かれています。
TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files.
はっきりと「lossy compress(不可逆圧縮 = 完全に元の画像に戻せない圧縮方法)」と書いてあります。
一説には24bitカラーを8bitカラーに変更し、使用色数を大幅に減らすことで圧縮しているのではないかと言われています。
ただTinyPngの場合は 不可逆圧縮と言ってもほぼ劣化が気にならないレベル です。
例えば次のようなグラデーション画像(サイズは約15.4KB)があるとします。
これをTinyPngで圧縮するとサイズは約7.84KBになり、次が圧縮後の画像です。
サイズがほぼ半分になったにもかかわらず画質は全く劣化していないように見えます。
実際は使用色数は元画像とは同じじゃありません。
微妙～に色数が変わってるものの、人間の眼ではその違いは分からないです。
このようにTinyPngは不可逆圧縮。
だから完全に元の画像の画質を保てるわけではないです。
でも人間の眼で見るには違いが分からないレベルの劣化 なので、画像が劣化しすぎて丸っきり別物になるという心配はありません。
「Compress JPEG & PNG images」の導入・使い方
「Compress JPEG & PNG images」プラグインを使うと、WordPress内でTinyPngを使って画像を圧縮することができます。
その導入手順と使い方は次の通り。
プラグインの導入
まずメニューから「プラグイン」ー＞「新規追加」をオープン。
新規追加画面が開いたらプラグインの検索欄に「tinypng」というキーワードを入力。
すると検索結果の一番上あたりに次のプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしてください。
ちなみに次のプラグインページから直接ダウンロードすることも可。
https://ja.wordpress.org/plugins/tiny-compress-images/
インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるので、必ず押して有効化するのもお忘れなく
これでプラグインが使用可能になります。
TinyPNGアカウントの作成
次にプラグインを使用するための TinyPNGアカウント を作ります。
その作成方法は次の手順です。
まずメニューから「設定」ー＞「メディア」をクリック。
メディア設定を開いたら一番下にスクロールするとTinyPngの設定項目があるはず。
そこの「Register new account」内に名前とメールアドレスを入力し、「Register account」ボタンを押してみてください。
アカウントを登録すると登録したメールアドレス宛に次のようなメールが届くので、
その中にある「Activate your account」ボタンを押すとアカウント確認が完了します。
↓ TinyPNGで見覚えのあるパンダ君の画像つき
これでプラグインを使用するためのアカウント登録は完了です。
プラグインによる画像を圧縮手順
画像を圧縮するには、メニューから「メディア」ー＞「Bulk Optimization」を開きます。
すると次のようなページが開くのでその下に表示されている「Start Bulk Options」ボタンを押すと画像の圧縮が開始します。
数百個以上の画像があると圧縮にもかなり時間がかかるります。
終わるまで気長に待ちましょう。
「Compress JPEG & PNG images」の制限
Compress JPEG & PNG images は画像をほぼ劣化なしで圧縮できる便利なプラグインですが１つ制限があります。
それは無料会員だと１カ月の圧縮画像数は500個まで、という制限
今プラグインを使ってどれだけの画像を圧縮したかは、
TinyPngのダッシュボード画面で次のように確認できます。
もしこういった制限をなくすなら有料会員になる必要があります。
無料会員だと圧縮できる数に限りがあることに注意です。
他の圧縮系プラグインとの比較
この Compress JPEG & PNG 以外にも画像圧縮系プラグインは結構あります。
しかし圧縮率と劣化の少なさで比較すればやはり TinyPng が一番ですね。
次記事でも TinyPng と他の圧縮系プラグイン ( EWWW と WP Smush の２つ ) を比較しましたが、圧倒的に圧縮率が高くかなり優秀です。
有料会員にならないと全ての機能は使えないものの、少しでも画像を小さくしたいという場合はTinyPngを選ぶのが一番いい選択だと思います。
圧縮以外にできる画像最適化の方法
ここまで TinyPNG について紹介してきました。圧縮すれば読み込み速度も速くなるので読みやすい快適なブログが作れるはずです。
そしてこれ以外にも画像を最適化する方法はいくつかあります。
例えばその最適化案をいくつか挙げるとすると・・・
- 圧縮しやすい画像を選ぶ・作成する
- 記事最大幅にリサイズ（特にアイキャッチ）
- 検索エンジン向けに画像の説明を追加する
・・・などなど
記事文章をリライトするのと同じく、画像も最適化すれば読者にも検索エンジンにも評価の高い記事ができます。
ちなみに次がアイキャッチ画像での最適化方法についてまとめた記事です。
特に「アクセスが少ない・・・」「書いた記事が読まれない・・・」という方は最適化しておきましょう。地道に最適化すれば徐々にアクセスが集められるようになります。
まとめ
以上、 Compress Jpeg & PNG images プラグインを使い方についてでした。
本家 TinyPNGと圧縮性能は変わらないので、画像圧縮するならこのプラグインを使っておけば間違いないですね。
The post 画像圧縮率が高い Compress JPEG & PNG ( TinyPNG ) の使い方＆注意点 first appeared on Fukuro Press.
]]>The post jQueryで画像のフェードインとスライドダウンを同時に行う方法 first appeared on Fukuro Press.
]]>
インタラクティブなサイトだとユーザーが何か操作すると文章や画像などがアニメーションしながら表示される演出をしているところがあります。
そのような演出をするにはjQueryで要素に対してアニメーション関数を実行するとフェードインやスライドダウンの効果をつけることができます。
ただ複数の効果をつけようとした場合は少し工夫が必要です。ここでは画像などの要素の表示時にフェードインとスライドダウンの両方のアニメーション効果をつける方法について解説します。
jQueryでアニメーション効果をつける方法
jQueryで要素をアニメーションさせながら表示するには非表示(display:none)の要素に対してアニメーションさせる関数を呼び出します。
例えばボタンを押したら画像がフェードインして表示する場合を考えてみます。必要なのが次のような画像要素と画像を表示するためのボタン要素です。
<div id="image" style="display: none;">
<img class="alignnone size-medium wp-image-226" src="./wordpress.png" />
</div>
<button id="show_btn">画像を表示</button>画像の含まれているdiv要素は「display:none」で非表示にしてあります。
そしてボタンを押したらフェードインで表示するようなスクリプトは次の通りです。
jQuery(function(){
jQuery("#show_btn").on("click", function(){
jQuery("#image").fadeIn(500);
});
});
fadeIn関数は要素をフェードイン表示させる関数で次のような構文を持ちます。
fadeIn([ミリ秒], [コールバック関数])第一引数でフェードインにかかる時間(ミリ秒)を指定し、ここでは省略していますが第二引数でアニメーション終了時に実行される関数を渡します。
上のスクリプトを実行するとボタンを押したときに画像がフェードインして表示されます。実際にどのように表示されるかは下のボタンを押してみてください。
また要素を上から下にスライドして表示するにはslideDownという関数を使います。構文は次の通りです。
slideDown([ミリ秒], [コールバック関数])fadeInと同じくスライドにかかる時間(ミリ秒)と終了時に実行する関数を渡すだけです。
実際にスライドダウンがどのように動くかは下のボタンを押して確かめてください。
２つの効果を同時につけた場合の問題
フェードインとスライドダウンの効果を同時につけようとすると問題があります。それは同時に２つの効果をつけられないということです。
例えば２つの効果をつけようと次のようなスクリプトを書いたとします。
jQuery(function(){
jQuery("#btn").on("click", function(){
jQuery("#image").fadeIn(500).slideDown(500);
});
});
このように書けばフェードインしながらスライドダウンしてくるのではと期待してしまいますが、実際はそうはなりません。
どのように動作するかは下のボタンを押してみてください。
スライドダウンの効果しかついていないと思います。
これはfadeInを実行したすぐ後にslideDownを実行しているので効果が上書きされるからです。この方法では同時に２つの効果をつけることはできません。
animate関数を使えばいい
そこで解決策としてfadeIn関数をanimate関数に置き換えます。
animate関数は独自のアニメーションを作るための関数でCSSプロパティを時間に沿って変化させることができ、次のような構文を持ちます。
animate([CSSプロパティ], [オプション])
例えば３秒かけて要素の幅を200px、高さを100pxにするアニメーションをかけたいなら次のスクリプトを書きます。
$("div.box").animate({
width: "200px",
height: "100px"
}, {duration: 3000});１つめの引数には「CSSプロパティ名: 値」のような形式でプロパティと値を複数指定でき、２つめの引数でアニメーション時間などのオプションを指定します。
この時要素にアニメ効果を複数つけたい場合は２つめのオプションで「queue」に対してfalseを指定します。
これを使って要素にフェードイン効果とスライドダウン効果を同時につけます。
まず今まで通り次のように表示する要素とボタンを次のように定義します。
<div id="image" style="display: none; opacity: 0;">
<img src="./wordpress.png" />
</div>
<button id="show_btn" class="_btn">画像を表示</button>表示する要素に対して「opacity: 0」で透過度を0にしていることに注意してください。
そして次のようなスクリプトを書きます。
jQuery("#show_btn").on("click", function(){
jQuery("#image")
.slideDown(500).animate(
{ opacity: 1 },
{ queue: false, duration: 500 }
);
});
スライドダウンすると同時にanimate関数内で500ミリ秒かけてopacityプロパティを1(完全不透明)にすることでフェードイン効果をつけています。
実際にどのように表示されるかは下のボタンを押してください。
少しわかりにくいかもしれませんが、要素が透明から不透明になりながらスライドダウンして表示されているのが分かると思います。
まとめ
以上、フェードイン＆スライドダウンの２つのアニメ効果をつける方法でした。
これ以外の効果をつけたい場合もこの方法が使えます。
The post jQueryで画像のフェードインとスライドダウンを同時に行う方法 first appeared on Fukuro Press.
]]>The post 画像にウォーターマークを入れられるプラグイン「Image Watermark」の使い方 first appeared on Fukuro Press.
]]>
インターネット上の画像というのは基本的に誰でもコピーできてしまうので、何も対策をしないと簡単に無断使用されてしまいます。
そんなときに有効なのが画像に著作権を示した透かし(ウォーターマーク)を入れることです。特に有料の画像ダウンロードサイトなどではサンプル画像をそのまま使われないように画像に透かしを入れて対策しているところが多いですよね。
でもだからといって手動で１つ１つ著作権表示をしていくのはかなり大変です。
そこでここでは画像のアップロード時に透かしを入れることができる「Image Watermark」プラグインの導入・使い方について紹介します。
ただしこのプラグインでは画像を加工して透かしを入れるので何か不具合が起こった時のために必ず画像のバックアップはとっておいてください。
プラグインの導入
では最初にプラグインをインストールして有効化していきましょう。
その手順は次の通り
まずメニューから「プラグイン」ー＞「新規追加」を開いてください。
そして新規追加画面の検索欄に「watermark」などのキーワードを入力すると検索結果の上あたりに次のようなプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしましょう。
ちなみに以下のプラグインページから直接ダウンロードして使うことも可能です。
https://ja.wordpress.org/plugins/image-watermark/
インストールが完了すると「今すぐインストール」ボタンが「有効化」ボタンに変わるので必ずそれを押して有効化してください。これでプラグインが使用可能になります。
プラグインの設定
画像に入れる透かし画像の設定はプラグインの設定画面から設定できます。
その設定手順は次の通り
まずメニューから「設定」ー＞「Watermark」を開きます。
すると次のような設定画面が開きます。
この画面では画像に透かしを入れるために次の設定が必要です。
基本設定
初めに次のような「General settings」と書かれたエリアで基本設定を行っていきましょう。
まず画像アップロード時に透かしを入れるために「Manual watermarking」の下にあるチェックボックスにチェックを入れます。
次に画像のどの種類のサイズに透かしを入れるか「Enable watermark for」の下にあるチェックボックスから選択します。
ただし下に書いてある説明によると「full」は画像に設定した透かしの除去や変更に使われるのでチェックはつけない方がいいようです。
透かしの位置設定
次に透かしを画像のどの位置に表示するか「Watermark Position」と書かれたエリアから設定していきましょう。
まず「Watermark alignment」から透かしを画像の「左上」「中央上」「右上」「左中央」「真ん中」「右中央」「左下」「中央下」「右下」の内どの位置に表示するかを選びます。
基本的な位置設定はこれだけで十分ですが、より細かく位置調整したい場合は「Watermark offset」からX方向とY方向のオフセット位置、「Offset unit」からオフセット位置の単位を「pixels(ピクセル)」「percentage(%)」を選択可能です。
透かし位置の設定は以上です。
ウォーターマーク画像のアップロード
最後に画像の上にウォーターマーク(透かし)として表示したい画像をアップロードします。
アップロードするには「Watermark image」の横にある「Select image」ボタンを押すとメディアライブラリが表示されるのでその中から透かし画像を選んでください。アップロードが完了すると次のように「Watermark preview」にプレビューが表示されます。
ウォーターマーク画像の大きさについては透かしを入れる画像の大きさに合わせてプラグインが自動調整してくれます。
ここで設定した画像が透かしとして画像の上に半透明で表示されますが、その透過度を指定したい場合は「Watermark transparency / opacity」から０～１００の範囲で選択可能です。
透過度に１００を指定すると完全不当目になり、０を指定すると完全透明になりウォーターマークが見えなくなります。
あまり透過度が低すぎると元画像が見えてしまい、透かし効果が薄くなってしまうので５０～１００の範囲で設定しておくといいかもしれません。
ここまでの設定が終わったら「変更を保存」ボタンを押して設定を保存してください。
以上でプラグインの設定は完了です。
透かしの入れ方
プラグインを使って画像アップロード時や挿入時に透かしを入れる手順は次の通りです。
まず投稿画面で「メディアを追加」ボタンを押します。
そして表示されたメディアライブラリの中から投稿に挿入したい画像をクリックして選択し「添付ファイルの詳細」の中にある「Apply watermark」と書かれたリンクをクリックしましょう。
これで画像に透かしが入って表示されるようになります。
以上がImage Watermarkを使って画像に透かしを入れる手順です。
操作も難しくないので手軽に画像に透かしを入れたい場合に役立つことでしょう。
画像編集に便利なその他のプラグイン
Image Watermarkは透かしを入れるのに便利なプラグインです。
しかし画像に透かしを入れるだけでなく文字入れや図形・グラフの挿入などの画像編集に役立つプラグインもあります。
それらを使うと時間の節約になって便利なので次は特におすすめの画像編集系プラグインをいくつか紹介していきます。
DrawIT
画像に文字入れとか図形を挿入したりするときに面倒なのはいちいち編集ソフトを立ち上げないといけないことですよね。
その画像編集作業をWordPress上だけで行えるのがこの「DrawIT」プラグインです。
DrawITを使うと画像の編集作業を全て投稿画面上で行えるようになります。
その編集作業の例をいくつか挙げるとすると・・・
- 画像内への文字入れ
- 矢印や丸・四角などの図形の挿入
- 画像を組み合わせて説明図を作る
・・・などなど
基本的なことなら大抵できるので編集ソフトを起動してあれこれする必要がありません。
DrawITの詳しい使い方については次の記事で紹介しました。
イラストレーターのような本格的な画像編集はできませんが、ちょっとした文字入れとか図形の挿入ならこれ１つで完結できるのでおすすめです。
Visualizer
正式名称は「WordPress Charts and Graph Lite」で記事内にグラフやチャートを挿入するためのプラグインです。
これを使うと用意したCSVデータからグラフなどが簡単に作れてしまいます。
対応しているグラフは様々でいくつか例を挙げるとすると・・・
- 横棒グラフ
- 縦棒グラフ
- 折れ線グラフ
- チャート
・・・などなど
ほとんどのグラフの種類に対応しています。
導入方法やグラフの作り方については次の記事で詳しく紹介したのでそちらをどうぞ
グラフを使うと説得力が高まるので、そういう文章を書く必要があるなら是非使ってみてください。
まとめ
ここでは画像にウォーターマーク(透かし)を表示できる「Image watermark」というプラグインの使い方について紹介しました。
自分で作った画像を人に無断で使用されたくない場合には役立つことでしょう。
以上ここでは画像に透かしを入れるプラグイン「Image Watermark」の使い方について紹介しました。
The post 画像にウォーターマークを入れられるプラグイン「Image Watermark」の使い方 first appeared on Fukuro Press.
]]>The post WordPressで大きな画像を一括自動リサイズさせる方法 first appeared on Fukuro Press.
]]>
WordPressで 記事幅より大きな画像をアップロードした場合、それに収まるように画像が縮小されて表示されます。
とは言っても縮小されるなら初めから記事幅に合わせてアップロードした方がサーバー容量の節約にもなりますよね。
でもアップロードするたびに編集ソフトでアレコレやりたくない・・・
そういう人に便利なのが Resize Image After Upload というプラグイン
ここではこれを使い、
画像アップロード時に記事幅に合わせて画像を自動リサイズする方法を紹介します。
まず今使っているテーマの記事幅を調べよう
まず自動リサイズには使用中テーマの記事部分の最大幅が分からないといけません。なのでその調べ方について最初に紹介します。
WordPressの記事部分は次の画像のオレンジ色の枠で囲ったようにタイトルと記事本文が含まれる部分のことです。
画像をリサイズするときはこの記事部分の最大幅に合わせる必要がありますが、テーマによってその幅は異なるのでテーマごとの記事幅を知る必要があります。
その記事幅を求めるのが次の手順です。
まずWordPressで作ったブログをChromeブラウザで最大化して開いてください。
そして記事が表示されている適当なページを表示して Ctrl + Shift + I キーを同時押しして次のようにデベロッパーツールを開きます。
そしてディベロッパーツールで開いた状態で Ctrl + Shift + M キーを同時押しし、記事の一番上あたりにマウスをホバーさせてください。
そして次画像のように記事部分の大きさが「幅x高さ」の形式(単位はピクセル)で表示されるのでその中の画面幅だけをメモしましょう。
以上が記事幅の最大値を調べる方法
では記事幅が調べ終わったら次に自動リサイズの設定をしていきます。
画像の一括自動リサイズの導入・設定手順
今使っているテーマの記事最大幅が分かれば、後は Resize Image After Upload を導入・設定するだけで自動リサイズができます。
しかもアップロード時に一括でリサイズしてくれる優れもの
その導入・設定手順は次の通りです。
１．Resize Image After Upload のインストール
このプラグインをインストールして有効化するには、
まずメニューから「プラグイン」ー＞「新規追加」を開いてください。
そして新規追加画面の検索欄に「resize image after」というキーワードを入力。
しばらくすると検索結果の上に次のプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしてください。
ちなみに手動インストールする場合は次ページからzipでのダウンロードも可
https://ja.wordpress.org/plugins/resize-image-after-upload/
そしてインストールが終わると「今すぐインストール」ボタンが「有効化」ボタンに変わるので、必ずそれも押して有効化するのも忘れないでください。
２．プラグインから画像自動リサイズの設定
次に自動リサイズする画像の最大幅をプラグインの設定画面から指定します。
まずメニューから「設定」ー＞「Resize Image Upload」をオープン
そして表示された設定画面の中から「Re-sizing options」という項目をさがし、その中の「Max width」に先ほどメモした記事の最大幅を入力します。
また画像幅に合わせて画像高さをリサイズするために「Max height」には0を入力してください。あとは下の方にある「Update Options」ボタンを押せば設定が保存されます。
以上が画像リサイズ設定の手順
実際に設定した記事幅を超える画像をアップロードすると自動でその幅に合わせてリサイズされるようになります。
リサイズ以外の画像最適化の方法
ここまで記事幅に画像をリサイズする方法を紹介してきました。画像容量を小さくできるので読み込み速度の改善にもつながるはずです。
しかし、リサイズ以外にも画像を最適化する方法はいくつかあります。
例えば最適化に効果があるのは次のようなこと
- 画像データを圧縮して小さくする
- 検索エンジン向けに画像の説明を追加する
特に画像圧縮は読みやすい快適なブログを作るのに絶対欠かせません。もし無圧縮の画像を使っているなら必ず圧縮するのをおススメします。
ちなみにアイキャッチ画像での最適化方法については次記事で紹介しました。
特に「記事が読まれない・・」「アクセスが伸びない・・・」とお悩みの方は是非お試しを。最適化すれば間違いなく記事を読んでもらいやすくなります。
まとめ
以上、画像アップロード時に自動リサイズしてくれる Resize Image After Upload プラグインの導入と設定についてでした。
いちいち画像編集ソフトを起動するのは時間も手間がかかるから嫌だ、という型は使ってみてください。結構便利だと思います
The post WordPressで大きな画像を一括自動リサイズさせる方法 first appeared on Fukuro Press.
]]>The post CSSだけで画像の上に文字や要素を重ねる方法 first appeared on Fukuro Press.
]]>
オシャレでWebデザインを作るときに使われるのが画像の上に文字やボタンなどを表示する手法です。
例えば何かフォームなどを作るときにただボタンやテキストボックスを配置するだけだと味気ないですが、画像の上にフォームを作るとそれだけでオシャレな感じになります。
そのようなデザインを作るのは意外と難しくなくCSSだけで実現できます。
ここでは実例を交えてそのようなデザインを作る方法について解説します。
前提知識
画像に何か要素を重ねる際に理解しておかなければならないのは次のCSSプロパティです。
positionプロパティ
これは要素の位置関係について指定するプロパティです。このプロパティが取れる値は次の４つです。
- static
positionのデフォルト値でどんな方法でもこの値が指定されている要素は位置を変えることができない
- relative
元々表示されるはずだった場所から相対的に位置指定できる
- fixed
viewportに対する相対位置で配置。つまり特定の場所に要素が固定されるので画面をスクロールしても付いてくる要素が作れる
- absolute
fixedと似ているが位置指定可能(positionプロパティがstatic以外)で最も近い要素に対する相対位置に配置される
この中で今回やろうとしている文字の重ね合わせに必要なのはrelativeとabsoluteです。
やることは画像やテキストの入った親要素にposition:relativeを指定して、画像の中に埋め込みたいテキスト要素にposition:absoluteを指定するだけです。この説明を図で表すと以下のような画像のようになります。
上の画像のように画像要素自体にはpositionプロパティを指定する必要がありません。
top,left,bottom,rightプロパティ
この４つは要素の配置する位置を指定するプロパティです。ただし要素のpositionプロパティにrelative,absolute,fixedが指定されている場合に有効になります。
これらのプロパティは基準となる位置から上下左右からどのくらい離れているのか指定するためのものです。例えばtopに10pxを指定すると親要素の上部から10pxだけ離れた場所から要素が開始されます。
画像にテキストを埋め込みたい場合、このtop,left, right, bottomプロパティに適当な値を指定することでテキスト要素の親要素内での位置を決めることができます。
画像へのテキスト埋め込み方
ここまでで説明したpositionとtop,left,right,bottomプロパティを活用すると画像の中にテキストなどの要素を埋め込むことができます。
例えば次が画像埋め込みのHTMLとCSSです。
HTMLの例
<div class="box" >
<img src="./sample.jpg" width="100%" height="100%" />
<div class="text">WordPress</div>
</div>CSSの例
.box
{
position: relative;
}
.box div.text
{
position: absolute;
left: 10px;
top: 10px;
font-size: 30px;
}
親要素にはpostion:relativeを指定し、その中のテキスト要素(div.text)にposition:absoluteを指定しています。テキスト要素にはtop:10px, left:10pxを指定しているので親要素の上部から10px、左側から10pxだけ離れた場所に要素が表示されます。
実際には次のように画像とテキストが重なって表示されます。
応用例
最後に画像に要素を埋め込む手法を利用したいくつかの応用例を紹介します。
テキストを中央表示
次は画像中央にテキストを表示する例です。
HTMLコード
<div class="box">
<img src="./sample.jpg" width="100%" height="100%" />
<div class="text">WordPress</div>
</div>CSSコード
.box
{
position: relative;
}
.box div.text
{
position: absolute;
width: 100%;
left: 0;
top: calc(50% - 25px);
text-align: center;
color: darkblue;
font-weight: bold;
font-size: 50px;
line-height: 50px;
}
CSSでテキスト要素のtopプロパティで縦中央にくるように調整しています。この時ただ50%と指定すると50%の場所から要素が開始してしまうのでcalc関数を使い、フォントサイズの半分(50px)を引くことで完全な縦中央寄せになります。
またwidthを100%にし、text-alignをcenterにすることで横方向に中央寄せしています。
このCSSを適用するとブラウザでは次のような表示になります。
画像内にフォーム埋め込み
画像内にフォームを埋め込む例です。
HTMLコード
<div class="box">
<img class="./sample.jpg" alt="" width="100%" height="100%" />
<form class="form">
<input type="text" />
<button class="btn" type="submit">送信</button>
</form>
</div>CSSコード
.box
{
position: relative;
}
.form
{
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
}
.btn
{
padding: 10px;
margin-top: 10px;
}
このCSSで重要なのは次の部分です。
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);まず親要素の上部と左側から50%だけ離れたところからフォーム要素を開始するようにtopとleftを設定しています。しかしこれだとフォームの一番左上が中央にくるので中央寄せになりません。
そこでtransformプロパティでフォーム要素の大きさの半分ずつ戻す(-50%)という処理をしています。これで要素の大きさに関わらず完全に中央寄せになります。
ブラウザ上では次のように中央にフォームが表示されます。
このような親要素内でブロック要素を中央寄せする手法はこの場合だけでなく汎用的に役立つテクニックだと思います。
以上画像内にテキストなどの要素を埋め込む手法について解説しました。
The post CSSだけで画像の上に文字や要素を重ねる方法 first appeared on Fukuro Press.
]]>