Simplicityをキレイに見せるカスタマイズサンプル(スタイル編)

ge

Simplicityを個人的にカスタマイズしてキレイに見せるサンプルコードを作成してみました。

もともとのSimplicityの見た目でも十分すぎる外観ですが、カスタマイズして自分に合ったスタイルにすることで、さらなる集客を目指すことができます。

レポート部長は「AddQuicktag」を用いて1クリックで要素を呼び出せるようにしています。

詳しくは以下のリンクを参考にしてくださいね。

AddQuicktagは「タグ化した要素」を簡単に出力してくれるプラグインの1つです。 ソースコードを前もって作成しておき、そのソースコ...
そこで、レポ部は・・・
Simplicityでキレイに見せるカスタマイズサンプル(スタイル編)
をレポートしたいと思います。
スポンサードリンク

Simple Radius Style

Radiusで右上と左下を丸めています。背景は#FF3333(淡い赤色)に設定していますが変更することによって自分のサイトに合った色にすることができます。文字色は#FFFFFF(白色)に設定しています。背景色を白色(#FFFFFF)にする場合は文字色も変更してください。

ここに本文を書く(さぁさぁ!始まりました!カスタマイズの時間です!奥様!今がチャンスです!サンプルですよー!さぁさぁ!ざ~んねん!売り切れちゃいましたよ~!!カスタマイズの売れ残りのハムとソーセージはいかがですか?!え、意味分からないって!?)

各ソースコードは以下の通りです(HTMLソースコードをAddQuicktagに登録して、CSSソースコードはスタイルシートに記入してください。)

HTML
<div class=”sample_box_01″>
<div class=”sample_box_center_01″>
<div>ここに本文を書く</div>
</div>
</div>
CSS
.sample_box_01{
border-top-right-radius:30px;
border-bottom-left-radius:30px;
background-color: #FF3333; /* 背景の色を変更 */
border-color: #FF3333; /* 枠の色を変更 */
margin-top: 20px;
margin-bottom: 25px;
color:#FFFFFF; /* 文字の色を変更 */
}
.sample_box_center_01{
padding:20px;
margin-left:10px;
margin-right:10px;
}

Simple Ander Line Style

シンプルなアンダーラインが文字をキレイに見せてくれますね。横線の種類をdouble(ダブル)に変更することで変わった仕上がりになります。doubleに変更する場合はborderのサイズも4px(偶数)に変更してくださいね。

ここに本文を書く(さぁさぁ!始まりました!第2弾のカスタマイズサンプル!これを入力するだけで外観がよくなるかもしれません!さぁさぁ!どーんどんスタイルを入力していきましょう!ゲゲゲの鬼太郎が大好き!え!?どうでもいいって?!)

各ソースコードは以下の通りです(HTMLソースコードをAddQuicktagに登録して、CSSソースコードはスタイルシートに記入してください。)

HTML
<div>
<div class=”sample_box_02″>
</div>
<div class=”sample_box_center_02″>
<div>ここに本文を書く</div>
</div>
<div class=”sample_box_02″>
</div>
</div>
CSS
.sample_box_02{
border:1px solid #DCDCDC; /* 横線のサイズ・種類・色を変更 */
width100%;
}
.sample_box_center_02{
padding:20px;
margin-left:10px;
margin-right:10px;
}

Simple Ander Line Style No.2

Wanted!バージョンを作成してみました。というよりも、Wantedを「気をつけるポイント」などの項目に設定しなおして使用してください。画像を入れるのも良さそうですね。下のWanted!が不必要な場合は文字を削除するだけで表示されなくなると思います。あとはスタイルシートに記載している内容を変更して調整してください。

Wanted!
ここに文章を書く(いかがでしょうか!?カスタマイズの宇宙人がやってきた場合の対処法はどうするのか?!さぁ!!サンプルは宇宙人だと知ってましたか!?ついでに言うと!!目玉親父はただのヒモ親父なんですよ!しらなかったでしょう!?)
Wanted!

各ソースコードは以下の通りです(HTMLソースコードをAddQuicktagに登録して、CSSソースコードはスタイルシートに記入してください。)

HTML
<div class=”sample_box_main”>
<div class=”sample_box_03″></div>
<div class=”sample_top_03″> Wanted! </div>
<div class=”sample_center_03″>
<div>ここに文章を書く</div>
</div>
<div class=”sample_bottom_03″> Wanted! </div>
<div class=”sample_box_03″></div>
</div>
CSS
.sample_box_main{
position: relative;
margin-top: 30px;
margin-bottom: 25px;
}
.sample_box_03{
border: 2px solid #DCDCDC; /* 枠のサイズ・種類・色の設定 */
}
.sample_top_03{
font-size:115%; /* Wanted!のフォントサイズの設定 */
color:red; /* Wanted!の色の設定 */
padding: 0px 10px 0px 10px;
background-color:#FFFFFF;
font-weight: bold;
position: absolute;
top: -12px; /* Wanted!の位置の設定 */
left: 18px; /* Wanted!の位置の設定 */
}
.sample_bottom_03{
font-size:115%; /* Wanted!のフォントサイズの設定(下) */
color:blue; /* Wanted!の色の設定(下) */
padding: 0px 10px 0px 10px;
background-color:#FFFFFF;
font-weight: bold;
position: absolute;
bottom: -12px; /* Wanted!の位置の設定(下) */
right: 15px; /* Wanted!の位置の設定(下) */
}
.sample_center_03{
padding:20px;
margin-top:5px;
margin-left:10px;
margin-right:10px;
}

