FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

引用部分(blockquote)のデザインを変える

記事投稿アイコンに[Q]というものがあります。これはある文章を引用するときに用います。このアイコンを使うと次のようなタグで囲まれます。
<blockquote><p>　引用部分　<p></blockquote>
このタグで囲まれた部分をデザインしてみましょう。

スタイルシートの何処でもいいので次の記述を加えてください。

blockquote {
margin:2px;
padding:5px;
background:#f0f0f0; /* 背景 */
border:#cccccc 1px solid; /* 枠線 */
border-left:#cccccc 5px solid; /* 枠線(左) */
}

これで引用部分が解かりやすく表示されると思います。
背景や枠線は自分好みに設定してください。

枠線を実線から点線に変えたい場合は
solid を dashed に換えてください。

【2009/07/22 追記】
このカスタマイズは 2009年07月22日以降にダウンロードされたテンプレート(standardならver.09、lightframeならver.04)では実装されています。バージョンはHTMLかCSSの一番下を見ると確認できます。

関連記事

[ 2006/12/03 21:29 ] 修正報告実装済みカスタマイズ | TB(1) | CM(22)

≪ カテゴリーの投稿数を表示させない | HOME | コメント欄の幅を変える ≫

[ 842 ] いつもありがとうございます。

いつもありがとうございます。無事、引用部分がわかりやすく表示されました。本当に使いやすいテンプレートをありがとうございます。これからも頑張ってください。

[ 2006/12/03 21:46 ] [ 編集 ]

[ 844 ] > ブーパパさん

こんばんは、ブーパパさん。
有難う御座います。なかなか返答できずにお待たせしてしまうことも多いのですが、また何でも聞いてくださいね。

[ 2006/12/03 21:57 ] [ 編集 ]

[ 1885 ] はじめまして

書き込むのは初めてですがFC2ブログを始めてからよくチェックさせてもらってます。

今回も初めて引用文を使ったら枠がなく真っ白だったものでこちらを参考にさせていただきました。

はじめからスタイルシートには設定されてないんですね。
これから色などを変えてみようと思います。
リンクの方もいただいていきます。

[ 2007/05/11 00:06 ] [ 編集 ]

[ 1898 ] > ゆうさん

引用文は設定されていなければ色も枠もつきません。テンプレート作者によっては設定していない方もいるようです。私も以前は設定していませんでした。

記事掲載とリンク有り難うございます＾＾

[ 2007/05/13 21:45 ] [ 編集 ]

[ 2902 ] ありがとうございます(^^)

はじめまして。こんにちは。
引用のスタイルを変えたくて，検索したところ，
この記事にたどりつきました。

書かれている通りにやってみたら，簡単にできました。
とっても，満足です。ありがとうございました！(^^)

[ 2007/10/24 17:47 ] [ 編集 ]

[ 2988 ] 初めまして

こんばんわ。
いたおさんのテンプレートの『lightframe_white』を利用させてもらっています。本当にわかりやすいのでカスタマイズにはまっています！

初めて質問させて頂くのですが、記事にある引用文の記述をそのままスタイルシートにコピー＆ペーストしても何も反映されません。。。
何か考えられる原因はありますでしょうか？
貼り付けた状態でも、記事を書く画面でのリアルタイムプレビューは『枠線→黒（しかも全枠solid 1）・背景色→白』。
プレビューボタンを押してから見える画面上は『枠線→なし・背景色→白』。
記事の背景色も白くしているので、結局文字しか見えていないような状態です。
あと私はfirefoxを利用しているのですが、何か関係はありますか？？
お忙しいかと思いますが、お返事よろしくお願いしますm(_ _)m

[ 2007/12/05 04:46 ] [ 編集 ]

[ 2990 ] 連コメすみません

大変申し訳ありません、引用のデザインの変更ちゃんと出来ました！
ここ2・3日『テンプレートの設定』画面自体がおかしくなっていたようで、fc2のサポートにも問い合わせをし、今日もう一度スタイルシートに貼ってみたらしっかり反映されてました。
なんだか独り言みたいになってしまって申し訳ないです。。。
また何かあったら質問させて頂きたいです！
その時はどうぞ宜しくお願いしますm(_ _)m♪

