a-blog cmsで記事を作成していると、
外部サイトやアプリから「画像とテキストをまとめて」コピーして貼り付けたい場面は少なくありません。
しかし実際には、ブラウザやアプリの違いによって画像の取り込み可否が変わることがあります。
ここでは、Mac環境で画像付きコンテンツを効率よくa-blog cmsへ取り込むための実践的な方法をご紹介します。
ブラウザによって異なる貼り付け挙動
外部サイトやMarkdownエディタ(IA Writer など)から画像付きテキストをコピーして、a-blog cmsのブロックエディターへ貼り付ける場合、ブラウザによって挙動が異なります。
Chrome
見出しやテキストの書式は維持されるものの、画像が貼り付けらません。
Safari
画像もそのままブロックエディターに貼り付けされます。テキストとまとめて貼り付けできるため、作業効率が高くなります。
ただし、Safariで貼り付けた画像は、その時点では自サイトに保存されているわけではなく、ブロックエディター内に一時的に情報がストックされているため注意が必要です。
外部参照画像の注意点(重要)
一方、外部サイトから画像付きで内容をコピーした場合、画像は表示されていても実体が元サイトのサーバー上にあります。
この状態で公開するのはマナー違反です。リンク切れや表示不具合の原因になる可能性もあります。
その場合は、以下の方法で対応します。
画像を一度ローカルに保存し、ブロックエディタから画像を再度アップロードする
ですが、このやり方では、せっかくの画像情報を活かすことができません。
さらに効率化する「Word経由」テクニック
より安定して画像付きテキストを貼り付けたい場合は、
Microsoft Wordを中間に挟む方法が非常に有効です。
手順:
元サイトやアプリからコピー
Wordに貼り付け
Wordからコピー
a-blog cmsへ貼り付け
この方法のメリット:
Chrome・Safariどちらでも画像を貼り付けできる
画像データとして認識されやすい
※ Mac標準のPagesでは同様の結果にならないため、Wordの利用を推奨します。
推奨ワークフロー(最も安定)
元ソース
→ Wordに貼り付け
→ Wordからコピー
→ a-blog cmsへ貼り付け
→ アップロードボタンで画像を保存
この方法を活用することで、
画像を一枚ずつ保存して再アップロードする手間を大幅に削減でき、
記事作成のスピードを大きく向上させることができます。
クリップボードに画像付きの情報をコピーして、貼り付けする。それだけなのですが色々なパターンが存在するのが、なんとも不思議ですね。
- 00:00 はじめに:画像付きテキストを貼り付ける「不思議な法則」
- 00:13 検証1:iA Writer(マークダウン)からコピーする場合
- 00:54 Chromeでの挙動:画像が抜け落ちてしまう問題
- 01:25 Safariなら画像が入る!ブラウザによる違い
- 01:41 サーバーへの保存:「アップロードして挿入」の使い方
- 02:41 検証2:ウェブサイトの情報をコピーする場合
- 02:59 外部サーバー参照の落とし穴と注意点
- 03:12 解決策:Microsoft Wordを「中間役」にするテクニック
- 03:48 Word経由のメリット:見出し維持とSafariでの動作確認
- 04:14 Chromeでも画像が貼れる!Word経由の不思議な効果
- 04:39 アプリの仕様差:Mac標準「Pages」ではうまくいかない理由
- 05:04 まとめ:Word経由で自社サーバーへ効率よく画像登録
投稿がお役に立ちましたら、いいねをしていただけると嬉しいです。
お困りごとをお聞かせください。
a-blog cmsについてのご相談、ご依頼など。
頂いた内容については、3営業日以内の返信を心がけております。
他社作成のa-blog cms修正、コーディング済htmlへのa-blog cms導入もOK。
小さなことから、お気になさらずお気軽にご相談ください。
投稿がお役に立ちましたら、いいねをしていただけると嬉しいです。
その他のa-blog cms一覧
-
技術
無料の言葉パズル「ごじゅの」オープンベータ版を公開しました
株式会社データファームは、五十音から言葉を作って得点を競うブラウザゲーム「ごじゅの」のオープンベータ版を公開しました。登録不要で、スマートフォンやパソコンのブラウザから1日1回無料で遊べます。「ごじ...
続きを読む
-
FileMaker
A tool for “looking at and thinking about” FileMaker’s DDR: DF-DDR inspector
The blog post is a bit long, so if there’s a feature that catches your interest, please click and take a look. FileMaker includes a feature called DDR (Database Design Report), which outputs the st...
続きを読む
-
FileMaker
FileMakerのDDRを「見て考える」ためのツール、DF-DDR inspectorを作りました
ブログが少し長いので、気になる機能があれば、クリックして見てください。 FileMakerには、データベースの構造を出力するDDR(Database Design Report)という機能があります。テーブル、フィールド、リレーショ...
続きを読む
-
AI・DX・業務改善
Appleヘルスケアの記録を振り返るアプリ「DF-HealthBalance」を公開しました
株式会社データファームは、iPhone・iPad向けアプリ「DF-HealthBalance」をApp Storeで公開しました。DF-HealthBalanceは、Appleヘルスケアに集まった食事・活動・睡眠・水分・体組成などの記録を、日ごとや期間...
続きを読む
-
AI・DX・業務改善
コピーしたものを、あとから取り戻す。Mac用アプリ「DF-ClipRoll」を公開しました
株式会社データファームでは、Mac用のクリップボード履歴アプリ「DF-ClipRoll」をMac App Storeで公開しました。DF-ClipRollは、コピーしたテキストやURLなどをこのMac内に保存し、必要になったときに検索して再...
続きを読む
-
技術
フレッツ光クロス移行後、固定IPと外部公開でハマった話
先日、事務所のインターネット回線をフレッツ光クロス環境へ移行しました。回線速度そのものは問題なく、インターネット接続も無事に復旧しました。ところが、そのあとにハマったことがありました。それが、固定I...
続きを読む