« 第18回:コメント表示欄とコメント入力欄の背景に画像を表示してみよう | トップページ | 第20回:「Blog People」でリンク先の更新管理をしてみよう »

2006/03/11

第19回:引用部分の装飾を設定してみよう

書籍や雑誌、他のWebページ、ブログに記載されている内容を借りてきて自分のブログに掲載する際は、自分の文章と借りてきた文章を分ける意味で「<blockquote>~</blockquote>」というタグで囲みます。
引用ボタンココログでも記事作成画面に標準で「引用文」 ボタン(左図参照) があり範囲を選択したあとこれを押すことでタグを自動的に挿入出来ますが、 デフォルトのままのスタイルだと単に文章がインデント(文字下げ)されるだけであまり目立ちません。

デフォルトだとこんな感じです。↓

これは引用文です。

そこで、引用タグに装飾をして、他の文章とハッキリ区別できるようにしてみましょう。

著作物の引用ルールは「著作権法」において定められています。
他人の著作物を引用する場合は、そのルールの範囲内で正しく利用して下さい。

■参考:「はてなダイアリー」『引用とは』
■参考: 「Wikipedia」『引用』

手順

  1. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    ※「カスタムCSSを編集」は、リッチテンプレート適用時には利用できません。
    CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください
    ※カスタムテンプレートの作り方は
    第3回: カスタムテンプレートを作ってみよう
    を参照して下さい。
  2. 「編集」画面のCSS記述欄に

    blockquote {
    border:■px solid #●●●●●●; /*枠線の太さ、種類、色*/
    margin: ■px ; /*枠線の外側の余白*/
    padding: ■px ; /*枠線の内側の余白*/
    }


    を全て半角英数で記述する。
    ※●●●●●●にはその色を指定する6桁のカラーコードを代入します。
    ※カラーコードについては下記のページなどを参考にして下さい。
    ■参考: 「色のみじん切り」様 色のみじん切り
    ※また、検索サイトで「カラーコード表」などのキーワードで検索すればたくさん見つかります。
    ※■にはそれぞれ任意の数字を入力して下さい。
    ※各プロパティの詳しい説明は「point」にて後述。
  3. 「変更を保存」ボタンを押す。
    ※「確認」ボタンを押せば保存前に出来上がりを確認出来ます。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。
    ※↓のようになっていればOKです。

これは引用文です。

以上です。
うまく出来ましたか?

ここがポイント

この他にも線の色や背景色を変えることでいろいろな表現が出来ます。
例えば

  • 線の種類を変えて背景に色を付ける

これは引用文です。

blockquote{
border:2px dashed #8b0000; /*枠線の太さ、種類、色*/
margin:10px 15px; /*枠線の外側の余白*/
padding: 10px; /*枠線の内側の余白*/
background-color: #FFE4E1; /*枠線の中の背景色*/
}

  • 線無しで背景色のみ指定

これは引用文です。

blockquote{
margin:10px 15px; /*枠線の外側の余白*/
padding: 10px; /*枠線の内側の余白*/
background-color: #E6E6FA; /*枠線の中の背景色*/
}

  • 線の種類を変えて背景に画像を指定

これは引用文です。

blockquote{
border:5px inset #6B8E23; /*枠線の太さ、種類、色*/
margin:10px 15px; /*枠線の外側の余白*/
padding: 10px; /*枠線の内側の余白*/
background-image:url(画像のurl); /*枠線の内側の背景画像*/
}

  • 付箋紙風

これは引用文です。

blockquote{
border-left:10px solid #292c5a; /*枠線の左側の太さ、種類、色*/
border-bottom:1px solid #cccccc; /*枠線の下側の太さ、種類、色*/
border-right:1px solid #cccccc; /*枠線の右側の太さ、種類、色*/
margin:10px 15px; /*枠線の外側の余白*/
padding: 10px; /*枠線の内側の余白*/
}

※borderの左、下、右それぞれの太さ、色を変えて立体的に見えるようにするのがポイントです。(上は指定なしにしています)

などなど。
ブログの雰囲気に合わせて色々と工夫してみて下さい。

お世話になりました

「TAG index」
「色のみじん切り」
■素材サイト 「PRISM」


*この記事にコメントを書く*


|

« 第18回:コメント表示欄とコメント入力欄の背景に画像を表示してみよう | トップページ | 第20回:「Blog People」でリンク先の更新管理をしてみよう »

カスタマイズ」カテゴリの記事

エントリー部分」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

takoさん~こんばんわ。
またもや助けてもらいにきました。
この引用文の飾りつけをしようとおもってこういうCSSを記述してみたのですが・・・