Simple Is Best !!

背景に#DCDCDC(灰色)を設定して4つの角をシンプルにRadiusを使用して5pxに丸めてみました。枠(border)の色は淡い青色(#6699CC)に設定しました。淡い色に設定することで周りの大人しい色と馴染むので違和感が無くスムーズに内容を読むことができます。もしも見出しタグの背景を色付きで表示している場合は背景色に合ったborderの色を選ぶとサイト全体が整う感じがします。

ここに文章を書く(いかがでしょうか!?とっても美味しいキュウリを食べて見ませんか!?私はキュウリが大好きです!なぜかというと!お・い・し・い・から!さぁ!皆さんもキュウリを食べてカスタマイズのQちゃんになっちゃいましょう!え、ならないって?)

各ソースコードは以下の通りです(HTMLソースコードをAddQuicktagに登録して、CSSソースコードはスタイルシートに記入してください。)

HTML
<div class=”sample_04″>
<div class=”sample_04_center”>
<div>ここに文章を書く</div>
</div>
</div>
CSS
.sample_04{
border:6px solid #6699CC; /* 枠のサイズ・種類・色の設定 */
background-color:#F2F2F2; /* 全体の背景色の設定 */
border-radius:5px; /* 角を丸める設定 */
margin-top: 20px;
margin-bottom: 25px;
}
.sample_04_center{
color:#2E2E2E; /* 文字色の設定 */
padding:20px;
margin-left:10px;
margin-right:10px;
}

Simple Is Best No.2 !!

Simple Is Best!!にWanted!!を付けたバージョンです。Wanted!!を注意事項、気になるポイントなどに変更して使用してください。注意事項ならば赤色に変更するのも目立っていいかもしれません。枠の色を変えるだけでもかなりスタイルが変化します。ソースコードに各要素の意味について解説しているので参考にしてカスタマイズしてくださいね。

Wanted!!
ここに文章を書く(さぁさぁ!始まりました!シティの企画!サンプルだらけのサイト!どんどんどん!ここまで適当に書いてきました!この意味のない内容!SEOも考えていない内容!さぁさぁさぁ!終盤なのか序盤なのか!!)

各ソースコードは以下の通りです(HTMLソースコードをAddQuicktagに登録して、CSSソースコードはスタイルシートに記入してください。)

HTML
<div class=”sample_05″>
<div class=”sample_top_05″>Wanted!!</div>
<div class=”sample_05_center”>
<div>ここに文章を書く</div>
</div>
</div>
CSS
.sample_05{
border:6px solid #6699CC; /* 枠のサイズ・種類・色の設定 */
background-color:#F2F2F2; /* 全体の背景色の設定 */
border-radius:5px; /* 角を丸める設定 */
position: relative;
margin-top: 30px;
margin-bottom: 25px;
}
.sample_top_05{
font-size:115%; /* Wanted!のフォントサイズの設定 */
color:#FFFFFF; /* Wanted!の色の設定 */
padding: 0px 10px 0px 10px;
background-color:#6699CC;
border-radius:5px;
font-weight: bold;
position: absolute;
top: -15px; /* Wanted!の位置の設定 */
left: 18px; /* Wanted!の位置の設定 */
}
.sample_05_center{
color:#2E2E2E; /* 文字色の設定 */
padding:20px;
margin-top:6px;
margin-left:10px;
margin-right:10px;
}

まとめ

いかがでしたか?

「引用部分」「各見出しのポイントとなる部分」「注意事項を記入する部分」などに、これらのソースコードを使用することで、訪問者にわかりやすく文章を伝えることができます。

しかし、頻繁にスタイルを変更することは、リピーターにとって望ましくないと考えます。

例えば、1つ1つの記事が違ったスタイルだとすると、リピーターはどう感じるでしょうか?

ポイント毎にスタイルが違うので、記事ごとに迷ってしまい、内容が把握できなくなる可能性があるからです。

こういった迷わす行為は、リピーターが去っていく要因ともなることでしょう。

できるだけ「スタイルはサイト毎に固定する」のが好ましいと感じます。

ソースコードの質問、疑問などが御座いましたらコメント欄に質問をどうぞ。

Simplicityの他にも様々なテーマでも使用できると思うので、是非、試してみてくださいね。