カエレバ、ポチレバの表示をカスタムしたよvol.2

連続でカエレバのcss記事だよ
cssカスタムしていきます

連続でカエレバのcss記事だよ

どうもブログの見た目ばっかりいじって記事内容は全然ダメなじょにー(@bartslog)です

2日連続でかん吉さん(@kankichi)の開発したカエレバのCSSカスタム記事です^^；

前回の記事にてひげモジャさん(@sanny_1222)より具体的なやり方を教えてほしいとコメントを頂きました

変更したとは書いてもやり方は載せてない…しかし自分のへたくそなコードを晒すのも…

その辺は大目に見てもらい、今回はカエレバを自分なりのカスタム案を書いていきたいと思います

cssカスタムしていきます

ｃｓｓとは何？
カエレバの基本構造を見る
ｃｓｓを記述する

今回はこんな感じで進めたいと思います

cssとは何？

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます HTMLクイックリファレンス/http://www.htmq.com/csskihon/001.shtml

簡単に言うとweb上の見栄えをよくするために色々指定するって感じですかね^^；

実際この文章の文字の大きさや行間などもcssによって指定し表示されています

カエレバの見た目を変えるにはそのcssをちょこっと変更してあげれば出来るという事です

カエレバの基本構造を見る

カエレバのデザインからcssカスタマイズ用を選択すると至ってシンプルなコードが出されます

そのコードからどれを変更していけばいいか見ます

書いてある要素はこちら

私の場合はamazonと楽天を選択してあるのでその2つが表示されます

ようはこのdivに指定していけばいいわけです

▲イメージはこんな感じ

大きい箱の中に箱が入っててその中に小さい箱がいっぱいみたいな…　マトリョーシカ

cssを記述する

cssを書いていきます！どこに書けばいいかは人それぞれです直接書いてもいいですしcssファイルに書いて外部ファイルとして読み込むなり、私はワードプレスなのでそうしてます。

色々なブログサービスを使ってる方はおそらくテンプレート等呼ばれているブログのデザインを変更する画面があると思います

そこにhtmlの他にcssとあるのでそこの中に書いていきます

cssが変更できない仕様のテンプレート等を使用してる方はcssの変更が出来るものに変える事が必要です

.kaerebalink-box { width:700px;
background: #eee;
}

これだけ書いてみると一番大きい箱のサイズが700px　背景の色が#eeeに指定されます

このように全てに指定をしていきます

今回は私が変更したのと同じコードをのせますので汚いというか間違いもあるかもしれませんがそこは自己責任でよろしくお願いします

このコードをもとにオリジナルでカスタムしてみてください^^

▼コードはこちら

.kaerebalink-box { width:700px;
background: #eee;
padding: 10px;
border-radius: 8px 8px 8px 8px;
margin: 0px 0px 10px 0px;}
.kaerebalink-image { float: left; margin: 20px;}
.kaerebalink-info { margin: 20px 20px 0px 0px;}
.kaerebalink-name { font-size:15px;}
.kaerebalink-powered-date { font-size:13px; margin: 3px 0px 0px 0px;}
.kaerebalink-detail { font-size:14px; margin: 5px 0px 0px 0px;}
.kaerebalink-link1 { padding-top: 15px;}
.shoplinkamazon a{ text-align: center;
background: #2d6dff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: #fff;
width: 150px;
padding: 14px;
display: block;
float:left;
margin: 0px 10px 0px 0px;}
.shoplinkrakuten a{ text-align: center;
background: #ff3c37;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: #fff;
width: 150px;
padding: 14px;
display: block;
float:left;}

.shoplinkamazon a:link {color: #fff;text-decoration: none;}
.shoplinkamazon a:visited {color: #fff;text-decoration: none;}
.shoplinkamazon a:active {color: #fff;text-decoration: none;}
.shoplinkamazon a:hover {color: #000;text-decoration: none;}

.shoplinkrakuten a:link {color: #fff;text-decoration: none;}
.shoplinkrakuten a:visited {color: #fff;text-decoration: none;}
.shoplinkrakuten a:active {color: #fff;text-decoration: none;}
.shoplinkrakuten a:hover {color: #000;text-decoration: none;}

これで私のブログと同じ表示になると思います