【ライフハック】カエレバ・ヨメレバ・ポチレバをcssでカスタマイズ

サンプルと一緒にどうぞ

カエレバ・ヨメレバ・ポチレバの見た目ををcssでカスタマイズしました。トマレバには対応していません。
同じような外観ですっきりとさせたかったのです。
こちらのブログを参考にしました。

こちらもどうぞ。

サンプル

青木光恵の描く女の子はかわいい。

カメラと言えばフィルムは必需品。

Ulysses

Ulysses (無料)
(2018.05.08時点)
posted with ポチレバ

「書く」ことなら慣れれば結構ハマる。正直、日記をnoteに書いているんだけど、このアプリから共有出来ないのが残念。WordPressへすっと投稿するにはもってこいです。

ヨメレバ、カエレバとも、amazlet風-1でリンクを作成してください。ポチレバはスタイル4です。
注意点

CSSのコードです。

.booklink-box,
.kaerebalink-box,
.pochireba
{
    padding: 25px !important;
    margin-bottom: 15px;
    border: solid 1px #CCC;
    overflow: hidden;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.booklink-box a,
.kaerebalink-box a,
.pochireba a
{
    text-decoration: none;
}

.booklink-image,
.kaerebalink-image,
.pochi_image
{
    margin: 0 15px 0 0;
    float: left;
    min-width: 160px;
    text-align: center;
}

.booklink-image img,
.kaerebalink-image img,
.pochireba img
{
    margin: 0 auto;
    text-align: center;
}

.booklink-info,
.kaerebalink-info,
.pochi_info
{ 
    margin: 0;
    line-height: 120%;
    overflow: hidden;
}

.booklink-name,
.kaerebalink-name,
.pochi_name
{
    font-size: 110%;
    margin-bottom: 10px;
    line-height: 1.5em;
}

.booklink-name a,
.kaerebalink-name a,
.pochi_name a
{
    color: #3333cc;
}

.booklink-name a hover,
.kaerebalink-name a hover,
.pochi_name a hover
{
    text-decoration: underline;
}

.booklink-powered-date,
.kaerebalink-powered-date,
.pochi_time,
.pochi_seller
{
    font-size: 90%;
    margin-top: 10px;
    margin-bottom: 15px;
    line-height: 120%;
}

.booklink-detail,
.kaerebalink-detail,
.pochi_post
{
    font-size: 95%;
}

.booklink-link2,
.kaerebalink-link1 
{
    margin-top: 10px;
}

.booklink-link2 a,
.kaerebalink-link1 a 
{    
    width: 30%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    margin: 5px 2px 0 0;
    padding: 10px 1px;
    text-align: center;
    text-decoration: none;
    color: #fff !important;
}

.booklink-link2 a:hover,
.kaerebalink-link1 a:hover     
{
    opacity: .6;
}

.booklink-link2 a:active
.kaerebalink-link1 a:active 
{
    position: relative;
    top: 1px;
}

.shoplinkamazon a 
{
    color: #FF9901 !important;
    border: 1px solid #FF9901 !important;
}

.shoplinkrakuten a 
{
    color: #c20004 !important;
    border: 1px solid #c20004 !important;
}

.shoplinkkindle a 
{
    color: #007dcd !important;
    border: 1px solid #007dcd !important;
}

.shoplinkkakakucom a 
{
    color: #314995 !important;
    border: 1px solid #314995;
}

.shoplinkyahoo a 
{
    color: #7b0099 !important;
    border: 1px solid #7b0099 !important;
}
.shoplinkyahoo img 
{
    display: none;
}

.shoplinkyahoo a 
{
    font-size: 100%;
}

.booklink-footer 
{
    display: none;
}

.posted-on 
{
    font-style: normal !important;
}
/*ポチればのpタグによる障害回避*/
.pochireba p {
    font-size: 12px;
    margin: 0 !important;
}

不要な行もあるかも知れません。ご容赦を。
【追記】2018/05/10:一部修正