ビジュアルでナレッジベースの記事を強化しましょう。Adding screenshots clarifies complex concepts and simplifies instructions, offering users a straightforward view of interface elements. This guide shows you how to incorporate images cleanly and effectively, enhancing content clarity and reader engagement.

コンピューターやモバイル端末でスクリーンショットを作成する

ナレッジベース用のスクリーンショットを作成する方法や使用できる編集ツールについては、スクリーンショットを作成するには を参照してください。

ナレッジベースの記事にスクリーンショットやその他の画像を追加する

メディアギャラリーに画像をアップロードする

1. メディアギャラリー に移動します。
2. 右下にある Upload ボタンをクリックします。
3. アップロードダイアログボックスが開きます。Browse… ボタンをクリックしてコンピューターのファイルを参照し、アップロードしたい画像を選択します。
4. 画像を選択すると、タイトルと説明を入力するよう促すダイアログボックスが表示されます。これらの詳細を入力し、Upload ボタンをクリックしてアップロード処理を完了します。

記事編集画面から直接画像をアップロードする

If you're actively editing an article and need to add an image, you can also upload right from the toolbar:

1. Start by either creating a new article or editing an existing one.
2. 記事編集画面で、ツールバーにあるメディアを挿入 ボタンをクリックします。

   

   • この操作でメディアを挿入ダイアログが表示されます。
3. 表示されたダイアログの下部で、Upload Media ボタンを選択して続行します。
4. アップロードダイアログボックスで、Browse… ボタンをクリックしてコンピューターのファイルを参照し、アップロードしたい画像を選択します。
5. 画像を選択すると、タイトルと説明を入力するよう促すダイアログボックスが表示されます。これらの詳細を入力し、Upload ボタンをクリックしてアップロード処理を完了します。

記事に画像を追加する

1. 新規記事を作成するか、既存の記事を編集することから始めます。
2. ツールバーにあるメディアを挿入 ボタンを探してクリックします。
3. ギャラリーから追加したい画像を選択し、Insert Media をクリックして記事に埋め込みます。

インライン画像の効果的な使用

Incorporating inline screenshots directly into KB articles enhances clarity and navigation by visually demonstrating interface elements like buttons and menus. This approach streamlines articles, making them easier to follow by reducing image and text volume, and directly guiding users through the interface with concise, relevant visuals. Guidelines for optimizing inline image integration:

• Prioritize clarity: Employ inline images to substitute textual cues with precise, visual representations. Focus on showcasing interactable elements such as menus and buttons, ensuring these images are directly relevant and facilitate quick user recognition and interaction.
• Strategic placement: Integrate screenshots next to relevant text to seamlessly blend instructions with visual guides, making it easier for users to follow along without getting lost in lengthy descriptions.
• Size matters: When selecting inline images, aim for a maximum height of 16 pixels. This ensures visuals are informative yet unobtrusive, contributing to a cleaner, more accessible layout for users navigating the content.

ステップバイステップの手順における画像の効果的な使用

Embedding screenshots between sentences in KB articles visually demonstrates actions or tasks, bridging the gap between text instructions and their practical application. This approach enhances user comprehension and engagement by illustrating critical steps of a process, making articles more interactive and straightforward for readers to follow. Guidelines for optimizing image use on step-by-step instructions include:

• Selective use: Incorporate screenshots only for concepts that genuinely benefit from visual aid. Avoid overusing them to prevent clutter.
• Direct correlation: Select screenshots that are directly tied to the accompanying text, ensuring each image clearly illustrates the action or task being described.
• Logical sequence: Arrange screenshots to follow the natural progression of steps, mirroring the user’s actual experience. This chronological order supports a logical flow, facilitating a step-by-step guide that readers can easily follow.
• Accuracy is key: Ensure that the screenshots accurately depict what users will encounter on their screens. Given that appearances can vary across different operating systems, adjust your screenshots accordingly. For guidance on tailoring screenshots for Windows, macOS and Linux users, see the How to use "For" tags guide.

例

Let's keep it simple!

• If you are placing an image in a line of text (inline image), it should be no taller than 16 pixels.
• If you are placing an image between two sentences in a set of steps or list (ordered or unordered), it should be set off with a semicolon. There's no need to add line breaks around images.

インライン画像のマークアップ

This is what the Wiki マークアップ for an inline image looks like:

This is the text, followed by [[Image:The Image]], and this is the continuation of the text.

インライン画像の例

Here's a snippet of text. Right in the middle, we've inserted an inline image of the Firefox menu button. Following that, we've added additional text.

手順中の画像のマークアップ

セミコロンで画像を区切る ための Wiki マークアップ は次のようになります:

# This is a step.
#;[[Image:The Image]]
# This is the next step.


手順中の画像の例

This is an example with longer text and a longer image:

1. This is a step. And here are some additional words so you can see what they look like running above the image.

   

2. This is the next step, again, with extra words so you can see what they look like running below the image.

ナレッジベースのガイドライン

ナレッジベースの記事の執筆と編集についてさらに学びたい場合は、ガイドラインはこちら をご覧ください。