html+css
-
2021/02/16 / html+css
文字列の下半分にマーカーを引く
.mark { background: linear-gradient(transparent 50%, rgba(255, 252, 107, 0.69) 50%); } ...
続きを読む
-
2021/02/02 / 便利ツール
Backlogフリープラン
■フリープランで新しい【組織】を作成するには、ログインしてから、下記URLに飛ぶ https://registerjp.backlog.com/trial/with-existing-account/plan/11 ...
続きを読む
-
2021/01/23 / PHP
PHP・MySQLに接続してデータベースに書き込む
MySQLに接続 <?php try{ $dsn = 'mysql:dbname=●データベース名●;host=●接続ホスト●;charset=utf8'; $user = '●データベースユーザー名●'; $pa...
続きを読む
-
2021/01/06 / html+css
youtube画像埋め込みのレスポンシブ
youtube 画像の埋め込みレスポンシブ HTML iframeはyoutubeの 共有→埋め込み のタグ <div class="youtubefr"> <ifram ●●●●●●●></iframe> <...
続きを読む
-
2020/12/06 / EC-CUBE4
Gmailで会員登録されたお客様にメールが届かない
エックスサーバーに設置しているEC-CUBE4で、Gmailで会員登録したお客様にメールが届かなかった場合 ドメイン直下の.envの設定で、 MAILER_URL=smtp://localhost:25 を MAILER_URL=se...
続きを読む
-
2020/08/23 / javascript
スクロールするとメニューが上からゆっくり降りてきてヘッダー固定・Y座標0でメニューがスムーズに上がる（消える）
ヘッダーを固定 一定の高さまでスクロールすると、タグ「header」にclass="fixed"が付く 上からゆっくり降りてくる HTML <div id="d-header">ここにメニュー</div...
続きを読む
-
2020/08/02 / wordpress設計術
標準装備のカスタムフィールドでショートコードを入力して表示する【wordpress】
カスタムフィールドを表示 <?php echo get_post_meta($post->ID, '●●カスタムフィールド名前●●', true); ?> カスタムフィールドにショートコードがある場合に表示 <...
続きを読む
-
2020/07/13 / wordpress設計術
functions.phpにショートコードを登録するwordpress
functions.phpに下記を記載 //TOPページ add_shortcode('hurl', 'shortcode_hurl'); function shortcode_hurl() { return home_url( '...
続きを読む
-
2020/07/05 / wordpress設計術
single.phpに、投稿ページでチェックした特定のカテゴリーの子カテゴリーに限定して表示
<ul> <?php $categorys = get_the_category( $post_id ); foreach($categorys as $category){ if($category->parent==8):...
続きを読む
-
2020/07/04 / 便利ツール
fontがダウンロードできるサイト
https://www.dafont.com/ ...
続きを読む
-
2020/07/04 / javascript
Enterキーを押すとinputが空欄になるのを防ぐ
フォームにonsubmit=”return false;”を追加 onsubmitはsubmitされたときに発生するイベントです。onsubmit=”return false;”でsubmitを中止する。 ...
続きを読む
-
2020/06/22 / wordpress設計術
特定のカテゴリーとその子の時に表示する
カテゴリーID1とその子に表示 <?php $cat = get_the_category(); //今見ているカテゴリ- $parent_id = $cat[0]->category_pa...
続きを読む
-
2020/06/08 / wordpress設計術
テンプレートに固定ページの内容を読み込む
テンプレートに記載 <?php $page_id = 146; //表示したい固定ページのページID $post = get_post( $page_id ); echo apply_filters('the_content'...
続きを読む
-
2020/06/01 / javascript
jsでふわふわ縦に揺れる
jquery.yurayura.jsをダウンロードして、 「jquery.yurayura.js」で保存 jQuery( function( $ ) { $.fn.yurayura = function( config ) { ...
続きを読む
-
2020/05/26 / html+css
webフォントを使う
「webfonts」ディレクトリ（名前は任意）に使いたいfontを入れる。 KozGoPro-Bold.otf など、この例では6件 cssファイルに下記を記載。urlパスは自分が設置したところを呼び出す。 @font-face {...
続きを読む
-
2020/05/24 / 便利ツール
ダウンロード有料写真サイト
PIXTA https://pixta.jp/ ...
続きを読む
-
2020/05/24 / 便利ツール
ダウンロード無料写真サイト
基本的にはライセンスも無料ですが、一部、ライセンス契約が必要なものもあります。各写真の利用規約をご確認ください。 unsplash https://unsplash.com/ burst https://burst.shopify.c...
続きを読む
-
2020/05/23 / EC-CUBE4
EC-CUBE4の会員登録画面の下にエラーが出ている時.envを変更
私の事例ではユーザー会員登録の一番下にエラーが出ていました。 ※EC-CUBE4のファイル群をサブフォルダに入れてドメイン直下で運営しています Fatal error: Uncaught InvalidArgumentException:...
続きを読む
-
2020/05/21 / wordpress設計術
WordPressの記事の前後のページへのリンクを自動で表示する方法（カテゴリー内・カテゴリー混合）
自動で前後記事のタイトルを取得し表示 カテゴリ関係なく単純な時系列でのリンク <div class="navigation"> <?php previous_post_link('%link', '<< ...
続きを読む
-
2020/05/21 / wordpress設計術
wp プラグイン無しのカスタムフィールドのテンプレート出力
「photogallery」というタイトルのカスタムフィールドの値を出力 HTML有効 <?php echo post_custom('photogallery'); ?> HTML無効（HTMLが全て表示されてしまう...
続きを読む
HOME > Tecnical Note
html+css
- FOUT (Flash of Unstyled Text) の症状
- 【css】テキストを左に揃えて全体を中央よせ
- 【CSS】テキスト2行目以降を字下げ（インデント）
- レスポンシブで画像を正方形に維持する
- before・afterをcssで画像にする
- ハンバーガーメニュー・左から出て右へ消える
- WEBサイトが開いたときにムービーが動いている
- headerを固定した時のページ内リンク。Chrome、Firefox、Safari対応
- 都道府県一覧
- 画像の縦横比を固定してレスポンシブ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タグを文字幅に合わせて縮める
