html+css
-
2024/03/14 / html+css
headerを固定した時のページ内リンク。Chrome、Firefox、Safari対応
headerを固定した時のページ内リンク HTML <a href="#release">ここをクリックでID releaseにページ内リンク</a> <div id="release" class="...
続きを読む
-
2024/02/09 / html+css
都道府県一覧
HTMLで使える都道府県一覧 <select> <option value="" selected>選択してください</option> <option value="北海道">北海道</option> ...
続きを読む
-
2024/02/09 / wordpress設計術
Contact Form 7でチェックボックスを設置すると見入力必須項目に「入力してください。」が出る
<p class="novalidate"> [checkbox* your-check "選択肢1" "選択肢2" "選択肢3"] </p> 上記のように、class="novalidate" で囲むと解決...
続きを読む
-
2023/12/08 / wordpress設計術
wordpressカスタム投稿のsingle-カスタム.phpのページナビ（ターム分類内）
カスタム投稿 newsターム cate のsingle-news.phpのページナビをタームcateに登録したカテゴリーごとに回るようにする。 <?php $taxonomies = get_object_taxonomi...
続きを読む
-
2023/12/07 / html+css
画像の縦横比を固定してレスポンシブHTML+CSS
HTML <span> <img src="" alt=""> </span> CSS span { padding-bottom: 66.67%; // 横3 縦2 の比...
続きを読む
-
2023/11/10 / EC-CUBE4
EC-CUBE4.2.2で購入者にthanksメール（購入確認メール）が届かない
Xサーバー（スタンダードプラン）に搭載したEC-CUBE4.2.2で、購入者にthanksメール（購入確認メール）が届かない ▼解決 .envファイルのデフォルトの記述 MAILER_DNS=smtp://localhost:25...
続きを読む
-
2023/11/04 / PHP
phpでシンプルメールフォーム
php1-1.php → メールフォーム php1-2.php → メール入力内容確認 php1-3.php → メール送信完了 php1-1.php（メールフォーム）に下記を入力 <form action="php1-2....
続きを読む
-
2023/10/26 / wordpress設計術
category.php分岐カテゴリーごとにテンプレートを変える（子カテゴリー含む）
category.php <?php $queried_cat_id = get_query_var('cat'); $cat = get_category($queried_cat_id); // 子カテゴリーの場合、親カ...
続きを読む
-
2023/10/12 / html+css
css flexで内側要素を文字数に応じて比例した幅にする
HTML <ul> <li>ねこ</li> <li>センザンコウ</li> <li>きりん</li> <li>うみわし</...
続きを読む
-
2023/08/20 / wordpress設計術
サイドバーの年月アーカイブからカテゴリーを絞った記事一覧をcategory.phpで出力
下記のURLにリンクする年月別アーカイブ https://test.com/?cat=1 https://test.com/2021/?cat=1 https://test.com/2021/01/?cat=1 サイドバーに下記を記載 ...
続きを読む
-
2023/08/20 / wordpress設計術
サイドバーの年月アーカイブからカテゴリーを絞った記事一覧をarchive.phpで出力
functions.phpにアーカイブをカテゴリで絞り込むアクションを記載 //アーカイブをカテゴリで絞り込み function CatArchives( $query ) { if ( is_admin() || ! $que...
続きを読む
-
2023/08/15 / wordpress設計術
mw wp formでチェックボックス（1つ）にチェックを入れた時だけ表示・表示されたinputは入力必須
mw wp formの内容が下記の場合 ■ 電話を希望する [mwform_checkbox name="telkibou" id="telkibou" children="電話を希望する"] <div id="ch...
続きを読む
-
2023/08/12 / javascript
slick sliderのサムネイルを縦に流す
HTML <div class="gallerylist"> <div class="slide"> <div class="item"> <img ...
続きを読む
-
2023/06/08 / html+css
table内の文字の折り返しが効かない時white-space: normal
HTML <table><tbody> <tr><th>テキスト</th><td>テキストテキストテキストテキストテキストテキストテキスト</td></tr> </tbody>&...
続きを読む
-
2023/05/27 / wordpress設計術
wp-親テーマのcssを無効にする
lightning-common-styleやlightning-design-styleは、無効にしたいcssのid <link rel='stylesheet' id='lightning-design-style-css...
続きを読む
-
2023/03/28 / javascript
formのoninput-output。結果を3桁ごとにカンマが入る数値タイプに変換
HTMLとform計算 数値を入れる度に、リアルタイムでoutputが変わる。 計算結果 = 入力1 × ラジオボタン1 + 入力2 × ラジオボタン2 <form method="post" oninput=" result...
続きを読む
-
2023/03/21 / javascript
マウスオーバー・マウスアウト（スマホの時はクリック）で画像を切り替えるjquery。
画像を2種類用意する。（後ろに_onをつけたもの。） sample.jpg と sample_on.jpg html <img src="../images/sample.jpg" alt="" class="over...
続きを読む
-
2023/03/15 / 便利ツール
パソコンからInstagram退会
Instagramにログインして下記をクリック。 【注意】誤って削除したくないアカウントを削除しないように。 退会画面 ...
続きを読む
-
2023/03/13 / wordpress設計術
Advanced Custom Fieldsを入れると消えるカスタムフィールドを表示する方法｜wordpress
functions.phpに記載 add_filter('acf/settings/remove_wp_meta_box', '__return_false'); こちらでも可能。functions.phpに記載 fun...
続きを読む
-
2023/02/27 / javascript
querySelectorAllエレメントのhrefをforEachで削除する
wordpressプラグインMetaSliderなどで、左右の矢印をクリックすると、ページのTOPまで戻ってしまうのを解除する記述。 jsファイルに下記を追加 $(function(){ const element1 = doc...
続きを読む
HOME > Tecnical Note
html+css
- 【css】テキストを左に揃えて全体を中央よせ
- 【CSS】テキスト2行目以降を字下げ（インデント）
- レスポンシブで画像を正方形に維持する
- before・afterをcssで画像にする
- ハンバーガーメニュー・左から出て右へ消える
- WEBサイトが開いたときにムービーが動いている
- 都道府県一覧
- 画像の縦横比を固定してレスポンシブHTML+CSS
- css flexで内側要素を文字数に応じて比例した幅にする
- table内の文字の折り返しが効かない時white-space: normal
- flex基本
- cssでdiv等の要素を正方形に固定（レスポンシブ）
- head内のレスポンシブ分岐（metaタグなど）
- iframe縦横比固定・div正方形維持（レスポンシブ）/画像正方形固定
- スクロールすると上から降りてくる
- フッターを下に固定｜コンテンツが少ない時
- favicon
- css gridの中のdivの中のdivの高さを合わせる
- 文字列の下半分にマーカーを引く
- youtube画像埋め込みのレスポンシブ
- webフォントを使う
- 1枚にcssもjsも書くhtmlの基本
- Pリンクボタン中央寄せ
- HTMLの複数行を左揃え中央寄せする
- ::before ::after【css】
- dl,dt,dd・シンプルにコピペ
- テーブルhtml・シンプルにコピペ
- HTML付き都道府県リスト・ヘボン式ローマ字リスト
- マウスオーバーで画像を大きくする
- divやpタグを文字幅に合わせて縮める
