おちゃのこ通信 Vol.335 - デザイン道場 - おちゃのこネットメールマガジン

このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。おちゃのこネットの刑部です。

今号のデザイン道場は、スタイルシートで枠線円を作成し文字を配置する方法をご紹介します。

	https://cafe-responsive.ocnk.net/

スタイルシートを編集する

HTMLはご自身で変更してください。
サンプル用にclass名を付けたdivタグを記載しています。
このclass名については、ご自身で変更いただいて結構です。

●HTML

<div class="circletxt2"><div class="label">POINT<div class="num">1</div></div></div>

デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。

●色
・円背景
circletxtのbackground-color: #FFFFFF;

・円枠
border: 1px solid #000000;

・テキスト
.circletxtのcolor: #FFF;で変更できます。

●サイズ
・円サイズ
width: 80pxとheight:80pxで調整できます。

・文字サイズ
font-size: 12px;がPOINTというラベルのサイズ
font-size: 20pxが数字のサイズとなります。;

●スタイルシート

.circletxt2 {
position: relative;
width: 80px;
height: 80px;
background-color: #FFFFFF;
border: 1px solid #000000;
border-radius: 50%;
color: #000000;
font-size: 12px;
line-height: 100%;
}

.circletxt2 .label {
width: 80px;
position: absolute;
top: 50%;
left: 0px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}

.circletxt2 .num {
margin-top: 10px;
font-size: 20px;
}

なお、お問い合わせは下記ページからお願い致します。

https://www.ocnk.net/contact/index.php