Blogger初心者の🐇灰色うさぎが BloggerテンプレートQooQのカスタマズをやっちゃいました😵
【CSSの追加】編、【HTML編集】編に続く第３弾
【CSSの追加】と【HTML編集】両方でカスタマイズになります。
Blogger初心者がQooQカスタマイズ！？【CSSの追加】編
この記事を先に読んで貰えるとチョット分かり易いかも、もちろん読んでなくても大丈夫です。
HTML編集のカスタマイズは ちょっと難しいしミスしそうで気疲れするので あんあまり好きじゃない・・・・でも CSSの追加だけでできる カスタマイズには限界があるから、仕方ない(￣▽￣;)
Bloggerのカスタマイズでは HTML編集でCSSの書き換えもできてしまうので、【CSSの追加】と【HTML編集】を厳密に分けるのはあんまり意味がないけれど、それでもHTMLのカスタマイズは極力減らして CSSでできることは できるかぎりCSSでやる！ これが正しいスタンスなんじゃないかな？・・・ち・・・ちがう？？？？
何が言いたいかというと 【CSSの追加】と【HTML編集】両方でカスタマイズ は超難しい('◇')ゞ
なのであんまりお勧めしませんが やってみたいという方に 一つだけご紹介
記事一覧の更新日付を画像の右上へ移動
トップページの記事一覧あるいは ラベルの記事一覧の表示で 初期状態では更新日付は画像の下にあります。灰色うさぎは 更新日付を右寄せで出力するようにカスタマイズしていますが、さらにカスタマイズを追加して更新日付けを右上に移動します。
灰色うさぎのブログは奥の背景色と記事の表示部の背景色が同じなのもあり、記事と記事の切れ目が分かりにくく、上の画像に付けているタイトルなのに、下の画像のタイトルのように見えてしまいます。タイトルと画像の距離を詰めつつ全体のバランス（好み）で更新日付を右上に移動します。
HTML編集で 日付出力位置を上に移動した後 CSSの追加で 間延びしている画像とタイトルの間隔を狭めるため .list-item-inner を変更
さらに 【ラベルをサムネイル画像上に乗せ半透明にする。】カスタマイズなどで位置がずれている人（私ですノ）は もう一つ .list-item-category を変更します。
HTML編集
list-item-date で検索した日付を書いている行を切り取り ピンクのところへ移動させます。もとあった場所は 【ここの日付出力を画像出力・・・・】のコメント行のところになります。
list-item-date で検索した日付を書いている行を切り取り ピンクのところへ移動させます。もとあった場所は 【ここの日付出力を画像出力・・・・】のコメント行のところになります。
CSSの追加
/* 日付右上移動により 間延びした画像とタイトルの間隔を狭く */
.list-item-inner{
padding: 0 .5em;
}
.list-item-inner{
padding: 0 .5em;
}
CSSの追加
.list-item-category {
position: absolute;
top: 1.1em; /* 0=>1.1em 日付を右上にした影響で位置調整 */
left: .2em; /* 5=> .2em 日付を右上にした影響で位置調整 */
}
position: absolute;
top: 1.1em; /* 0=>1.1em 日付を右上にした影響で位置調整 */
left: .2em; /* 5=> .2em 日付を右上にした影響で位置調整 */
}
テーマをプレビューして確認後 保存してください、カスタマイズ完了です。
御朱印もいいけど、うさぎの絵馬も集まってきました。
0 件のコメント:
コメントを投稿