まめわざでは、ブログの編集機能などと同じように、文字の一部のリンク化や強調ができます。
この強調表現で、圏点(傍点・脇点)・蛍光マーカー・手書き風下線が使えるようになりました。
それぞれの強調表現は縦書きに対応しています。また、文字の大きさに応じて強調表現のサイズも変わるので、それぞれで横・横(大)・縦・縦(大)の4つのサンプルを用意しました。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
強調表現は、文字をマウスで囲んで右クリックして実行できます。リンクの設置や、文字の色・サイズを変更する際と同じです。
編集中に文字を囲み、右クリックをします。
ご希望の強調表現を選び、「装飾を適用」を押します。
強調1・強調2・文字色・文字サイズはそれぞれ変更ができるので、例えば「太字・下線付・赤字・2.5倍サイズ」を一度に設定することができます。
一方で、強調2に含まれる下線・蛍光ペン・圏点は重複して選択できません。例えば「下線付き圏点」はできません。
圏点はCSS3で次のように決められています。
text-emphasis: (点の種類) (色);
例)text-emphasis: dot #000;
しかしIEが実装していないので、この方法は利用しない方が無難です。
そこで、radial-gradientとbackground-sizeを併用して点を表現します。
span.kenten {
padding: 0.3em 0;
background-repeat: repeat-x;
background-size: 1em 0.2em;
background-position: top left;
background-image: -webkit-gradient(radial,center center,0,center center,1.5,from(#000000),color-stop(0.5,#000000),color-stop(0.9,transparent),to(transparent));
background-image: -webkit-radial-gradient(center center, 0.1em 0.1em, #000000, #000000 95%, transparent 95%, transparent);
background-image: radial-gradient(0.1em 0.1em at center center, #000000, #000000 95%, transparent);
}
-webkit-gradientと-webkit-radial-gradientはクロスブラウザ対策用です。
縦書きの場合は、radial-gradientとbackground-sizeをそれぞれ調整し、background-positionを縦書きに適した位置に変更します。
p.tate span.kenten {
padding: 0 0.3em;
background-repeat: repeat-y;
background-size: 0.2em 1em;
background-position: top right;
background-image: -webkit-gradient(radial,center center,0,center center,1.5,from(#000000),color-stop(0.5,#000000),color-stop(0.9,transparent),to(transparent));
background-image: -webkit-radial-gradient(center center, 0.1em 0.1em, #000000, #000000 95%, transparent 95%, transparent);
background-image: radial-gradient(0.1em 0.1em at center center, #000000, #000000 95%, transparent);
}
background-imageは横書きと同一です。
蛍光ペンを表現するために次の4つを実装します。
1~3の表現にはlinear-gradientを利用します。
span.highlighter {
background-size: 100% 1em;
background-repeat: repeat-x;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(253,205,160,0)), color-stop(0.5, rgba(253,205,160,0)), color-stop(0.6, rgba(253,205,160,1)), color-stop(0.98, rgba(253,205,160,1)), to(rgba(253,205,160,0)) );
background-image:
-webkit-linear-gradient(top, rgba(253,205,160,0), rgba(253,205,160,0) 63%, rgba(255,255,255,0.6) 64%, rgba(255,255,255,0.6) 67%, rgba(253,205,160,0) 68%),
-webkit-linear-gradient(top, rgba(253,205,160,0), rgba(253,205,160,0) 55%, rgba(255,255,255,0.5) 56%, rgba(255,255,255,0.5) 60%, rgba(253,205,160,0) 61%),
-webkit-linear-gradient(271deg, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0)),
-webkit-linear-gradient(top, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0));
background-image:
linear-gradient(to bottom, rgba(253,205,160,0), rgba(253,205,160,0) 63%, rgba(255,255,255,0.6) 64%, rgba(255,255,255,0.6) 67%, rgba(253,205,160,0) 68%),
linear-gradient(to bottom, rgba(253,205,160,0), rgba(253,205,160,0) 55%, rgba(255,255,255,0.5) 56%, rgba(255,255,255,0.5) 60%, rgba(253,205,160,0) 61%),
linear-gradient(179deg, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0)),
linear-gradient(to bottom, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0));
}
最後のbackground-imageで中身を見てみましょう。
まず、全体に50%あたりからグラデーションをはじめることで、文字の下部だけに色を重ねています。
1番目と2番目のlinear-gradientはカスレを表現する白、3番目と4番目がマーカーの実線です。3番めは角度を1度だけ傾けて手書き感を演出しています。
transparentの代わりにrgbaを使うことで、iOSなど一部Safariでグラデーションが黒くなるのを防いでいます。
-webkit-gradientと-webkit-radial-gradientはクロスブラウザ対策用です。
縦書きの場合は、linear-gradient・background-size・background-repeatをそれぞれ縦書き向けに調整しています。
span.highlighter {
background-size: 1em 100%;
background-repeat: repeat-y;
background-image: -webkit-gradient(linear, left bottom, right bottom, from(rgba(253,205,160,0)), color-stop(0.5, rgba(253,205,160,0)), color-stop(0.6, rgba(253,205,160,1)), color-stop(0.98, rgba(253,205,160,1)), to(rgba(253,205,160,0)) );
background-image:
-webkit-linear-gradient(right, rgba(253,205,160,0), rgba(253,205,160,0) 63%, rgba(255,255,255,0.6) 64%, rgba(255,255,255,0.6) 67%, rgba(253,205,160,0) 68%),
-webkit-linear-gradient(right, rgba(253,205,160,0), rgba(253,205,160,0) 55%, rgba(255,255,255,0.5) 56%, rgba(255,255,255,0.5) 60%, rgba(253,205,160,0) 61%),
-webkit-linear-gradient(179deg, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0)),
-webkit-linear-gradient(right, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0));
background-image:
linear-gradient(to left, rgba(253,205,160,0), rgba(253,205,160,0) 63%, rgba(255,255,255,0.6) 64%, rgba(255,255,255,0.6) 67%, rgba(253,205,160,0) 68%),
linear-gradient(to left, rgba(253,205,160,0), rgba(253,205,160,0) 55%, rgba(255,255,255,0.5) 56%, rgba(255,255,255,0.5) 60%, rgba(253,205,160,0) 61%),
linear-gradient(271deg, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0)),
linear-gradient(to left, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0));
}
HTMLには下線が用意されていますが、「下線=リンク=クリック可」という認識が一般化しているため、強調表現として下線を使うのは避けた方が親切です。
そこで、このリンクに使われる下線を使わずに、強調表現らしい下線を用意しました。
span.underline {
background-repeat: repeat-x;
background-size: 0.6em 0.2em,1.6em 0.2em,3.4em 0.2em,3.6em 0.2em;
background-position: right bottom;
background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(246,89,115,0)), color-stop(0.1, rgba(246,89,115,0.02)), color-stop(0.5, rgba(246,89,115,1)), color-stop(0.98, rgba(246,89,115,0)), to(rgba(246,89,115,0)) );
background-image:
-webkit-radial-gradient(center center,0.2em 0.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.1em,rgba(246,89,115,0) 0.2em),
-webkit-radial-gradient(center center,0.4em 0.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.3em,rgba(246,89,115,0) 0.4em),
-webkit-radial-gradient(center center,0.7em 0.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.6em,rgba(246,89,115,0) 0.7em),
-webkit-radial-gradient(center center,7.1em 0.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 7em,rgba(246,89,115,0) 7.1em);
background-image:
radial-gradient(0.2em 0.1em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
radial-gradient(0.4em 0.1em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
radial-gradient(0.7em 0.1em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
radial-gradient(7.1em 0.1em at center center,rgba(246,89,115,1),rgba(246,89,115,0));
}
radial-gradientとbackground-sizeを4パターン展開して様々なサイズの楕円を重ね、手書き風のボコボコ感を表現しています。
transparentの代わりにrgbaを使うことで、iOSなど一部Safariでグラデーションが黒くなるのを防いでいます。
-webkit-gradientと-webkit-radial-gradientはクロスブラウザ対策用です。
background-repeat・background-size・background-position・radial-gradientをぞれぞれ縦向きに調整しています。
span.underline {
background-repeat: repeat-y;
background-size: 0.2em 0.6em,0.2em 1.6em,0.2em 3.4em,0.2em 3.6em;
background-position: right bottom;
background-image:-webkit-gradient(linear, left bottom, right bottom, from(rgba(246,89,115,0)), color-stop(0.1, rgba(246,89,115,0.02)), color-stop(0.5, rgba(246,89,115,1)), color-stop(0.98, rgba(246,89,115,0)), to(rgba(246,89,115,0)) );
background-image:
-webkit-radial-gradient(center center,0.1em 0.2em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.1em,rgba(246,89,115,0) 0.2em),
-webkit-radial-gradient(center center,0.4em 0.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.1em,rgba(246,89,115,0) 0.2em),
-webkit-radial-gradient(center center,0.1em 0.7em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.1em,rgba(246,89,115,0) 0.2em),
-webkit-radial-gradient(center center,0.1em 7.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.1em,rgba(246,89,115,0) 0.2em);
background-image:
radial-gradient(0.1em 0.2em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
radial-gradient(0.1em 0.4em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
radial-gradient(0.1em 0.7em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
radial-gradient(0.1em 7.1em at center center,rgba(246,89,115,1),rgba(246,89,115,0));
}
本ページのコードはご自由にご利用いただけます。改変も結構です。また、報告は不要です。
rgba()の中身を変えると色を変更できます。色以外のカスタマイズはやや難易度が高めです。
気に入っていただけましたら、ぜひシェアをお願いいたします。