引用部のスタイル設定 Blogger blockquote open-quote css

Blogger の公式投稿画面には引用ボタンが有り、文章を引用タグ=blockquote タグで囲むことができる 。

この引用部分の表示を整える時が来た。

引用文章引用文章引用文章引用文章引用文章引用文章。
引用文章引用文章引用文章引用文章。
引用文章引用文章。
引用文章引用文章引用文章、引用文章引用文章。

2番目の引用符は自動的にシングルクオートになる。

引用文章2引用文章2。引用文章2、引用文章2。引用文章2引用文章2。

このように表示するにはどうすればよいか?
次のコードを、Blogger → テンプレート→カスタマイズ」→上級者向け→CSSを追加する。

次のコードを、追加。
content: open-quote
にしないと、
content:"“";
だと、エラーになる。

blockquote {
quotes:"201C" "201D";
background: #f0f8ff;
border-left: 3px solid #ccc;
margin: 1.5em 10px;
padding: 1.2em 25px;
}
blockquote:before, blockquote:after {
font:bold 45px/1px Times, serif;
color:#359800;
position:absolute;
}
blockquote:before {
content:open-quote;
margin:15px 0 0 -25px;
}
  • このサイトに新規記事を投稿する時、同時に Facebook にも投稿するように設定している。 Next Scripts: Social Networks Auto Poster  というプラグインを利 ...
  • WordPress では、タグクラウドにそれぞれのタグの投稿記事数が表示されないのが標準であるが、時に投稿数が表示されているものもみかける。 どうすれば記事数を表示できるのか、調べてみたが、これがなか ...
  • FlexSlider は Celtispack プラグインパック に含まれていて、画像ギャラリー作成時に、FlexSlider を選択できる。 このサムネイルが70x70pxで小さいので大きくする方法 ...
  • Blogger からKusanagi-WordPress への移転が完了し、一段落したので、これまでの経緯を振り返り、次回のためのマニュアルとして記す。 BloggerからWordPressに移行決 ...
  • Blogger に表を挿入するには、ExcelよりもGoogleDoc Spreadsheets からコピペした方が、書式が反映されやすい。 バンコクでミャンマーVISAをとるには バンコクでミャンマ ...
  • 今時のCMSを調べてみると、Wordpress の他に、Concrete5 、Modx、Drupal 等があった。Concrete5 を使ってみることにした。 お名前コムVPS、CentOS Linu ...
  • 支那ブロック回避対策でBloggerから引っ越しを検討する際に、あらためてVPSサービスの現状を調べてみた。 rootでログインできる自前サーバーである。 現在はお名前.com VPSを使用して、wo ...

タグクラウド

blogger カテゴリ人気記事 Views most

blogger・ブログ カテゴリ人気記事 月間

20151106

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理
2019
GA-views: 38
20151106