はてなブログのデザインを「Minimalism」に変更して、カスタマイズしてみました
超初心者でもできた！コピペで行う、はてなブログ「Minimalism」のブログカスタマイズ
はてなブログを使い始めて3ヶ月。
1日1記事を目標に記事を書き、今まではそれだけでもう精一杯だったのですが。
100記事を目前にして、はてなブログのデザインを変えてみようと思い、やってみました。
ちなみに、変更前のデザインは…
今まで使っていたのは、はてなブログの公式テーマの「Life」というのを使っていました。
このデザインは、1カラムで、トップページを見ると最新記事の中身がバーンと掲載されている、というスタイルです。
今回行ったデザインの変更の概要
今回の、初めてのデザイン変更では、以下のことをやってみました。
✳︎ はてなブログのテーマストアから「Minimalism」をインストール
✳︎ レスポンシブデザインに設定
✳︎ ナビゲーションメニューを設置
✳︎ ナビゲーションメニューの変更
✳︎ 記事下にシェアボタンが表示されるよう設定
✳︎ 記事内の見出しデザインを変更
✳︎ お問い合わせフォームの設置
これで、ちょっとホームページ風な感じになります。
PCで見ると2カラムのレイアウトになるので、記事以外の情報も同時に見てもらえたり。
また、タイトル下にメニューができるので、カテゴリー別に見やすくなったり。
カスタマイズの参考にしたもの
今回のブログデザインの変更やカスタマイズで参考にしたものです。
書籍：「本気で稼げるアフィリエイトブログ」
アフィリエイトで夢を叶えた元OLブロガーが教える 本気で稼げるアフィリエイトブログ 収益・集客が1.5倍UPするプロの技79【電子書籍】[ 亀山ルカ ]
ブログを始める前に購入して、持っていたもの。
王道の内容が書かれてあって、バイブル的に使っています。
ウェブサイト：はてなブログのデザインテーマ「Minimalism」の「使い方・注意事項」ページ
今回、ブログのデザインで使わせてもらった、はてなブログのテーマストアにある「Minimalism」というデザインテーマ。
このページ内に、デザイン変更した後にカスタマイズをする方法が載っています。
ウェブサイト：原色大辞典
自分のブログのテーマカラーなど、色を決めて変更したい時に必要なのが、カラーコード。
「#f5deb3」など、＃から始まって6桁の英数字の組み合わせでできています。
自分の使いたい色が、カラーコードでは何になるのかが分かるサイトが、web色見本サイトの「原色大辞典」です。
ウェブサイト：見出しのデザイン例
記事の中の3種類の見出し（大見出し・中見出し・小見出し）のデザインを決めるために参考にしました。
✳︎ CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
こちらは、先に紹介した、はてなブログのデザインテーマ「Minimalism」の「使い方・注意事項」ページの中で紹介されていたサイトです。
✳︎ 「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」
こちらは、私が今回ググって見つけたサイトです。
ウェブサイト：Font Awesomeというアイコンを見つけるサイト
Font Awesomeアイコンを素早く検索しコピー。Photoshopなどでの使い方
これらを駆使して、ちょっと試行錯誤もしましたが、おおむね簡単コピペ作業で、デザインの変更からカスタマイズまでできたので、その実践記録をご紹介します。↓
✳︎ はてなブログのテーマストアから「Minimalism」をインストール
kayoko＠おうちcafe
