KOALAを導入した後の初期設定とまずしてほしいことを説明していく

Koalaをダウンロードいただきありがとうございます。

この記事では、初期設定の段階でしておいてほしいことを解説します。

トップページを一覧形式に

前テーマComfortの時と同様、カード型デザインになっているためトップページは一覧形式にしておくことをお勧めします。

残念ながらPro版でない人はこの設定ができないようですが、いずれにしても見栄えがいいように設定していますので自信を持って使っていただきたいです。

f:id:oyomiyo:20180716162542p:plain

設定→詳細設定と進み、

f:id:oyomiyo:20180716162652p:plain

トップページを一覧形式にして下さい。

headにコード入れる

先程の詳細設定のページをそのままスクロールしていき「headに要素を追加」という部分に以下のコードを追加します。

CSS

<script defer src="https://use.fontawesome.com/releases/v5.1.1/js/all.js" integrity="sha384-BtvRZcyfv4r0x/phJt9Y9HhnN5ur1Z+kZbKVgzVBAlQZX4jvAuImlIz+bG7TS00a" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

ちなみにこの中には、viewportと呼ばれる、レスポンシブデザインでよく使用されるコードと。ウェブアイコンフォントのスクリプトが書かれています。

viewportについては、レスポンシブテーマをダウンロードした時点で勝手に挿入されるようはてな側で設定されているようですが、中にはうまくいかない人もいるようですので一応含めておきました。

アイコンフォントは定番の「font awesome」を使用しています。Koalaではスライドメニューのアイコンをこれで表示します。スライドメニューでアイコンを使わない人もいるかと思いますが、スライドメニューに限らずどこでも使えるので入れておいて損はないでしょう。

挿入する場所は、設定→詳細設定と進み、「headに要素を追加」の部分に先程のコードをコピペします。

挿入すると以下の画像のようになるはずです。

f:id:oyomiyo:20180720135311p:plain

最後に下までスクロールして「変更する」を押し忘れないようにしましょう。

レスポンシブ表示にする

当テーマはレスポンシブデザインテーマです。

ダッシュボードから、デザイン→スマホマーク→詳細設定と進み、レスポンシブデザインのところにチェックを入れてください。

f:id:oyomiyo:20180801111517p:plain

サムネイル画像を表示する

Koalaでは、サイドバーに関連記事や人気記事を表示した場合、サムネイルとタイトルのシンプルな記事リンクが表示されます。
ダッシュボードから、デザイン→工具マーク→サイドバーと進み、最新記事であればその中の、「サムネイル画像を表示する」の部分にチェックを入れるようにしてください。

f:id:oyomiyo:20180722195714p:plain

ちなみに画像のサイズ変更の欄がありますが。この部分は変更しても反映されません。カード型デザインの場合は画像をすべてカードの中に収める必要があるため、サムネイル画像の大きさは全て固定されています。

はてなスターを表示する

はてなスターを表示したい方だけが対象です。

はてなスターは本来以下の位置に表示されます(Koalaでは非表示です)。

f:id:oyomiyo:20180722195809p:plain

当テーマではカードの上をなるべくシンプルにしたかったので、ソーシャルボタンはインストールした時点で表示されないように設定しました。そのため特に変更を加えなければ、デフォルトの状態で非表示です。

前テーマのComfortではデフォルトで表示するようにしていましたが、わざわざ非表示にしておられる方もおられましたし、見た目的にも邪魔だと感じる人が多いように感じます。

テーマの導入後にいろいろいじるのが面倒な方がほとんどだと思いますから、今回は非表示でいきたいと思います。

必要な方は以下の方法で簡単に表示できます。

はてなスターを表示する

ダッシュボードから、デザイン→工具マーク→ヘッダと進み、タイトル下の部分に、上画像を参考にコードを記入してください。

以下が載せるコードです。

CSS

<style type="text/css">
.archive-entry .social-buttons {
    display: block !important;
}
</style>

スライドメニューを設置する

長くなったので別記事にしました。

KOALAにスライドメニューを設置する方法

とりあえず以上です。

必要な設定に気づき次第追加していきますのでよろしくお願いします。