• 本サイトについて
  • 鍵ページ

お仕事で使うHTMLテクニック備忘録

コピペしちゃいなよ

  • 本サイトについて
  • 鍵ページ

たった数行のCSSで作れる！おしゃれなボタンデザイン集

2025/1/7    ホームぺージ関連

ホームページやブログのデザインで欠かせないのが「ボタン」。 ほんの少しCSSを工夫するだけで、シンプルなボタンがグッとおしゃれになります。 今回は「たった数行のCSS」で作れるおしゃれなボタンデザイン ...

CSS HTML

カテゴリ毎に特定のコードを記述したい(アフィンガー6)

2025/1/8    ホームぺージ関連

カテゴリ毎に特定のコードを入れたい場合があります 例えばアフィリエイト広告を入れる場合、カテゴリがPC関連ならPC関連のアフィリエイト広告を入れたい。カメラならカメラ関連のコードを入れたいですよね そ ...

AFFINGER HTML PHP WordPress

「Z 5 24-200 レンズキット」を手に入れました

2025/1/12    カメラ・写真関連

「Z 5 24-200 レンズキット」が我が家に届きました。 なにもカメラのことがわかりませんが、これを手に色々風景写真を撮っていきたいと思っています 何卒宜しくお願い致します。 とりあえず、店では初 ...

カメラ 写真

文字をホバーした時に下にボーダーが伸びる処理

2025/1/5    ホームぺージ関連

文字をホバーした時に下にボーダーが伸びる処理を紹介します。 リンク先とかに使うとおしゃれになりますよ こちらをホバーすると赤い線が下に伸びます

CSS HTML

ホームページに地図(googlemap)を埋め込もう

2025/1/11    ホームぺージ関連

ホームページに地図(googlemap)を埋め込む方法をご紹介します。 例として「〒100-0005 東京都千代田区丸の内１丁目」の地図を埋め込んでみましょう Google検索にて「Googlemap ...

HTML WordPress

マウスジェスチャー「かざぐるマウス」を使おう

2025/1/5    その他

マウスジェスチャーをご存じでしょうか。 マウスジェスチャーは、マウスを特定の方向や形状に動かすことで、特定の操作を実行できる便利な機能です。これにより、キーボードや画面上のボタンを使わずに、直感的で効 ...

Windows 作業効率

ボーダーの上にタイトルを重ねる処理

2025/1/23    ホームぺージ関連

ボーダーにタイトルを重ねる 大体そっくりにできたと思うのですがどうでしょうか。あとは色や文字はCSSで変更すればできると思います 参考サイト：https://qiita.com/junya/items ...

CSS HTML

画面に映ってるものを切り取りするショートカットキー[Windows+Shift+S]

2025/1/5    その他

「Windows+Shift+S」を押すことで画面を切り取りすることが可能です 全画面もOKなので[PrintScreen]押さなくてもOK また、フリーで領域切り取りもある 凄いよこの機能 私はデザ ...

Windows 作業効率

【注意：音楽が鳴ります】HP上で音楽を再生させる処理(自動再生はできない？)

2025/1/5    ホームぺージ関連

たまにＨＰ開くと音楽がなるページがありますよね（ほんまにたまに） あれがどうやって再現しているのか気になったので記述する またタイトルにもある様に本ページは「パッヘルベルのカノン」が自動再生するので注 ...

HTML JavaScript WordPress プラグイン

最低限覚えておきたいショートカットキー一覧

2025/1/5    その他

