Bloggerを使い始めて、困ったことがあったので、解決法を調べました。
私用の、備忘録、ですよ。
Bloggerの背景に画像を指定すると、画像からはみ出した部分に背景色がついてしまう
画像を指定する際、背景が透過してしまうことと、
テーマカラーに沿って自動で背景色が選ばれてしまうのが原因だと思われる。
調べてないから適当。
多分もっとスマートなやり方があると思います。
HTMLを編集して、"tranceparent"のところに16進カラーコードを入れれば良い。
色を変えるときは、#171421 の箇所を変えればOK。
該当箇所
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="$(color) none repeat-x scroll top center" value="tranceparent url(//*.*.blogspot.com/*.png) no-repeat fixed top right"/>
変更後
color="$(body.background.color)" default="$(color) none repeat-x scroll top center" value="#171421 url(//*.*.blogspot.com/*.png) no-repeat fixed top right"/>
記事の背景を透過させる方法
参考： https://www.w3schools.com/cssref/pr_background-color.asp
透明度は"A"で指定。
(透明) 0.00 → 1.00 （不透明）
#171421 の場合
R: 23
G: 20
B: 33
A: 任意の不透明度 (例は0.8を採用)
該当箇所（下の例は記事の背景。色指定できる箇所なら多分応用可。）
<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#539bcd" value="#171421"/>
<Variable name="content.background.color" description="Main Background" type="color" default="transparent" value="#171421"/>
</Group>
変更後
<Variable name="content.background.color" description="Main Background" type="color" default="transparent" value="rgba(23, 20, 33, 0.8)"/>
Twitterでリンクしたとき、ツイートの下にカードを表示させる (Twitter Summary Card)
ファーマーズハウスさわ
Bloggerで簡単にTwitterカードを設定する方法
https://www.nakakamado.com/2021/08/blogger-twitter-cards.html
以下の方法は、上記の方が纏めてくださった内容の、丸パクリの適用例です。
赤字部分は、背景画像にしておきました。
該当箇所
〜 <Head> 最下部に追記 〜
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@May_Kirihara' name='twitter:site'/>
<meta content='@May_Kirihara' name='twitter:creator'/>
<b:if cond='data:blog.pageType == "index"'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:else>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='twitter:title'/>
</b:else></b:if>
<b:if cond='data:blog.pageType == "index"'>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxxOuMjpDJQvwZPlCYrPwIaxAlJM2xG4mmo6xTO_KTP31OuvM7ISOlxY-STlEFU54kKiMedIFI9PF6Yei1jgniU894rS7jB03nRbASxjlhq36GQ4ybeDPH-HDmKs-LB2AlEkKmdx3YVyJE/s1600/BG.png' name='twitter:image'/>
<b:else>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
</b:else></b:if>
</head>
その他
・ページが見られないときはドメインの設定を見直せ
DNSのレコード設定をもう一度見直せ
・とにかくHTTPSにしろ 平文は怖いです
・SSL証明書の設定も見直せ
・ドメイン設定をしても1時間くらいは繋がらないので茶を飲め
感想とToDo
・自分でHTML、CSS含めて結構弄れる。色々仕込めて楽しいよ。
限界を感じたらWordpressを試してみたいね。
・noteで怒られそうなネタが、いっぱい仕込めるよ。
あくまで悪ふざけ。ポリシーに反するので、悪いものは仕込まない。
・色選びは難しいけど、楽しいね。色彩検定UC級の勉強をしようと思う。
まだ見づらいので、色々遊びながら格好良くしていきたいな。
・背景画像がnoteの流用なので、もっと遊んでいきたいな。
・CSSでTwitter表示用のブログカードを仕込めそうなので調べてみるよ。
・スマホ表示が寂しいので、これから弄るね。
・たのしい、ですよ。
0 件のコメント:
コメントを投稿