編集

Blogger『Contempo』記事装飾を設定

｜2022/05/03

記事装飾設定

※HTML編集の前にテーマ→バックアップは忘れずに。

テーマ→カスタマイズ→詳細設定→CSSを追加。
もしくはテーマ→HTMLの編集→『　]]></b:skin>　』の前に置く。


太字
太字はそのままなので、何も設定してません。


強調
強調はアンダーラインを付けてみた。
/* 強調*/
strong{
background:linear-gradient(transparent 50%, #ffd700 0%);
}

リンク
リンクはマウスオーバーでアンダーライン。……PCのみ。
/* 記事本文のみ マウスオーバーでアンダーライン */
.post-body a:hover {
text-decoration:underline;
}



引用はいろいろと弄ってみて、結果。
bloggerで引用ボックスをFontAwesomeとCSSで作成する方法を参考にさせていただきました。

 ここに引用文を載せます
引用元タイトル


A版を選んだ。FontAwesomの設定は一つ前の「見出し設定」で設定済み。

/* PC版 引用ボックス*/
@media screen and (min-width: 1200px){
blockquote {
    text-align: start;
    font-size: 18px;
    position: relative;
    padding: 10px 15px 10px 15px;
    box-sizing: border-box;
    background: #f5f5f5;
}

blockquote::before{
    top: 15px;
    left: 15px;
    vertical-align: middle;
}

blockquote p {
    padding: 0;
    margin-top:14px;
    margin-bottom:0px;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    font-size: 0.9em;
}}

/*スマホ版 引用ボックス*/
@media only screen and (min-width:320px) and (max-width:479px){
blockquote {
    text-align: start;
    font-size: 18px;
    position: relative;
    padding: 0.5em 1em;
    margin: -1em 0.9em;
    box-sizing: border-box;
    background: #f5f5f5;
    color: #777777;
}

blockquote::before{
    top: 15px;
    left: 15px;
    vertical-align: middle;
    line-height: 1;
}

blockquote p {
    padding: 0;
    margin-top:14px;
    margin-bottom:14px;
    line-height: 1.7;
}
blockquote cite {
    display: block;
    text-align: right;
    font-size: 0.9em;
}}

/*FontAwesome 引用ボックスが薄いグレーなので記事と同色指定*/
.my-hako {
    color: #bfa46f;
}

#bfa46fに変えて『”』マークの色を変えました。鈍い黄色系の色になってます。
hakoも元の記事とは変えてます。引用だけで使う名前をつけてます。

記事内にはHTMLビューで
<blockquote><i class="fas fa-quote-right my-hako"></i>&nbsp;ここに引用文を載せます<br />
<cite><a href="https://ryuufuu.blogspot.com/" target="_blank">引用元タイトル</a></cite></blockquote>

と記述します。同じくhakoに変えてます。



リストはラインを付けてみた。

リスト




箇条書き
  • 箇条書き
  • 箇条書き
/*リスト装飾*/
.post-body ul, .post-body ol {
  color: #1e366a;
  border-top: dotted #ffcc00 2px;/*上のボーダー*/
  border-bottom: dotted #ffcc00 2px;/*下のボーダー*/
  padding: 0.5em 0 0.5em 1.5em;
}

.post-body ul li, .post-body ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}


水平。

/*水平線の色とサイズ*/
hr {
  height: .1rem;
  border: 0;
  background: #ffcc00; }


装飾してみたメモです。