はてなブログのデザインにこだわりたい

このブログは夫婦でアフィリエイトブログを運営してみた経過を綴る実践記録です。

ダンナ：理系。20代後半。「まずはやってみよう！」のタイプ。職業はITエンジニア。

ヨメ：文系。20代後半。地味にコツコツ作業するタイプ。現在は専業主婦。

はてなブログ全体のデザイン

はてなブログでは、テンプレートから全体的なブログデザインを選ぶことができます。

自分で配置などを考える必要はなく、既に完成しているデザインなので簡単です。

我々は、「カラム」という1ページを縦に分割する単位が1のデザインの中から選んでみました。

すっきりしたデザインで見やすく、2カラムや3カラムよりも現代的な印象です。

ちなみにカラムという言葉、文系ヨメは初めて聞きました。理系ダンナは知っていたみたいです。

詳しく知りたい方は下記を参照してみるといいと思います。

PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ

はてなブログの記事の書き方

見たまま編集　やってみたら

はてなブログの「記事を書く」で記事編集画面を開くと、

「見たまま編集」

「markdown形式」

「はてな記法」

「HTML編集」

というよくわからない選択肢が。

とりあえず簡単そうな方法で、と「見たまま編集」で書き始めてみたヨメ、絶望。

はてなブログの見たまま編集は見やすい記事が書きづらい

wordみたいな感じで書けるのかなと思っていたけれど、wordよりも数倍使いづらいです。

そして、装飾の選択肢がとても少ないです。

markdown形式　やってみた

そしてやってみたのがmarkdown形式。

記事作成画面とは別に、管理画面にある「デザインCSS」という欄にあるCSSコードと連携することで

自分好みにカスタマイズしたデザインを埋め込むことができます。

カスタマイズの方法は、教科書として購入した本を参照しました。

アフィリエイトで夢を叶えた元OLブロガーが教える本気で稼げるアフィリエイトブログ 収益・集客が1．5倍UPするプロの技79 [ 亀山ルカ ] 価格：1738円（税込、送料無料) (2020/3/1時点)

プログラミングみたいなことをやったことがない文系ヨメのような人間には、

本を見ながらでも正直結構しんどかったです。

理系ダンナの助けがなかったら2〜3日は費やしてたかもしれません。

ただ、これを理解できればブログ記事に好きな色の下線をつけたり

見出しに装飾をつけたり、自由自在にできるようになる！

と思いながら挑戦したら、なんとなくはできるようになったので

同じく初心者の皆さん、どうかここでアフィブログ開設を諦めないでください。

色に統一感をもたせる方法

CSSでは、色のコードを入力することで文字や装飾に好きな色を使用することができます。

「CSS　カラーコード」

などで入力すると色見本とコードがわかるサイトが出てきます。

我々は、下のサイトからフラットデザインの色を採用しました。

色調を合わせたテーマごとに色がまとめられているので

同じテーマから選ぶようにすると、配色センスに自信がない方でも全体に統一感が出せます。

Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨

まとめ　はてなブログのデザインにこだわるなら

おすすめはmarkdown形式

初心者はコードをググりながらチャレンジ

CSSコードは「CSS　なみなみ線」「CSS　背景色」のように

やりたいことをキーワードに検索するとそれを再現するためのコードを紹介しているサイトが見つかります。

やっていくうちに色々なデザインを挿入できるようになりそうです。ヨメもまだまだ勉強途中。

少しでもこれからアフィブログを始める方の参考になれば嬉しいです。