【注意‼】WordPressに引っ越ししました、改正が間に合っていない記事があります。

Comfortを導入したらまずすべきことを順を追って説明する。

f:id:oyomiyo:20180606235751j:plain

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

今から導入時に設定しておいてほしいことを順を追って説明していきます。

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

テーマのダウンロードが終わったら、設定→詳細設定と進みます。

f:id:oyomiyo:20180524152550p:plain

まずはトップページを一覧形式にします。

f:id:oyomiyo:20180524160238p:plain

もちろん、必ずしも一覧形式でないといけない訳ではありませんが、Comfortはせっかくカードデザインなので….

*追記:トップページの一覧形式はpro版のみの機能のようです。通常版の方申し訳ありません….

headにコードを追加する

そのままスクロールしていき「headに要素を追加」という部分を探してください。

その部分に以下のコードを追加してください。

CSS

<script src="https://use.fontawesome.com/8049687c51.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />

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

f:id:oyomiyo:20180524153343p:plain

ウェブフォントを使いたくない場合

ちなみにこのコードの中には、GoogleFontsのコードも含まれています。このコードを追加した時点でブログ上に反映されるようになりますが、もしウェブフォントを使いたくない場合は、先程のコードの代わりに以下のコードを追加してください。

CSS

<script src="https://use.fontawesome.com/8049687c51.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

恐らくほとんどの人は気にならないと思いますから、特に気にする必要はありません。

コードを追加したら、一番下までスクロールして変更を保存するのを忘れないでください。

レスポンシブデザインの設定をする

当テーマはレスポンシブデザインテーマですから、スマホ表示のデザインも既に設定してあります。そのため、スマホでもレスポンシブ表示になるよう設定します。

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

f:id:oyomiyo:20180531111654p:plain

以上で基本的な設定は終わりですが、更にしておくとよい設定がありますからこれから説明します。

サイドバーの設定

Comfortでは、サイドバーにサムネイルとタイトルのシンプルな記事リンクが表示されるように設定されています。

ダッシュボードから、デザイン→工具マーク→サイドバーと進み、「サムネイル画像を表示する」の部分にチェックを入れるようにしてください。

f:id:oyomiyo:20180530234517p:plain

サムネイルを表示しない場合もレイアウトが崩れないように設定してはいますが、やはり少し寂しい気がしますので、この設定をすることをお勧めします。(人気記事、関連記事、注目記事等も同じ設定にするといいと思います。)

ブックマーク数やカテゴリーを表示することももちろんできますが、記事のタイトルが長すぎてカードからはみ出してしまう場合のみ、自動的に隠れるようになっています。

レイアウトが崩れるのを防ぐために仕方がないことではありますが、どうしても表示したい場合はタイトルそのものの文字数を減らすか、表示する文字数をへらす(先程の設定画面内で設定できる)ことで解決できます。

ソーシャルボタンを隠す

ソーシャルボタン(はてなスター)とは以下の部分のことです。

f:id:oyomiyo:20180531000202p:plain

消さなくても全く問題はありませんが、個人的にはこれがないほうがすっきりしていて見栄えがいいと思います。

デフォルトで消しておいても良かったかなとも思いましたが、表示したい人もいると思いますし、何よりはてな側から何か言われないか心配だったので、不要な人だけ後で消す方法をとりました。

f:id:oyomiyo:20180531000733p:plain

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

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

CSS

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

記入する場所はどこでも大丈夫ですが、とりあえず一番上あたりにコピペしておくといいと思います。

このような表示になるはずです。

f:id:oyomiyo:20180531001109p:plain

この方がすっきりして見栄えがいいでしょう。

次はスライドメニューを設置していきます。別記事で紹介しているので、以下のリンクから移動してください。

Comfort(コンフォート)にスライドメニューを設置して、自分好みにカスタマイズする方法

必要な設定に気付き次第適時追加していきます。今回は以上で終わりです。