はてなブログ公式の特集。編集部が気になるブログをピックアップしています。

【0からはじめるブログデザイン】CSS初心者でも活用できるこだわりデザインカスタマイズの記事を集めました!

0からはじめるブログデザイン

はてなブログでは現在「デザインテーマコンテスト」を開催中です! そこでCSSに馴染みのない方も挑戦しやすいよう「0からはじめるブログデザイン」と題し、簡単なデザインカスタマイズからデザインテーマ作成まではてなブロガーさんのアイデアが詰まった記事をご紹介する連載を始めます。

第1回となる今回は、CSSって難しそう……と感じている方に向けて、簡単な「デザインカスタマイズ」を紹介した記事を集めました!

ほとんどがCSS初心者も活用できるものばかり。是非参考にしてみてください。

記事の印象をガラッと変える、オリジナル目次の作り方

www.beautyaroma217.com

M(id:lifeishappy_right)さんは初心者向けに「目次の作成方法と簡単カスタマイズ4種類」を紹介しています。個性的な目次は記事の印象をグッと変えるので最初にカスタマイズするのに良いかもしれませんね!

記事のアピールポイントを好きな色で強調

www.freelifekyoka.info

記事の中で”ここは絶対読んでほしい”というポイントはアピールしたいもの。そこできょうか (id:scholarship_uni)さんは自分の好きな色で「蛍光ペンみたいな線を引く」CSSをブログに掲載しています。

ブログにおいてユーザーが一番目にするものといえば文字! 文字を自分の好みにカスタマイズする方法

petitmatch.hatenablog.com

イラストレーターのオオスキ トモコ(id:cafe_petit)さんは「ユニバーサルデザインフォント」を利用してブログのフォントを変更する方法を解説しています。イラストの雰囲気にぴったりなフォント、素敵ですね。

人気テーマの作者が紹介する「サイドバーカスタマイズ」

blog.minimal-green.com

はてなブログの人気デザインテーマ「Minimal Green」や「Haruni」の製作者であるMinimal Green(id:minimalgreen)さんはブログでさまざまな「サイドバーカスタマイズ」を紹介しています。基本のCSSから「シンプル」「ポップ系」など系統ごとにわかりやすくまとまっています。

【超個性派】CSSの知識0、コピペのみで行ったオリジナルブログデザインの制作過程を解説

vtuber-hudan.hatenablog.com

初心者でも色々な呪文をコピペするだけでびっくりするほど見やすくできたから感動したぜ…!

CSSの知識0だったという不断シエル (id:VtuberHudan)さんは人気テーマ「Brooklyn」を基盤にさまざまなブログからカスタマイズ方法を調べて参考にしたそうです。

◇◇◇


はてなブログの「テーマストア 」には2020年12月の時点で、ユーザーさまによるテーマは1500件以上、公式テーマは30件以上のデザインテーマ が集まっています。ブログで自分の個性を発揮したいけどなかなか難しい、という方はまず好みのテーマを探してみるのもおすすめです!

デザインCSSを活用してより自分らしさを演出したい、という方は「デザインCSSを記述する - はてなブログ ヘルプ」も参考にしてみてくださいね!

デザイン設定画面を開く

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

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