2024年 – コピペしちゃいなよ

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

タグ: ホームぺージ関連

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

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

2024年12月31日カテゴリ: CSS HTML WordPress

タグ: ホームぺージ関連

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

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

2024年12月31日カテゴリ: CSS HTML JavaScript

タグ: ホームぺージ関連

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

文字を一文字ずつフェードインさせる処理(JavaScript)

2024年12月31日カテゴリ: CSS HTML JavaScript

タグ: ホームぺージ関連

文字を一文字ずつフェードインさせる処理です一応自作ですので不具合等あるかも知れません。参考サイトも見つけましたのでそちらの方がよいかも知れません。 JavaScriptを使って表現しております。またテキストが見え始めた […]

アフィンガー6でトップページ以外でサイドバーに表示されてしまう「新着記事一覧」を非表示にしたい

2024年12月31日カテゴリ: AFFINGER WordPress

タグ: ホームぺージ関連

アフィンガー6でトップページ以外でサイドバーに表示されてしまう「新着記事一覧」を非表示にしたいと思ったウェジェットで消してるのになぜか表示されるので調べたら別の所で表示設定があったので忘れないように記載しておく AFF […]

「続きを読む」を押すと下にサッと文字が出てくる処理(JavaScript)

2024年12月31日カテゴリ: CSS HTML JavaScript

タグ: ホームぺージ関連

「続きを読む」を押すと下にサッと文字が出てくる処理の実装です。 JavaScriptを使って実装させております。文章はChatGPTに頼んだ… JavaScriptの[offset_height]は「details-b […]

画像にリボンをつけよう

2024年12月30日カテゴリ: CSS HTML

タグ: ホームぺージ関連

画像の左端にリボンを付けておしゃかわにしましょう Cat 参考サイト：https://adatype.co.jp/info/archives/staff_blog/24

画像サイズがバラバラだがすべて均一に綺麗に表示させたい場合

2024年12月30日カテゴリ: CSS HTML

タグ: ホームぺージ関連

例えば商品一覧など横並びに4つ並べて表示させたい場合しかし用意された画像が全部バラバラで統一してくれないそんな場合の処理になります。 imgタグのクラスに「img-fit」を追加して対応しております。 object- […]

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

2024年12月30日カテゴリ: HTML WordPress プラグイン

タグ: ホームぺージ関連

ある程度コンテンツが見えたら、フェードインして表示させたい。しかしそれだとCSSだけで実装できないし、JavaScriptはわからない。そんな場合「Animate It!」と言うワードプレスプラグインがおすすめです。 […]

スマホ・タブレットにて横向きにしてサイトを見られたくない場合の処理

2024年12月30日カテゴリ: CSS HTML JavaScript

タグ: ホームぺージ関連

サイト作成していると横向きで見られたくない(対応が面倒)な時があります。横向きになった場合に、ウィンドウを出して「横向き対応してません」と表示して見せないようにします。本ページでは実際に横向きにした場合に、警告画面が […]

変数でフォントサイズ等の情報を一括管理するCSS変数（カスタムプロパティ）

2024年12月30日カテゴリ: CSS HTML

タグ: ホームぺージ関連

CSSにてフォントサイズを修正する時に一括で変えたい時があると思います。 CSS変数（カスタムプロパティ）というのがあるのでそれを使います参考サイト：https://qiita.com/taqumo/items/b22 […]

absoluteで上下左右中央表示する

2024年12月30日カテゴリ: CSS HTML

タグ: ホームぺージ関連

absoluteで上下中央表示する。いつも調べてコピペしてるのでこちらでも記録しておくことにする参考サイト：https://qiita.com/ushi_osushi/items/d9f0c8990b2e807969 […]

PCだけスマホだけ表示させたい場合

2024年12月30日カテゴリ: CSS HTML

タグ: ホームぺージ関連

PCだけスマホだけ表示させたい場合があります。 iPad min未満をスマホ表示として表示させたいという感じで処理を書いてます参考サイト：https://csshtml.work/sp-display-none/

アフィンガー6のヘッダーコンテンツに動画を入れたい場合

2024年12月30日カテゴリ: AFFINGER CSS HTML

タグ: ホームぺージ関連

アフィンガー6のヘッダーコンテンツに動画を入れたい場合の覚え書き。どうやらEX版では簡単に実装できるようですが、EX版は持ってないのでPHPとCSSをいじることで実装します。 PCとスマホ対応のみしてます。

[LeaderLine]JavaScriptで要素間を線でつなげるライブラリ

2024年12月30日カテゴリ: CSS HTML JavaScript ライブラリ

タグ: ホームぺージ関連

要素間を線でつなげるライブラリになります。お仕事で使うことがあったので忘れないように記載参考サイト：https://anseki.github.io/leader-line/

画像を横に無限ループさせる方法(JavaScript)

2024年12月30日カテゴリ: CSS HTML JavaScript

タグ: ホームぺージ関連

画像を横に無限ループさせる処理をJavaScriptで実装します。自作なので色々と不具合等あると思います。 [animation]を使わないのはなぜかと言うと、画像が表示されない（存在はしてる）状態があったからになりま […]

横幅と連動して文字のサイズを変更するようにしよう

2024年12月30日カテゴリ: CSS HTML

タグ: ホームぺージ関連

横幅と連動して文字のサイズを変更するように調整します。条件として各フォントサイズの指定は「REM」で指定することが必須になります。また、文字が大きくなりすぎないように、小さくなりすぎないように、「clamp」を使うこ […]

自作でホップアップ処理を作る

2024年12月30日カテゴリ: CSS HTML JavaScript

タグ: ホームぺージ関連

[st-minihukidashi webicon=”” fontsize=”80″ fontweight=”” bgcolor=”#F […]

【WordPress】自動で挿入される＜p＞タグや＜br＞タグを無効化する方法

2024年12月30日カテゴリ: PHP WordPress

タグ: ホームぺージ関連

仕事をしていると謎の改行やpタグが入りデザインが崩れることがよくあります。今まではCSSで誤魔化してましたがいい加減邪魔になってきたので無効化することにしております。ただ[br]も無効化されるのがまた煩わしいという問 […]

[FileBird Lite]を使ってメディアファイルをフォルダ分けしよう

2024年12月30日カテゴリ: WordPress プラグイン

タグ: ホームぺージ関連

[FileBird Lite]プラグインを使ってメディアファイルをフォルダ分けします。メディアファイルの数が多くなると管理が大変になりますが、フォルダ分けをすることで管理が楽になります。参考サイト：https://s […]

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30