Bloggerの引用スタイルを変更する

  SSブログの「ひとりネズミの本音」をBloggerに引っ越す方法として、SSブログでエクスポートしたファイルをBloggerでインポートできる形式に変換してからインポートするのが一般的だと思われるが、元のブログの記事を公開されている状態でコピーして、Bloggerにペーストするだけで、引っ越せそうである。「ひとりネズミの本音」の記事数は50。手動コピーの方が早そうなので、検討している。
 その際に引用(<blockquote>タグ)がある記事をペーストしたら、引用部分の文字が極端に大きくなり、しかも中央揃えになってしまった。このままでは引っ越せないので、ネットで検索して次のページを見つけた。

Bloggerで引用スタイルを変更する

デフォルトの引用のスタイル。中央揃えで少し字が大きくなっただけ・・・
これは何とかせねばということで、引用スタイルの変更を行います。
Bloggerで引用スタイルを変更する

 このページに載っているcssを少し変えて使わせてもらった。 ちなみに、「CSSを追加」の場所は今は異なる。

  「CSSを追加」に載せたコードは次のとおりである。赤文字の所は自分好みに変えた。

 /*変更後*/
/*フォントサイズ、テキスト位置を変更しました*/
blockquote{
color:$(blockquote.color);
font:$(blockquote.font);
font-size:medium;
text-align:left
}
blockquote {
    position: relative;
    padding: 5px 5px;
    margin: 14px;
    box-sizing: border-box;
    font-style: italic;
    color: #464646;
    border-left: solid 32px #c4c4c4;
    background: #f3f3f3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19);
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 32px;
    left: -32px;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    vertical-align: middle;
    font-family: "Meiryo";
    content: "\275D";
    color: #FFF;
    font-size: 36px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 5px 0;
    z-index: 3;
    line-height: 1.5;
}

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

 

コメント