・・・なぜか最近 jquery にはまっているようだ？？ まぁ～それは置いといて、 角丸を作成できる jquery プラグインを付けてみたいと思った・・・・なんとなく。調べた所、2種類発見、それがタイトルの2種類です。
早速、どちらが良いか試してみた所・・・・う～～～ん、一長一短？2種を比較した感想
jquery.curvycorners は、「角丸が綺麗」 「角丸の角度が選べる」 「ボーダーも付けれる」 「ちょっと重い」 「ブラウザによって表示が違う時がある？設定のせいかも・・・」
jquery-roundcorners-canvas は、「角丸がちょっと荒い」 「角の種類がいっぱいある」 「軽い」
と、行った所でしょうか？・・・結局、選んだのは jquery-roundcorners-canvas 理由は、こちらの方が軽かったのとIE ＆ Firefox での表示が同じだったからです・・・あくまで、設定のせいかもしれません。ペコリ(o_ _)ｏ))
設定方法
ダウンロード場所 ここから「jquery-roundcorners-canvas」そして、 ここから「jquery.js」を入手してください。
※「jquery.js」はすでにお持ちでしたら、使いまわせると思うので、いりません。
入手したすべてのファイルを適当なフォルダ（ここでは、jquery-corner）に入れFTPで任意の場所（ここではwp-admin等と同じ最上層にします）にアップロード。
jquery.corner.jsと関連ファイルの外部リンク設定
次にJavaScriptとスタイルシートを、外部リンクとして読み込ませるために<head>?</head>の間に書き込みます。
自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript" src="https://example.com/jquery-corner/jquery.js"></script>
<script type="text/javascript" src="https://example.com/jquery-corner/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$(".class名").corner("round") });
</script>
<script type="text/javascript" src="https://example.com/jquery-corner/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$(".class名").corner("round") });
</script>
赤色の部分の1個目にお好きなclass名を記入。（ドットを忘れないでね） 2個目のところは、角の種類です。かなり種類があります。デモページを参考にしてください。
そして、上記のclass名と同じ名前でスタイルシートにもclassを設定して、どんな感じにしたいか設定しておきます。
あとは、指定したclasssでテキストなどを囲めば完成です。
使用方法
ヘッダーの赤い文字の1個目に「".mydiv"」とした時の例 <div class="mybox">
適当な文字を書く<br />
色々書く・・・・・（＾∀＾2）、
</div>
すると、こんな感じになります・・・・・↑適当な文字を書く<br />
色々書く・・・・・（＾∀＾2）、
</div>
以上、いかがでしょうか？？ ペコリ(o_ _)ｏ))
・・・一応、おまけの jquery.curvycorners
設定方法
ダウンロードはここ
jquery.curvycorners.packed.jsと関連ファイルの外部リンク設定
次にJavaScriptとスタイルシートを、外部リンクとして読み込ませるために<head>?</head>の間に書き込みます。
自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript" src="https://example.com/jquery-corner/jquery.js"></script>
<script type="text/javascript" src="https://example.com/jquery-corner/jquery.curvycorners.packed.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.mybox').corner(
{
tl: { radius: 10 }, //左上の半径
tr: { radius: 10 }, //右上の半径
bl: { radius: 10 }, //左下の半径
br: { radius: 10 }, //右下の半径
antiAlias: true, //アンチエイリアス
autoPad: true, //オートパディング
validTags: ["div"] }); // div タグの中のものに適用
});
</script>
使用方法も、専用のclass名を作ってスタイルシートと div 内のタグに、そのclass名を付けるだけです。
※ちなみに上記の角の能力は「jquery-roundcorners-canvas」です σ(^◇^;)ヒヤアセ
それではごきげんよう～～ (ﾟﾟ)(｡｡)ペコッ
最上階
1階
関係のある記事
No user の書き込みがあります
コメントほしぃ～よぉ～ σ(^◇^;)