Generated by All in One SEO v4.9.1.1, this is an llms.txt file, used by LLMs to index the site.

# Puzzle（パズル）

## Sitemaps

- [XML Sitemap](https://puzzle-web.jp/sitemap.xml): Contains all public & indexable URLs for this website.

## 投稿

- [POST](https://puzzle-web.jp/post/) - クライアント様のイベント情報発信や個人的にウェブについて学んだ事、実際に使って役に立ったWordPressのプラグインなどを紹介しております。
- [gridで作るフルスクリーン画像](https://puzzle-web.jp/archive/2486/) - 以前フルスクリーン画像をブログで投稿したことがあるのですが、今回はgridレイアウトを使ってレスポンシブル対応のフルスクリーン画像を制作してみました。更に画像の上にボックスを重ねてテキストを画像の上に掲載できるようにしています。
- [段崩れを起こさないリスト](https://puzzle-web.jp/archive/2489/) - CSSのgridを使って段崩れを起こさないリストを作ってみましたので備忘録兼ねて掲載致します。左右どちらかに短い文字が入る場合もあると思います。そんな時に短いテキストを中央表示するように作っています。
- [gridレイアウトを実装](https://puzzle-web.jp/archive/2480/) - レスポンシブ対応のgridレイアウトを実装したので備忘録を兼ねて掲載致します。2カラムと3カラムのレイアウトを作成しました。それと、2カラムで左のカラムに右のカラムが重なるレイアウトも実装しています。コードはコピペできるようにしていますのでご自由にお使いください。
- [大内塗りについてchatGPTに聞いてみた](https://puzzle-web.jp/archive/2474/) - 山口市の伝統工芸【大内塗り】についてAIのchsatGPTに聞いてみました。まず、GPTが大内塗りを知らなかっとので、大内塗りを学習させました。その後、大内塗りについての質問をしていきました。
- [chatGPTにホームページ作らせてみた！](https://puzzle-web.jp/archive/2458/) - 山口市でホームページ制作をしながら対話型AIであるchatGPTに仕事を奪われるのではないかと日々怯えているPuzzleの本永です。実際にchatGPTがどれほどの実力なのかを検証してみました。
- [AIでロゴマーク作成](https://puzzle-web.jp/archive/2460/) - AIの進化が凄まじいスピードで進んでいます。ウェブやデザイン業界もAIの影響を受けることは間違いなさそうです。様々なツールがある中で、今回は「こんなイメージでロゴマーク作成」してと命令するとロゴマーク制作をしてくれるAIを使ってみました。
- [コインランドリーロゴマーク制作](https://puzzle-web.jp/archive/2451/) - 山口そうごう自動車学校様が新しく始められるコインランドリーのロゴマークを作成させて頂きました。
- [広島工業大学様パンフレット制作](https://puzzle-web.jp/archive/2441/) - 広島工業大学様よりパンフレット制作のご依頼を頂きました。目確な目的とご要望を伺い制作致しました。
- [サルワーレ小野様ウェブサイト制作](https://puzzle-web.jp/archive/2413/) - 宇部市小野のサルワーレ様よりホームページ制作のご依頼を頂き納品させて頂きました。 ウェブサイト制作目的 初回の
- [ARATA様ホームページ制作](https://puzzle-web.jp/archive/2345/) - 山口市嘉川にて美容室を営業されている「ARATA」様よりウェブサイト制作のご依頼をいただき制作させて頂きました。制作時のオーナー様からのご要望などまとめています。
- [上田左官工業（株）様制作実績](https://puzzle-web.jp/archive/2393/) - 山口市の上田左官工業株式会社様によりホームページ制作とロゴマーク制作のご依頼を頂き納品させて頂きました。
- [dryheadspa uni様制作実績](https://puzzle-web.jp/archive/2397/) - 山口市のdryheadap uni様よりホームページ制作のご依頼を頂き納品させて頂きました。ホームページ制作により新規顧客の獲得を目指し、新しいメニューの周知を新規・既存顧客様へ行うこと。
- [YouTube動画制作](https://puzzle-web.jp/archive/2353/) - 阿武町の（有）吉岡土建様よりリクルートや企業PRに使うYouTubeの動画制作をご依頼頂きました。YOSHIOKA様では積極的に人材募集をされていて若い人に自社のことを知って欲しいという考えからこの度YouTube動画を制作されました。
- [Yoshioka様ロゴ制作](https://puzzle-web.jp/archive/2359/) - 現在YouTube動画を制作させて頂いておりますYoshioka様のロゴマークを制作致しました。動画を制作していく中でロゴマークを充実させたいとのご意向を伺いご提案させて頂きました。
- [ロゴ中央表示のローディングエフェクト](https://puzzle-web.jp/archive/2290/) - ウェブサイトを読み込む際に表示されるjQueryで簡単に実装できるローディング画面のエフェクトを作成しましたので掲載します。今回作りましたのは、読み込み時にロゴ（画像）を中央に表示し、読み込み完了後にバックグラウンドが左から右へアニメーションで移動していくエフェクトです。
- [WoredPress投稿を古い順に表示](https://puzzle-web.jp/archive/2246/) - 記事一覧ページは、新着順に表示し、特定のカテゴリーで固定ページ記事一覧を古い順に表示する案件がありましたのでコードを掲載します。この度いただいたご要望は、固定ページに店舗ヒストリーというページを作りました。その際、1話、2話、3話...という順に表示したいとご要望いただきました。
- [【swiper】スライダーにサムネイル表示](https://puzzle-web.jp/archive/2274/) - 人気のスライダー【swiper.js】にサムネイルをメインスライダーと連動表示させる方法、両サイドが少し見えるカルーセルにカスタムしています。両サイドの画像はCSSで透過させています。サムネイルは、ギャラリーの中央画像にエフェクトを付けてメインスライダーの中央に表示されている写真が一目で分かるようにカスタムしています。
- [【swiper.js】スライダーの矢印カスタム](https://puzzle-web.jp/archive/2256/) - レスポンシブ対応はもちろんドラッグ操作にも対応、さらにjQueryを使わずに設置ができると人気のスライダー【swiper.js】の矢印をFont Awesomeや画像でカスタマイズする案件がありましたので、備忘録を兼ねて記載させて頂きます。
- [カルーセル・スライダーをカスタム](https://puzzle-web.jp/archive/1240/) - レスポンシブに強く様々なレイアウトが揃っているslick sliderは多くの方がご存知だと思います。この度、slick sliderのカルーセル・スライダーで矢印を素材に変更し両サイドの少し見えている部分を透過するという案件が出ましたので、備忘録をかねて掲載致します。
- [特定のカテゴリー出力、非表示の方法](https://puzzle-web.jp/archive/2238/) - WordPressで特定のカテゴリーを出力したり、非表示にしたりする場合ってありますよね。今更な感じもしますが、備忘録兼ねて掲載させて頂きます。
- [ロケット・ササキ](https://puzzle-web.jp/archive/2198/) - スティーブジョブスが憧れ、孫正義を見出した「伝説の日本人」でエンジニアとしても有名な元シャープ副社長の佐々木正氏の突き抜けた人生を書いた著書をご紹介致します。正直、この本を読むまで佐々木氏がここまで日本のみならず世界の電子産業界に尽力された方とは知りませんでした。
- [SVG画像が表示されない時の解決策](https://puzzle-web.jp/archive/2210/) - ロゴ画像をSVG形式のファイルで埋め込む事ってありますよね。PNGはどうしてもボヤけてしまったりします。しかし、SVG形式の画像は埋め込むと表示されない事があります。そんな時の対処法を備忘録も兼ねて掲載します。
- [地方移住サイト【SMOUT】への情報掲載](https://puzzle-web.jp/archive/2168/) - 山口県阿武郡阿武町の吉岡土建様より林業で地域を活性化させる方法を提案して欲しいとの依頼を頂きました。様々な地方移住サービスの中から【SMOUT】というサービスに情報掲載する事を提案させて頂きました。
- [Flexboxでテキストをボックス中央配置](https://puzzle-web.jp/archive/2150/) - ボックス要素の中にテキストを中央で配置したい時ってありますよね。これまでは「vertical-align: middle;」を使っていたのですが、友人が他にも良い方法があると教えてくれたので、備忘録兼ねて記事にさせて頂いきます。
- [無料のオンライン配色ツール3選](https://puzzle-web.jp/archive/2136/) - ウェブサイトや印刷物作成時に配色で悩むことが時々あります。そんな時にサポートしてくれるツールが配色ツールやグラデーションカラーツールです。backgroundやlinear-gradientのコードをコピペで実装できるツールをご紹介させて頂きます。
- [横並びカラムの高さを揃える2つの方法](https://puzzle-web.jp/archive/1784/) - 紹介させて頂く2つの方法はcssでflexを指定する方法とjQuery（jquery.matchHeight.js）を使う方法です。カラムを作る際、Bootstrapを使用する事が多いのですが、記事一覧などをカラムで作成した際「タイトルの長さ」「写真の構図」が原因で高さが一定に保てずカラムが崩れてしまう事があります。
- [ボックス内にborderで破線を作る](https://puzzle-web.jp/archive/2117/) - ある案件でボックス内側に波線を作り、ボックスの角をドックイヤーにするという作業をしましたので備忘録を兼ねて掲載しておきます。掲載されているソースコードはコピーペースト、またはカスタムしてご自由にお使いください。
- [CSS3で作るボックスデザイン](https://puzzle-web.jp/archive/1720/) - HTMLとCSSをコピペで直ぐに使える【囲み枠】【ボックスデザイン】を10パターン掲載しております。今回紹介させて頂いているデモは、これまで作ってきたボックスです。気に入ったボックスがあれば、使って頂けると幸いです。
- [WordPress記事の投稿者を表示](https://puzzle-web.jp/archive/2099/) - 記事投稿のユーザー権限「投稿者」でプロフィールを記事内に表示する方法を記載します。出力するプロフィールに改行やHTMLを有効にする方法とコピペで使えるHTML、CSS、PHPのコードも備忘録も兼ねて掲載しておきます。
- [blockquoteをcssで魅力的にデザイン](https://puzzle-web.jp/archive/1819/) - fontawesomeの引用符を使用しcssでオシャレにデザインしたblockquoteを紹介します。ブログ掲載していると「引用文」などを記載する事があります。WordPressでは、html5のblockquoteタグが簡単に挿入できブログ初心者のクライアント様でも使用可能なので重宝しています。
- [マーケティング本の紹介](https://puzzle-web.jp/archive/2079/) - 今回は中級レベルの本を紹介します。中級レベルといっても読みやすい本を厳選しています。しかし、マーケティング本を初めて読むという方には少し難しく感じるかもしれません。マーケティング本を初めて読まれる方は「マーケティング入門の本を紹介」で紹介させて頂いた本を最初に読まれる事をお勧めします。
- [オシャレでシンプルな矢印まとめ](https://puzzle-web.jp/archive/1866/) - ウェブサイト内の様々な用途で使用する事が多い【矢印】をcodepenで集めたので紹介させて頂きます。全てCSSで作られておりコピーペーストで簡単に実装できます。
- [jQueryで作る「ページトップへ戻る」](https://puzzle-web.jp/archive/1949/) - 多くのウェブサイトで当たり前のように設置されており、ユーザビリティーの向上につながるページトップスクロールのコードを掲載します。様々な制作方法があると思いますが、今回紹介する方法にはjQueryを用います。動きがスムーズで簡単に設置できますのでコピーペーストでご自由にお使いください。
- [z-indexが効かない時の解決策](https://puzzle-web.jp/archive/1298/) - ウェブサイト内【コンテンツ】【写真と文字・テキスト】などの重なり順を設定する事ってありますよね。その際にCSSで使われるのが「z-index」です。しかし、時々なぜか効かない場合があります。その原因はCSSの【position】にある事が多いです。記事内で分かり易く原因を解説し対応策を提示しています。
- [CSSでheight autoが効かない時の対応](https://puzzle-web.jp/archive/687/) - height:auto;が反映されないと場合の解決方法を掲載しております。多くの場合float:left;やfloat:right;の解除が上手くいっていないことが原因と考えられます。コピーペーストで使用できるfloat解除のCSSを公開しております。
- [BLEND IN様ウェブサイト納品](https://puzzle-web.jp/archive/924/) - 宇部市で英会話スクール開校されたBLEND IN様のウェブサイトを制作させて頂きました。4月からスクールは開校されていらっしゃいますが、今月の8日にアメリカ人講師が来日する事ができ、本格的に7月から始動されます。
- [マーケティング入門の本を紹介](https://puzzle-web.jp/archive/1898/) - 日常業務で行っているウェブマーケティングのスキルを向上させるために「白いネコは何をくれた?」「USJを劇的に変えた、たった1つの考え方」を読みました。マーケティングの本は難しくとっつきにくいという印象をおもちの方も多いのではないでしょうか。個人的には「本を読む順番が大切なのではないか」と思っています。
- [WordPress固定ページに記事一覧を表示](https://puzzle-web.jp/archive/1678/) - 固定ページに記事一覧を表示させたいという要望を頂いたので実装したソースを備忘録を兼ねて掲載致します。プラグインであるWP-PageNaviナビを使用してページ送りにも対応しています。Google検索してみると「ページ送りできない」というキーワードで多く検索が掛かっていましたので参考にして頂けると幸いです。
- [アイコンフォント使用の矢印アニメーション](https://puzzle-web.jp/archive/1896/) - リスト項目として利用されるli要素にcontentでFont Awesomeのアイコン矢印を表示しマウスオーバー時にアニメーションさせる方法をご紹介します。ブログ一覧やシングルページなどのサイドバーで使用する事を想定して作っておりますが、その他ボタンなどでも使えます。
- [マウスオーバーで画像拡大のエフェクト](https://puzzle-web.jp/archive/1877/) - 画像ホーバーした時に画像はズームさせ下のキャプション文字は「にゅ〜」っとアップスクロールさせるエフェクトを作成しましたので掲載いたします。また、画像全体にリンクをかけているので、ユーザービリティー向上にも一役かえそうです。
- [ホバー時に画像をズームさせるエフェクト](https://puzzle-web.jp/archive/1099/) - ホバー時にバックグラウンドはズームさせ、バナー画像は透過させるエフェクトを作成しましたので、備忘録も兼ねて掲載させて頂きます。バナーはただブランドのロゴ画像にリンクを貼っているだけでは、クリックされる可能性が低いと思い、バックグラウンドにブランドの商品画像などを差し込んで、ひと手間かけたバナーリンクを制作しました。
- [Googleデジタルワークショップ認定証](https://puzzle-web.jp/archive/1800/) - デジタルマーケティングに関するカリキュラムをeラーニングで無料受講できるGoogleのサービスにて認定証を取得する事ができました。今から商売を始められるウェブサイト運営初心者の方でも時間を掛ければ認定書を取得できるような基礎的な内容ですし、正しいウェブサイト運用方法を学べる良い機会だと思います。
- [ブログ記事掲載代行サービス](https://puzzle-web.jp/archive/1838/) - ブログ機能の付いたウェブサイトを公開し最初はマメに更新していたが、徐々に存在を忘れ放置されて気付けば1年以上も新着記事が更新されていないウェブサイトって時々ありますよね。そんな状況をみて数年前から地味に始めていたゴーストライティング事業にお問い合わせが増えているので記事にまとめます。
- [jQuery不要で簡単にフェイドインを実装](https://puzzle-web.jp/archive/1590/) - スクロールダウンして発火ポイントに入るとコンテンツや画像をふわっと表示させたり、パタリと回転させたり、ズームさせたり、軽快なアニメーションエフェクトを実装してくれる【aos.js】のご紹介です。jQueryは不要で、とても軽量のライブラリで、設置も簡単です。
- [YOU HOME様ウェブサイト制作実績](https://puzzle-web.jp/archive/1734/) - 山口県光市で注文住宅とリフォームを得意とされていらっしゃる（株）YOU HOME様よりウェブサイト制作の依頼を頂きました。2016年に本社を柳井市から光市に移されモデルハウスも建てられたので「ホームページを新規リニューアルしたい」というご要望でした。
- [マーケティング入門にお勧めの本](https://puzzle-web.jp/archive/1661/) - ウェブサイトを制作し運営していくことは、マーケティング活動の一環といえます。今回読んだ「ドリルを売るには穴を売れ」と「売れる会社のすごい仕組み」は間違いなく良書だと思いましたので、ご紹介させて頂きます。著者は、経営学修士（MBA)で中小企業診断士の人気コンサルタント「佐藤義典」さんです。
- [デザイナー佐藤オオキ氏の著書紹介](https://puzzle-web.jp/archive/903/) - デザイン業界最高の栄誉といわれている「Designer of the Year」を最年少で受賞したデザイナーでありデザインオフィス 「nendo（ネンド）」代表の佐藤オオキさんの著書を拝読させて頂きました。プロジェクトの進め方など参考になる事が多々ありましたので紹介させて頂きます。
- [人気SNSの国内ユーザー数などまとめ](https://puzzle-web.jp/archive/1614/) - 新規顧客獲得や既存顧客への情報発信などでSNS（Facebook、Twitter、Instagram、LINE）を使用する頻度が増えていると思いますが、クライアント様から「どのSNSを使えば効果的なのか?」というお問い合わせを頂く事が多々ありましたので、各SNSサービスの特徴をまとめてみました。
- [ウェブサイト運営実績](https://puzzle-web.jp/archive/1562/) - 山口県周防大島にて2017年4月イタリアン創作料理店をオープンされたサルワーレ様に許可を頂きましたので、ウェブサイト運営実績を掲載させて頂きます。以前記事掲載させて頂いた【サルワーレ様ウェブサイト制作に関して】の記事は下ボタンからご確認ください。
- [サルワーレ様写真と店舗紹介動画を納品](https://puzzle-web.jp/archive/1442/) - 山口県周防大島で２０１７年4月にグランドオープンされたサルワーレ様にて、店舗と料理の写真撮影をさせて頂きましたので、実績として報告させて頂きます。写真撮影は、Studio ECHO様にお願いし、当事業所はディレンクションをさせて頂きました。動画は、初の試みとしてドローン撮影に挑戦させて頂きました。
- [画像を中心からトリミングする方法](https://puzzle-web.jp/archive/1525/) - WordPressのアイキャッチ画像がトップページ・ブログ一覧に表示された場合「縦構図の写真もトリミングして横構図で掲載されるようにして欲しい」というご要望を頂き実装しましたので、コードを掲載します。必要があれば、ご自由にコピペで使用ください。
- [アイキャッチ画像上に新着【NEW】表示](https://puzzle-web.jp/archive/1520/) - WordPressサイト制作案件で新着記事のアイキャッチ画像上に【NEW】を表示してほしいというご要望を頂きました。「オシャレに表示させたい」と思い、何パターンか作りましたので掲載しておきます。CSSやHTMLは、コピペで自由に使用してください。また、【NEW】を出力する為のPHPも掲載しております。
- [ウェブサイトは誰のために作るのか!?](https://puzzle-web.jp/archive/1500/) - ウェブサイトから反響（お問い合わせなど）を得るために重要な要素の一つに「誰のために作るのか!?」ということがあります。この重要な要素を無視してサイトを制作をしてしまうと、公開後思ったような反響を得ることができずにサイト運営も行き詰まる要因となります。
- [反響あるウェブサイト運営について!!](https://puzzle-web.jp/archive/1476/) - ウェブサイト制作に携わる人間として最も達成感を感じる時は、サイトを公開した時ではなくウェブサイトによってサイトオーナー様がなんらかの反響（お問い合わせなど）を得られた瞬間です。
- [画像の上にテキストを表示させる方法](https://puzzle-web.jp/archive/1503/) - ウェブサイト制作時に画像の上にテキストやボタンをのせる事ってありますよね!!今回は、制作案件にてテキストを画像上にのせる素材を作りましたので、掲載させて頂きます。必要のある方は、コピペでご使用いただければと思います。
- [効果的に使えるボタンエフェクト](https://puzzle-web.jp/archive/1491/) - 最近目にした「これは使えそう!!」と思ったボタンを備忘録を兼ねて掲載させて頂きます。ボタンは、クリック率に影響するので重要なウェブサイトのパーツです。コピペで使えるようにcodepenを埋め込んで掲載致します。
- [Google Analyticator のエラー修正](https://puzzle-web.jp/archive/1466/) - WordPressのプラグインでダッシュボードにgoogle analyticsのデータを出力してくれる役立つブラグイン「Google Analyticator」にエラーが出たのでファイルを修正ました。4ヶ月前にもエラーが出た時は、reset（リセット）で対応できたのですが、今回は対応できずファイル修正で対応しました。
- [サルワーレ様ウェブサイト納品](https://puzzle-web.jp/archive/1362/) - 山口県大島郡周防大島で新規オープンされた創作料理レストラン【サルワーレ】様のウェブサイトを制作させて頂きました。山口市、宇部市にお住いの方はご存知だと思いますが、宇部市小野の小野湖畔を望めるハーブキッチン・サルワーレの新規店舗です。
- [新店舗を出す場合のウェブ戦略](https://puzzle-web.jp/archive/1424/) - 新店舗出店の案件に携わらせて頂き、グランドオープン月のアクセス数が4,000を超え、良い成果を得られましたので、アクセス・SNSのフォロワーを増やす方法を掲載させて頂きます。
- [BLEND IN 様キーワード検索1位獲得](https://puzzle-web.jp/archive/1332/) - 宇部市で英会話スクールを運営されていらっしゃいます「BLEND IN 様」が【宇部市 英会話スクール】【宇部市 英語】というキーワード検索で1位を獲得されました。【宇部市 英会話】では2位でした。ウェブサイトを公開が昨年の6月でしたので、10ヶ月での1位獲得となりました。
- [transitionとkeyframes動作を検証](https://puzzle-web.jp/archive/1308/) - 多く使われているanimationでtransitionと@keyframesがありますが、動きがどの様に違うのかを実際のサンプルを見ながら検証してみました。ご使用いただけるcssソースコードなどありましたらご自由にコピペしてお使いください。
- [CSSで作るフラットデザインボタン](https://puzzle-web.jp/archive/220/) - CSS3の登場によってオシャレなフラットデザインボタンを簡単に作れるようになりましたね。ここでは、簡単に作れるボタンをソースと一緒に紹介していきたいと思います。気に入ったボタンがあれば、ソースごとコピーペーストで使ってみてくださいね。
- [Font Awesomeをアニメーションさせる](https://puzzle-web.jp/archive/1269/) - アイコンフォントにマウスオーバーした時にアニメーションする方法を友人から教えて貰ったので、備忘録を兼ねて掲載させて頂きます。Font Awesome Iconsは日頃から使っているのですが、こんな方法があったんですね。
- [WordPressの画像に入るsrcset削除](https://puzzle-web.jp/archive/1260/) - クライアント様より「ウェブサイトの表示がパソコンでは普通だけど、iphoneで見るとおかしくなってる」と連絡を頂き直ぐにAndroidでチェックすると問題なく表示されている。しかし、iphoneでは確かに表示がおかしい...という事案が発生いたしましたので気に掲載させて頂きます。
- [ウェブサイトを営業マンに育てる](https://puzzle-web.jp/archive/1250/) - サイト公開直後は、人間でいう生まれたての様な状態です。生まれたての赤ちゃんに「立って歩いて!!」という人はいないでしょう。ウェブサイトも公開直後から目的を直ぐに達成する事は、不可能に近いです。目的を達成するには最低数か月は必要です。
- [ウェブサイト運営を好循環でまわす](https://puzzle-web.jp/archive/1162/) - サイトを新規で立ち上げた場合、時々「ウェブサイト公開＝新規顧客獲得」と思われるサイトオーナー様がいらっしゃいます。これは、生まれた瞬間に赤ちゃんが立って歩くようなイメージです。ウェブサイトは、ネット上にサイトを公開した時点でようやくスタートの号砲が鳴ったような感じです。
- [0円で検索上位表示する方法](https://puzzle-web.jp/archive/567/) - 検索上位表示とは、インターネット閲覧ユーザーが検索窓にキーワードを打ち込んで検索ボタンを押すと次の画面でウェブサイトのタイトルと説明文が並んだ画面が表示されます。閲覧者に多く自社サイトを見て貰う為には1番目に出てくる事が理想です。その為にどの様なSEO対策をすれば良いかを具体例を上げながら記載させて頂いております。
- [Google Analyticsのデータ活用術](https://puzzle-web.jp/archive/1215/) - Google Analytics（グーグル・アナリティクス）という言葉を耳にされた事があると思います。ウェブサイトは多くのデータを集める事が可能です。Googleは無料でサイトデータを集計しサイト制作者またはサイトオーナー様に情報を提供しています。このサービスが「Google Analytics」です。
- [Google検索エンジンが目指しているもの](https://puzzle-web.jp/archive/1156/) - Googleで何か知りたいことを検索した時に、全く何の役にも立たないサイトばかりが表示されていたら、誰も Google を利用しなくなり広告収入は激減する。逆に、検索した時に、知りたかった情報やノウハウが完璧に分かるサイトばかりが表示されていたら Google のユーザーは更に増えて行き広告収入がさらに増える。
- [ウェブ制作業者が行うSEO対策](https://puzzle-web.jp/archive/1160/) - このページは主に制作サイドが行うSEO対策について記載します。クライアントサイドは、ウェブサイトについてプログラムなどわからない事も多いと思われますが、ウェブ業者の制作実績などを参考にし、実際に制作されたサイトが抽象的なキーワードで上位表示するか、などを確認する。
- [サイトタイトルと説明文は超重要](https://puzzle-web.jp/archive/1158/) - ウェブサイトの検索結果には「サイトタイトル」と「サイト内容説明文が」表示されます。例えば、山口市内にホビーというカフェがあるとします。まず、ホビーという店名は必ずタイトルに入れる必要があるのは理解頂けると思います。その他のキーワードを決定する際は、Googleの検索窓に「カフェ」と入力し検索してみましょう。
- [なぜSEO対策が必要なのか!?](https://puzzle-web.jp/archive/1153/) - SEO(Search Engine Optimization)=検索エンジン最適化(以下「検索エンジン対策」)の略です。検索エンジン対策を実施する理由は、ウェブサイトをより多くの人に閲覧して頂くことが１つの理由としてあげられます。
- [hrタグのジグザグラインを応用](https://puzzle-web.jp/archive/1131/) - 先日ネットサーフィンをしていたら【hr】の境界線をジグザグにしてあるサイトを見つけて「どうやってやってるんだろ!?」と思って、ググってみるとありました。codepenで発見することができたので、とりあえず埋め込んでおきます。
- [困った時に役立ったCSSの小技](https://puzzle-web.jp/archive/730/) - position:relative;を記載してbottomを指定した配置にすると下に余白が生まれます。これを解決する方法をしてmarginの値を指定する方法が有ります。下記にCSSを掲載しますので、実際に見てご確認下さい。
- [flexboxでブログ出力3カラム作成](https://puzzle-web.jp/archive/1111/) - 前にCSS3のFlexboxを使ってみましたという記事を掲載させて頂きましたが、今回は発火ポイントにスクロールが達するとjQueryが作動しカラムが順にフェードインしてくるエフェクトを追加しました。デモページも用意していますので、動作チェック確認いただけます。
- [フルスクリーン画像とボックス中央配置](https://puzzle-web.jp/archive/1089/) - フルスクリーン画像の上にテキストボックスを置き画面の中央に表示し、ボックスのバックグラウンドは透過しつつテキストは透過しないという作業がありましたので、備忘録にソースを掲載しておきます。
- [【BLACK FRIDAY】企画詳細](https://puzzle-web.jp/archive/1067/) - 今年から日本でもイオンやアマゾンが「BLACK FRIDAY（ブラック・フライデー）」を開催するとの事で便乗します。パズルでは、このイベントに便乗して11月25日（金）～11月27日（日）にお問い合わせ頂いた案件に関してお見積もりの「50％OFF」でウェブページ制作を請け負います。
- [CSS3のFlexboxを使ってみました](https://puzzle-web.jp/archive/1047/) - レスポンシブに対応した3カラムのWordPress記事出力をFlexboxで作成しました。HTML・CSSを記事内に掲載しておりますので、ご自由にコピペでご使用ください。Codepenも表示しておりますので動作チェックにご使用ください。
- [アイキャッチにキャプションを出力する方法](https://puzzle-web.jp/archive/1024/) - アイキャッチ画像などに出典元を表示する事は時々あると思います。先日、クライアント様よりご要望頂きWordPressのアイキャッチにキャプションを出力するコードを作成したので、備忘録も兼ねて記載しておきます。必要であれば、ご自由にコピーペーストしてお使いください。
- [LINE@開設時の年齢認証方法](https://puzzle-web.jp/archive/1017/) - LINE@は、簡単に開設できたのですが、1対1トークの年齢認証がどうしても「不可」になってしまい、解決方法が見い出せないまま時間が過ぎ、LINEに問い合わせをしてようやく「可」になりました。キャリアは、auでした。
- [宇部市のイベント展示「呼応する森」](https://puzzle-web.jp/archive/996/) - 宇部市の常盤（ときわ）公園で開催されているチームラボによるイベント展示「呼応する森」に行ってきました。開催期間や入場料金を掲載し、呼応する森の写真を多く掲載しております。
- [Sublimeでcompassをコンパイル](https://puzzle-web.jp/archive/982/) - Mac版のSublime TextでCompassをコンパイルしようとしたら、エラーが出てしまい困ったので備忘録も兼ねて記載しておこうと思います。Windowsでは、全く問題無かったのですがMacに関しては、Compass.sublime-buildファイルを編集する必要があるようです。
- [CSS3アニメーションまとめ](https://puzzle-web.jp/archive/974/) - サイト制作で使いたいと思っているCSS3アニメーションを備忘録兼ねてご紹介させて頂きます。Flashの影が薄くなりアニメーションを見る機会が減っていましたが、最近HTML5 canvasやCSS3を使った動きのあるサイトが復活してきています。
- [スクール案内と規約パンフレット納品](https://puzzle-web.jp/archive/961/) - 度々ブログで紹介させて頂いております宇部市の英会話スクールBLEND IN様にスクール案内と入学に関する規約をまとめたパンフレットを納品させて頂きました。商売をされていらっしゃる方にとって、企業案内や商品紹介のパンフレットはブランディングにおいて重要な役割をはたします。
- [Sass（SCSS）の超入門編](https://puzzle-web.jp/archive/950/) - 時間が空いたので前から学びたいと考えていたSASSの勉強を遂に始めました。まだまだ始めたばかりなので知識は薄いですが、学んで分かったことやSublime Text でコンパイルする方法を備忘録ついでにまとめておきます。
- [スタビーホルダーの制作](https://puzzle-web.jp/archive/910/) - オーストラリアでは、企業のノベリティーグッズやお土産として目にする機会の多かったスタビーホルダーを事業所のオリジナルノベリティーグッズとして制作致しました。日本で制作して下さる場所を探しましたが、残念ながらみつからなかった為、オーストラリアへ発注し輸入しました。
- [英語塾「BLEND IN」様ロゴ納品](https://puzzle-web.jp/archive/886/) - 山口県宇部市で開校される英語スクールのロゴを制作させて頂きました。ロゴマークは企業（会社）や団体のブランドイメージを象徴し視覚的に図案化する必要があります。その為、コンセプトや企業理念を深く落とし込み徐々にイメージを具現化して制作します。
- [hrとborderの装飾](https://puzzle-web.jp/archive/878/) - ウェブサイトを制作する中で目立たないけどhrとborderの装飾は重要な役割を担っています。特に見出しはブログ記事を読み易くする為に欠かせません。今回は最近使ったhrやborderをまとめて掲載します。
- [fixed-responsive-navigation](https://puzzle-web.jp/archive/872/) - ヘッダーは固定せずにナビゲーションだけ固定させて欲しいって部品の作成を依頼されたので作りました。もちろん、レスポンシブ（スマホ対応）でのご依頼でした。CodePenを最近使っているクリエイターさんが多いので良い機会だと思ってデビューしてみました!!
- [山口の若者よ広告業界を目指そう!!](https://puzzle-web.jp/archive/604/) - 広告代理店と一緒に仕事をさせて頂く中で山口市,宇部市,防府市などで若手に会う機会がありません。若手の少ない業界は盛り上がらず、特に広告の様なアイディアを重要視する業界では若手の力が必要なので単純に今から就活や転職される方に「目指して欲しいな～」と思い記事を書くことにしました。
- [OGPプラグインから脱却](https://puzzle-web.jp/archive/856/) - 以前は、WordPressでogpを出力するためにopen graph proというプラグインを使用しておりましたが、Facebookページへの表示で画像が上手く読み込めない事が続いた為、他の方法を模索する中でプラグインを使わずに出力する方法に辿り着きました。
- [CSSホバーエフェクト](https://puzzle-web.jp/archive/835/) - テキストにカーソルを合わせるとテキストの下にラインが「ニュ～」っと出てくるホバーエフェクト素材を作りましたので掲載します。シンプルなサイトのナビゲーションなどに使えると思います。コピーペーストで直ぐに使えるようにソースを掲載しています。
- [サイト運営の目的を1つ達成しました](https://puzzle-web.jp/archive/806/) - 今年の目標の1つに「山口市 ホームページ制作」というキーワード検索で1位を取るという目標を立てて2月からウェブサイトをリニューアルし更新を続けた結果、ようやく目標を達成する事ができました。
- [寿司正様ホームページリニューアル](https://puzzle-web.jp/archive/795/) - 先日「料理写真撮影について」の記事を書かせて頂いた続編です。写真撮影後そのままウェブサイトリニューアルのお話を頂き無事に公開させて頂いたので記事としてまとめさせて頂きます。リニューアルさせて頂いたウェブサイトを下記リンクより閲覧して頂けます。
- [寿司正様にて料理写真撮影](https://puzzle-web.jp/archive/768/) - 写真撮影の仕事を頂く機会が多く、プロカメラマンで映像クリエイターの「Studio ECHO」さんと一緒にクライアント様である山口市小郡の「寿司正」様へ伺ってきました。撮影した会席料理の写真などを掲載しております。
- [CSSフラットデザインボタン2](https://puzzle-web.jp/archive/745/) - 前に「CSSで作るフラットデザインボタン」という記事を書かせて頂きアクセス数が多かったので第2弾の記事を書かせて頂きます。今回紹介するボタンは、シンプルなサイトに使えると思います。
- [レスポンシブル無料テンプレートの配布](https://puzzle-web.jp/archive/699/) - 今までダウンメニューを主に使っていたので、スライドインナビゲーション素材を持っていなかったので制作しました。前から試してみたかったボーダーを入れてみたりしているうちにHTMLテンプレートが1つできてしまったので、無料配布する事にしました。ページ内よりダウンロード可能です。
- [ホームページ制作の受注から公開まで](https://puzzle-web.jp/archive/542/) - ホームページの制作は、要点を押さえておけばクライアント様側の負担を減らす事も出来ますし公開までスムーズに進みます。これからウェブ制作をされる事業者様が「あ～制作過程ってこんな感じなんだ」って頭の片隅に置いて参考にして頂けると幸いです。
- [目標の反響を得るための広告戦略](https://puzzle-web.jp/archive/508/) - 山口県山口市の広告代理店で働いた経験とホームページ制作・運営管理を通して得たウェブマーケティング戦略の知識を基に「限られた予算の中で反響のある広告を出すには為にはどうすればいいか」というテーマで広告戦略をまとめた記事を書きました。
- [(有)吉岡土建様ウェブサイト納品](https://puzzle-web.jp/archive/462/) - 山口市から車を1時間ほど走らせ到着する自然豊かな阿武町に会社を構えられていらっしゃる吉岡土建様よりウェブ制作の依頼を頂きました。この度のミッションをまとめ記事にさせて頂きました。スマートフォン対応やWordPressについても記載しておりますので、参考にして頂けると幸いです。
- [Cherir様ウェブサイト納品](https://puzzle-web.jp/archive/440/) - 山口市平井で女性限定完全予約制のエステサロンを経営されていらっしゃるCherir（シェリル）様より当ウェブサイトより直接お問い合わせを頂き制作させて頂きました。
- [防府市の美容院レガーミさん写真撮影](https://puzzle-web.jp/archive/489/) - 地方紙の「もってけ」に広告を掲載する為の写真撮影を依頼頂きました。新しいサービスとしてまつ毛エクステを始められ、それに伴い店内も若干改装されたためウェブサイト掲載写真差し替え用の写真を撮らせて頂きました。
- [Instagram Feedについて](https://puzzle-web.jp/archive/417/) - 先日クライアント様より、WordPressサイトのサイドバー辺りにInstragramを表示させて欲しいと御要望を頂き実装しましたので、備忘録として記載させて頂きます。その時に、Instagram Feedというプラグインを使用しました。設定も簡単で使い易いプラグインです。
- [寿司正で7月の御馳走を食べてきた](https://puzzle-web.jp/archive/389/) - 毎月楽しみにしている寿司正さんの「月替わりの御馳走」を食べてきました。7月の御馳走は「鱧（はも）」が多くメニュ
- [パズルのウェブサイトについて](https://puzzle-web.jp/archive/35/) - 今回は、当事業所ウェブサイトで使用しているWordPressプラグインについての記事を書かせていただきます。と言いましても使っているプラグインは、ほとんどがメジャーなモノで新しさは特に無いと思います。「まぁ～これくらいは入れておくといいよ」という感じで読んで頂ければ幸いです。
- [WordPressのギャラリーをカスタム](https://puzzle-web.jp/archive/366/) - ウェブサイトをクライアント様に納品させて頂くとき、ギャラリー機能を使用でき、さらにギャラリーを作った時点でレスポンシブル対応になるようにしております。その方法とコードを掲載致します。
- [レスポンシブル対応のtableソース](https://puzzle-web.jp/archive/359/) - ウェブサイト制作する時に会社概要や飲食店のメニューなどをtableで制作される方も多いと思います。前に制作したサイトでtableをレスポンシブル対応させましたので、ソースを掲載致します。デフォルトのままコピーペーストでそのまま使って頂けます。
- [寿司正で6月の御馳走食べました](https://puzzle-web.jp/archive/343/) - 毎月での楽しみでもある寿司正さんの月替わりの御馳走を食べてきました。「6月の御馳走」の第一印象は、見た感じ若干
- [Contact Form 7レスポンシブル対応](https://puzzle-web.jp/archive/336/) - WordPressでサイトを制作するとお問い合わせフォームで「Contct Form 7」を使用される事もあるかと思います。とても便利で簡単に設置できるので個人的には重宝しております。前に制作させて頂いたサイトでレスポンシブル対応させましたので、CSSを記載致します。
- [Facebookページからのサイトアクセス数](https://puzzle-web.jp/archive/331/) - 多くのウェブサイトを管理されていらっしゃる方が、ソーシャルネットワークを利用した情報拡散をされていらっしゃると思います。では、具体的にFacebookページからウェブサイトへどのくらいの確率で閲覧者が流れているかを御存知でしょうか？パズルでは、3年間独自にデータを取りある程度安定した確率を出せましたので記事にまとめる事にしました。
- [寿司正さんで5月の御馳走食べました](https://puzzle-web.jp/archive/318/) - 毎月の楽しみの一つでもある寿司正さんの「月替わりの御馳走」を今月も頂いて参りました。毎回思うのですが、まず料理
- [写真データの取り扱いについて](https://puzzle-web.jp/archive/312/) - FacebookやTwitterなどにアップデートする画像についての危険性を呼びかける動きは、前からあるのですが、特に気を付けなくてはいけないのが「EXIF」という画像に含まれている情報です。最近は高性能のカメラが多く、デジカメですら「EXIF情報」が含まれています。
- [カスタムメニューの設定と設置方法](https://puzzle-web.jp/archive/303/) - WordPressサイトを制作するとき、利用頻度の高い機能の1つにカスタムメニュー機能があります。クライアント様が、固定ページを制作されメニューを追加されるまでの工程で難しいプログラミングなどを使用する必要無く利用できて重宝しております。
- [ホームページ納品のお知らせ](https://puzzle-web.jp/archive/290/) - 防府市で美容院を営業されていらっしゃいます「Legami（レガーミ）」様よりウェブ制作依頼を頂き本日無事に納品させて頂きました。山口市で美容院を営業されていらっしゃいます「caroque」様よりご紹介頂き、制作させて頂く事になりました。
- [寿司正さんで4月の御馳走食べてきた](https://puzzle-web.jp/archive/274/) - 本日は昼食を寿司正さんで頂きました。クライアント様でもある寿司正さんの「月替わりの御馳走」は、私の個人的な楽しみでもあり毎月一度は食べに伺っております。「毎月よく違うメニュー構成を考案できるなぁ～」と尊敬しております。
- [ウェブサイト掲載写真の重要度は高い](https://puzzle-web.jp/archive/252/) - 防府市の美容室「Legami」様にてウェブサイト用の写真撮影をさせて頂きました。ウェブサイト用といってもデータを納品させて頂くので紙媒体の広告などにも使って頂けます。
- [WordPressで新着記事を表示するコード](https://puzzle-web.jp/archive/239/) - WordPressサイトのサイドに多く見かける【RECENT POST】を表示するコードを個人的によく使うので記載しておこうと思い掲載しております。このサイトのライトサイドバーにも使ってます。
- [投稿者別に記事一覧を表示](https://puzzle-web.jp/archive/231/) - クライアント様より社員名別に記事一覧ページを表示をさせたいというご要望を頂き、実装いたしましたのでその時使ったコードを記載致します。
- [寿司正【3月の御馳走】食べてきました](https://puzzle-web.jp/archive/181/) - 山口市小郡で有名な会席料理屋「寿司正」さんで、3月の御馳走を食べてきました。仕事で寿司正さんとは取引をさせて頂いており月替わりの御馳走シリーズが前から気になっておりました。そして、先月ようやく御馳走シリーズを頂くと素晴らしさにハマっちゃいまして、毎月食べようと心に勝手に決めました
- [岩屋山地蔵院様のご紹介](https://puzzle-web.jp/archive/198/) - 岩屋山地蔵院様は、天平19年に創建された歴史の深い寺院です。毎年5月に開催される秋穂88ヶ所霊場の83番札所、山陽花霊場の6番札所となっております。境内には、人面岩と言われる巨岩が鎮座しており岩から下がる鎖を登ると岩の上には、お不動様が刻まれ、古くから行者岩とされ登拝行をされておりました。
- [寿司正【2月の御馳走】がおいしすぎる](https://puzzle-web.jp/archive/59/) - 先日、クライアント様である寿司正にて月替わりメニュー「2月の御馳走」を頂いてきました。夜1杯飲みながら「月替わりの御馳走」を食べ2件目へ本格的に飲みに行く、月替わりの御馳走を毎月楽しみにしていらっしゃるお客様に大変人気のメニューです。
- [Webアイコンフォントの使い方](https://puzzle-web.jp/archive/149/) - このサイトでも使っているicon fontの使い方を記載します。icon fontは、幾つかありますが今回説明させて頂くのは【Font Awesome】で、Bootstrap のアイコンをもっと使いやすくするために、Webフォント として利用できるようにしたのです。
- [兼重建具様のご紹介](https://puzzle-web.jp/archive/158/) - 兼重建具さんは、昨年の10月に知人の方のご紹介で知り合いウェブサイトの制作を発注して頂きました。最初は、建具屋さんでウェブサイトって会社案内の様な感じで作ればいいのかな～って考えていました。しかし、社長さんのPCに保存されている写真を見て考えが一変したのを覚えています。
- [よく使う便利なCSSの紹介](https://puzzle-web.jp/archive/124/) - CSS3の登場により装飾や文字色の変化がjQueryを使わなくても可能になりました。サイトをオシャレに魅せる為に役に立ってますね。多くのサイトで使われ、気になる度にググって学んでいます。そんな中でも、これは知っておくと良いな思うCSS少し紹介させて頂きます。
- [ウェブサイトをリニューアル致しました](https://puzzle-web.jp/archive/27/) - この度パズルのサイトをリニューアル致しました。最近、クライアント様からイベントの紹介を私のFacebookなどで紹介して欲しいというお願いが急増してきた為、それならWordPressでサイトを制作し紹介記事を書こうと思い制 作に至りました。

## 固定ページ

- [HOME](https://puzzle-web.jp/) - 山口市、防府市、宇部市を主に営業範囲とさせて頂いております、広告制作事務所パズルのウェブサイトです。最近は、簡単にホームページ内部を更新したりブログの書けるWordPressサイトの案件が増えております。YouTube動画などの制作からサイトへの埋め込みなども手掛けております。
- [WORKS](https://puzzle-web.jp/works/) - 印刷物からウェブ制作まで幅広く広告制作に取り組ませて頂いております。ウェブサイトをツールとして使用し、ウェブマーケティングや潜在需要の発掘などの業務も行っております。
- [SITEMAP](https://puzzle-web.jp/sitemap/) - パズルサイト内を分かり易く紹介しております。お気軽に立ち寄ってみてください。
- [PRIVACY POLICY](https://puzzle-web.jp/privacy-policy/)
- [PRICE](https://puzzle-web.jp/price/)
- [FLOW](https://puzzle-web.jp/flow/)
- [CONTACT](https://puzzle-web.jp/contact/) - ウェブ制作だけでなく運営管理のご相談などもお気軽にお問い合わせください。また、営業目的でのご連絡はご遠慮いただきますようお願い致します。
- [ABOUT](https://puzzle-web.jp/about/) - 広告業界に携わり早いもので約10年（2017年8月現在）が経ちました。最初は、右も左も分からず右往左往していたところを当時働いていた広告代理店の同僚に広告のいろはを教えて頂きました。当時教わった「いろは」を基に現在も広告業界でフリーランスとして実績を積み重ねております。
- [PROJECT](https://puzzle-web.jp/project/) - 【STARTUP SHEET】は、起業・創業や新商品の開発のアイディアをユーザー目線で磨けるツールです。質問に答えていく中で客観的な視点でマーケットのニーズ予測できたり、独自性の追求ができるように作成されています。広告業界で働き、WEBマーケティング業務に携わってきた経験を活かして制作しています。

## カテゴリー

- [Work](https://puzzle-web.jp/archive/category/works/)
- [News](https://puzzle-web.jp/archive/category/news/)
- [WordPress](https://puzzle-web.jp/archive/category/wordpress/)
- [Column](https://puzzle-web.jp/archive/category/column/)
- [Web](https://puzzle-web.jp/archive/category/web/)
- [WEBマーケティング（SEO）](https://puzzle-web.jp/archive/category/web-marketing-seo/)
- [Recommended Books](https://puzzle-web.jp/archive/category/recommended-books/)