Jimdo活用css小ネタ

Jimdoのような無料で使えるウェブサイト編集・提供サービスは，出来合いの構造・デザインによる制約でやぼったくなりがち。でも，cssとhtml編集を使えば，そこそこのことはできる。例えば...

● 本文の一部に，蛍光マーカーを引いたような効果を出す

cssで以下のように指定したうえで，該当ページで[</>]ボタンを押して直接コード編集する。具体的には蛍光ペンの効果を出したい部分を<span class="line-marker-red">ここで効果を得たい</span>のようにspanタグで囲む。

.line-marker-red {background:linear-gradient(transparent 60%, #ffb6c1 60%);}

何をしているかというと，ピンクの蛍光ペンの雰囲気を出すためにカラーコードを指定したうえで透過度を設定している。

●あいさつなど硬い文章の部分のみ明朝体に

ブラウザの開発者用ツールで該当部分のdivのidを確認し，cssで以下のように指定。
例えば，id="cc-m-14111877490"なら，
div#cc-m-14111877490 { font-family: "BIZ UDPMincho",游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif; }