画像の挿入:方法とヒント Issue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } この記事では、記事またはフォームに画像を挿入するためのヒントを提供します。これにより、すべてのデバイス、UI タイプ、HTML フォームフィールド、ブラウザーバージョンで、画像の書式設定とサイズ設定に関して同じ結果が得られます。 Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } すべてのリリース Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } 画像のコピー/貼り付けは避けてください。 ブラウザーの機能、デバイスの種類、フォームビュー、その他の要因によっては、記事またはフォームへの画像のコピー/貼り付けが常に期待どおりに機能するとは限りません。フォームに画像を取り込む推奨される方法は、画像をコンテンツに埋め込む前に、画像を挿入するか、レコードに添付することです。 ナレッジベース記事に画像を添付ファイルとして挿入 KB 記事フォームで、画像を表示するスペースをクリックします。ツールバーの 画像の挿入/編集 アイコンをクリックします画像がまだアップロードされていない場合: [アップロード] をクリックします。[ 画像を参照 (Browse for an image))] をクリックするか画像をドラッグアンドドロップします。 画像が既にアップロードされている場合: 一般で、画像リストをクリックします。埋め込む画像を選択します。 [保存] をクリックします。 画像を添付ファイルとしてフォームに挿入 フォームの右上隅にある 添付ファイルを管理 ペーパークリップをクリックします。ファイルを選択ボタンをクリックして、ファイルを表示します。目的の画像ファイルまたはスクリーンショットファイルを選択し、[ 開く]をクリックします。[ 閉じる をクリックしてダイアログボックスを閉じます。 イメージを更新 フォームの右上隅にある 添付ファイルを管理 ペーパークリップをクリックします。削除する画像の横にあるチェックボックスをクリックします。[削除]をクリックします。[閉じる]をクリックします。上記の手順に従って、更新された画像を追加します。 その他のヒント Web 画像の最適化 画像をアップロードするときは、最良の結果を得るにはファイルサイズを小さくしてください。これにより、複数のプラットフォーム間での互換性 (レスポンシブ デザイン) が確保され、ページのパフォーマンスが向上します。コンテンツとスタイルに応じて、次のような画像サイズが推奨されます。 150×150 ピクセルのサムネイル300×200 ピクセル中600×600 ピクセルのラージ詳細/レガシービューの最大幅 960pxナレッジポータルの最大幅 840px 高解像度の画像には、大幅に多くのピクセル数とバイト数が必要です。「標準」Web解像度は96 dpiです(以前は~72 dpiでしたが、ここ数年ではより高いピクセル密度の画面が標準になりました)。画像形式が RGB カラー モードになっていることを確認してください。印刷モード (CMYK) は、ほとんどのブラウザーではレンダリングされません。画像は、.jpg、.gif、または.png形式でのみ保存できます。pdf、.psd、.tff、.doc などのファイルは、受け入れられない Web 画像形式です。 可能であれば、元のソースファイルを添付してください。この方法には次の利点があります。 画質を向上画像が複数のブラウザーで正しくレンダリングされることを確認コピー/貼り付けによる欠落画像、リンク切れ、または無効なリンクの数を削減 大きな画像ファイルのサイズを最適な Web サイズに変更 可能であれば、大きな画像のサイズを最適な Web サイズに変更します フォームにアップロードする前 です。ほとんどのグラフィックアプリケーションでは、画像のサイズ/品質を編集できます。 回転、反転、または切り取りするには。 画像を選択するときに画像オプションメニューを使用できるようになりました。 注: いつものように、画像のサイズを変更する方法は複数あり、マイレージは異なる場合があります。これを容易にする多くのソフトウェア製品が市場に出回っています。 アップロード後 後 のサイズを変更する場合は、ページの HTML の代わりに画像エディターを使用します。この方法では画像は小さく表示されますが、ページはファイルを元のサイズでダウンロードします。画像設定を調整するには: 画像を選択します。画像アイコンをクリックして、画像エディターを開きます。目的の高さと幅をピクセル単位で入力します。 [保存] をクリックします。アップロード後に画像のサイズを大きく変更すると、画像の品質、アスペクト比、解像度が歪む可能性があるため、避けてください。 適切な命名規則を使用します 論理的で覚えやすい命名規則を使用してください。検索しやすい関連キーワードを含めます。ファイル名には、文字、数字、ハイフン、アンダースコアのみを使用してください。他の文字 (疑問符やアンパサンドなど) が正しくアップロードされなかったり、予期しない動作が発生したりする可能性があります。 代替 (alt) テキストを画像に追加 画像を選択します。境界線と角を強調表示することで、選択されていることがわかります。画像を選択すると、アクションメニューが表示されるようになりました。[代替説明 フィールドに代替テキストを追加します。[保存] をクリックします。 最適な代替テキストを書くには、対象者と画像の目的を考慮してください。代替テキストの説明は、特にナレッジ記事またはフォームのコンテキストで意味のあるものである必要があります。代替説明内の代替テキストは、画像の内容と目的をユーザーに知らせる必要があります。それ自体が意味のある代替テキストを持つことが重要です。アクセシビリティのために、スクリーンリーダーは画像の代替テキストを読み上げるため、画像の目的をできるだけよく説明するようにしてください。 Related Links<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } 詳細については、以下を参照してください。 ナレッジ記事への画像の挿入データベースへの画像の保存