blockquote{
       border:1px dashed #008000; /*枠線の太さ、種類、色*/
       margin:10px 15px; /*枠線の外側の余白*/
       padding: 10px; /*枠線の内側の余白*/
       color:#008000;
background-color:transparent; /*指定範囲の透明化*/
background-image:url(http://hibiki-tora.cocolog-nifty.com/blog/images/touka-b.gif);
}

何故かこのページの様になってしまいます~
http://hibiki-tora.cocolog-nifty.com/blog/2006/05/post_dcd2.html
見ての通り真ん中の引用文は半透明化されてるんですが、ひとつ目と三つ目が半透明化されてません( iдi ) ハウー
何故でしょう?どっか記述がおかしいんでしょうか?
でも2つ目はちゃんと半透明化されてるんですよね~?色々やってみたのですがお手上げです。テスト投稿をしても全部半透明化したり、交互に半透明と非透明を繰り返したり・・・
原因はお分かりになりますでしょうか?
因みに"touka-b.gif"は第29回の記事を参考に作った透過画像のブルー版です。
それと投稿はココログにログインしてではなく"BlogWrite無料版"というソフトを使用しています。
もし判りましたら原因と対策を教えていただければ幸いです~
せっかくエントリーを半透明にできたので何とか引用文も半透明化したいです~
宜しくお願いします

投稿: hibiki | 2006/05/19 20:53

■hibikiさん
こんにちは。コメントありがとうございます。

ご質問の件ですが。
残念ながら、例の「透過っぽくみせる」画像を重ねて引用部分もキチンと透過するのは難しいと思います。

理由はですね(これは、確実に「そう」という確証はなくて「多分」なのですが…^^;)、透過と非透過のチェックを重ねることにより、場所によって全て非透過状態になってしまっているから、だと思います。
1枚だったら「透過」「非透過」「透過」「非透過」…と並んでいる画像の「透過」部分に、2枚目の「非透過」がはまってしまうのではないかと思います。
hibikiさんの場合は拡大してみると(多分)、単純に非透過になっているのではなく白と青のチェックになっているのではないかと…。
引用部分の3つのスペースのうち、2つめは偶然「透過」と「非透過」が2枚とも同じ部分で重なったのではないでしょうか。
なので、どうしても半透明にしたいなら2枚重ねは諦めるしかないんじゃないかな~と思います。

実は私もメインブログのほうの引用部分で同じことをやりました(笑)
私の場合、同じ画像を使ったのですが、そうしたら部分的にすごく変な模様が出てきてしまって…。
何でかな~?としばし考えた末に出た結論が上記の考えです。
確証はないのですが、多分間違いはないかと…。

で、結局画像を使うのはやめて
background-color:transparent;
で引用部分の背景を透明化しました。
これだったら、記事部分の背景の透過が使えますので…。

ただ、hibikiさんのご希望のように別の色で透過するのは(多分)無理だと思います。

以上です。
ご期待に沿えずごめんなさい(T_T)

投稿: tako→hibikiさん | 2006/05/19 21:45

ぺこ
素早いお返事有難うございます~
むぅ~やっぱりそうなんですか~( iдi ) ハウー
”ひょっとして現象が出たり出なかったりってのはプログラムミスじゃなくて画像の問題かなぁ?”とは思ってたんですが、上手くいった引用欄を見ると自分の描いた通りの仕上がりで、ブルーの半透過が捨てられなかったのでこだわってしまいました。どうやらこのやり方は無理なようで諦めます(ρ_;)
背景が変えられないのでラインを太くして文字色を変え、太字にして”引用文”だと強調することにします。
そういえば、引用文では改行はできないんですかね?改行すると枠は表示されるんですが、文字色が本文と同じになって引用の感じが出ませんね~
あ、そうそう、引用文の一行目真ん中に自動でタイトルのように
<引用>
みたいな文字を入れることは出来ないですかね?
CSSの基本的素養が無いもので、もらったソースをカスタムすることは出来るのですが、新たに構築は出来なくて情けないっす~
時間をとって勉強したいと思います。

投稿: hibiki⇒takoさん | 2006/05/19 22:28

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/998267

この記事へのトラックバック一覧です: 第19回:引用部分の装飾を設定してみよう:

» 引用文の装飾するぞぉ~ [明日なる夢]
今日は昨日やり残した事、いつものtakoさんの”初めてのココログ・カスタマイズ”の   ”引用部分の装飾 [続きを読む]

受信: 2006/05/20 00:53

« 第18回:コメント表示欄とコメント入力欄の背景に画像を表示してみよう | トップページ | 第20回:「Blog People」でリンク先の更新管理をしてみよう »