SIRIUSで蛍光ペンをカスタマイズする
SIRIUS（シリウス）には蛍光ペン機能があります。
SIRIUS（シリウス）の蛍光ペンはこんな感じです。
↓ ↓ ↓
蛍光ペン
しかし他と差別化を図りたい、もっと格好よくみせたいとき、どうすればいい？
ここでは、SIRIUS（シリウス）の蛍光ペンをカスタマイズしてみましょう。
例えば、こんな感じができます。
1.蛍光ペンで線を引いた風
2.蛍光ペンで線を引いた風(線を細くする)
3.蛍光ペンで線を引いた風(線をさらに細くする)
いかがでしょうか。蛍光ペンで線を引いた風に見えませんか？html、CSSはこんな感じです。
<span style="background: linear-gradient(transparent 0%, #99ffff 0%);">
1.蛍光ペンで線を引いた風
</span>
<span style="background: linear-gradient(transparent 50%, #99ffff 50%);">
2.蛍光ペンで線を引いた風(線を細くする)
</span>
<span style="background: linear-gradient(transparent 80%, #99ffff 80%);">
3.蛍光ペンで線を引いた風(線をさらに細くする)
</span>
蛍光ペン風を実装するにはlinear-gradient属性を使います。
linear-gradient(transparent 線の太さ, 線の色 0%)
線の太さは、値が小さくするほど太くなります。値が大きいほど細い線になっています。
線の色を変更すれば、違う色の蛍光ペンの出来上がりです。
黄色の蛍光ペンとか水色の蛍光ペンとか緑色の蛍光ペンといった感じで色を変えるだけでも雰囲気は変わってきます。これに線の太さを変えて見せ方を調整してみましょう。
クラスとして定義しておくとこんな感じです：
<style>
.pen_blue{
background: linear-gradient(transparent 0%, #99ffff 0%);
}
.pen_yellow{
background: linear-gradient(transparent 0%, #ffff66 0%);
}
.pen_green{
background: linear-gradient(transparent 0%, #66ffcc 0%);
}
</style>
<span class="pen_blue">青色蛍光ペン</span>
<span class="pen_yellow">黄色蛍光ペン</span>
<span class="pen_green">緑色蛍光ペン</span>
ページ内に多く使いすぎるとごちゃごちゃした感じになってしまうかもしれません。使いすぎないように注意しましょう。
関連ページ
- シリウス（SIRIUS）で2カラムサイドメニュー幅変更方法
- デフォルトテンプレートの2カラムサイドメニュー幅変更方法について説明します。
- シリウスでサイドメニューのフリースペースを増やす方法
- シリウスでサイドメニューのフリースペースを増やす方法について説明します。
- SIRIUSシリウスで更新履歴の位置を変更する方法
- SIRIUSシリウスで更新履歴の位置を変更する方法について解説していきます。
- SIRIUSシリウスで更新履歴の背景画像を変更方法
- SIRIUSシリウスで更新履歴の背景画像を変更方法について、解説していきます。
- SIRIUSシリウスの更新履歴枠の角を丸くする&影をつける方法
- SIRIUSシリウスの更新履歴枠の角を丸くすると影をつける方法について解説していきます。
- SIRIUSでカーソルを置くとリンク画像を動かす設定方法
- SIRIUSでカーソルを置くとリンク画像を動かす設定方法について、詳しく解説していきます。
- SIRIUS サイドバーに画像付きのプロフィールを設置方法
- SIRIUS サイドバーに画像付きのプロフィールを設置方法について、詳しく解説していきます。
- SIRIUS クラスの設定機能で蛍光ペンを設定方法
- SIRIUS クラスの設定機能で蛍光ペンを設定方法について、詳しく解説していきます。
- SIRIUSに無料でメールフォームを設置する方法
- SIRIUS（シリウス）に無料でメールフォームを設置する方法について、詳しく解説していきます。
- SIRIUSで記事途中に飾り枠を挿入する方法
- SIRIUS（シリウス）で記事途中に飾り枠を入れる方法について、詳しく解説していきます。
- SIRIUS 同じページ内で指定の場所にリンクする方法
- SIRIUS 同じページ内で指定の場所にリンクする方法について、詳しく解説していきます。
- SIRIUSで動くボタンを作成方法
- SIRIUSで動くボタンを作成方法について、詳しく解説していきます。
- SIRIUSでスクロールの途中でサイドバーが消えないよう固定する方法
- SIRIUSでスクロールの途中でサイドバーが消えないよう固定する方法について解明します。
- SIRIUSで1つの記事を複数のカテゴリに登録する方法
- SIRIUSで1つの記事を複数のカテゴリに登録する方法について説明します。
- SIRIUSでトップへ戻るボタンを実装する方法
- SIRIUSでトップへ戻るボタンを実装する方法について紹介します。
- SIRIUSシリウスの見出しフォントに影をつける方法
- SIRIUSシリウスの見出しフォントに影をつける方法を紹介します。
- SIRIUSのサイトにYouTube動画を『埋め込み』方法
- SIRIUSのサイトにYouTube動画を『埋め込み』方法について紹介していきます。
- SIRIUSでGoogleマップをサイトに埋め込む方法
- SIRIUSでGoogleマップをサイトに埋め込む方法についてご紹介していきます。
- SIRIUSでトップへ戻るボタンに画像を使用する方法
- SIRIUSでトップへ戻るボタンに画像を使用する方法について紹介していきます。
- SIRIUSで画像を横に自動スライドさせて動かす方法
- SIRIUSで画像を横に自動スライドさせて動かす方法を紹介していきます。
- SIRIUS(シリウス）で画像を振り子のように左右に揺らす実装方法
- SIRIUS(シリウス）で画像を振り子のように左右に揺らす実装方法を紹介します。
- SIRIUS(シリウス）で<MAQUEE>タグを使って簡単に画像を動かす
- SIRIUS(シリウス）で
タグを使って簡単に画像を動かす方法をご紹介します。
