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