こんにちはICHIKENです。
Bloggerに初めて投稿するにあたり以下の3点をテストしてみました。
- テンプレートQooQ
- 引用符ボックス
- 目次の自動生成
引用符のCSS適用で位置ずれが発生したので対応方法を紹介させていただきます。
2021/1/28追記: カスタマイズ一覧を作成しましたのでこちらもどうぞご覧ください。BloggerのカスタマイズはCSSを直接記述する必要がありますので、ある程度プログラミングに対する覚悟が必要です。
【Blogger】QooQカスタマイズをまとめます
写真挿入 特大
写真：ぱくたそ
テーマをQooQに変更
Blogger内に最初から用意されているテーマを選んだだけの状態からスタート。
こちらのページを見ながら進めました。
2021/2/1追記：ブログカードに変更しました。
QooQのHTMLを全コピペしただけですが、ばっちり見た目が変わりました。
見出しテスト
エディタの見出しなどがどう表示されるのかテストします。
Bloggerのエディタはこちらを参考にさせていただきました。
2021/2/1追記：ブログカードに変更しました。
小見出し
準見出し
段落1。
段落2。
標準。
標準2。
箇条書き
- 1つ目
- 2つ目
- 3つ目
下線
取り消し線
斜体
テキストの背景色
引用符テスト
テスト結果
引用符CSSはこちらのサイトを参考にさせていただきました。
2021/2/1追記：ブログカードに変更しました。
問題なく引用符で囲んだ箇所にボックスが適用されています。
今回はCSSのコピペで使える引用ボックスデザインのサンプルを30個作ってみました。引用タグ（blockquote）のデザインをサクッと変えることができます。どれも画像は使わず、HTMLとCSSだけで表示することができます。ブログやWebサイト運営者の方は、是非ご利用くださいませ。
2021/2/1追記：引用符の内容が引用になっていなかったので修正しました
手を加えた箇所
サルワカさんの引用ボックスはコピペだけでは正しく表示されませんでした。
（最終的には下の写真と違うCSSを使っています）
写真挿入：大
コードを確認したところ、QooQの引用部と競合していました。
QooQの CSS内の紫の部分をコメントアウトすると正しく表示されました。
写真挿入：大
自動目次テスト
テスト結果
見出しテストの段階では何も表示されていませんでしたが、
二つ目の見出し「引用符テスト」の段階で目次が表示されました。
2021/2/1追記：
<div></div>の位置関係によって自動生成が崩れることがありました。
hタグをまたいで<div></div>が入ってしまっているとおかしくなるようです。特にBloggerの作成ビューで直接編集しているとコピペ等で<div></div>が残ってしまう場合があったので注意が必要です。
整形ツールなどで整理すると大きくhタグをまたいでいる<div>を見つけやすくなります。
参考サイト
こちらのサイトを参考にさせていただきました。
2021/2/1追記：ブログカードに変更しました。
0 件のコメント:
コメントを投稿