DJモペのねこまんま

猫とゴハンと日々のあれこれ

トップ > IT情報 > 【はてなブログ】『カエレバ』デザインのカスタマイズ方法！cssの変更手順

【はてなブログ】『カエレバ』デザインのカスタマイズ方法！cssの変更手順

IT情報 IT情報-ブログ

私事ですが十数年前に仕事でWEB系プログラムの経験があり、cssについて少しはわかっているつもりでしたが、最近はてなブログで久しぶりにcssに触れるたび脳の老化を感じていたので、脳トレも兼ねて『カエレバ』で作ったブログパーツをカスタマイズしてみました。

 

カエレバのカスタマイズについては、コピペでOK系のサイトがたくさんあるようですが、年末年始に時間もあったので一からcssを書いてみました。

ついでに何番煎じかわかりませんが、デザインcssの変更方法をご説明します！サンプルコードはパソコン表示、スマホ表示（レスポンシブデザイン）のそれぞれに対応しています。

 

少しずつカスタマイズしていった様子をご紹介しますが、結果だけ知りたい方はカスタマイズ方法まとめへどうぞ＾＾

 

カエレバの使い方は割愛しますので公式サイトをご覧ください。
https://kaereba.com/ 

 

 

divの可視化

カエレバの『デザイン：amazlet風-2（cssカスタマイズ用）』でブログパーツを作り、はてなブログにコピペしただけのものがこちらです。

カエレバ　カスタマイズ

 

このブログパーツは<div>という要素でできており、各<div>にはclass名がついているので、このclass名を使って自分好みにカスタマイズしていきます。

まず、スムーズに作業できるようclass名を表示させました。さらにわかりやすくするため、cssで<div>に線とスペースを入れてみました。

 

/*テスト用　線とスペースを表示*/
.cstmreba,
.kaerebalink-box,
.kaerebalink-image,
.kaerebalink-info,
.kaerebalink-name,
.kaerebalink-powered-date,
.kaerebalink-detail,
.kaerebalink-link1,
.shoplinkrakuten,
.shoplinkamazon,
.shoplinkyahoo,
.shoplinkwowma,
.booklink-footer{
border:1px solid #ddd;
margin:5px;
}

 

カエレバ　カスタマイズ

 

配置を調整

左に画像、右にそれ以外という配置にしたかったので、次のcssを追加しました。

 

/*配置を調整*/
.kaerebalink-image{
float:left;
width:30%
}

.kaerebalink-info{
float:right;
width:60%;
}

 

しかし『float』を使ったので『booklink-footer』が崩れています。

カエレバ　カスタマイズ

 

フッター調整①

今までこの『booklink-footer』に何か表示されたことはなくて、今後もたぶん表示されないと思います。bookとあるので本関連でしょうか？

とりあえずレイアウト崩れを直すために次のcssを追加します。

 

/*フッター調整1*/
.booklink-footer{
clear:both;
}

 

レイアウトは綺麗になりましたが、『booklink-footer』に何も表示されない場合は下に変なスペースができてしまいます。

カエレバ　カスタマイズ
 

フッター調整②

とりあえず我が家では『booklink-footer』に何か表示されることはないので、高さを低く設定することにしました。

今後何か表示されるようなら高さを元に戻せばいいかなーと思って＾＾；

 

/*フッター調整2*/
.booklink-footer{
clear:both;
height:1px; /*フッターが必要ならこの行をコメントアウト*/
}

 

カエレバ　カスタマイズ

 

フォントサイズを調整

次にフォントサイズの設定です。

商品名は標準、それ以外を小さくしたかったのですが、商品名『kaerebalink-name』とposted with カエレバ『kaerebalink-powered-date』の関係が微妙なため、合計3つのclass名にフォントサイズを設定しました。

ここはお好みのサイズに変更してください。

 

/*フォントサイズを変更*/
.kaerebalink-info{
font-size:0.7em;
}

.kaerebalink-name{
font-size:1.2em;
}

.kaerebalink-powered-date{
font-size:0.7em;
}

 

カエレバ　カスタマイズ

 

リンクを調整

続いてリンク部分です。シンプルにしたかったので商品名やカエレバのフォントカラーは記事内と同じ標準の色で、下線なしに変更しました。

 

/*リンクの変更*/
.kaerebalink-name a, .kaerebalink-powered-date a, .kaerebalink-name a:hover, .kaerebalink-powered-date a:hover{
text-decoration: none;
color:#454545;
}

 

