オグの忘備録|カンニングアフィリエイト

アフィリエイトはそんな簡単に稼げるものではありません。でもしかしですよ収入を得ることはできます。どうすればいいのかを日々進化するグーグルと付き合いながらのサイト作りを検証していきましょう。自分に向けたメッセージでもあります。

デザイン

まるでプロ級!簡単に無料ブログでも使えるCSSでサイトをキレイに

コピペCSSで修飾したい

サイト作成をしていて何か味気ないデザインになってしまうときにはCSSで修飾をしていきましょう。

このテクは、無料ブログでもワードプレスでもシリウスでも使えます。

CSS修飾をすると、オっと思われて素人くささを減らせるのでとっても便利。

といってもCSSを一から勉強してマスターするのは大変、プロが作ったデザインをパクって利用していきましょう。

イメージとしては、HTMLからCSSデザインを呼び出してサイトに反映させるような感じです。

では、いってみます。

 

アンダーラインを変えてみたい

お気に入りのアンダーラインを紹介します。このアンダーラインは太字のマーカーで修飾できるもの。

もちろんサイトのテーマなんかでも機能がありますが、

もっとオリジナルなものを使っていきたい、サイト中で修飾のバリエーションを増やしたい場合には最適です。

今回のものは

CSS

.pink-line {
background: linear-gradient(transparent 80%, #dd9dbf 0%);}

HTML<span class="pink-line">文字</span>

<参考になるサイト>

サルカワ:https://saruwakakun.com/html-css/reference/border

ボックスを変えてみたい

ボックスは囲み線で文章を見やすくするものです。

サイトを作るときは、雑誌のようなデザインはたまた、昔よく勉強した参考書や教科書をイメージするといいですよね。

普通の小説やコラムなどの文章ばかりだとよみにくくなるますからね。

今回のものは

CSS

.box6 { padding: 0.5em 1em; margin: 2em 0; background: #f0f7ff; border: dashed 2px #5b8bd0;/*点線*/ } .box6 p { margin: 0; padding: 0; }

HTML<div class="box6">
<p>ここに文章</p>
</div>

<参考になるサイト>

ボックス サルワカ
https://saruwakakun.com/html-css/reference/box

 

テーブルを変えたい

テーブルを変更するには少し面倒です。編集をするときにはHTMLを知っておく必要があります。

そこでいいイメージのものがありましたので拝借します。

引用:WEBLINKER様 https://webliker.info/02035/

このようにテーブルコマンドの中に、trで列を作り、そのなかにマスとなるtdを並べて挟みます。

気を付けたいのは、全部の列に同じ数のtdを用意しなければなりません。

販売店 価格
楽天 内容がはいります。
Amazon 内容がはいります。
公式サイト 内容がはいります。

比較サイトを作るときには便利ですよね。

CSS

table.type09 {
border-collapse: collapse;
text-align: left;
line-height: 1.5;
}
table.type09 thead th {
padding: 10px;
font-weight: bold;
vertical-align: top;
color: #369;
border-bottom: 3px solid #036;
}
table.type09 tbody th {
width: 150px;
padding: 10px;
font-weight: bold;
vertical-align: top;
border-bottom: 1px solid #ccc;
background: #f3f6f7;
}
table.type09 td {
width: 350px;
padding: 10px;
vertical-align: top;
border-bottom: 1px solid #ccc;
}
HTML<table class="type09">
<thead>
<tr>
<th scope="cols">販売店</th>
<th scope="cols">価格</th>
</tr>
</thead><tbody>
<tr>
<th scope="row">楽天</th>
<td>内容がはいります。</td>
</tr>
<tr>
<th scope="row">Amazon</th>
<td>内容がはいります。</td>
</tr>
<tr>
<th scope="row">公式サイト</th>
<td>内容がはいります。</td>
</tr>
</tbody>
</table>

<参考になるサイト>

テーブル がんちゃん
https://ganchan.info/archives/2811

テーブル コトダマウェブ
https://cotodama.co/table-design/

 

他にデザインしたいCSS

あまり使用してませんが、引用するときのボックスも同じようにプロがつくったものがいくつか紹介されています。

是非活用して見栄えをよくしていきたいものですね。

<参考になるサイト>

引用 コピペット
https://copypet.jp/889/

引用 ゼロフォレスト
https://0forest.com/css-blockquote/

 

 

-デザイン

Copyright© オグの忘備録|カンニングアフィリエイト , 2020 All Rights Reserved Powered by AFFINGER5.