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

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

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

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

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

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


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

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

【2009/07/22 追記】
このカスタマイズは 2009年07月22日以降にダウンロードされたテンプレート(standardならver.09、lightframeならver.04)では実装されています。バージョンはHTMLかCSSの一番下を見ると確認できます。
関連記事
[ 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 ] はじめまして
はじめまして、いたおさんのテンプレート、カスタマイズさせていただいて使わせていただいている者です!引用部分のデザインを変えたかったのでとても満足しています。ありがとうございました!これからもちょくちょく遊びに来させていただきます^^
[ 2009/08/10 11:32 ] [ 編集 ]
[ 5406 ] > TAKUMiさん
お役に立てれて良かったです^^
そのテンプレートの作者様は私のテンプレートを元に作っているので、当サイトの多くのカスタマイズ記事がそのまま適用できると思いますよ。
[ 2009/08/10 18:31 ] [ 編集 ]
[ 7023 ] はじめまして
非常に分かりやすく、シンプルなデザインがGood Job!です。また、CSSソースも分かりやすく、大変参考になりました。ありがとうございます。
[ 2009/11/17 11:36 ] [ 編集 ]
[ 7030 ] > jinnさん
お役に立てて良かったです^^
[ 2009/11/17 22:50 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

「引用」が使えるようになるまで
「新しく記事を書く」には「Q」(引用)のコマンド(という言い方でいいのかな)があるのですが、「新しく記事を書く」のページでは、引用...
[2008/10/12 12:47] 樹梟堂日記
ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ユーザータグ


△ ページトップへ戻る