ページTOPへ

SIRIUSで蛍光ペンをカスタマイズする

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(シリウス)でタグを使って簡単に画像を動かす方法をご紹介します。


トップページ SIRIUS機能解説 SIRIUSのカスタマイズ お勧めレンタルサーバー ご購入特典案内