Bloggerで「ホムペ」つくったときに困ったことと、楽しかったことの、備忘録。

Bloggerを使い始めて、困ったことがあったので、解決法を調べました。

私用の、備忘録、ですよ。

Bloggerの背景に画像を指定すると、画像からはみ出した部分に背景色がついてしまう

画像を指定する際、背景が透過してしまうことと、

テーマカラーに沿って自動で背景色が選ばれてしまうのが原因だと思われる。

調べてないから適当。

多分もっとスマートなやり方があると思います。

HTMLを編集して、“tranceparent”のところに16進カラーコードを入れれば良い。

色を変えるときは、#171421 の箇所を変えればOK。

該当箇所

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"/>

記事の背景を透過させる方法

Bloggerのカラーピッカーには透明度を指定する箇所が無いが、RGBA記法にしたら何とかなった。

参考： https://www.w3schools.com/cssref/pr_background-color.asp

透明度は”A”で指定。

(透明)　0.00　→　1.00　（不透明）

#171421 の場合 R: 23 G: 20 B: 33

A: 任意の不透明度 (例は0.8を採用)

該当箇所（下の例は記事の背景。色指定できる箇所なら多分応用可。）

#171421"/>

変更後

rgba(23, 20, 33, 0.8)"/>

Twitterでリンクしたとき、ツイートの下にカードを表示させる**(Twitter Summary Card)**

ググったら、ズバリ方法を書いておられる方がいらっしゃいました。

神、ですね。

私も、こういうことを、纏めていきたいな。

ファーマーズハウスさわ Bloggerで簡単にTwitterカードを設定する方法 https://www.nakakamado.com/2021/08/blogger-twitter-cards.html

以下の方法は、上記の方が纏めてくださった内容の、丸パクリの適用例です。

赤字部分は、背景画像にしておきました。

該当箇所

〜　 最下部に追記　〜

その他

・ページが見られないときはドメインの設定を見直せ

　DNSのレコード設定をもう一度見直せ

・とにかくHTTPSにしろ　平文は怖いです

・SSL証明書の設定も見直せ

・ドメイン設定をしても1時間くらいは繋がらないので茶を飲め

感想とToDo

・たのしい、ね。

・Google謹製なのでドメインパワーつよそう。（雰囲気）

・自分でHTML、CSS含めて結構弄れる。色々仕込めて楽しいよ。

　限界を感じたらWordpressを試してみたいね。

・noteで怒られそうなネタが、いっぱい仕込めるよ。

　あくまで悪ふざけ。ポリシーに反するので、悪いものは仕込まない。

・色選びは難しいけど、楽しいね。色彩検定UC級の勉強をしようと思う。

　まだ見づらいので、色々遊びながら格好良くしていきたいな。

・背景画像がnoteの流用なので、もっと遊んでいきたいな。

・CSSでTwitter表示用のブログカードを仕込めそうなので調べてみるよ。

・スマホ表示が寂しいので、これから弄るね。

・たのしい、ですよ。