記事キャッチ画像
 需要あるかもしれないし、自分用の控えにもなるので、 CSS カスタマイズ 部分を公開します! 

 (1) スマホには全く反映されないが、「カエレバ」導入のために追加した CSS コード 

 (2) 「h」タグや「blockquote」タグ等、見栄えを良くするために修正した CSS コード 

【筆者】前回の「カエレバ」導入記事は、こちら…

  「広告」  
 

 需要あるかもしれないし、自分用の控えにもなるので、 CSS カスタマイズ 部分を公開します! 

 (1) スマホには全く反映されないが、「カエレバ」導入のために追加した CSS コード 

32

livedoor ブログの場合、 CSS コードの末尾(画面赤枠の後)に、以下の「カエレバ(ヨメレバ)」 CSSコードを丸ごと追加します。
なお、「カエレバ」「ヨメレバ」ブログパーツで貼り付けコードを作成する際のデザインは、「 amazlet風-2 (CSSカスタマイズ用) 」を用いる必要があります。

コメント部分は緑色、 カエレバCSS雛形 から追加・変更した部分で重要な箇所をピンク色で示しました。
ちゃんと理解していないので、スマホ適用の CSSコード 等が含まれています。
100%のサイズでそのまま使えるよう、全般的に「表示間隔」を詰めました!
hover というのは、マウスオーバー(マウスポインタが対象に重なった)時の効果となります。

解らないキーワードがあった場合は、「 CSS キーワード 」で検索しましょう!
色の指定は、 HTML カラーコード を参照してください。

なお、CSSコードを誤って修正してしまうと表示が乱れるので、必ず 元の CSSコードを テキストエディタ等を利用して バックアップしてから 修正してくださいね。
すぐに、バックアップした CSSコード に戻せますので…



/*--------------------------------------
 ヨメレバ・カエレバ 1
--------------------------------------*/
.booklink-box, .kaerebalink-box {
 border: 1px solid #ccc;
 border-radius: 4px;
 box-shadow: 1px 1px 3px 1px #ddd;
 padding: 10px 10px;
 background-color: #E0FFFF;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all  0.3s ease;
}
 
.booklink-box:hover, .kaerebalink-box:hover {
 background-color: #A0FFFF;
}
 
.booklink-image, .kaerebalink-image {
 margin: 0 0 1px;
}
 
.booklink-image img, .kaerebalink-image img {
 display: block;
 margin: 0 auto;
 text-align: center;
}
 
.booklink-info, .kaerebalink-info {
 text-align: center;
 line-height: 120%;
 overflow: hidden;
}
 
.booklink-name, .kaerebalink-name {
 font-size: 14px;
 margin-bottom: 1px;
 line-height: 1.2em;
}
 
.booklink-powered-date, .kaerebalink-powered-date {
 font-size: 8pt;
 line-height: 120%;
}
 
.booklink-powered-detail, .kaerebalink-detail {
 margin-bottom: 1px;
}
 
.booklink-link2, .kaerebalink-link1 {
 margin-top: 1px;
}
 
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven {
 width: 90%;
 height: 15px;
 overflow: hidden;
 background-color: #ffffff;
 border-radius: 6px;
 border: 1px solid #dcdcdc;
 display: inline-block;
 margin: 0 auto 1px;
 padding: 1px 0;
 text-align: center;
}
 
.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover, .shoplinkseven:hover {
 background-color: #ffff00;
}
 
.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active, .shoplinkseven:active {
 position: relative;
 top: 1px;
}
 
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkseven a {
 display: block;
 cursor: pointer;
 text-decoration: none;
 font-weight: 800;
 text-shadow: 1px 1px 1px #dcdcdc;
 font-size: 12px;
}
 
.shoplinkamazon a {
 color: #FD8602;
}
 
.shoplinkrakuten a {
 color: #B50000;
}
 
.shoplinkkindle a {
 color: #007dcd;
}
 
.shoplinkyahoo a {
 color: #FF002D;
}
 
.shoplinkseven a {
 color: #32CD32;
}
 
.booklink-footer {
 clear: left;
}
 
/*--------------------------------------
 ヨメレバ・カエレバ 2
--------------------------------------*/
.booklink-box, .kaerebalink-box {
 width: 80%;
 margin: 10px auto;
 padding: 10px;
}
 
