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

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

今号のデザイン道場は、よくサイトで見かける、日本語タイトルの上に英語タイトルを掲載する方法をご紹介します。before属性を使ってhタグに日本語を設定し、飾りの英語はbeforeを利用して挿入します。






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

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

●HTML

<h2 class="newstitle">最新情報</h2>



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

border: none;
color: #000000;
の指定については、既存のCSSをリセットするための指定ですので、テンプレートによりことなります。

●スタイルシート

h2.newstitle {
font-size: 12px;
text-align: center;
border: none;
color: #000000;
}

h2.newstitle::before {
content: "NEWS";
display: block;
font-size: 40px;
margin-bottom: 8px;
}

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

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

Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.