本記事について
Confluence のページを作る際、掲載した画像に、別ページへのリンクを張りたいことがあります。
しかし、リンクを張った画像にマウスを乗せても、マウスの形は十字キーに変わってしまうため、リンクであることが理解されにくいです。
この記事では、画像へのマウスホバー時に、リンクだと一目でわかる「手の形」が表示される設定方法を解説します。
作業の所要時間は1分程度です。
設定手順
Step1. 設定を行うスペースを開きます。
設定前のため、リンクを張った画像にマウスホバーをしても、十字キーが表示されます。
Step2. 画面左下の「スペースツール」から「ルック アンド フィール」を選択します。
Step3. 「スペースツール」の画面が開くので、「ルック アンド フィール」→「スタイルシート」と開き、「編集」ボタンを押下します。
Step4. 「スペースのスタイルシート」に、以下のコードを貼り付け、「保存」ボタンを押下します。
/*
リンクを張った画像にマウスホバー時、十字キーではなく手の形を表示する
*/
div.wiki-content a img.confluence-embedded-image{
cursor: pointer;
}
ヒント：リンクを張っていない画像に対しても、マウスホバー時に手の形を表示させたい場合は、
以下のように a タグの指定を外します。
/*
変更前: div.wiki-content a img.confluence-embedded-image
変更後: div.wiki-content img.confluence-embedded-image ← 真ん中のaタグを除いた！
*/
div.wiki-content img.confluence-embedded-image{
cursor: pointer;
}
Step5. ページに戻り、リンクを張った画像にマウスホバーをすると、手の形になっています！
リンクであることが分かりやすくなり、アクセシビリティが高まったと思います。
解説
Confluence では、独自の CSS を設定することで、ページの見た目をカスタマイズすることができます。
今回は、リンクを張った画像へのマウスホバー時は、マウスのアイコンを手の形にするという内容の CSS を設定しました。
Confluence のスタイルシート設定については、公式ドキュメントも参照してください。
以下の方のように、設定例を公開してくださっている方もいます。
見出しのデザインを CSS で変えるというのは、面白いアイデアですね。
以上です。
本記事がお役に立てれば幸いです。