ひさしぶりにhtmlとcssをいじってみる | 自転車世界一周チャリダーマン

自転車世界一周チャリダーマン

150ヶ国 131,214km 自転車世界一周
「チャリダーマン」周藤卓也Webサイト

ブログ

2020.04.22

カテゴリ : WP

125 views

ひさしぶりにhtmlとcssをいじってみる

 

 旅を終えた後に自サイトのリニューアルした。サイトはレスポンシブウェブデザインに生まれ変わる。ただ、自分の作業ではなかったのでhtmlもcssも複雑怪奇。いくつか改善点はあったが、手を付けられずにいた。

 それでも、一念発起してソースコードをのぞいてみる。訳わからなくて、そっ閉じ・・・したかったけど、クロームの検証機能を使って改良を試みる。検証機能では不具合の変更がリアルタイムで反映される。便利な時代になった。

 以下、備忘録。

 元のcssを理解できてないので下手にいじってデザイン崩壊。復旧不可能は避けたい。だから、追加CSSにコードを書き足す。今回だけでなく、前回もそうしていたっぽい。

 .body{
word-break:break-all
}

 
 を追加して、長いURLのリンクが途中で折り返すようになる。

.inner{
overflow: hidden;
}

 を追加して、<div class=”pr”><div class=”pr-mobile”>のfloatの親要素<div class=”inner”>の高さが認識される。ブログ記事ページの下にあるフェイスブックページおよび自己紹介の場所の表示がずれていた。

.single-post .main .entry .body img, .single-post .main .entry .body iframe, .single-work .main .entry .body img, .single-work .main .entry .body iframe {
display: block;
margin: 2rem auto;
width: 100%;
max-width: max-content;
border-radius: 2px;
}

 のmax-widthをmax-contentに変更。変更前は小さな画像や縦長の画像もめいっぱい拡大されていたが、変更後は原寸大で表示される。

 上の変更でYouTubeの埋め込みが最小サイズ(横幅300PX)になってしまう。追加CSSで、max-width: 560px;にしたら、表記が戻った。

 /* YOUTUBE */
.single-post .main .entry .body iframe, .single-work .main .entry .body iframe {
display: block;
width: 100%;
max-width: 560px;
margin: 2rem auto;
border-radius: 2px;
}

.single-post .main .entry .body iframe,
.single-work .main .entry .body iframe

・ごとに別々でなく、つなげてひとつの要素を指定っぽい。
.single-postの.mainの .entry の.body iframe,を指している?

いじって表示は改善できた。でも、その仕組は理解できていない。そのままにしておくと絶対忘れてしまう。だから、記録を残しておく。

関連記事

プロフィール

・周藤 卓也(しゅうとう たくや)
1983年 福岡県生まれ。
150カ国と13万1214.54kmの自転車世界一周を達成。
次なる夢は福岡でゲストハウスの開業。
WEBライターとしてGIGAZINEで連載

⇢詳細なプロフィール

follow us in feedly