NewPost | Na2 factory ななファクトリー

WordPress(ワードプレス)のセキュリティ対策、初心者向け。すぐにやりたい必須編

まずは管理画面でパスワードを強力なものに変更しましょう！プラグインで2段階認証できるものを導入するのもおすすめ。WordPressは初期設定のままだとログインURLが誰にでもアクセスできるので、プラグインでログインURLを変更しておきましょう。他にもコメントや問い合わせフォームのスパム対策についても書いてます。2025年はGoogleのreCAPTCHAから、Cloudflare Turnstileに乗り換えする人が増えるかもしれません。Cloudflare Turnstileのスパム対策についても追記しています。セキュリティ対策が心配になった初心者の方に読んでいただければと思います。

2022.04.01 2025.07.02

イラレでバースデーカードを作りました。Adobe Fireflyの構成参照も使ってみました。

イラレのレジェンド様たちの動画を参照して、子のバースデーカードを作ってみました！イラレの個別に変形を使ったテキストの一文字づつのランダムな配置、背景の紙吹雪など。また、生成AIを使って元のテキスト画像からいろいろなバリエーションの画像も作ってみました。プロンプトの入力の精度がよければ実務でも使えてしまいそうなレベルです。

2025.03.28

2024年を振り返る

2023年はCocoonのスキンgrayishを制作し、Cocoonに同梱していただきました。2024年は不具合修正なども落ち着いてきた感じです。新たにデザイン力アップのためのフルミー受講を決め、Webデザインコース初級、中級まで取り組んできました。受講前よりもWebデザインへの理解が進んだと思ってます！この記事ではフルミーで作成した作品を中心に一年の振り返りとして掲載しています。2025年は、上級コース完走と、ココナラサービスの運用がんばります！

2024.12.29 2025.03.28

CocoonのSNSシェアボタンを縦表示に。まずはCSSだけでやってみよう

CocoonのSNSシェアボタンはデフォルトで横表示です。SNSシェアボタンを縦に表示させているサイトをよく見かけており、そちらのほうが洗練されて見えるかも？と思ってのカスタマイズです。CocoonでもちょっとしたCSSの変更で縦表示にできます。当ブログでは更にJavaScriptで表示ON/OFFを制御していますが、この記事ではそこまではせず、CSSでできる範囲にとどめて手順を書いています。

2023.06.17

LPのお問い合わせフォームにformrun（フォームラン）のコード型を実装してみました

お問い合わせフォームの専門の業者formrun（フォームラン）のフォームはコード型で実装すればHTML/CSSでデザインカスタマイズが可能です。Webデザイナー・コーダーの方に向けた内容になります。formrun（フォームラン）のヘルプページは充実しているのですが、自作のデモサイトに実装しているフォームを例に、今後迷わず実装できるための手順をまとめました。スパム対策としてGoogle reCAPTCHAを採用しています。

2023.06.07 2025.01.24

HTML/CSSのデモサイト、作りました

今後のWeb制作の活動として、個人事業主の方や小規模の事業者様向けにご依頼をいただけるように、目安となるデモサイトをいくつか制作したいと思ってます！まずは第一弾として、HTML/CSS/JavaScriptでのランディングページを公開します。架空のチョコレートショップ、ショコラティエNのページです。見やすく使いやすいデザインと、ほどよいアニメーションで心地よく最後まで、キャンペーンエントリーやオンラインショップにもアクセスしていただけるように制作しました。是非参考として、ご覧になってください。

2023.06.01 2025.02.07

SwiperのVersion9はloopモードのスライド数設定に注意

ベーシックな画像が複数枚横にスライドするタイプのスライダーについて、CodePenでデモを作りました。Swiperのバージョン9では、JavaScriptの初期化設定slidesPerViewの設定値の2倍以上のHTMLのswiper-slideの記述が必要。確認したバージョンは9.0.5です。

2023.04.14 2024.02.22

Figmaでホワイトデーのバナー作りました。JavaScriptでギャラリー風に。

Webデザインツールの今後の主流になると思われるFigmaを使いこなせるようになりたいので、バナー作成でいろいろプラグインを試してみました。ホワイトデーにマカロンと決まっているわけではないですが、マカロンの画像が可愛かったので使用。勢いに乗って4種類作ってみたので、ギャラリー形式でご紹介したいと思います。

2023.03.16 2024.10.03

ブログデザイン、マイナーリニューアル。Cocoon子テーマカスタマイズ色々

WordPress無料テーマ、Cocoonの子テーマをカスタマイズして使っています。前回に続いてマイナーリニューアル。動きが分かりやすいアニメーションが増えた感じです。Cocoonのタイムラインブロックや、iPhoneでも有効なスクロール中の背景固定。SNSシェアボタンの縦表示など。jQuery不使用。Intersection Observerを使用してブラウザの負荷軽減。

2023.03.10

画像をトリミングしてください！にobject-fit: coverとaspect-ratioで対応

例えば一つの画像をタブレットとスマートフォンで違う見せ方にしたいとき、CSSのobject-fit: coverとaspect-ratioの設定によってレスポンシブ対応しながら任意の形にトリミングできます。

2023.02.15 2024.02.22

Browsersync＋Gulpでブラウザの自動更新。（2023年1月現在）途中ハマったのでメモ

静的サイトの制作ではhtml/css/jsを変更した後にブラウザの再読み込み、キャッシュクリアなどをいちいち行っておりました。今回導入したBrowsersync+Gulpの環境では、ブラウザの再読み込みなどをしなくても自動更新が可能になります。導入にあたっていろいろな参考記事を参考にしたのですが、最初うまくいかずハマってしまいました。同じ様に困っている方の助けになれば幸いです。2023年1月現在の内容です。

2023.01.18 2023.02.16