QooQからHello World! へお引越し#02 こまごま微調整中のメモ
こまごまと対応中のメモです。備忘録のメモなので、順不同。忘れているものもあるかも。
ブログカードのCSSをコピペ
Hello World の作者様ページへのリンクを貼り付けたら、ブログカードがちゃんと出てこなかったので対応しました。ブログカードつくった時のCSSを追加しただけです。過去記事はこちら。幅があってなかったので、.bcard-wrapper の width を、90%に変更。
色系変更
パンくずリスト、Hoverの色
見出し系のデザイン変更
以前のデザインを踏襲。文字の前の●は、なくすことにした。
H1タグ複数ある問題の対応
あってもいいよね、が主流みたいですが、Bingのインデックス登録してくれない原因になってる可能性がありそうなので、対応しました。
H1タグをサイトタイトルで使ってたようなので、SiteTitleってのをCSSへ新設して別に調整するようにしました。
Bingのインデックス登録ではじかれてそうなのは、最新記事だと、大丈夫でカスタム記事だとalt がない現象あり。これは未対応。QooQの時は、コメントが付いてるページの場合、Imgのaltがないって言われてた。Bingは、いろいろ細かいね。
自動目次をのせかえ
以前に入れたものが、非表示機能ついてて、オプションでインデント調整もできたりするので、入れ替えしました。自動目次の記事はここ。
採用してカスタマイズしてる、ふじやんさんの記事はこちら。
HelloWorldのオリジナルでは、目次後にad1の広告を入れ込んでいるみたいだったので、今回は、スクリプト部分をちょっと修正して目次後に広告を挿入するようにしました。ここ、いい位置ですよね。幅変えた時に、はみ出るのが気になってるので、いづれ対応したい。
広告サイズの一覧
Googleの説明書きがあった。これからしばらくは、よく使いそうなので、とりあえず、HTML内にコメントでメモ。これが上手くはまるようなレイアウトにしていこう。
垂直スクロールバーの色調整
幅、色を調整。かっこいいサイトとかをみてると、バックグラウンドに色をあわせて目立たなくしている感じが多い。幅も細目が多い。今は、PCならマウスホイール使うし、スマホなどはスクロールバーでなくてもスクロールできるし、いらないと言えばいらないんだよなぁ。潔く、消してしまいたいぐらいだけどね。まあ、それなりに残しておこう。
本文フォント調整
font-familyの一部見直しと、本文の文字間やら行間やら、こまごま調整。この時、body のfont-family をいじったのに、反映されない現象がでてた。試行錯誤して、とりあえず、”ガジェットのデフォルト設定をリセット”って項目と順番入れ替えたら、反映された。ちょっと仕組みが理解できてないですが、bundle_v2.css のインライン化とかやったら、問題なくなるんじゃないかなと思ってて、とりあえず、それやってから考えることにします。
ナビバー固定と検索埋め込み
QooQのとき、ふじやんさんのところを参考にしてやってましたが、2カラムに戻しちゃったので、これは当面、やらない。そのうち、サイドバー固定とか、スクロール中に固定ヘッダーメニューだすとか、そういうのを、やろうかなと思ってます。
.sectionの上書き
サイズをごにょごにょしてると、Blogger側が bundle.css で、差し込んでくる.sectionのmargin:0 15px、てのがウザイ。とりあえず、インライン化するときまでは、margin:0 で上書きしておく。
パンくずリスト部分調整
フォントを大きく、色調整。記事一覧時が、Hidden になってたので、表示するようにする。
.article-breadcrumbs {
/*visibility: hidden;*/
}
overflow時のhiddenもあわせてコメントアウトしておいた。
パンくずリスト分、サイドバー高さがあわないのが気になったので、Fumaさんの記事を参考に、height-adjustを挿入して、あわせておいた。
コメント
0 件のコメント :
コメントを投稿