ホームページやブログ更新が捗る
ツールとプラグイン

記事公開日:
最終更新日:

こんにちは、新潟のマザーシップウェブ制作事務所です。

ホームページやブログづくりで一番面倒なのは画像の扱い!

これらをすこしでもスムーズに、簡単にする方法を今回はブログに書きたいと思います。

ワードプレスで画像をアップロードする方法(デフォルト)

クラシックエディタの場合

画像を入れたい場所を選択したあと、入力画面上部の「メディアを追加」を押します。

ホームページやブログ更新が捗る ツールとプラグイン

「メディアを追加」ダイアログが出たら、「ファイルをアップロード」のタブを選し、「ファイルを選択ボタン」またはこちらの画面に任意の画像をドラッグして画像をアップロードします。

ホームページやブログ更新が捗る ツールとプラグイン

最後に右列から代替テキスト、タイトル、画像サイズ、リンク先などを整えてから、「投稿に挿入」します。

ホームページやブログ更新が捗る ツールとプラグイン

 

ブロックエディタの場合

任意の空白ブロックに「/」を入力すると「画像」というアイコンが出てくるのでこちらから画像を入力します。

ホームページやブログ更新が捗る ツールとプラグイン

画像アイコンをクリックしたあとは「アップロード」や「メディアライブラリ」ボタンからアップロードできます。

ホームページやブログ更新が捗る ツールとプラグイン

以降はクラシックエディタと同じです。

 

画像のアップロードをちょっと簡単にする方法

実は「メディアを追加」を使わなくてもPCのフォルダから編集画面にドロップするだけでもアップロード可能です。

ホームページやブログ更新が捗る ツールとプラグイン

ドラッグでアップロードした場合は鉛筆マークから代替テキストやサイズなど調整します。

ホームページやブログ更新が捗る ツールとプラグイン

ドラッグでアップロードした場合はサムネイルサイズで上がっている事が多く、そのまま公開すると画像が荒れてしまいますので、特に事情がなければ別のサイズにしたほうが良いです(サイトによりますが、中か大)

ホームページやブログ更新が捗る ツールとプラグイン

 

さらに簡単にする方法

ドラッグ&ドロップでアップロードで、通常はいいんですが、、

この方法は、一回自分のPCに画像をダウンロードして保存する必要があるんです

…面倒ではありませんか?

例えば、旧サイトから新サイトに手動で入力移行するときなど。

例えば、スクリーンキャプチャーを取ったあとなど。

保存が面倒ですよね。コピーしてすぐにはりたいですよね?

 

そこで、画面からコピーした画像を直接ワードプレスに貼り付けするプラグインの紹介です。

プラグイン The Paste

The Paste

サイトやエクスプローラから「画像をコピー」(ctrl+c)

ホームページやブログ更新が捗る ツールとプラグイン

「画像を貼り付け」(ctrl+v)

※ショートカットキーで貼り付けできない場合は、↓の画像の右クリックをお試しを。

ホームページやブログ更新が捗る ツールとプラグイン

鉛筆ボタンから代替テキストや画像サイズを調整します。

ホームページやブログ更新が捗る ツールとプラグイン

やはり、「サムネイルサイズ」で画像追加されている場合が多いので、サイトにもよりますが中・大に変更したほうが良いです。

これだけで作業完了します。一旦PCに保存するとかないのでサクサクで作業可能です。

 

 

メディアライブラリから同時に複数ペースト&アップロードできる!

さらにすごいのは、メディアアップロード画面からだとペースト(ctrl+v)で複数の画像を同時アップロードできるという点です。

拡張子やファイル名もアップロード画面から指定できます。

あまりにも大量にアップロードするとやはり管理画面が重くなってしまうのですが、10点くらいは同時にいけるので、サイトを移転するときや事例を乗せるサイトやECサイトなど、写真を多く使うブログで重宝すると思います。

ホームページやブログ更新が捗る ツールとプラグイン

というわけで、気になった方はインストールしてみてくださいね。

 

 

functions.phpを触ることができる方なら代替テキスト(Alt)入力も省略できます。

functions.phpに以下のタグを追加しましょう。

/* —————————-
■ alt自動追加 投稿名+サイトデスクリプション+サイト名
—————————- */
function auto_alt_filter($html) {
  global $post;
  $post_title = get_the_title();
  $site_title = get_bloginfo(‘name’);
  $site_desc = get_bloginfo(‘description’);
if ( $post_title !== ” ) {
$html = str_replace(‘alt=””‘, ‘alt=”‘.esc_attr($post_title).’|’.$site_desc.’|’.$site_title.'”‘, $html);
$html = str_replace(‘title=””‘, ‘title=”‘.esc_attr($post_title).’|’.$site_desc.’|’.$site_title.'”‘, $html);
}else{
$html = str_replace(‘alt=””‘, ‘alt=”‘.$site_title.'”‘, $html);
$html = str_replace(‘title=””‘, ‘title=”‘.$site_title.'”‘, $html);
}
  return $html;
}
add_filter(‘the_content’, ‘auto_alt_filter’);

画像に代替テキストが入っている場合は、入力内容(入力した代替テキスト)が表示されて、

代替テキストが入っていない場合は、投稿名・サイトデスクリプション・サイト名が自動的に入るものです。

どうしても長くなるのでいらない部分は消していただければ。

投稿名だけaltになればいい場合は以下のようになります。

/* —————————-
■ alt自動追加 投稿名
—————————- */
function auto_alt_filter($html) {
  global $post;
$post_title = get_the_title();
if ( $post_title !== ” ) {
$html = str_replace(‘alt=””‘, ‘alt=”‘.esc_attr($post_title).'”‘, $html);
$html = str_replace(‘title=””‘, ‘title=”‘.esc_attr($post_title).'”‘, $html);
}else{
$html = str_replace(‘alt=””‘, ‘alt=”‘.$site_title.'”‘, $html);
$html = str_replace(‘title=””‘, ‘title=”‘.$site_title.'”‘, $html);
}
  return $html;
}
add_filter(‘the_content’, ‘auto_alt_filter’);

 

以上です。

皆様のホームページライフがよりスムーズになることを応援します!





ページの先頭へ