HTML&CSS

HTMLとCSSについての覚え書きの中から、コーディングの際に、自分もまたつまづきそうなところをピックアップして記事にしてるよ∠( ˙-˙ )/

HTML&CSS

確認画面から戻るボタンを押した時チェックボックスの値を保持する方法

確認画面から戻るボタンを押して戻った際、チェックを外していたはずなのに、またチェックをした状態に戻ってしまった! こういった場合の対策を共有♪ こんな感じ。 <form method="post" action=""> ...
2018.12.13
HTML&CSS

[html/css]tableレイアウトで文字が枠からはみ出る場合の対処方法

tableタグを使ってレイアウトしていると、セル内の文字が枠からはみ出る事が多々ある。 特にスマホやタブレットの為にレスポンシブデザインにしている場合は尚更だ。 そんな時、どうすれば良いかというと、とりあえずテーブルタグに以下のスタイル...
2018.12.13
HTML&CSS

昔(ASINコード生成)のAmazonアソシエイト画像を一括置換でSSL化する方法

一昔前、Amazonアソシエイトを大量に生成する際は、ASINコードを使う事が多かった。 でも、以下のように、ASINコードから生成したリンクの場合、SSL化の方法がいまいち不明。 (ソース) <a href="○○○-22/...
HTML&CSS

WPテーマ『賢威7.0』で公開日と更新日を削除!非表示にする方法

賢威7.0で投稿記事や固定ページ、カテゴリページ等から公開日と更新日を表示させなくする方法をシェア。 single.phpの以下を削除(19行目~24行目あたり)。 <?php if (get_the_time('Y-m-d'...
HTML&CSS

1文字消すだけ!SSL化後、Facebookのいいねを引き継ぐ(合算する)方法

SSL化(httpからhttpsにする)後、SNSのカウントを新旧URLで合算したいと思う人は多いと思う。 でもそれを実現するには、今のところ、WordPressのプラグイン「SNS Count Cache」を使って、キャッシュを活用して...
2017.10.13
HTML&CSS

【レスポンシブ対応】PCで左右。スマホで上下に表示させる為のCSS記述方法

レスポンシブサイトを作る際、PCでは左右に要素を並べ、スマホやタブレット等のモバイルでは上下に並べる方法はないものかと試行錯誤した。 で、テーブルタグを使わずに、CSSのみでなんとなく出来上がったっぽいので一応シェア。 …って、文章...
HTML&CSS

CSSのみでクリックごとにプルダウン&アップ!中身を開閉するボタン

サイトをスマホ対応させる時、スマホでは標準で表示したくない&させない方がいい画像やテキストがあるよね。 情報表示量が比較的限られてしまうスマホに、PCと同じ量の情報を表示するなんて土台無理! ユーザビリティを上げる為にはその為の...
2018.12.13
HTML&CSS

WordPressでYouTube動画を一括レスポンシブ対応する方法(プラグインなしで)

先日アップした方法では、WordPressで使用した場合、どうもjQueryのバージョンによってはうまく動作しない事があった。 なので今回は、jQueryは使わず、PHPを用いた方法を解説♪ WordPressでもうまくいくし、PHPが...
2018.12.13
HTML&CSS

サイト内のYouTubeやvideo等の動画を一括レスポンシブ対応する方法

YouTubeの埋め込みコードって、標準ではスマホやタブレットに合わせて動画サイズを変更してくれるレスポンシブ仕様になっていない。これじゃあ不便なのでCSSで制御したいところだけど、そうする為には、youtubeのコードを<div&g...
HTML&CSS

htmlとCSSで入力フォームをレスポンシブ対応にする方法

レスポンシブウェブデザイン化するにあたって、inputによる入力フォームの長さがおかしくなったので改善した。 もともと以下のようなソースだったのだけど、 <input type="text" name="q" value="" s...
2018.12.13