2025年2月22日 (土曜日)↓における週間月間人気記事トップ３は？↓
今日は2025年2月22日です。
目次に行く･戻る
2025年2月22日 (土曜日)本日の人気記事トップ１０
メルカリ招待コード：
アフィリエイトリンクを作成してくれるカエレバブックマークレットやヨメレバブックマークレットを使用している方々は多いと思います。
私は、
カエレバ。というサイト？を知りはじめは意味がわかりませんでした。^^;）
製作者ブログ
このような素晴らしいツールを作成してくれたかん吉さんに感謝ですね！！
アドセンス336pxPC閲覧記事下表示1つ目コード
しかし、
+これまでによく読まれている記事一覧クリックでOPEN+
151,178件の PV
106,946件の PV
75,763件の PV
67,241件の PV
47,137件の PV
40,888件の PV
38,227件の PV
37,260件の PV
36,788件の PV
36,230件の PV
まず、デザインのCSSですが以下になります。
/*--ヨメレバ・カエレバ-----------------------------------------------------*/
.booklink-box, .kaerebalink-box{
margin: 16px auto;
padding: 5%;
width: 85%;
overflow: hidden;
border: solid 1px #ccc;
font-size: 90%;
}
.booklink-image, .kaerebalink-image {
margin: 0 0 16px 0;
}
.booklink-image img, .kaerebalink-image img {
margin: 0 auto;
display: block;
text-align: center;
}
.booklink-info, .kaerebalink-info {
overflow: hidden;
line-height: 120%;
text-align: center;
}
.booklink-name, .kaerebalink-name {
margin-bottom: 16px;
font-size: 100%;
line-height: 120%;
}
.booklink-powered-date, .kaerebalink-powered-date {
margin-top: 16px;
font-family: verdana;
font-size: 8pt;
line-height: 120%;
}
.booklink-detail, .kaerebalink-detail {
margin-bottom: 16px;
}
.booklink-link2, .kaerebalink-link1 {
margin-top: 16px;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkyahooAuc a, .shoplinkkakakucom a, .shoplinkseven a {
margin: 10px auto 0 auto;
padding: 4px;
display: block;
width: 90%;
border-top: solid 1px #dadada;
border-right: solid 1px #c7c8c8;
border-bottom: solid 1px #949494;
border-left: solid 1px #c7c8c8;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #bcbcbc;
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .98), rgba(255, 255, 255, .3) 95%, rgba(255, 255, 255, .98) 100%);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .98), rgba(255, 255, 255, .3) 95%, rgba(255, 255, 255, .98) 100%);
font-weight: 700;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 -0.5px 0 rgba(1, 1, 1, .6);
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover, .shoplinkyahooAuc a:hover, .shoplinkkakakucom a:hover, .shoplinkseven a:hover {
border-top: solid 1px #b4b4b4;
border-right: solid 1px #a0a2a2;
border-bottom: solid 1px #6e6e6e;
border-left: solid 1px #a0a2a2;
box-shadow: 0 1px 1px rgba(148,148,148,1);
}
.shoplinkamazon a:active, .shoplinkrakuten a:active, .shoplinkyahoo a:active, .shoplinkyahooAuc a:active, .shoplinkkakakucom a:active, .shoplinkseven a:active{
position: relative;
top: 1px;
border-top: solid 1px #666;
border-right: solid 1px #999;
border-bottom: solid 1px #ccc;
border-left: solid 1px #999;
box-shadow: inset 0 1px 1px rgba(0,0,0,.3);
background-color: #bcbcbc;
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .3) 95%, rgba(255, 255, 255, .3) 100%);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .3) 95%, rgba(255, 255, 255, .0) 100%);
}
.shoplinkamazon a {
color: #fc9711;
}
.shoplinkrakuten a {
color: #bd0000;
}
.shoplinkyahoo a {
color: bulue;
}
.shoplinkyahooAuc a {
color: #red;
}
.shoplinkkakakucom a {
color: #fc9711;
}
.shoplinkseven a {
color: #23518f;
}
.booklink-footer{
clear:left;
}
そして、 メディアクエリは以下になります。
@media screen and (min-width : 500px){
.booklink-box, .kaerebalink-box{
padding: 32px;
}
.booklink-image, .kaerebalink-image {
margin: 0 32px 0 0;
float: left;
}
.booklink-info, .kaerebalink-info {
margin: 0;
text-align: left;
}
.booklink-link2, .kaerebalink-link1 {
margin-top: 32px;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a,.shoplinkyahooAuc a, .shoplinkkakakucom a,.shoplinkseven a {
margin: 10px 8px 0 0;
}
}
これで、上記画像のようにカスタマイズされた表示になります。
カエレバ。で、
- amazlet風
- amazlet風（改）-1
- amazlet風（改）-2
- amazlet風（CSSカスタマイズ用）
- amazlet風（改）-3
など、
上記画像のような感じでいくつかあります。
その中でおおむねamazlet風（改）であれば、
それなりに見栄えは変わります。
ですが、
私は昔からずっと「amazlet風（改）-3」というデザインを選んでいたので、
「amazlet風（改）-3」に合わせたカスタマイズになります。
そして、
リンク先も以下の5つです。
- Amazon、
- 楽天市場、
- Yahoo!ショッピング、
- ヤフオク、
- 価格ドット.com
です。
一応、他にも予備として7.netのCSSも書いてあります。
追加したい場合や要らない場合は該当箇所を削除したり追加したりすればできます。
できあがり画像としてはこんな感じです。
実際には以下のようになります。
ボタン部分を横にしたい場合は、
メディアクエリのコードの一番下に以下のコードを追加すると横にできますが、
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a,.shoplinkyahooAuc a, .shoplinkkakakucom a,.shoplinkseven a {
margin: 10px 8px 0 0;
float: left;
width: 45%;
}
}
私の場合は、
amzlet風（改）-3で縦表示に合わせてしまってあるので、
marginやwidthなどそれぞれで調整する必要があります。
※このまま横表示にするとボタン位置がズレますので気をつけてください。
最後に参考にさせていただいたサイト様です。（ありがとうございます。）
様々なデザインがあると思いますが、
今のところ私の場合・ブログでは上記コードにてカエレバ。をCSSでカスタマイズして使用させて頂いています。
(ほとんどCom2Blogさんのコピペですが…。m(__)m^^;ポリポリ）
参考になりましたら幸いです。
ホワイトデーまであと…ホワイトデーはどんなPresent（プレゼント）でどのように過ごされますか？
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
おすすめ！！
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう！！ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ！！
おすすめ2
楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に！！楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。
あなたにおすすめな関連記事
🎉 Counting Up! 🎉
Loading...
おすすめの記事一部広告
[…] https://infovarious.com/post-950/ […]