独学・未経験で
フリーランスWebデザイナーに
なりました。
デザインとコーディングの
勉強記録・TIPS・作品紹介のブログです。

Scroll

PickUp!

WordPressオリジナルテーマ作りました!

架空のパン屋さん、「ベーカリーコルネ」のホームページです。 デザイン、HTML/CSSでの静的モックの作成、 WordPress化まで行いました。完全オリジナルテーマです。 デザインはシンプルですが、パン屋さん自身が更新が楽しくなる、 使い勝手の良いサイトを目指しました。

主な機能

  • 焼きたて食パン予約システム
  • お店概要説明
  • 新着情報
  • メニュー紹介
  • スタッフブログ
  • お問い合わせフォーム
  • 内部SEO対策
  • セキュリティ対策

制作の関連記事
(今後も追加予定)

NewPost

新着記事

WordPress

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

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

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

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

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

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

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

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

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

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

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

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