「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" 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.」をどうぞお楽しみくださいませ。
注意事項
- ブログ名を画像にしないでください
Museum of Contemporary
例のごとく「14時あたりを目安に…」なんてゆるりと集まるのがわたしたちのペース。今回、わたしより早く着いた彼女は現代美術館で待ってるねという。
「ごめん いま駅に着いた！」とあわててメッセンジャーに打ち込み清澄白河駅の出口階段を大急ぎで駆け上がる。
その瞬間、心地よい春の陽気とうららかな風がそよそよと頬をなでた。
今日は絶対に素晴らしい日になるよ、と約束してくれている気がした。
息を切らして到着するやいなや、彼女とのひさびさの再会にきゃあきゃあとはしゃぎ頬を緩ませる。
そして3年ぶりにリニューアルオープンをした現代美術館のモダンな建造物に大興奮。まるで日本じゃないみたい…
だって、びっくりするほど どこを切り取っても美しいんだ！
すっかり鼻息を荒くしたわたしたちは夢中でシャッターを切りつづけた。