カエレバ　カスタマイズ

 

ショップのリンクは背景色を各ショップのアイコンに近い色に、フォントカラーはシンプルに白で統一しました。

カラーコードは、クリックするだけでカラーコードがわかるというChromeの拡張機能を使って割り出しましたが、どのショップも似たような色ですね。

 

/*ショップリンクの変更*/
.shoplinkamazon{
background: #e47911;
}

.shoplinkrakuten {
background: #bf0000;
}

.shoplinkyahoo{
background: #FF0021;
}

.shoplinkwowma{
background: #F0440E;
}

.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkwowma a{
display:block;
color: #FFFFFF;
text-decoration: none;
padding:12px;
}

.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover, .shoplinkwowma a:hover{
color: #FFFFFF;
}

 

さらにリンクをボタン風に、角を丸く、縦2×横2の配置に、文字列を中央に、など微調整を行いました。

 

/*ショップリンクを微調整*/
.kaerebalink-link1 div{
float:left;
text-align: center;
width: 45%; /*ここの数字はいろいろ試してベストを探してください*/
height:40px;
margin:5px 5px 0px 5px;
border-radius:5px;
}

 

カエレバ　カスタマイズ

 

最終調整

テスト用の線とスペースを消して、一番外の<div>に線とスペースを追加しました。

 

/*最終調整*/
.cstmreba{
border:1px solid #ddd;
padding:20px;
}

 

カエレバ　カスタマイズ

 

スマホ表示

パソコン表示用に画像などの配置をいじりましたが、スマホでは<div>要素を縦に並べて表示させたいのでそのためのcssを追加しました。

 

/*カエレバ　スマホ表示*/
@media screen and (max-width:640px){
.kaerebalink-image, .kaerebalink-info, .kaerebalink-link1 div{
clear:both;
width:95%;
margin:5px;
text-align:center;
}
}

 

カエレバ　カスタマイズ

 

カスタマイズ方法まとめ

上記で少しずつ設定してきたcssをまとめたものです。

width、height、marginなどなど、数字を入れている部分は好みで変更してください。

 

/*カエレバ*/
.cstmreba{
border:1px solid #ddd; 
padding:20px;
}

.kaerebalink-image{
float:left;
width:30%
}

.kaerebalink-info{
float:right;
width:60%;
font-size:0.7em;
}

.kaerebalink-name{
font-size:1.2em;
}

.kaerebalink-powered-date{
font-size:0.7em;
}

.kaerebalink-name a, .kaerebalink-powered-date a, .kaerebalink-name a:hover, .kaerebalink-powered-date a:hover{ text-decoration: none;
color:#454545;
}

.shoplinkamazon{
background: #e47911;
}

.shoplinkrakuten {
background: #bf0000;
}

.shoplinkyahoo{
background: #FF0021;
}

.shoplinkwowma{
background: #F0440E;
}

.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkwowma a{
display:block;
color: #FFFFFF;
text-decoration: none;
padding:12px;
}

.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover, .shoplinkwowma a:hover{
color: #FFFFFF;
}

.kaerebalink-link1 div{
float:left;
text-align: center;
width: 45%; /*ここの数字はいろいろ試してベストを探してください*/
height:40px;
margin:5px 5px 0px 5px;
border-radius:5px;
}

.booklink-footer{
clear:both;
height:1px; /*フッターが必要ならこの行をコメントアウト*/
}

/*カエレバ　スマホ表示*/
@media screen and (max-width:640px){
.kaerebalink-image, .kaerebalink-info, .kaerebalink-link1 div{
clear:both;
width:95%;
margin:5px;
text-align:center;
}
}

 

仕事でやる場合は閲覧環境などいろんなパターンを想定して、何をされてもOKなようにもっといろいろコードを追加するのでしょうが、我が家は素人ブログなのでとりあえず見た目がOKならOKということで＾＾

もし今後問題点を発見したら追記していきます！

 

きちんと入門しようかな…。

いちばんよくわかるHTML5＆CSS3デザインきちんと入門
posted with カエレバ
 
楽天市場
Amazon
Yahooショッピング
Wowma
 
 

 

このブログでは夫婦と2匹の猫の日々のあれこれを書き綴っています。
よかったら読者登録をお願いします(=^・^=)