# LLMs.txt - Sitemap for AI content discovery # 中田デザイン事務所 > --- ## 固定ページ - [事務所概要](https://nakata.design/about-office/): 中田デザイン事務所（Nakata Des... - [プライバシーポリシー](https://nakata.design/privacy/): 広告の配信について 中田デザイン事務所の... - [お問い合わせ](https://nakata.design/contact/): ## ## 投稿 - [ブログ移転](https://nakata.design/blog-relocation-change-just-planning/): ブログの移転を考えています。 今後はこの... - [【衝撃的なコンテンツ】AdSense サイト運営者向けポリシー違反レポートが来た！](https://nakata.design/shocking-content-a-policy-violation-report-for-adsense-site-operators-has-arrived/): アドセンスから「AdSense サイト運営者向けポリシー違反レポート」が来ました。どうやら記事が衝撃的なコンテンツだったようで… - [【コピペ用】ツイッター、フェイスブック、インスタのSVGロゴで簡単に利用できるソーシャルアイコンセットを作る。](https://nakata.design/sns-icon-set/): コピペでいつでも簡単に設置できるように、ツイッター、フェイスブック、インスタのsvgソーシャルアイコンセットを作っておきました。 - [【WordPress】タクソノミーを利用してオススメ記事のみ取得、表示する](https://nakata.design/wordpress-use-taxonomy-to-get-and-display-only-recommended-articles/): 「Custom Post Type UI」のタクソノミーを利用して「オススメ」に指定した記事を表示する機能を追加します。 - [【CSS】スクロールの途中から追随する事ができるposition:stickyが効かない時の対処法](https://nakata.design/css-position-sticky/): 追随するメニュー等を作成できる「posi... - [【FTP接続】無料1GBレンタルサーバー「XFREE」利用方法（そのままでは繋がらないかも）](https://nakata.design/ftp-connection-how-to-use-the-free-1g-rental-space-xfree-it-cannot-be-connected-as-it-is/): エックスサーバーが提供する「XFREE」でFTPソフトでそのままでは接続ができせんでした。登録からFTPソフトの設定までご紹介。 - [【WordPress】XserverにKUSANAGI導入！新サーバー簡単移行の期間など](https://nakata.design/wordpress-introduced-kusanagi-to-xserver-new-server-easy-migration-period/): 「新サーバー簡単移行」というのを利用すれば簡単に移行できるようです。なので、早速移行してみて注意点や気がついた事等を紹介してみます。 - [【CSS】エリア両端はスペース無し、内部ボックスに均等スペースを空けて配置する2つの方法（左寄せ折返し）](https://nakata.design/css-no-space-at-both-ends-of-the-area-and-spaces-placed-on-the-left-and-right-sides-of-the-inner-box/): エリアの両端はスペースなし、内部のボックスの左右に均等なスペース（10pxずつ）を空けて配置する方法を2種類ご紹介。 - [【レスポンシブ】ビジュアル重視なモバイルデバイスシミュレータ機能拡張「Mobile FIRST」](https://nakata.design/responsive-mobile-device-simulator-mobile-first/): レスポンシブサイト制作に必須なグーグルク... - [【CSS】枠内からはみ出てしまうURLや連続する半角英数の文字列を折り返して表示する](https://nakata.design/css-wrap-urls-that-extend-beyond-the-frame-or-consecutive-half-width-alphanumerical-strings/): URLがはみ出してしまっているページをよく見かける。URLなどを折り返すようにするCSSのプロパティ「overflow-wrap」 - [【jQuery】スクロール量とページの高さを取得して円グラフで残量を表示](https://nakata.design/jquery-get-the-scroll-amount-and-page-height-and-display-the-remaining-amount-in-a-pie-chart/): スクロール量に応じて円の縁が一周するマイクロインタラクションなパーツをjQueryとCSSで制作してみた。 --- # # Detailed Content ## 固定ページ ### 事務所概要 - Published: 2022-03-26 - Modified: 2024-02-23 - URL: https://nakata.design/about-office/ 中田デザイン事務所（Nakata Design Office）は、WEBデザインを中心に活動しているデザイン事務所です。2006年より大手メーカーや、アパレル、遊園地等のお仕事、医科歯科のロゴやサイト、パンフレット等のお仕事、製品パッケージデザイン、飲食店や小売店、各種中小企業サイト、WEBサービスサイト等、様々な経験ございます。 業務内容 各種デザイン（グラフィック・ロゴ・パンフレット・チラシ・WEB等） 広告および各種販促ツールの企画・制作 パッケージデザイン制作 WEBサイトの企画、制作、... --- ### プライバシーポリシー - Published: 2022-02-17 - Modified: 2022-02-17 - URL: https://nakata.design/privacy/ 広告の配信について 中田デザイン事務所のサイト（以下、当サイト）は第三者配信の広告サービスを利用しています。 広告配信事業者は、ユーザーの興味に応じた広告を表示するためにCookie（クッキー）を使用することがあります。 また、当サイトは、各商品及びサービス等を宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムの参加者です。 第三者がコンテンツおよび宣伝を提供し、訪問者から直接情報を収集し、訪問者のブラウザにCookie（クッキー）... --- ### お問い合わせ - Published: 2022-01-02 - Modified: 2022-01-03 - URL: https://nakata.design/contact/ --- ## ## 投稿 ### ブログ移転 - Published: 2024-01-19 - Modified: 2024-02-23 - URL: https://nakata.design/blog-relocation-change-just-planning/ - カテゴリー: Webデザイン - オススメ: ★ ブログの移転を考えています。 今後はこのサイトはもう少し企業っぽいサイトにして、ブログの記事は下記へ移転予定（検討中）。 https://ndo. design/ 👆新しいブログはAstroにて制作しました。 --- ### 【衝撃的なコンテンツ】AdSense サイト運営者向けポリシー違反レポートが来た！ > アドセンスから「AdSense サイト運営者向けポリシー違反レポート」が来ました。どうやら記事が衝撃的なコンテンツだったようで… - Published: 2022-12-22 - Modified: 2022-12-22 - URL: https://nakata.design/shocking-content-a-policy-violation-report-for-adsense-site-operators-has-arrived/ - カテゴリー: Webデザイン 先日初めて目にする「AdSense サイト運営者向けポリシー違反レポート」というのがグーグルのアドセンスより来ました🧐 アドセンスを長年利用しておりますが、今まで一度もこんなメールが来た事はなかったのでびっくり😭 ポリシーセンターで見てみる 「AdSense ポリシーセンター」とやらで状況をチェックできるので見てみると、 なぜか1ページだけ衝撃的なコンテンツの問題があるようです。衝撃的なコンテンツってなんだろうと。。。😅 事務所のブログなんでそんな世間に対して衝撃的なコンテンツなんて提供していな... --- ### 【コピペ用】ツイッター、フェイスブック、インスタのSVGロゴで簡単に利用できるソーシャルアイコンセットを作る。 > コピペでいつでも簡単に設置できるように、ツイッター、フェイスブック、インスタのsvgソーシャルアイコンセットを作っておきました。 - Published: 2022-12-03 - Modified: 2022-12-03 - URL: https://nakata.design/sns-icon-set/ - カテゴリー: Webデザイン 今年の5月にインスタグラムのロゴが変わったことは記憶に新しい。iPhone上のアイコンの色がいきなり変わったので、「ん？🧐」ってなった（形状は変わらず、色だけ） Facebook社がMeta社になり、内容修正のため一時期ダウンロードできなくなっていたのですが、Instagramのロゴがようやくダウンロードできるようになっていた。 この機会に、ソーシャルアイコンをいつでも簡単に設置できるように、コピペ用コードを作っておこうと思います。画像でなくsvgで作っておくことて利用も楽ちんですしね😎 各種正... --- ### 【WordPress】タクソノミーを利用してオススメ記事のみ取得、表示する > 「Custom Post Type UI」のタクソノミーを利用して「オススメ」に指定した記事を表示する機能を追加します。 - Published: 2022-04-11 - Modified: 2023-01-25 - URL: https://nakata.design/wordpress-use-taxonomy-to-get-and-display-only-recommended-articles/ - カテゴリー: Webデザイン 「Custom Post Type UI」を利用すれば簡単に自信で「オススメ」に指定した記事を表示する事ができます。自動で「オススメ記事（つまりは人気の記事）」を表示する場合はその手のプラグインを利用すればよいのですが、あくまで自分で選んだ記事を「オススメ」として表示します。 このサイトも上の写真の赤枠部分のように、「Recommended」として利用しています。 「Custom Post Type UI」を利用する まず初めに「Custom Post Type UI」プラグインをインストールし... --- ### 【CSS】スクロールの途中から追随する事ができるposition:stickyが効かない時の対処法 - Published: 2022-03-27 - Modified: 2022-08-21 - URL: https://nakata.design/css-position-sticky/ - カテゴリー: Webデザイン 追随するメニュー等を作成できる「position:sticky」 例えばメニューなんかで、通常はスクロールをすると当然ですが隠れてしまいますが、そのメニューが追随していれば常にメニューをユーザーに促す事ができるのでインターフェースとしてはかなり有効ですね🤩 昔はこの仕様をわざわざJavasriptで用意していましたが、今はCSSだけで実装可能です。iframe内でスクロールをしてみてください。 スクロールすると「追随」という部分が途中から追随してきていると思います。（わかりやすいように背景を半透... --- ### 【FTP接続】無料1GBレンタルサーバー「XFREE」利用方法（そのままでは繋がらないかも） > エックスサーバーが提供する「XFREE」でFTPソフトでそのままでは接続ができせんでした。登録からFTPソフトの設定までご紹介。 - Published: 2022-03-26 - Modified: 2022-08-21 - URL: https://nakata.design/ftp-connection-how-to-use-the-free-1g-rental-space-xfree-it-cannot-be-connected-as-it-is/ - カテゴリー: Webデザイン 無料の1GBレンタルサーバースペース「XFREE」というのがあるらしい。というかエックスサーバーユーザーなのにまったく知らなかった😂 WEB制作を初めたばかりの人がお試しでサイトを公開するのにもってこいのサービスですね。私も昔、「Yahoo! ジオシティーズ」でHTML4. 0から勉強していました😅 「Yahoo! ジオシティーズ」終了　「貴重な資料消えた」──ネットから惜しむ声 制作したHTML、CSS等を公開するためにレンタルサーバーにファイルをアップロードしないとなりません。通常は月々レン... --- ### 【WordPress】XserverにKUSANAGI導入！新サーバー簡単移行の期間など > 「新サーバー簡単移行」というのを利用すれば簡単に移行できるようです。なので、早速移行してみて注意点や気がついた事等を紹介してみます。 - Published: 2022-02-27 - Modified: 2022-08-21 - URL: https://nakata.design/wordpress-introduced-kusanagi-to-xserver-new-server-easy-migration-period/ - カテゴリー: Webデザイン 昨年の5月頃に、ついにエックスサーバーとプライム・ストラテジーが技術提携してWordPressにKUSANAGIが導入される事になった🥳 このたび、サーバー環境のさらなる高速化を目的として、超高速WordPress実行環境「KUSANAGI」を開発するプライム・ストラテジー株式会社との技術提携を開始しました。 プライム・ストラテジー社との技術提携について KUSANAGIとは？ 「KUSANAGI」はCent OSを「プライム・ストラテジー株式会社」がWordPress専用にカスタマイズ及びチュ... --- ### 【CSS】エリア両端はスペース無し、内部ボックスに均等スペースを空けて配置する2つの方法（左寄せ折返し） > エリアの両端はスペースなし、内部のボックスの左右に均等なスペース（10pxずつ）を空けて配置する方法を2種類ご紹介。 - Published: 2022-02-08 - Modified: 2022-08-21 - URL: https://nakata.design/css-no-space-at-both-ends-of-the-area-and-spaces-placed-on-the-left-and-right-sides-of-the-inner-box/ - カテゴリー: Webデザイン - オススメ: ★ エリアの両端はスペースなし、内部のボックスの左右に均等なスペース（10pxずつ）を空けて配置する方法をまとめます。これは、ブログなどのサムネイルを左寄せで折り返して配置する時等、溢れてボックスが送られるページで、かつエリアの両端にスペースを入れたくない場合に役立つと思います。ボックスは敢えて5つ設置し、flex-wrap:wrapにして溢れた状態にしておきます。 最終的にブレイクポイントで4段から3段、2段、1段組みに変化するようなCSSに仕上げます。 HTML エリアの両端はスペースなし、内部... --- ### 【レスポンシブ】ビジュアル重視なモバイルデバイスシミュレータ機能拡張「Mobile FIRST」 - Published: 2022-02-02 - Modified: 2022-08-21 - URL: https://nakata.design/responsive-mobile-device-simulator-mobile-first/ - カテゴリー: Webデザイン レスポンシブサイト制作に必須なグーグルクロームのデベロッパーツールなのですが、使いづらいわけではないのですが、何かこうデベロッパーツールはあまりカッコよくない。上はデベロッパーツール、iPhone 12 Proでのシミュレーション。 もう少しプレゼンでも利用できそうなものがないものかと探しておりました。 ビジュアル重視なモバイルデバイスシミュレータ機能拡張「Mobile FIRST」 そしたらいいのがありました！グーグルの機能拡張「Mobile FIRST」。 Mobile FIRSTというフラ... --- ### 【CSS】枠内からはみ出てしまうURLや連続する半角英数の文字列を折り返して表示する > URLがはみ出してしまっているページをよく見かける。URLなどを折り返すようにするCSSのプロパティ「overflow-wrap」 - Published: 2022-01-04 - Modified: 2022-08-21 - URL: https://nakata.design/css-wrap-urls-that-extend-beyond-the-frame-or-consecutive-half-width-alphanumerical-strings/ - カテゴリー: Webデザイン 日本語の場合は、通常表示エリアに対して文字単位で折り返しがされるので（句読点等の禁則処理は別だけど）、我々日本人にはあまり馴染みがないのだが、英文というのは英単語で折り返しされてしまう。　 なので、通常の仕様だと、上の写真のタイトルのように半角英字がスペースもなく入力されていると、エリアからはみ出るのが普通です。 英文はスペースやハイフンがないと折り返しされない 英文というのは、連続する半角英数をひとかたまりとして、スペースやハイフンが間あると折り返しになる仕様になっている。ハイフンはハイフネー... --- ### 【jQuery】スクロール量とページの高さを取得して円グラフで残量を表示 > スクロール量に応じて円の縁が一周するマイクロインタラクションなパーツをjQueryとCSSで制作してみた。 - Published: 2022-01-03 - Modified: 2022-08-21 - URL: https://nakata.design/jquery-get-the-scroll-amount-and-page-height-and-display-the-remaining-amount-in-a-pie-chart/ - カテゴリー: Webデザイン - オススメ: ★ 色々調べていたのだが、纏まってちゃんと説明されているページが見当たらなかったので作ってみました。 このサイトでも右下の「上部へ戻る」メニューに利用しています。追記）その後、グラデを重ねて少しデザインを変えました。 Statusbrew きっかけは、こちらのサイト「Statusbrew」。 スクロール量に応じて円の縁が一周する仕様 SNSの予約投稿ツールStatusbrewのサイトの記事に、スクロール量を表示しているパーツがあり、これをとても気に入って自分でも作ってみました。 こういった小さな演出... ---