[ 2007/12/07 23:15 ] [ 編集 ]

[ 2992 ] はじめまして

始めまして、まーみやと言います。
HTMLの編集うまくいかず悩んでいたら、このサイトに出会いました。いろいろ参考にさせていただきました。ありがとうございました。とても助かりました。

また、リンクさせていただいてもかまわないでしょうか？
宜しくお願いします。

[ 2007/12/10 11:29 ] [ 編集 ]

[ 3433 ] 助かりました！

他社ブログでちゃんと表現できていたblockquoteの囲みがFC2ブログで表現できずに困っていました。おかげで解決しました。どうもありがとうございました。

[ 2008/06/30 19:18 ] [ 編集 ]

[ 3548 ] スタイルシートが

スタイルシートがどこにあるかわからず手間取りましたが（「テンプレート管理」のところですね）、無事引用の囲みが出ました。
どうもありがとうございました。

[ 2008/10/11 23:00 ] [ 編集 ]

[ 4963 ]

枠の色とかを変えたいのですが分かりません。
カラーパレットのコードを使ってみたのですがうまくいきませんでした・・・。

[ 2009/07/17 08:05 ] [ 編集 ]

[ 4966 ] ▼ZEROさん

カラーパレットのコードでも良いのですが、
こちらのサイトの方が見やすいかもしれません。
http://www.colordic.org/s/
#から始まる6桁の数字を入れます。

記事を書くページのQを使用し、
<blockquote><p>引用</p></blockquote>
で書いた時にのみ表示されます。

[ 2009/07/17 10:30 ] [ 編集 ]

[ 4972 ]

blockquote {
margin:2px;
padding:5px;
background:#ffff00; /* 背景 */
border:#33ff66 1px solid; /* 枠線 */
border-left:#cccccc 5px solid; /* 枠線(左) */
}

↑このようにしたのですが、枠と背景色が灰色のままなのですがどうすればよいでしょうか・・・。

[ 2009/07/17 22:56 ] [ 編集 ]

[ 4976 ] > ZEROさん、ちゃんさん

> ちゃんさん
いつもありがとうございます。
このサイトは私も知らなかったので参考になりました＾＾

> ZEROさん
その設定で問題ないはずです。引用を使っている記事のページを見せてもらえますか？

[ 2009/07/18 00:26 ] [ 編集 ]

[ 4987 ]

うまくいきました！！
ですが
blockquote {
margin:2px;
padding:5px;
background:#ffffcc; /* 背景 */
border:#99ff99 3px solid; /* 枠線 */
border-left:#cccccc 5px solid; /* 枠線(左) */
}

このように変更したのですが、
http://dragun00modification.blog58.fc2.com/blog-entry-151.html
のようになっていました・・・。

[ 2009/07/18 13:51 ] [ 編集 ]

[ 4988 ]

うまくいったのですが、
テンプレート編集のプレイビューを押した時に表示される自分のブログではうまく適応されているのですが、TOPを押したり、自分のブログを確認を押すと適応されていませんでした。
そう言う事ってありますか？

[ 2009/07/18 14:07 ] [ 編集 ]

[ 4994 ] > ZEROさん

プレビューはトップページしか確認できません。プレビュートップページ上にあるリンク先は、適用テンプレートになります。

カスタマイズしたテンプレートを確認するときはプレビューだけでなく、適用してから確認してください。

[ 2009/07/18 20:24 ] [ 編集 ]

[ 4998 ]

分かりました。
有り難うございます。

[ 2009/07/18 22:19 ] [ 編集 ]

[ 5396 ] はじめまして

はじめまして、いたおさんのテンプレート、カスタマイズさせていただいて使わせていただいている者です！引用部分のデザインを変えたかったのでとても満足しています。ありがとうございました！これからもちょくちょく遊びに来させていただきます＾＾