javascript
-
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( ...
続きを読む
-
2021/07/28 / html+css
スクロールすると上から降りてくる
HTML <body>直下 <div class="gmenu"> コンテンツ </div> css .gmenu { position: fixed; width: 100%; z-in...
続きを読む
-
2021/07/21 / EC-CUBE4
EC-CUBE4の表示twig・サイトURLや画像パス
コンテンツ管理→ページ管理 からURLをチェック https://●●.com/help/about app/template/●自分のテンプレ●/Help/about.twig の場合 <a href="{{ url('h...
続きを読む
-
2021/07/15 / html+css
フッターを下に固定｜コンテンツが少ない時
HTML <body> <header>ヘッダー</header> <main>コンテンツ</main> <footer>フッター</footer> </body> ...
続きを読む
-
2021/07/06 / javascript
スクロールして表示するとフェードイン
通常 HTML <div class="animation">フェードインするコンテンツ</div> CSS /*アニメーション要素のスタイル*/ .animation{ opacity ...
続きを読む
-
2021/06/07 / wordpress設計術
wordpressの検索枠設置と条件検索
wordpressの検索枠設置と条件検索 searchform.php <form method="get" action="<?php echo home_url('/'); ?>" > <input na...
続きを読む
-
2021/05/11 / wordpress設計術
CPIの共用レンタルサーバー「シェアードプラン ACE01」パーマリンク変更時のエラー
CPIの共用レンタルサーバー「シェアードプラン ACE01」でWordPressをインストール後、403エラーになる時 .htaccessを更新 シェアードプラン ACE01にWordPressをインストール。 管理画面から...
続きを読む
-
2021/04/26 / html+css
favicon
pngでfavicon <link rel="icon" type="image/png" href="../images/favicon_48.png" sizes="48x48" /> <link rel="icon...
続きを読む
-
2021/04/26 / javascript
スクロールして表示されたタイミングでアクションを起こすjs
手順1 scrollrevealをダウンロード scrollrevealをダウンロードhttps://github.com/jlmakes/scrollreveal 手順2 ScrollReveal.min.jsをhtmlに...
続きを読む
-
2021/04/22 / wordpress設計術
Advanced Custom Fields・値によって分岐する
<?php if(get_post_meta($post->ID,'test',true) == 'A'): ?> A <?php elseif (get_post_meta($post->ID,'test',true) ...
続きを読む
-
2021/04/09 / wordpress設計術
今見ている投稿記事と同カテゴリーの記事を表示
<?php $categories = get_the_category($post->ID); $category_ID = array(); foreach($categories as $category): array_...
続きを読む
-
2021/04/08 / html+css
css gridの中のdivの中のdivの高さを合わせる
html gridを設定したdiv > divの中にさらにdivを入れて背景色や枠を付けた時に、高さを揃える方法 <div class="grid_fr"> <div class="grid_fr_in"&g...
続きを読む
-
2021/03/24 / wordpress設計術
wpログインしている時としていない時で、表示させる内容を変える
書き方1 <?php if (is_user_logged_in()) : ?> ログインしている時に表示されるコンテンツ <?php else : ?> ログインしていない時に表示されるコンテンツ <?php e...
続きを読む
-
2021/03/04 / 便利ツール
ttcフォントがwebフォントで効かないとき
ttcフォントがwebフォントで効かないとき ttcは複数フォントを固めたzipのようなもの。 下記サイトでttfに変換して読み込ませる。 https://www.files-conversion.com/font-converter.p...
続きを読む
HOME > Tecnical Note
javascript
- slick slider 右だけチラ見せ・無限スクロール
- Slick Slider滑らかに逆スクロール｜画像の幅が違う
- slick sliderで逆にすると画像が表示されなかったり途中で切れる場合
- slick sliderのサムネイルを縦に流す
- formのoninput-output。結果を3桁ごとにカンマが入る数値タイプに変換
- マウスオーバー・マウスアウト（スマホの時はクリック）で画像を切り替えるjquery。
- querySelectorAllエレメントのhrefをforEachで削除する
- jQuery,Masonry,imagesloadedで画像を敷き詰める
- jQueryで特定のページからリンクされた後のページでclassを追加
- カレンダー
- 特定の要素を持っていたら（あったら）jQuery
- スクロールすると上からニョキッと降りてくるメニューjQuery
- マウス・マウスホイールで横スクロールするjavascript
- 横スクロール要素をマウスホイールで動かせるjavascript
- jqueryとcssでタブ
- 特定の要素を持つ時にclassを付けるjQuery
- スクロールして現れたらアニメーション（フェード等）開始jquery
- slick 基本
- スクロールして表示するとフェードイン
- スクロールして表示されたタイミングでアクションを起こすjs
- スクロールするとメニューが上からゆっくり降りてきてヘッダー固定・Y座標0でメニューがスムーズに上がる（消える）
- Enterキーを押すとinputが空欄になるのを防ぐ
- jsでふわふわ縦に揺れる
- 特定の要素の幅と高さを取得するjavascript
- ウィンドウ幅リサイズごとにブラウザをリロードするjavascript
- サイトにローディングを実装するjavascript