私が使ってるショートカットキーになります あんまり多くのショートカットキー使ってないですが、これだけでも作業効率が格段に上がるので覚えておいて損はありません Macだと[Ctrl]の部分が[commn ...

Windows 作業効率

画像をクリックすると画面いっぱいにポップアップ表示する処理

2025/1/11    ホームぺージ関連

画像をクリックしたらポップアップで全体表示する処理になります 大きい画面で見せたい時に便利ですね × また、Splideを使ってスライダーを実装しようとも併用可能 スライダーのJavaScriptコー ...

CSS HTML JavaScript

特定に「a」のみリンクを飛ばさないようにする方法

2025/1/5    ホームぺージ関連

特定に「a」のみリンクを飛ばさないようにする方法です 有料のwordpressのテーマを使っていると飛ばしたくないページ(機能)があったりします。 それを見せなくする為に私は使います。 検証で見ればリ ...

CSS HTML WordPress

スクロールで羽をふんわり漂わせよう

2025/1/11    ホームぺージ関連

タイトルの通りに要素内に羽をスクロールで漂わせる使用になります シャボン玉や落ち葉でもいけそうですね 問題点として画面全体に散らばめると、配置（ランダム）によっては永遠にスクロールできる状況が生まれる ...

CSS HTML JavaScript

Rellax.jsでパララックスを実装しよう

2025/1/11    ホームぺージ関連

パララックス（Parallax）とは、ウェブデザインにおける視覚効果の一つで、スクロールに合わせて背景と前景が異なる速度で動くことで、立体的な深さや動きを感じさせる効果です。この効果は、ユーザーがペー ...

CSS HTML JavaScript ライブラリ

ワードプレスのクラシックエディタにて[Tab]キーを押したら空白が入る様にする方法

2025/1/19    ホームぺージ関連

ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい！ この記事を書くまでは入れないか、スペースキーを押して誤魔化してま ...

HTML PHP WordPress

記事内容をボタンでクロスフェードさせて表示を変える方法

2025/1/5    ホームぺージ関連

表示されている記事の内容をボタンを押すことで切り替えたい場合に使用。 クロスフェードで少しおしゃれに切り替えます 自作なので不具合等あるかと思います。 実際に用意してみたのでご確認ください。記事内容は ...

CSS HTML JavaScript

いい感じの位置にリンク先の表示位置を止める方法

2025/1/5    ホームぺージ関連

リンク先のIDに飛ぶ際にいい感じの位置に表示させたい時ありますよね 主にスクロールするとメニューバーが追従してくる感じのサイトとかに使います。 scroll-margin-topを使うことで値を調節し ...

CSS HTML

Splideを使ってスライダーを実装しよう

2025/1/11    ホームぺージ関連

Splideという日本産のライブラリがあるようなのでこちらを使ってスライダーを実装したいと思います jQueryを使わないという点が私は気に入っております。 参考サイト：https://ja.spli ...

CSS HTML JavaScript ライブラリ

トップページだけにCSSを反映させたい場合の記述方法

2025/1/5    ホームぺージ関連

どうもうちのアフィンガーちゃんトップページのmainがおかしいもよう… ちゃんと直すべきだが原因がわからないので、トップのmainだけpaddingを0にして応急処置を施したい どうやら先頭に[.ho ...

CSS HTML WordPress

文字を一文字ずつフェードインさせながら要素のバックカラーを伸ばす処理(JavaScript)

2025/1/11    ホームぺージ関連

文字を一文字ずつフェードインさせる処理の改良版になります。 一応自作ですので不具合等あるかも知れません。 JavaScriptを使って表現しております。またテキストが見え始めたら処理するようにもしてお ...

CSS HTML JavaScript

« Prev 1 … 3 4 5 6 7 Next »
  • Post
  • Share
  • Pocket
  • Hatena
  • LINE
  • URLコピー

管理人の声

PHPの記事を増やします(*'ω'*)
初級試験受けるつもりです。C言語基礎できるので余裕と思ってますがどうなんですかね(*'ω'*)
本も買いましたがまだ届いてない(4/20)

クラシックエディタ用のプラグインを作ってみた(ver1.4.1) 公開中

クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた(ver1.0) 公開中

Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた

サイト内検索

最近の投稿

  • 矢印付きスケジュールをタイムライン形式で作る方法
  • 【第8回】PHPで「関数」を作ってコードをスッキリさせよう！
  • 【第7回】入力はちゃんとチェックしよう！フォームのバリデーションと複数項目の処理
  • 【第6回】ユーザーの入力を受け取ろう！はじめての「フォーム連携」
  • 【第5回】たくさんのデータをまとめて扱う！PHPの「配列」入門

ランキング

  • 本日
  • 週間
  • 月間

  1. 【リボンコピペ】リボンの文字が入った可愛い文字列をご紹介

  1. レスポンシブデザインに挑戦！画面サイズに応じてカラム数を変化させる方法

  2. no image

    鍵ページ

  3. Animate It!を使って動的なアニメーション再生をしよう

  1. レスポンシブデザインに挑戦！画面サイズに応じてカラム数を変化させる方法

  2. no image

    鍵ページ

  3. Animate It!を使って動的なアニメーション再生をしよう

最近のコメント

    アーカイブ

    • 2025年6月
    • 2025年4月
    • 2025年3月
    • 2025年2月
    • 2025年1月
    • 2024年12月

    カテゴリー

    • AFFINGER
    • CSS
    • HTML
    • JavaScript
    • PHP
    • Windows
    • WordPress
    • アプリ
    • カメラ
    • プラグイン
    • ライブラリ
    • 作業効率
    • 写真
    • 雑談

    タグ

    HTML中級者講座 HTML初心者講座 JavaScript入門 PHP初心者講座 その他 カメラ・写真関連 ホームぺージ関連 失敗と経験

    おすすめ記事

    1
    クラシックエディタ用のプラグインを作ってみた
    制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい！ この記事を書くまでは入れないか、スペースキーを押して誤 ...
    2
    クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた
    制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました コード追加ボタンを自由に追加出来たら便利じゃない？ この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...
    3
    Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた
    アプリ制作するに至った理由 納品代行の仕事をしていて思ったことがあります 納品代行をしていると本当に様々なお客様から様々な商品が届きます その中でも特に注意しているのが、「見た目ほぼ同じだけど違う商品 ...

    アフィリエイト

    お仕事で使うHTMLテクニック備忘録

    コピペしちゃいなよ

    © 2025 コピペしちゃいなよ