html+css
-
2022/01/31 / html+css
cssでdiv等の要素を正方形に固定（レスポンシブ）
HTML <div id="fr"> <div id="content">中にテキスト</div> </div> css #fr { position: r...
続きを読む
-
2022/01/17 / wordpress設計術
Advanced Custom Fieldsのチェックボックス・ラジオボタンの結果にクラス名を付ける
カスタムフィールド カスタムフィールドの「フィールドタイプ」をチェックボックスまたはラジオボタンにして 選択肢を kn1 : 1級 kn2 : 2級 にする チェックボックスの場合 テンプレート <?php $fi...
続きを読む
-
2022/01/16 / wordpress設計術
singleページのページ送り・通常とカスタム投稿（CPI UI）
通常の投稿ページsingle.phpでの記載 <?php previous_post_link('%link', '« %title', TRUE); ?> <?php next_post_link('%link', '...
続きを読む
-
2022/01/15 / javascript
jqueryとcssでタブ
html <p class="tab_btn active">タブ1</p> <p class="tab_btn">タブ2</p> <p class="tab_btn">タブ3</p> &...
続きを読む
-
2021/12/06 / wordpress設計術
ブラウザ幅を判定して、特定のページをリダイレクトするjavascript
レスポンシブでブラウザ幅を判定して、特定のページをリダイレクト <?php if(is_page(array('●●ページスラッグ●●','●●ページ番号●●','●●ページスラッグ●●'))): ?> <scr...
続きを読む
-
2021/11/26 / wordpress設計術
wp固定ページとその子（一部除外）に表示
<?php if (is_page('●●スラッグ●●') || is_parent_slug() === '●●スラッグ●●' && !is_page(array('★','★'))):?> //ここに表示させた...
続きを読む
-
2021/11/25 / javascript
特定の要素を持つ時にclassを付けるjQuery
元のHTML <div class="sample"> <div><p class="p1"></p></div> <div><p class="p2"></p></div> &...
続きを読む
-
2021/11/22 / wordpress設計術
wordpresのスラッグ名を取得
固定ページ（page.php）・投稿ページ（single.php） <?php $page = get_post( get_the_ID() ); $slug = $page->post_name; ?> ...
続きを読む
-
2021/11/03 / javascript
スクロールして現れたらアニメーション（フェード等）開始jquery
js //表示されたら動く $(document).ready(function() { $(window).on("scroll", function() { $(".fadeInUp1").each(function...
続きを読む
-
2021/10/27 / wordpress設計術
conohaサーバー：EC-CUBE4ディレクトリと並列でwpディレクトリを作成した際のhtaccessの書き方
conohaサーバーでEC-CUBE4のディレクトリと並列してwpのディレクトリを作成し、EC-CUBE4のTOPページをドメインURLで表示させた際に、wpのcssが効かなかったので、下記の作業を行いました。 » EC-CUBE4を...
続きを読む
-
2021/10/25 / html+css
head内のレスポンシブ分岐（metaタグなど）
800pxまでのviewportを指定 <script type="text/javascript"> if (matchMedia('only screen and (max-width: 800px)').match...
続きを読む
-
2021/10/17 / wordpress設計術
投稿記事のスラッグを自動入力
functions.php内に記述 post-【投稿ID】 になる function auto_post_slug( $slug, $post_ID, $post_status, $post_type ) { if ( preg_m...
続きを読む
-
2021/10/17 / wordpress設計術
qTranslate-XT テンプレート内で言語別に分岐させる方法
テンプレート内で分岐 <?php if(qtranxf_getLanguage()=='ja'): ?> HOME-PAGE日本語 <?php elseif(qtranxf_getLanguage() ==...
続きを読む
-
2021/09/19 / javascript
MOREボタンで数件ずつ要素を表示wp
HTML <div class="bloglist"> <div>テキスト1</div> <div>テキスト2</div> <div>テキスト3</div> <div>テキスト4<...
続きを読む
-
2021/09/18 / wordpress設計術
wpカテゴリーごとに年月アーカイブを表示
テンプレートに記載 <?php $args = array( 'posts_per_page' => -1, 'order' => 'DESC', 'orderby'=>'date'...
続きを読む
-
2021/09/18 / wordpress設計術
single.phpをカテゴリーごとに分岐wordpress
single.phpに下記を記載 <?php if ( in_category('works') ) { get_template_part('single','works'); } elseif ( in_categ...
続きを読む
-
2021/08/28 / wordpress設計術
wpのパンくず（トピックパス）をfunctions.phpで作成
functions.phpに記載 function pankuzu() { $home = '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>'...
続きを読む
-
2021/08/21 / javascript
slick 基本
ダウンロード http://kenwheeler.github.io/slick/ 使うデータ ajax-loader.gif fonts（フォルダ） slick-theme.css slick.css slick.min.js ...
続きを読む
-
2021/08/21 / html+css
iframe縦横比固定・div正方形維持（レスポンシブ）/画像正方形固定
HTML：iframe <div class="wrapper"> <iframe src="xxxxx"></iframe> </div> CSS .wrapper { ...
続きを読む
-
2021/08/11 / wordpress設計術
wordpress固定ページでループとページネーション
コンテンツの表示(ループ) <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $the_query = new WP_Query( ...
続きを読む
HOME > Tecnical Note
html+css
- 【css】テキストを左に揃えて全体を中央よせ
- 【CSS】テキスト2行目以降を字下げ（インデント）
- レスポンシブで画像を正方形に維持する
- before・afterをcssで画像にする
- ハンバーガーメニュー・左から出て右へ消える
- WEBサイトが開いたときにムービーが動いている
- headerを固定した時のページ内リンク。Chrome、Firefox、Safari対応
- 都道府県一覧
- 画像の縦横比を固定してレスポンシブHTML+CSS
- css flexで内側要素を文字数に応じて比例した幅にする
- table内の文字の折り返しが効かない時white-space: normal
- flex基本
- 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タグを文字幅に合わせて縮める
