やつはしのお買い物ブログ

ほぼ毎日買い物しているOL。低身長×ファッション・美容と健康・趣味・その他生活用品の本音レビュー

【初心者】コピペOK!超簡単にはてなブログのデザインを設定する方法【CSS】

f:id:yatsuhashi888:20191023004028j:image

 

 

 

この記事では、

手っ取り早くそれっぽいデザインにしたい!

PCとスマホのデザイン両方終わらせたい!

早くデザイン設定終わらせて記事を書きたい!

という方に向けて、

この設定だけすればそれっぽくなるよ!という設定方法を書いていきます。

 

主に説明するのは

  1. ブログ全体のデザイン設定
  2. 見出しのデザイン設定

の2つです!

 

目次

 

 

ブログ全体のデザインを設定する

これ以降はどの順番でやっても良いですが、上から順番に行うことをお勧めします。

 

まずブログ全体のデザインを決めます。

PCのデザインを設定する

スマホのデザインをPCと同じものにする

という順番になりますので、まずはPCのデザインを設定していきます。

 

公式テーマを設定する

はてなブログの管理画面から、

デザイン>パレットのマークのタブ(テーマ選択)で公式テーマの中から選択します。

f:id:yatsuhashi888:20191023004145p:image
f:id:yatsuhashi888:20191023004141p:image

 

このブログは「Reach」というデザインに設定しています。

選択するときに気をつけるべきことはただ1つ!!

 

レスポンシブデザイン対応のデザインにすること!!

 

スマホ版のデザインをPCと同じように表示させるための設定です。

公式テーマの中で、レスポンシブデザイン対応のテーマはこちらの記事にまとめました。

▼この記事の一覧から選ぶことを推奨します。

 

 

面倒な方は、私と同じ「Reach」を選んで下さい。

自分で調べる場合は、テーマストアの公式テーマの各詳細を確認し、「レスポンシブデザイン対応」と記載されているものを選んでください。

 

 (Proの場合)トップページを記事一覧に設定

トップページは「一覧形式」に変更しておくことをお勧めします。 

(※有料サービスであるはてなPROに申し込んでいないと設定できません!)

 

管理画面から

設定>詳細設定>トップページの表示形式>「記事一覧」を選択

f:id:yatsuhashi888:20191023004330p:image

 

余談ですが、PROにするメリットの一つはこの「記事一覧」設定だと思います。

全文表示は見づらすぎて、私がブログを訪れた側だったら見る気がしません。。。 

 

 

スマホ版のデザインを設定

 

ブログ全体のデザインと記事一覧設定(PRO限定)のPCデザインを、スマホに反映させましょう。

管理画面から、

デザイン>スマホマークのタブ>詳細設定>「レスポンシブデザイン」にチェック

f:id:yatsuhashi888:20191023010538j:image

 

です。これでスマホにデザインが反映されます!

これ以降に設定する見出しのデザインも、この設定をしておけばスマホ版にも反映されます。

 

 

見出しのデザインを設定する 

全体のデザインが決まったら、次は見出しのデザインです。

次の手順で設定していきましょう。 

 

大中小の見出しを設定する

 

まず管理画面から、

デザイン>スパナのマーク🔧>デザインCSS を開き、見出しのCSSをコピペします。

考えるのが面倒な方は、以下の通りコピペしていただければ、

大中小見出しが画像のように設定されます。

▼コピペする場所

f:id:yatsuhashi888:20191023010426p:image

 

▼コピペする文章

h3 {
padding: .5em .75em;
background-color: #bad3ff;
border-bottom: 1px solid #ccc;
}
h4 {
position: relative;
padding: .75em 1em .75em 1.5em;
border: 1px solid #ccc;
}
h4::after {
position: absolute;
top: .5em;
left: .5em;
content: '';
width: 6px;
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #bad3ff;
border-radius: 4px;
}
h5 {
position: relative;
padding: 0 .5em .5em 1.7em;
border-bottom: 1px solid #bad3ff;
}
h5::after {
position: absolute;
top: .4em;
left: .4em;
z-index: 2;
content: '';
width: 12px;
height: 12px;
background-color: #bad3ff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

 

▼見出しの見本

f:id:yatsuhashi888:20191023015054j:image

 

(参考)見出しCSSコピペについて

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld

h1の部分さえ変更すれば、そのまんまコピペで設定できます。

一番使わせていただいた記事です。ありがたや。

 

 

 

以上の設定を終えれば、パッと見それらしいブログデザインになります!

お疲れ様でした!!

 

 

 デザイン設定がうまく表示されない場合

 見出しなどのデザイン設定が上手く表示されない方のために、

私がよくやってしまっていたミスを紹介しておきます。

 

デザイン設定画面の保存を忘れている

f:id:yatsuhashi888:20191023010439j:image

 

デザイン設定は、些細な変更でも毎回

「変更を保存する」ボタンをマメに押す必要があります。

これを忘れると、全く設定が反映されませんので気をつけてください!

私は、もはやデザイン設定画面を開いたら、何も変えてなくても保存しています。

 

見出し設定をh1またはh2にしている

 

見出しデザインのCSSを設定するとき、一番最初にh3とかh4などhから始まる文字がありますが、はてなブログでは

大見出し h3

中見出し h4

小見出し h5

になります。ですがコピペOKのサイトなどはh2やh1になっていることが多々あり、

これを忘れて設定したせいで記事にデザインが反映されていないというミスをよくやってしまっていました。

 

詳しい人からしたら初歩的すぎるミスかもしれませんが、

お気をつけください!!

 

 

やつはし