【0からはじめるブログデザイン】はじめてのデザインテーマ作成、 はてなブロガーたちがやったこととは?

アイキャッチ画像

はてなブログでは2021年2月26日(金)まで「デザインテーマコンテスト」を開催中です! そこで「0からはじめるブログデザイン」と題し簡単なデザインカスタマイズからデザインテーマ作成まではてなブロガーさんのアイディア詰まった記事をご紹介する連載をしています。

第2回は「デザインテーマを作ってみたい」と考えている方に向けて、「CSS初心者さんが参考にしたサイトまとめ」から「デザインテーマの制作の工程」までさまざまな記事をピックアップしました!

はてなブログのデザインテーマストアには、プロのデザイナーさんはもちろん、CSS初心者の方もたくさんテーマを投稿されています。

「CSSって難しそう……」と感じている方も、まずは記事を見て、作業の流れのイメージを膨らませてみてはどうでしょうか?

CSS初心者さんがデザインテーマを作るときに参考にしたサイトとは?

www.bambi.pro

私はまずはこの「boilerplate.css」をダウンロードして、これを変更して行くことからコツコツ始めました。

ブログを始めるまでCSSに触ったことがなかったという元CAバンビ (id:zuboraca)さん。初心者ながらブログに個性を出すべく様々なデザインカスタマイズを試したそう。その結果、今ではデザインテーマ 「Palette (パレット)」を自作するほどの腕前に。そんな元CAバンビさんがデザインテーマ制作過程で参考にしたサイトや書籍をブログにまとめています。

「せっかくCSSも覚えてきたし」非公開で自分専用のデザインテーマを作成

suito.hatenablog.com

自分専用のブログテーマが欲しくなったので初めて作ってみた。

はてなブログのデザインテーマ投稿機能では、テーマを「非公開」にすることで自分だけのデザインテーマ を作成することができます。
デザインテーマ「soboku」の制作者であるすい(id:suito15)さんもはじめてのデザインテーマ は自分専用で作成したようです。

デザインテーマ制作、その工程を詳しく紹介!

nasust.hatenablog.com

デザインテーマ 「monolithic」などを公開しているナス(id:nasust)さんは、デザインテーマ制作の工程をわかりやすく紹介しています。また自作のテーマを作成するメリットやデメリットも解説されていますのでぜひ参考にしてみてください!

デザインテーマをローカルで確認しながら作成する方法とは?

utataneclub.hatenablog.com

CSSをローカル環境(自分のパソコン上)で編集する場合のデザインテーマの制作、配布方法をデザインテーマ「JOURNAL.」を作成した うたたね(id:utataneclub)さんがブログにまとめています。

長文CSSをオンラインで編集、おすすめの方法を解説

redo5151.hatenablog.com

テーマ制作ではもちろん、ちょっとしたデザインカスタマイズなどでも、CSSが長文になると編集・管理はなかなか大変に。そこで、れど(id:redo5151)さんは、無料で使えるデータストレージサービス「Dropbox」を活用した長文CSSの管理、編集方法を紹介しています。

◇◇◇

はてなブログでは、デザインCSSをカスタマイズする土台に適したサンプルCSS「Boilerplate」を配布しています。はじめてデザインテーマを作成される場合は、まずこのサンプルテーマのCSSを編集するのがおすすめです。

help.hatenablog.com

テーマは非公開にすれば他の人に見られることなく自分だけのこだわりデザインを作成できますのでまずは気軽にチャレンジしてみてくださいね!

テーマを投稿する

テーマコンテストの詳細はこちら

※応募要項をよく読んだ上でご応募ください。なお、はてなスタッフが投稿を確認し、既存のデザインテーマの軽微な改変や実用が困難なテーマは対象外とします。

同シリーズの過去の記事を読みたい方はこちらから!

blog.hatenablog.com