おすすめ記事ピックアップ
質問を頂いたので、Bloggerの引用blockquoteのCSSレイアウトデザイン方法について、説明いたします。blockquoteは引用記事を紹介するときに使います。引用や転記の文章を掲載するときにblockquoteするのが良いそうです。
個人的には、見栄えが良いので使っています。blockquoteを何用途に利用するかは、個人の好みだと思います。何か強調してみせたり、引用の言い訳っぽい感じで使いやすいですよね。
Bloggerの投稿画面では、blockquoteボタンがあります。「”」のボタンです。これを押せば、blockquoteしてくれます。
もちろんHTMLコードを直接入力してもOKです。こんな感じで。
さらにカスタマイズしたい人は、
フォントサイズの指定を追加してみたり
例:font-size:20px;
行間を調整してみたり
例:line-height:1.3em;
背景の色を付けてみたり
例:background-color:#777;
背景画像をつけてみたり
例:background:url(http://xxxxx) no-repeat 10px 10px;
いろいろ設定してみてください。
追記:bloggerのblockquoteは癖があるので、把握しておきましょう。結構面倒くさいのです。まず実際にblockquoteします。
HTMLコードを見るとblockquoteで引用部分が挟まれます。ボタンを使うとtr_bpというクラスもついてきます。これは特に気にしなくOKです。
作成画面に戻り、引用部分をエンターなどで改行を入れます。
そうするとblockquoteも2つに別れてしまいます。別々のblockquoteに自動的になってしまうのです。面倒くさい。
プレビューするとこんな風になります。
そうなったら、なかなか修正できないので、シンプルに手打ちで直しましょう。終わり。
Bloggerに関する質問を、分かる範囲で適当にお答えします。質問はお気軽にどうぞ!
http://www.furimuke.com/p/blog-page_3.html
個人的には、見栄えが良いので使っています。blockquoteを何用途に利用するかは、個人の好みだと思います。何か強調してみせたり、引用の言い訳っぽい感じで使いやすいですよね。
Bloggerの投稿画面では、blockquoteボタンがあります。「”」のボタンです。これを押せば、blockquoteしてくれます。
もちろんHTMLコードを直接入力してもOKです。こんな感じで。
<blockquote>引用表記</blockquote>blockquoteもCSSで記述されています。デザインしたCSS例を紹介します。単純にこれを張り付ければ、四角枠で囲まれたblockquoteが表示されます。簡単ですね。borderで囲み線を設定したりpaddingで内側の幅、marginで外側の幅を設定したりできます。
.post-body blockquote { border: 1px solid #cbd4d7; padding: 15px 10px 15px 40px; margin:20px; }記述は、Bloggerの管理画面のテンプレート→HTMLの編集で、CSSエリアの好きな所に追記しましょう。たぶん「post-body blockquote」と書かれたCSSがすでにあると思うので、そこにデザインの指定を追記しても良いと思います。
さらにカスタマイズしたい人は、
フォントサイズの指定を追加してみたり
例:font-size:20px;
行間を調整してみたり
例:line-height:1.3em;
背景の色を付けてみたり
例:background-color:#777;
背景画像をつけてみたり
例:background:url(http://xxxxx) no-repeat 10px 10px;
いろいろ設定してみてください。
追記:bloggerのblockquoteは癖があるので、把握しておきましょう。結構面倒くさいのです。まず実際にblockquoteします。
HTMLコードを見るとblockquoteで引用部分が挟まれます。ボタンを使うとtr_bpというクラスもついてきます。これは特に気にしなくOKです。
作成画面に戻り、引用部分をエンターなどで改行を入れます。
そうするとblockquoteも2つに別れてしまいます。別々のblockquoteに自動的になってしまうのです。面倒くさい。
プレビューするとこんな風になります。
そうなったら、なかなか修正できないので、シンプルに手打ちで直しましょう。終わり。
Bloggerに関する質問を、分かる範囲で適当にお答えします。質問はお気軽にどうぞ!
http://www.furimuke.com/p/blog-page_3.html