MAIL
マウスオーバーしたときにアイコンを拡大する方法
マウスオーバーしたときにアイコンを拡大する方法は非常に簡単で、以下のスタイルをフォルダに設定するだけです。
ただし、フォルダ毎に設定するのは大変ですのでプリザンター全体で変更する場合は、拡張スタイルを用います。
この機能を利用するにはCSSの知識が必要で、誤った設定を行うとプリザンターが利用できなくなる可能性がありますので、十分なテストを行った上でご利用ください。
拡張スタイルの設定は、.¥Pleasanter¥App_Data¥Parameters¥ExtendedStyles¥ 配下にCSSを記載したテキストファイルを作成します。その後、Webサービス（Windowsの場合はIIS)を再起動してください。ファイルの拡張子は必ずcssにしてください。（サンプルでは、sample.css.txtとなっていますが、icon-transition.cssなどとして作成してください）
上記のイメージでは、下記にあるスタイルのように「transform: scale(1.2);」となっており、拡大したときのサイズが1.2倍になっていますが、scale部分は「1.12」くらいにしたようがよいかもしれません。
ここは好みで調整してください。また、「transition: transform 0.3s ease;」で拡大表示までの時間を指定していますが、ここも好みで調整してみてください。
＜追加するスタイル＞
.nav-site {
transition: transform 0.3s ease;
}
.nav-site:hover {
transform: scale(1.2);
}まとめ
いかがでしたか？
今回の内容は、視覚的には非常にインパクトのある内容ですが実装自体は非常に簡単なものです。プリザンターは便利なツールですしカスタマイズも可能ですので、自分たちの使いやすいようにカスタマイズするのもありかと思います。ぜひ今回の記事を参考に試してみてください。
弊社ではプリザンターをご使用中、または、これからご使用になられる方向けに、運用ノウハウ集、プリザンター逆引き辞典、スタイル・スクリプトサンプル集の販売を行っております。
また、 プリザンターからのExcel帳票出力・PDF帳票出力の支援パック販売 も行っております。
プリザンター導入の支援や、スクリプト開発などの支援も行っておりますので、まずは気軽にご相談ください。
※ご相談の内容によっては有料となる場合がございます。予めご了承ください。
☆☆☆
ブログ内容への質問や追加説明をご希望の方は【 問い合わせフォーム 】からお気軽にお問い合わせください
☆☆☆
プリザンターをもっと便利にする方法
こんにちは、CCS田中です。
プリザンターをお使いの方で、以下のような要望をお持ちの方はいないでしょうか？
「マウスポインタがどこにあるか分かりやすくしたい」
プリザンターは使いやすいのですが、フォルダやテーブルが並んだ画面でマウスポインタがどこにあるのかが今一つ分かりづらいときがあります。それを解消するために以下の例のようにマウスオーバーしたときにアイコンを一時的に拡大させて、どこにマウスがあるかを一目瞭然にする方法があります。
以下のイメージでは動きが分かりづらいですが、視覚的には効果は絶大ですし、とても簡単にできますので是非試してみてください。
＜マウスオーバしていないとき＞
＜マウスオーバしたとき＞
設定方法は次で説明します。