SIRIUS(シリウス)の蛍光ペン(マーカー)をより蛍光ペンらしく見せる

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

蛍光ペン(マーカー)をより蛍光ペンらしく見せる

サンプル画像

 

SIRIUS(シリウス)には蛍光ペン機能があります。

 

たとえば「蛍光ペン」という文字列に蛍光ペンの装飾を施したい時は
該当テキストを範囲選択し、アイコンから”蛍光ペン”を選択するだけでOK。

 

キャプチャ画像

 

するとこんな↓感じで黄色の蛍光ペンがテキストに引かれます。

 

蛍光ペン

 

もちろんこれでもいいんですが、
他と差別化を図ったりもう少し本物っぽく見せたいというようなときは
スタイルシートをちょっとだけ手直ししてあげましょう。

 

ハイ、というわけで今回のカスタマイズは、
単純にオシャレな蛍光ペンの見せ方です。

 

区切り画像

 

デフォルトの黄色い蛍光ペンの設定は、
「テンプレート」→「スタイルシート編集」→「commonstyle.css」内の
以下のコードが設定箇所になってます。

 

コード

.ylw{
	background-color:#FFE566;
	font-weight:bold;
	padding:2px;
}

カスタマイズ実践

カスタマイズの際の注意点として、元に戻せるようオリジナルファイルのコピーは必ず作ってください。

それでも不安な方はサイトのバックアップを事前に作成しておくと安心です。

 

まずは蛍光ペンの色を変えてみましょう。

 

たとえばピンクの蛍光ペンでテキストを塗った感じを出してみたいのなら、
先ほどのコードの最後に以下の一文を足します。

 

background: linear-gradient(transparent 0%, #ff99ff 0%);

 

その結果、コードはこのようになります。

 

コード

.ylw{
	background-color:#FFE566;
	font-weight:bold;
	padding:2px;
	background: linear-gradient(transparent 0%, #ff99ff 0%);
}

そして実際の表示はこんな↓感じになります。

 

蛍光ペン

 

ピンクではなく”水色にしてみたいな”というときは、
加筆したコードの『#ff99ff』というところを『#00FFFF』に変えてやりましょう。

 

その結果、下のようになります。

 

蛍光ペン

 

色は「red」「yellow」といった文字通り色指定のモノから#が先頭に付いた16進数で表記するもの、RGB値で表記するものまでいろいろあります。

メジャーなのは16進数表記です。検索で「HTML 色見本」と打つと色に関する設定値が書かれたサイトが続々とヒットしますので参考にしてみて下さい。

 

今度は蛍光部を全体の高さの4分の3(下から75%)ぐらいにしてみます。

その場合は『transparent 0%』の部分を『transparent 25%』に変えてください。(100-75=25)

 

その結果、下のようになります。

 

蛍光ペン

 

蛍光部を全体の高さの半分(下から50%)なら
『transparent 0%』の部分を『transparent 50%』に変えます。

 

その結果、下のようになります。

 

蛍光ペン

 

ちょっとかすれた感じを出したいなら、最後の『0%』の部分を変えてやります。

高さ半分(50%)でかすれ度20%ならこういうコードになります。

 

コード

.ylw{
	background-color:#FFE566;
	font-weight:bold;
	padding:2px;
	background: linear-gradient(transparent 50%, #ff99ff 20%);
}

そして実際の表示はこんな↓感じになります。(かすれ度20%)

 

蛍光ペン

 

高さ半分(50%)でかすれ度80%ならこんな↓感じです。

 

蛍光ペン

 

高さ全体(100%)でかすれ度80%ならこんな↓感じです。

 

蛍光ペン

 

以上です。

 

購入ページへ


てっぺん