木+木+木=森

できるだけ言葉にする

2023-07-01から1ヶ月間の記事一覧

flex-boxの順番変更

flex-direction - CSS: カスケーディングスタイルシート | MDN

WordpressでJQueryを使用するとき

jsファイルが反映されない〜と悩んでいたところ、 下記の記事でやっと解決した WordPressでjQueryが動かない原因+解決策3つ | マコブログ ②の方法を試したらいけた! ありがとうございます jQuery(function($){ // この中であれば「$」使用可 });

ローディングアニメーション

ローディングアニメーションの導入方法 CSS コピペだけで実装できるローディングアニメーション! | Recooord | Web制作で扱うコーディングスニペットを紹介 今回使用したアニメーション Single Element CSS Spinners テスト環境ではうまくいったのに本番で…

スクロールに合わせて背景画像の位置を動かす方法

これよく見るけどやったことなかったやつ 意外と簡単に実装できた cssは背景画像をno-repeatにするとレスポンシブ のときに高さが全然足りなかったので指定しなかった 以下js $(window).on('scroll', function(){ var scrollTop = $(window).scrollTop(); va…

外部遷移のプラグイン

WordPressで外部リンクの前や後ろにアイコンをつけるプラグイン WP External Linksの設定方法

背景画像を透過

これもいつも調べてる いい加減覚えよう 親要素に画像を指定、子要素を透過 .haikei{ background-image: url(computer.jpg); .toumei{ background-color: rgba(255, 255, 255, 0.562); } CSSで背景を透過させる方法3つを徹底解説 - WEBCAMP MEDIA

ふわっと表示

body { animation: fadeIn .4s ease-in 0s 1 normal; } @keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } 【CSS】読み込みが終わったらふわっと表示 | g lance

本番公開できた!

Wordpressの自作テーマ、無事本番公開できました。 意外と簡単だった 参考記事ありがとうございます Local の WordPress を本番環境に移行する簡単な方法 - 株式会社サトウ工房

左寄せで中央に配置

初歩的すぎるけど、毎回調べてる気がするので覚え 【CSS】超簡単!テキストを「左揃え」のまま「中央寄せ」にする方法【プログラミング】 .sample { text-align: center;} .sample p { display: inline-block; text-align: left; }

Wordpressで自作テーマを作る

やっと自作テーマを作った 下記を参照しながらだったので、想像していたよりはスムーズにできた ありがとうございます感謝感謝 WordPressオリジナルテーマの作り方①(ファイルの準備編) - じゅんぺいブログ 記事を見ながらやっただけやから?なことはいっぱ…

hoverで画像を拡大

sample_box{ width:300px; // サイズがサンプルなので適時変更してください。 margin:0 auto; //サンプルで中央に寄せたいので書かせていただいております。 overflow:hidden; //これを記述することではみ出た部分を非表示にします。 } .sample_box img{ tra…

ポートフォリオ用画像

ポートフォリオ用の画像をスクショしたいときのコマンド (1)option+command+I→検証画面が開く (2)Shift+command+P→コマンドメニューが開く (3)fullと入力し、エンターキーを押す 以上の手順でフルスクリーンのスクショを撮ることができる

masonryレイアウト

今回ポートフォリオをWordpressの自作テーマで作り直すことにした どうせなら画像を敷き詰めたいと思い、調べてみるとFlexboxではないよう Pintarestのように画像を敷き詰めるレイアウトをmasonryレイアウトと言うらしい いくつかやり方があるみたいだけど、…

写真の白飛び

もらった写真の看板だけが白飛びしていた 暗い写真は明るく補正できるけど白飛びだと難しそう Photoshopだとトーンカーブとかレベル補正とか試したけど明るすぎて元の色には戻らない 結局Lightroomで看板の部分だけマスクしてライトとカラーのところをいじっ…

画像の上に文字を配置して可変に対応

親要素にはposition: relative; 位置を指定したい子要素にpotision: absolute; レスポンシブ にしても位置がずれないようにするためには top: ●vhのようにvh,vwを使用する 左右の位置は下記を指定 left: 50%; transform: translate(-50%, 0); -webkit-transf…

要素の順番を変える

ずっと気になってたことを調べた 要素の順番を入れ替える 【1分で完了】レスポンシブで要素の順番を入れ替えるCSSの書き方|CORECOLORS(コアカラ) 知らないことだらけだぁ

写真の修正

レンズ補正では思うように形が整わなかったので遠近法ワープを使用した 【簡単】Photoshopの写真ゆがみ補正を5パターン紹介! - PENGIN BLOG 光の反射は「コンテンツに応じた塗りつぶし」 暗い部分を明るくしたいときは「シャドウ・ハイライト」

flexboxの高さ

flexboxを使えば、高さは揃えられる 孫要素の高さを揃えたい場合は下記のように記載する .parent { display: flex; } .child { display: flex; flex-direction: column; } .grandchild{ flex-grow: 1; } (参考)ゴリゴリコード