チラシデザイン、動画編集制作、ホームページ制作は横浜の日本一店長のアイシープへ

日本一店長のチラシデザインと動画編集&ホームページ制作

【最新版】wordpressによく使うHTML&CSSいろいろまとめ

792 views
約3分
【最新版】wordpressによく使うHTML&CSSいろいろまとめ




はじめに


wordpress制作時によく使うCSSをまとめてみました。
wordpressのアップデートがあるたびにせっかく書いたCSSも消えてしまうこともありますので子テーマを作るなどして注意してください。
テンプレートによっては、アップデート対策としてCSS専用の書き込み欄が設けられている場合もありますので気をつけるようにしましょう。
では、よく使用するCSSを備忘録としてメモしておきます。

よく使うHTML&CSS




【画像を100%表示させるCSS】

containを指定すると画像の縦横の比率を保持した状態で常に画像全体が表示されるように画像サイズが調整されます。
アコーディオンの作り方です。


レスポンシブデザインでフルサイズでなく少し縮小したサイズの画像だと画質が粗くなる現象が発生します。

小さな画像を拡大させて表示させるのではなく、あらかじめ大きめの画像を使用し、はみ出る部分については「max-width:100%;」と「height: auto;」で縮小させて表示させることをおすすめします。

結構苦戦しました。
img {
max-width:50%;
height:auto;
}
こんな感じで挿入したら解決!

おわりに


コピペできる最新 HTML/CSS スニペットです。

どれもすごいカッコイイですね。




Comment On Facebook