需要あるかもしれないし、自分用の控えにもなるので、 CSS カスタマイズ 部分を公開します!
(1) スマホには全く反映されないが、「カエレバ」導入のために追加した CSS コード
(2) 「h」タグや「blockquote」タグ等、見栄えを良くするために修正した CSS コード
【筆者】前回の「カエレバ」導入記事は、こちら…
「広告」
需要あるかもしれないし、自分用の控えにもなるので、 CSS カスタマイズ 部分を公開します!
(1) スマホには全く反映されないが、「カエレバ」導入のために追加した CSS コード
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 は「記事本文内の〜タグ」となります
CSS とっても便利なんですけど、livedoor ブログの場合 スマホ用画面で指定する術が無いのが残念ですよね。
青色のキーワード部分で、探してみてください。
ピンク色の部分は追加したコードのはずですが、既にキーワードが存在したら修正してください。
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タグのサンプル
「広告」amazon WINTER SALE
最後まで読んでいただき、ありがとうございます。ぜひ、右側の「人気ブログランキング」投票に ご協力ください。
また、お越しくださいませ。
// アタル
「広告」
コメント