「JOURNAL.」をインストールしたら、はじめに設定する4つのこと
はてなブログのデザインテーマ「JOURNAL.」をこの見本ブログの通りに使用するために、必ず設定していただきたいことが4点あります。
設定すること
- スマホでも見れるようにする
- WEBフォントを読込む
- ブログタイトルの背景画像
- メニューの設定
この記事では、以上の4点について手順を簡単に説明いたします。
- 0. はじめの状態
- 1. スマホでも見れるようにする
- 2. WEBフォントを読み込ませる
- 3. ブログ名の背景画像を設定する(希望する場合)
- 4. ブログタイトル下にメニューを入れる(希望する場合)
- 完成
- 注意事項
- その他カスタマイズ
0. はじめの状態
みなさん、インストールしただけだとこんな感じになっているのではないでしょうか。
ご安心ください、これから設定方法をお伝えいたします。
2. WEBフォントを読み込ませる
このブログの特徴でもある洋書のようなブログタイトルの文字にするためには、専用のフォントを読み込ませなくてはいけません。
下記のコードを指定の場所にコピペしてください。
記入する場所
設定 ▷ 詳細設定 ▷ headに要素を追加
記入するコード
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Overpass:400,700" rel="stylesheet">
3. ブログ名の背景画像を設定する(希望する場合)
次に、現在ベージュ一色となっているブログ名の背景に画像を表示する設定をします。
下記のコードをデザイン設定にある「デザインCSS」に記入してください。
※もし今すぐ設定したい画像がなければスキップすることも可能です。
記入するコード
#blog-title { background-image: url(https://●画像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」と「メニュー名」はご自由にご変更ください。
完成
以上、4点を設定するといま見ているこのブログと同じデザインになるかと思います。
ここまでお読みくださった方、デザインテーマをダウンロードしてくださった方、ありがとうございました。
それでは、デザインテーマ「JOURNAL.」をどうぞお楽しみくださいませ。
注意事項
- ブログ名を画像にしないでください
よくある質問と簡単なカスタマイズ方法
この記事では、わたしが制作したはてなブログのデザインテーマ「JOURNAL.」によせられた質問への回答とカスタマイズ方法をご説明します。
まずは「初期設定」を行ってから、こちらのカスタマイズをご利用ください。
また、他のデザインテーマでも使用できるかもしれませんが不具合が起きる可能性もあるのでご注意ください。
インストールしただけの見え方は?
- ブログ名が日本語
- 設定画面で「ブログ説明(description)」を入力している
- 背景は未設定
この場合、上記のように表示されます。
ブログ名関係
ブログ名の下線を消したい
下記のコードを「デザイン設定▷CSS」にコピペしてください
#title { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
背景画像関係
設定したい背景画像がない
設定しなければこのようにベージュの背景色となります。
背景画像を設定しないで、背景色だけ変えたい
下記のコードを「デザイン設定▷CSS」にコピペしてください
#blog-title:before { background-color: 【#お好きなカラーコード】;
記事について
記事一覧に表示される本文サイズを変更したい
下記のコードを「デザイン設定▷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; }
▼こちらもどうぞ