.booklink-image, .kaerebalink-image {
 margin: 0 10px 0 0;
 float: left;
}
 
.booklink-info, .kaerebalink-info {
 margin: 0;
 text-align: left;
}
 
.booklink-name, .kaerebalink-name {
 margin-bottom: 5px;
 line-height: 1.5;
}
 
.booklink-link2, .kaerebalink-link1 {
 margin-top: 10px;
}
 
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven {
 float: left;
 width: 30%;
 margin: 3px 1% 0 auto;
 padding: 3px 0;
}
 
.shoplinkyahoo a {
 font-size: 9px;
}
 
/*--------------------------------------
 ヨメレバ・カエレバ 3
--------------------------------------*/
@media only screen and (max-width: 480px) {
 .booklink-box, .kaerebalink-box {
 border: 1px solid #ccc;
 border-radius: 4px;
 box-shadow: 1px 1px 3px 1px #ddd;
 padding: 10px 15px;
 }
 
 .booklink-image, .kaerebalink-image {
 margin: 0 0 10px;
 float: none;
 }
 
 .booklink-image img, .kaerebalink-image img {
 margin: 0 auto;
 }
 
 .booklink-info, .kaerebalink-info {
 font-size: 12px;
 margin: 0;
 }
 
 .booklink-name, .kaerebalink-name {
 font-size: 15px;
 margin-top: 2px;
 }
 
 .booklink-detail, .kaerebalink-detail {
 margin-top: 5px;
 }
 
 .booklink-powered-date, .kaerebalink-powered-date {
 font-size: 11px;
 margin-top: 5px;
 }
 
 .booklink-link2, .kaerebalink-link1 {
 font-size: 14px;
 }
 
 .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven {
 float: none;
 width: 96%;
 margin: 5px 0;
 padding: 10px 0;
 }
}


 (2) 「h」タグや「blockquote」タグ等、見栄えを良くするために修正した CSS コード 

上記画面の 既存 CSSコード( livedoorブログ純正の CSS 部分 )を 修正してみました!
青色のキーワード部分で、探してみてください。
ピンク色の部分は追加したコードのはずですが、既にキーワードが存在したら修正してください。

hover で指定した背景色は薄い色のため、ディスプレイによっては判らないかもしれません。
背景色が真っ白だと眼に負担がかかるかもと思い、「薄い緑色」や「薄い黄色」を設定しています。

.article-title   は、  「記事タイトル」
.article-body は、  「記事本文」
.related-articles は、「カテゴリの最新記事」部分
.article-body-inner は「記事本文内の〜タグ」となります

.article-title a:hover {
 background-color: #FFFFE0;
}

.article-body:hover { background-color: #F0FFF0; }
.related-articles:hover { background-color: #FFFFE0; } .related-articles ul li a:hover { color: red; } .article-body-inner h1, .article-body-inner h2 { border-bottom:3px solid #7f7f7f; background-color: #00BFFF; border-radius: 5px; clear: both; } .article-body-inner h3 { border-bottom:3px solid #7f7f7f; clear: both; } .article-body-inner h4, .article-body-inner h5, .article-body-inner h6 { border-bottom:1px solid #ccc; clear: both; }

.article-body-inner blockquote
{ background-color:#F5F5F5; border: 1px solid #C0C0C0; border-radius: 10px; } .article-body-inner blockquote:before { color: #ddd; } .article-body-inner img.pict{ border: 5px solid #fff; box-shadow: 0px 3px 8px rgba(51, 51, 51, 0.5); height: auto; margin: 1em 6px 1.5em!important; max-width: 98.4%; }

CSS とっても便利なんですけど、livedoor ブログの場合 スマホ用画面で指定する術が無いのが残念ですよね。

 h1タグのサンプル 

 h2タグのサンプル 

 h3タグのサンプル 

 h4タグのサンプル 

 h5タグのサンプル 
 h6タグのサンプル 
 blockquoteタグのサンプル 


最後まで読んでいただき、ありがとうございます。
ぜひ、右側の「人気ブログランキング」投票に ご協力ください。
また、お越しくださいませ。
// アタル

  「広告」