Blogger引用枠変更

引用の枠も好きな奴にしようかな、、、

と思い

やってみたら意外とすぐにできました

※Blogger、テーマはF-lightです

引用枠

コレを好きなデザインの枠に変更しようと、、、

自分で作れるわけがないので囲み枠で利用させて頂いたサイトでCSSを頂いてきます

【CSS】シンプルな囲み枠（ボックス）コピペですぐ使える

飾り枠を使って文中や文末に関連記事・まとめ記事、Pickupなど、さり気なく目立たせたい！シンプルで無難な囲み枠・囲い枠（ボックス）を紹介します。CSS・HTMLをコピペでOK！色や太さをお好みでカスタマイズして使って下さいね。新作『黒板風（チョーク付）』と『ホワイトボード風（マーカー付）』自分で作っておいてナンですが…気に入ってます（笑）

love-wave.com

色んな枠を公開してくれてますよ

好きな枠を選んで、、、

テーマ変更でイジイジして、、、

変更後引用枠

変更後はライト、ダークモード関係なくコレになります

どう？

良い感じじゃない？

イメージとしてはメモった奴をテープで貼っつけたって感じ

ただ枠を変更しただけなんだけど雰囲気はガラッと変わりますよね

CSS変更

説明はBloggerでテーマはF-lightです

他のテーマ、ブログサービスでもCSS変更ができるなら同じ様な感じでできると思います

テーマ→HTMLを編集 に行ってください

そこでを『引用』を検索

Ctrl+Fで検索窓が出てきますので、そこに『引用』って打ってください

/*==== 引用 ====*/
blockquote {
  margin: 2em 0;
  padding: 1em;
  background: var(--dark-bg);
  font-style: italic;
  border-radius: 8px;
  border-left: 8px solid var(--brand);
}
blockquote cite {
  display: block;
  text-align: right;
  margin: 1em 0 -.5em;
  font-style: italic;
  font-size: 1.4rem;
}
blockquote a {
  color: var(--blue-color)!important;  
}
blockquote a:hover {
  color: inherit!important;  
}

参照したサイトから頂いたCSSを、、、

コピペして、、、

テープの位置を調整して、、、

枠の％も少し変えて、、、

で

できたのがコレ

※引用符無しバージョン

/*==== 引用 ====*/
blockquote {
 position: relative;
 width: 85%;
 margin: 2.5em auto;
 padding: 35px 30px 20px;
 font-style: italic;
 color: #770000;/* 文字色 */
 background-color: #e8ddbd; /*枠背景色*/
 box-shadow: inset 0 0 40px rgba(204, 186, 136,1), 0 2px 2px #ccc;
}
blockquote::before {
 display: block;
 position: absolute;
 content: "";
 width: 140px;
 height: 35px;
 left: 40%;
 top: -16px;
 background-color: rgba(204, 186, 136,0.3);/*テープ色*/
 box-shadow: 0 0 3px rgba(0,0,0,0.1);
 transform: rotate( -3deg ); /*テープ角度*/
}
blockquote a {
  color: var(--blue-color)!important;  
}
blockquote a:hover {
  color: inherit!important;  
}

変更後CSS

HTML編集が終わったら引用をクリックするだけで利用できます

そんな頻繁に使う事はない引用ですが

ブログの雰囲気作りにどうですか？

追記～引用符追加

やっぱ引用してるんだから引用符も付けたいなぁ。。。

こういう奴ね

文章の前後に設置したかったんですが、、、

Google先生、ChatGPTに聞いてみるも素人には無理。。。

ですが！！

最初にだけですが引用符が付くようできました

引用符追加

これで十分でしょ！？

引用符付きのCSSコレ

/*==== 引用 ====*/
blockquote {
 position: relative;
 width: 85%;
 margin: 2.5em auto;
 padding: 35px 30px 20px;
 font-style: italic;
 color: #770000;/* 文字色 */
 background-color: #e8ddbd; /*枠背景色*/
 box-shadow: inset 0 0 40px rgba(204, 186, 136,1), 0 2px 2px #ccc;
}
/* テープのスタイル */
blockquote::before {
 display: block;
 position: absolute;
 content: "";
 width: 140px;
 height: 35px;
 left: 40%;
 top: -16px;
 background-color: rgba(204, 186, 136,0.3); /*テープ色*/
 box-shadow: 0 0 3px rgba(0,0,0,0.1);
 transform: rotate(-3deg); /*テープ角度*/
}
/* 引用符のスタイル */
blockquote:after{
    position:absolute;
    font-family: serif;
    content:'“';
    font-size: 50px;
    color:#770000;
    top:0px;
    left:0px;
}
blockquote a {
  color: var(--blue-color)!important;  
}
blockquote a:hover {
  color: inherit!important;  
}

色とか引用符の大きさとか自分好みに変えてください

引用符が要らない方は最初のCSSを使ってください

フォントの問題

引用タグ（blockquote）を使うと文字はイタリック（斜体）になるのですが何故かパソコンで見ると斜体になってなく、タブレット・スマホで見ると斜体になっている

なんで？？？

font-styleのitalicをobliqueにしてみるも駄目

Google先生に聞いたりChatGPTに聞いたりしてもどこのなにの設定が駄目なのか解らない

また、ふじやんさんに聞きました(^^;

すると、、、

Windowsの仕様って、、、そんな事知らなかった。。。

個別で指定は面倒臭いのでフォントを追加しました

ふじやんさんの設定をパク、、、参照させて頂きました

HTMLの編集で『共通』を検索してください

/*==== 共通 ====*/
body {
  font-size: 1.7rem;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "BIZ UDGothic", "メイリオ", sans-serif;
  color: var(--color);
  background: var(--light-bg);
  text-underline-offset: .2em;
  text-decoration-skip-ink: none;
 -webkit-text-size-adjust: 100%;
 -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;

font-familyの所を変更しました

これでWindowsでもイタリック（斜体）表示されます

引用枠と囲み枠

引用の枠と装飾としての囲み枠

同じ枠を使えば見た目は全く一緒ですが引用タグ（blockquote）を使うとGoogleはちゃんと引用として認識しているようです

なので自分は引用の枠と装飾としての枠は別々にしました

だからどうした、何か影響するのか！？って聞かれたら、、、

ど素人の自分には解りません

引用は引用と伝えてるだけです(^^;

Google云々ではなく引用の注意点としては↓がアチコチのブログで書かれています

引用における注意事項

他人の著作物を自分の著作物の中に取り込む場合、すなわち引用を行う場合、一般的には、以下の事項に注意しなければなりません。

（1）他人の著作物を引用する必然性があること

（2）かぎ括弧をつけるなど、自分の著作物と引用部分とが区別されていること

（3）自分の著作物と引用する著作物との主従関係が明確であること（自分の著作物が主体）

（4）出所の明示がなされていること。（第48条）