WEBサイトの作成方法やHTML,CSSなどの技術的な部分の記事を更新中。WEBデザイナー・フロントエンドエンジニア・HTMLコーダーを目指している方、既に仕事としてやっている方向けの記事を更新中!

CSSだけでガクブル(ぶるぶる)させてみた
CSSだけでガクブル(ぶるぶる)させる方法を紹介。hover時のアニメーションやなんか要素をガクブル(ぶるぶる)させたい時に使ってみてね!

【コピペで実装】制作でよく使うJS(jQuery)とプラグイン一覧
Webサイト制作に欠かせないJS(jQuery)とプラグイン一覧。制作によく使うコードをまとめています。コピペでJS(jQuery)を実装してサイトに動きや機能を追加しよう。

投稿画面の使わない項目を非表示にする方法【WP】
投稿画面の使わない項目を非表示にする方法を紹介。WPの投稿、カスタム投稿で必要ないコンテンツを非表示にする方法を書いています。必要ない項目を削除してWPの投稿画面を使いやすくしましょう。

リンクの上に別の要素が重なった時でもリンクを押せるようにする方法
リンク要素の上に別の要素がz-indexで重なっているときに下のリンクをクリックできるようにする方法。リンクの上に別の要素が重なってしまっているときCSSのみで解決することができます。

singleで次のページ前のページのリンクを文字列として取得する方法【WP】
singleで次のページ前のページのリンクを文字列として取得する方法を紹介。singleページで次の記事のURLのみ取得することで、リンクを文字列として必要な場合に活用できます。

CSSだけで背景を2色表示する方法
CSSのみで背景を2色表示する方法。CSSだけで簡単に背景を2色表示することができます。うまく活用して2色背景のレイアウトを組んでみよう。

【WP】開いているテンプレートを即確認できる便利なプラグイン「Show Current Template」
WordPressテーマ開発・編集でどのファイルを開けばいいのかわからない時必見。WordPressプラグイン「Show Current Template」で表示されているテンプレートを一発で確認することができます。WordPressテーマ開発に役立てよう。

【WP】記事作成で勝手に入る空のpタグを削除する
WordPressで勝手入ってしまう空のpタグを削除する方法を紹介。空のpタグが自動で生成されて困っている方やそれが原因でWordPressのデザインが崩れている方は是非この方法を試してみてください。

【MW WP Form】エラー時に指定の位置までスクロールする
WordPressプラグイン「MW WP Form」でエラーが出た際に指定の位置にスクロールしたいときの対処方法。デフォルトのスクロールでは対応できない場合、今回紹介している方法が有効です。「MW WP Form」でエラー時動作をカスタマイズしよう。

WP制作でよく使うループ処理などなど
WordPressの制作でよく使用するWPタグをまとめています。このページを見ればよく使用するWordPressのタグがわかります。コピペでできるWordPressのループ処理・表示方法を紹介しています。

ホバー(hover)時に文字や画像を拡大させるCSS
CSSだけでできるホバー(hover)時に文字や画像を拡大させるCSSを紹介。ホバー時に簡単に少し変わったエフェクトを実装できます。CSSをコピペで実装できるので制作時の参考にどうぞ。

【CSS勉強方法】flexboxをゲーム感覚で学習する
flexboxをゲーム感覚で学習することができるサイトを紹介。CSS勉強方法がわからない。flexboxってどうやって使えばいいのかわからない方はぜひゲーム感覚でCSSを学習してみてください。

動画+コンテンツのランダム表示を実装してみた【JS】
JSで動画+コンテンツをランダム表示する方法を紹介。動画に限らずHTMLの記述をなんでもランダムに表示することが可能です。JSでランダム表示をコピペで実装することができます。

端からコンテンツ幅の途中までの背景色を実装する方法
お洒落なサイトでよくある端からコンテンツ幅の途中までの背景色を実装する方法。コンテンツ比を保ってコーディングする方法を図付きで紹介しています。

テキストをCSSで両端揃えにする方法
CSSだけでテキストを両端揃えにする方法を紹介。簡単にテキストを両端揃えにすることができます。綺麗に両端で揃えたい見出しの装飾などに使えます。

WordPressのバージョン情報を非表示にする方法【セキュリティ対策】
WordPressのバージョン情報を非表示にする方法。バージョン情報を隠してセキュリティ強化を行おう。WordPressのバージョン、プラグインのバージョンを非表示にする方法を紹介しています。

CSSで画像トリミング!IE11での実装方法【object-fit】
CSSだけで画像トリミングができる「object-fit」の紹介。IE11の対応方法も紹介しています。object-fitで画像をCSSだけで楽にトリミングしちゃおう!

EC-CUBEのログアウトボタンを実装する【2.13.5】
EC-CUBE2.13.5でログアウトボタンを追加する方法。マイページやheadeer、footerなど好きな場所にログアウトボタンを設置できるようになります。EC-CUBE2.13.5でログアウトボタンをコピペで実装しよう。

レスポンシブコーディングで使える!横幅自動計算mixinスニペット
レスポンシブコーディングで使用するpxを%に変換を自動化しました。Sassのmixinスニペットでレスポンシブの横幅を楽に%で指定できます。mixinスニペットでレスポンシブコーディングの横幅指定を自動化しよう。

EC-CUBEでWordPressを使うと商品登録やパラメータが登録できなくなる問題の対策
EC-CUBEでWordPressを使うと商品登録やパラメータが登録できなくなる問題の対策紹介。はまったEC-CUBEでWPよ読み込んだ時、商品登録・パラメータ変更ができなくなった人が確認してみてください。

最下層のカテゴリ名・リンクのみを取得する【WP】
WordPressの最下層のカテゴリ名・リンクを取得する方法。親や子カテゴリを無視して最下層のみのカテゴリを取得することができます。最下層のカテゴリのみ取得する際のコードをコピペだけで実装できます。

フォントサイズを横幅で自動変更させる方法【Sass】
ウィンドウ幅でフォントサイズを自動変更する方法を紹介。レスポンシブでテキストの改行位置を変えたくない・デザイン通りに合わせたいとき活用できます。フォントサイズを横幅で自動変更させる方法をSassで実装しました。