むらたけ.net

むらたの人生で経験したお役立ち情報を書き綴るブログです

MENU

はてなブログProを初心者ブロガーが始めた手順5〜デザイン設定編〜

 


前回は基本設定について解説しました。

ハテナブログProを初心者が始めた手順4〜基本設定編〜 - むらたけ.net

今回はブログのデザイン設定を進めていこうと思います。

 

 

ブログのデザイン設定をする(所要時間トータル5分〜10分程度)

①デザインテーマを選ぶ

f:id:murata-ke:20210930050120p:plain

公式テーマから選択

赤枠のタブを選んでテンプレートを選択します。公式テーマの中にきいったものがあれば選択します。

が、正直なところもさっとしたデザインが多い印象です。

そういう時は次の方法を使います。

 

テーマストアでテーマを探す

f:id:murata-ke:20210930051012p:plain

公式テーマを下にスクロールしていくと「テーマストアでテーマを探す」があります。

そこをクリックします。

 

こだわりがなければMinimalismでOK!

f:id:murata-ke:20210930143952p:plain

他にもたくさんのデザインが用意されています
気に入ったデザインをクリックします

気に入ったものが見つかればそれを選択します。特にこれといったこだわりがない方は

「Minimalism」がオススメです。シンプルでカスタマイズしやすいということもあってか

2021年9月現在人気1位です。私もこのデザインにしました。もちろん無料です。

 

 


テーマをインストール

f:id:murata-ke:20210930151154p:plain

赤枠をクリック

ここからインストールします。

 

インストールしたテーマを設定する

f:id:murata-ke:20210930153852p:plain

デザイン設定画面に戻って①のボックスをクリックして「インストールしたテーマ」を選択します。次にインストールしたインストールしたテーマを選択し「変更を保存する」を忘れずにクリックして設定終了です。

②カスタマイズ

f:id:murata-ke:20210930154737p:plain

スパナマークをクリックしてカスタマイズしていきます。

 

背景画像・背景色はお好みで

好みに合わせて背景画像と背景色を設定します。私は背景画像なし、背景色白に設定しました。

 

ヘッダ画像の作成

こちらの記事

ブログのロゴやヘッダー画像を無料で作る方法! | とびんちゅメディア工房

を参考にしてCanvaというサイトで作成しました。

ちなみにこちらに有料登録するとかなりの数の素材が使えるようになります。

私はトライアルで登録してこのヘッダを作りました。

f:id:murata-ke:20210922212106p:plain

作成したものがこちらです

ヘッダ画像自体にタイトル名を入れたので「画像だけ表示」にしました。

 

デザインCSSで見出しをカスタマイズ

初心者にとって謎の横文字「CSS」。私もまだ勉強中なのですが、サイトをカスタマイズ

するのに使うプログラミングです。

こちらのサイト

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

から気に入ったデザインを選んでデザインCSSにコピー&ペーストするだけです。

一点注意が必要なのははてなブログの見出しは

 

・大見出し h3

・中見出し h4

・小見出し h5

となっている点です。

私の選んだ見出しで説明します。

 

f:id:murata-ke:20210930161019p:plain

大きな赤枠を全てコピーしてデザインCSSにペーストすればいいのですが、「h1」

という文字を半角で大見出しなら「h3」中見出しなら「h4」小見出しなら「h5」に変更する必要があります。

実際の私のデザインCSSがこちらです。

f:id:murata-ke:20210930161639p:plain

こう見るとかなり面倒くさそうに見えますが、先ほどのサイトからCSSコードをコピー&ペーストして先頭のh1を設定したい見出しの数字に帰るだけです。これだけでも見栄えが良くなりました。

 

お問い合わせフォームの作成(所要時間10分程度)

こちらの記事を参考に作成しました。すごく丁寧に解説されていたのですんなり設定できました。

【約10分で完了】はてなブログにお問い合わせフォームを設置する方法 - j-lifestyle日記

 

 

カスタマイズしようと思えばまだまだできるようですが、まだ勉強中なのでちょっとづつやっていこうと思います。

ブログ初心者の皆さん一緒に頑張りましょう。

今回は以上です。