{"id":18538716,"url":"https://github.com/hatena/hatena-blog-theme-boilerplate","last_synced_at":"2025-10-10T14:35:07.564Z","repository":{"id":25824635,"uuid":"106503796","full_name":"hatena/Hatena-Blog-Theme-Boilerplate","owner":"hatena","description":null,"archived":false,"fork":false,"pushed_at":"2024-06-13T07:13:52.000Z","size":68,"stargazers_count":52,"open_issues_count":1,"forks_count":24,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-02-17T08:12:22.726Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://help.hatenablog.com/entry/theme/custom-theme","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hatena.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-11T04:00:54.000Z","updated_at":"2025-02-03T18:10:36.000Z","dependencies_parsed_at":"2024-11-06T19:46:22.524Z","dependency_job_id":"4c75ad84-a0ca-4b20-a970-137af13d0967","html_url":"https://github.com/hatena/Hatena-Blog-Theme-Boilerplate","commit_stats":null,"previous_names":[],"tags_count":2,"template":true,"template_full_name":null,"purl":"pkg:github/hatena/Hatena-Blog-Theme-Boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hatena%2FHatena-Blog-Theme-Boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hatena%2FHatena-Blog-Theme-Boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hatena%2FHatena-Blog-Theme-Boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hatena%2FHatena-Blog-Theme-Boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hatena","download_url":"https://codeload.github.com/hatena/Hatena-Blog-Theme-Boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hatena%2FHatena-Blog-Theme-Boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279004165,"owners_count":26083688,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T19:44:46.993Z","updated_at":"2025-10-10T14:35:07.533Z","avatar_url":"https://github.com/hatena.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hatena-Blog-Theme-Boilerplate\n\nBoilerplate は、はてなブログのデザインCSSカスタマイズの土台に適したデザインテーマです。\n\nはてなブログの必要最小限の見た目が調整されています。「オリジナルテーマの制作にチャレンジしたいけど、0から作るのが大変」という方は、このデザインテーマをもとにしてCSSを書くと比較的楽にテーマが作れます。\n\n*Boilerplateは自己責任でご利用ください。お問い合わせははてなブログのサポートフォームではなく、本リポジトリのIssueにお願いします。*\n\nデザインテーマの制作にあたっては下記ヘルプページも参考にしてください。\n\n- [デザインテーマ制作の手引き - はてなブログ ヘルプ](https://help.hatenablog.com/entry/theme/custom-theme)\n\n# CSSのダウンロード\n\n最新のバージョンから `boilerplate.css` をダウンロードしてください。\n\n- \u003chttps://github.com/hatena/Hatena-Blog-Theme-Boilerplate/releases\u003e\n\n# セットアップ\n\nSCSSで開発する場合は、下記の手順でリポジトリのcloneとモジュールのインストールを行います。\n\n## 必須コンポーネント\n\n- [Node.js](https://nodejs.org/)\n\n## モジュールのインストール\n\n``` console\n$ git clone https://github.com/hatena/Hatena-Blog-Theme-Boilerplate.git\n$ cd Hatena-Blog-Theme-Boilerplate\n$ npm install\n```\n\n# テーマ開発の手順\n\n## 開発サーバーの利用\n\n開発サーバーを利用することで、SCSSの変更をリアルタイムにブログに反映させながらテーマの開発を行えます。\n\nまずは[はてなブログ](https://blog.hatena.ne.jp/)の設定を行います。\n\n1. テーマの動作確認に使うブログを1つ用意します。（普段お使いのブログとは別にブログを作成してください。）\n2. 1.のブログの「デザイン設定」にアクセスし、「カスタマイズ」タブの「デザインCSS」の内容を下記に置き換えて保存します。\n    ``` css\n    /* Responsive: yes */\n    ```\n3. 1.のブログの「設定」-\u003e「詳細設定」にアクセスし、「\u0026lt;head\u0026gt;要素にメタデータを追加」を下記に置き換えて保存します。\n    ``` html\n    \u003cscript type=\"module\" src=\"http://localhost:5173/@vite/client\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"http://localhost:5173/scss/boilerplate.scss\" crossorigin=\"anonymous\" /\u003e\n    ```\n\nつづいて下記のコマンドで、開発サーバーを起動します。`BLOG_DOMAIN_NAME` の部分には、上で用意した動作確認に使うブログのドメイン名 (例: `example.hatenablog.com`) を入力してください。\n\n``` console\n$ npm start -- BLOG_DOMAIN_NAME\n```\n\nコマンド実行例:\n\n``` console\n$ npm start -- example.hatenablog.com\n```\n\n以上が完了すると、動作確認用のブログに開発中のテーマが反映されます。ブログにアクセスし、表示を確認しながらテーマの開発を行なってください。\n\n## コンパイル\n\nテーマの開発が完了したら、下記のコマンドでSCSSをコンパイルします。コンパイルの結果は `build/boilderplate.css` に出力されます。\n\n``` console\n$ npm run build\n```\n\n# 構成\n\n```\nboilerplate/\n┣┳ scss/\n┃┗┳ lib/\n┃ ┗ boilerplate.scss\n┗┳ build/\n ┗ boilerplate.css\n```\n\n# ライセンス\n\nこのCSSおよびSCSSファイルはMITライセンスのもと自由に複製・再配布できます。 記事本文の書式やコメント欄のスタイルなど、必要な部分だけをコピーして使ってもかまいません。 このデザインテーマをもとにしたテーマの配布も自由です。\n\n# 過去のバージョン\n\n- \u003chttps://github.com/hatena/Hatena-Blog-Theme-Boilerplate-Less\u003e\n  - BoilerplateのLessバージョンです。（開発終了）\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhatena%2Fhatena-blog-theme-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhatena%2Fhatena-blog-theme-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhatena%2Fhatena-blog-theme-boilerplate/lists"}