引用タグを画像無しでCSSで作る

973

Twenty Twelveの引用タグがあまりにも簡素で、引用文かそうでないのかしっかりと明記しなければ、いまいち良くわからない。なので、引用文とすぐに分かるよう画像を使わずに【“】で作ろうと思う。

実際の所」、私も正確には覚えてはいないだろうというのが現状ですが、文化庁の「著作権なるほど質問箱」と言う場所に記載されているのを参考にしてみます。

他人の主張や資料等を「引用」する場合の例外です。

【条件】
ア  既に公表されている著作物であること
イ 「公正な慣行」に合致すること
ウ 報道、批評、研究などのための「正当な範囲内」であること
エ 引用部分とそれ以外の部分の「主従関係」が明確であること
オ カギ括弧などにより「引用部分」が明確になっていること
カ 引用を行う「必然性」があること
キ 出所の明示」が必要(コピー以外はその慣行があるとき)

引用元:著作権なるほど質問箱

この様な感じに引用文と自分の記事を明確に分ける様に変更しましたが、その前にブログを書く際の引用について少し説明して行きます。

  • 原文通りに引用する(誤字脱字も含め)
  • 引用文と自分の文の区別を明確にする
  • リンク元を明記する
  • 引用元に連絡は基本不要

まあ、最低限これ位は覚えておけば問題ないはずだ。もちろん、枠などで囲わなくても、それが引用された文である事が、はっきりと分かるように書けば問題はないが、今回は引用文の枠を作るという記事なので、説明はこれ位にしておこう。

スポンサーリンク

引用をCSSで作る

せっかく、引用タグがエディタに装備されてるんだから、装飾しなけりゃもったいない。

と言う事で、まずは枠を適当に作る。

え~とですね、最後の【z-index: 1;】はですね、1~9まで指定できるんですが、1が一番下に来るという事です。

今回は引用符を真ん中に挟むため3重構造にしたいので、定義しました。ここで枠の色などを自分好みに指定してください。

引用符を付ける

画像と文字を重ねる指定です。う~ん、文字を重ねない方が良いかとは思いまいたが、今回はこれで良しとしました。文字指定が面倒になってので・・・

これも自分なりにカスタマイズして下さい。

そしてこれを合わせると

こんな感じになるので、子テーマーなりカスタムCSSなんかのプラグインに入れちゃってください。

一番上にもありますが、完成形がこちらになります。

てすと

画像を使いたいのであれば、画像をアップして指定してね♡

やり方は・・・・省く

う~ん・・・やはり重ねない方が良いかな?

とりあえずは、このスタイルで行こうかな~と言う事で。

スポンサーリンク

シェアする

フォローする

スポンサーリンク