「JOURNAL.」をインストールしたら、はじめに設定する4つのこと

f:id:utataneclub:20190904230209p:plain

はてなブログのデザインテーマ「JOURNAL.」をこの見本ブログの通りに使用するために、必ず設定していただきたいことが4点あります。

設定すること

  1. スマホでも見れるようにする
  2. WEBフォントを読込む
  3. ブログタイトルの背景画像
  4. メニューの設定


この記事では、以上の4点について手順を簡単に説明いたします。

0. はじめの状態

f:id:utataneclub:20190905020529p:plain:w500

みなさん、インストールしただけだとこんな感じになっているのではないでしょうか。

ご安心ください、これから設定方法をお伝えいたします。


1. スマホでも見れるようにする

まず、スマホから見たときにデザインが反映するよう「レスポンシブデザイン」の設定をします。

設定する場所

デザイン設定 ▷ スマートフォン ▷ 詳細設定

f:id:utataneclub:20190905022425p:plain:w400

「レスポンシブデザイン」にチェックを入れてください。

2. WEBフォントを読み込ませる

このブログの特徴でもある洋書のようなブログタイトルの文字にするためには、専用のフォントを読み込ませなくてはいけません。

下記のコードを指定の場所にコピペしてください。

記入する場所

設定 ▷ 詳細設定 ▷ headに要素を追加

f:id:utataneclub:20190905022831p:plain:w400

記入するコード

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Overpass:400,700"  rel="stylesheet">

3. ブログ名の背景画像を設定する(希望する場合)

次に、現在ベージュ一色となっているブログ名の背景に画像を表示する設定をします。

下記のコードをデザイン設定にある「デザインCSSに記入してください。

※もし今すぐ設定したい画像がなければスキップすることも可能です。

記入する場所

デザイン設定 ▷ カスタマイズ ▷ デザインCSS

f:id:utataneclub:20190905022743p:plain:w400

記入するコード

#blog-title {
    background-image: url(https://●画像URL●);
}
  • 「画像URL」箇所は、希望する画像のURLをご記入ください。
  • どんな画像を設定しても馴染むよう、ベージュ色のベールを写真の上にかけています。

困ったら

  • 画像をアップロードする方法とは?
  • 画像URLの取得方法とは?

といったことに困ったら、「ブログタイトルの背景を好きな画像に設定する方法」をご覧ください。


4. ブログタイトル下にメニューを入れる(希望する場合)

下記のコードをデザイン設定にある「タイトル下」に記入してください。

記入する場所

デザイン設定 ▷ カスタマイズ ▷ ヘッダ ▷ タイトル下

記入するコード

<nav id="gnav">
	<div class="gnav-inner" id="menu-scroll">
		<div class="menu"><a href="URL">メニュー1</a></div>
		<div class="menu"><a href="URL">メニュー2</a></div>
		<div class="menu"><a href="URL">メニュー3</a></div>
		<div class="menu"><a href="URL">メニュー4</a></div>
		<div class="menu"><a href="URL">メニュー5</a></div>
		<div class="menu"><a href="URL">メニュー6</a></div>
		<div class="menu"><a href="URL">メニュー7</a></div>
    </div>
</nav>

※「URL」と「メニュー名」はご自由にご変更ください。



完成

f:id:utataneclub:20190905155715j:plain

以上、4点を設定するといま見ているこのブログと同じデザインになるかと思います。

ここまでお読みくださった方、デザインテーマをダウンロードしてくださった方、ありがとうございました。

それでは、デザインテーマ「JOURNAL.」をどうぞお楽しみくださいませ。



注意事項

  • ブログ名を画像にしないでください

その他カスタマイズ

  • 日本語タイトルにしたい
  • タイトル文字を小さくしたい
  • タイトル文字の横幅を広げたい

といったことでお困りの場合は「よくある質問とカスタマイズ方法」を参考にどうぞ。

よくある質問と簡単なカスタマイズ方法

f:id:utataneclub:20190906185306p:plain

この記事では、わたしが制作したはてなブログのデザインテーマ「JOURNAL.」によせられた質問への回答カスタマイズ方法をご説明します。

まずは「初期設定」を行ってから、こちらのカスタマイズをご利用ください。

また、他のデザインテーマでも使用できるかもしれませんが不具合が起きる可能性もあるのでご注意ください。

インストールしただけの見え方は?

f:id:utataneclub:20190905020529p:plain:w500

  • ブログ名が日本語
  • 設定画面で「ブログ説明(description)」を入力している
  • 背景は未設定

この場合、上記のように表示されます。



ブログ名関係

ブログ名の下線を消したい

下記のコードを「デザイン設定▷CSS」にコピペしてください

#title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

ブログ説明文をタイトルに表示したくない

下記のコードを「デザイン設定▷CSS」にコピペしてください

#blog-description {
    display: none; /*非表示にします*/
}

タイトル文字を小さくしたい

下記のコードを「デザイン設定▷CSS」にコピペしてください

#title {
    font-size: 120%; /*数字をご調整ください*/
}

タイトル文字の横幅を広げたい

下記のコードを「デザイン設定▷CSS」にコピペしてください

#title {
    width: 90%; /*数字をご調整ください*/
}

背景画像関係

設定したい背景画像がない

f:id:utataneclub:20190905020529p:plain

設定しなければこのようにベージュの背景色となります。


背景画像を設定しないで、背景色だけ変えたい

下記のコードを「デザイン設定▷CSS」にコピペしてください

#blog-title:before {
    background-color: 【#お好きなカラーコード】;

記事について

記事の本文サイズを変更したい

下記のコードを「デザイン設定▷CSS」にコピペしてください

.entry-content p {
    font-size: 100%; /*数字をご調整ください*/
}

記事一覧に表示される本文サイズを変更したい

下記のコードを「デザイン設定▷CSS」にコピペしてください

p.entry-description {
    font-size: 100%; /*数字をご調整ください*/
}

記事一覧で表示される画像を小さくしたい

下記のコードを「デザイン設定▷CSS」にコピペしてください

.page-archive .entry-thumb {
    width: 120px;
    height: 120px;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    float: left;
    margin: 5px 10px 0px 0px;
}

▼こちらもどうぞ