【ミニマリスト向けのシンプルなテーマ】Minimalの編集方法

【ミニマリスト向けのシンプルなテーマ】Minimalの編集方法
テーマ購入を検討している方へ

2019年現在ではCocoonまたはSnow Monkeyを推奨しています

ブログ初心者にはSnow Monkeyの方が扱いやすいと感じました。購入を検討されている方は一度比較してみてください。

支払の注意点についてはこちらです。

この記事は以前使っていたテーマのメモです

コピペだけで必要な設定が済むようにまとめてみました。

2018年6月8日追記
デフォルトの状態では目次機能はついていません。プラグインを利用するか、HTMLコードを作成して記事に目次を挿入してください。後者のやり方だと任意の記事にのみ目次を入れることができます。

プラグインを利用する場合はサルワカさんの記事が参考になります。
» 目次プラグイン「TOC+」の設定方法 | SANGOカスタマイズガイド

1. 下準備

固定ページとカテゴリーを作成

【WordPress】初期設定はこれでOKの時に作ってあれば問題ないです。固定ページとカテゴリーのURLが必要なだけですので、中身は書いてなくても大丈夫です。

Minimalをアップロード

これも上の記事の通り、まずはFTPソフトをダウンロードしてください。ダウンロード後、FTPソフトを開いてサーバーにアクセスできれば大丈夫です。

次に、サーバー側の
「独自ドメイン名フォルダ」→「public_html」→「wp-content」→「themes」の中に解凍後のMinimalフォルダをドラッグしてコピーでアップロード完了です。

WordPressの「外観」→「テーマ」から有効化しましょう。

Minimal元データをコピーして保存

注意

必ず初期状態のデータを残しておくこと

各ファイルを編集するときはコピーした方を使ってください。

編集に失敗しても元データをアップロードすればすぐに復元できるからです。さらに、途中までの編集に成功したらその状態で別途保存してくとパーフェクト。一からやり直すのはホント大変なので…

コード例では3個記載していますが、必要に応じて数は増減できます。そのときもコピペで大丈夫です。

2. まずはMinimalのここだけ編集

Minimalでは以下の3ファイルの編集が必要です。

2-1. nav-menu

まずはナビにカテゴリーが表示されるようにします。

基本的に「ここに~」という部分だけ修正すればOKです。スラッグはカテゴリーを作ったときに入力した英単語ですね。(WordPressの「カテゴリー」から確認できます)


ただし、誤ってそれ以外の場所を消すとレイアウトが崩れます。そこだけ注意してください。以降の編集も同じです。

2-2. sidebar

次に、サイドバーにプロフィール画像とプロフィール内容を表示させます。

プロフィール画像は事前にメディアからアップロードしておいてください。

FTPソフトでMinimalフォルダのsidebarファイルをコピー。

ファイルを開いたらCtrl+Fで検索して<div class="col-xs-12 author">を見つけます。

その下の行を以下のように変更。

変えるところはここだけ。
サイドバーに固定ページへのリンクを張らない場合は<p>ここにプロフィール本文</p>から</div>までの間をまるっと削除してください。

2-3. footer

長くなるので1つずつ説明します。

About me! (フッター左)

表示したい固定ページのURLと固定ページ名を書くだけ。最初はプロフィール、プライバシーポリシー、お問い合わせで十分かなと。「何か一言」は書かなくても問題ないです。

Portfolio (フッター中央)

ブログを始めたばかりだと他サイトの作成実績とかありませんよね。その場合はひとまず「ここにタイトル」を「Category」に変更して、カテゴリURLとカテゴリ名にするのがおすすめです。特にルールはないので色々試してみてください。

Twitter(フッター右)

ツイッターのコード取得方法が変わったのでdata-widget-id=の部分をheight="400px"に変えています。ここの数字はお好みで変えてください。

Twitter PublishにツイッターのURLを入力→左側の「Embedded Timeline」を選択すると埋め込み用のコードが取得できます。これを上記の場所に貼り付ければOK。

Copyright (ブログ最下部)

ここで最後です!あなたの名前と、ブログを始めた西暦を入れるだけ。

ここまで編集したら一度保存。

次に編集後のファイルをFTPソフトでアップロード、各ファイルを上書き。最後に編集後のファイルをサーバー側にドラッグして終了です。

念のためアップロード後は必ずブログの表示確認を。変更が反映されていれば成功です。

これで後はブログを書くことに専念できます。まずはどんどん記事を書くことが大切です。

3. ブログの個性を出すには

いよいよ、ブログの個性を出すための編集です。

3-1. nav-menuにアイコン表示

nav-menuにアイコン表示


↑のようにカテゴリー名の横にアイコンを表示できます。内容がイメージしやすくなりますよね。

まず、下準備としてheader.phpの以下の部分を

このように置き換えます。

次に、

最初に設定したnav-menu.phpに、カテゴリ名の横に表示させたいFont Awesomeアイコンのコードを貼り付けるだけ。Font Awesomeから画像の赤枠部分をコピーしてください。
無料で使えるアイコンはFont Awesomeから探せます。

ちなみに、「カテゴリ名」の前に半角スペースを入れるといい感じに表示されます。(上記のコードは半角スペース込)

3-2. CSSで見出しや線の色を変える

「ここにカラーコード」のところを変更したいカラーコードに変えるだけ。hrがサイドバープロフィール画像下の線で、border-leftが見出し左側の太線です。

カラーコードを選ぶ時はColor – Style – Material Designが見やすくておすすめ。下にスクロールするとカラーコードがずらっとでてきます。

ここに関しては「外観」→「テーマの編集」→「style.css」から直接変えた方が楽でした。single hrsingle h2で検索すればすぐ見つかると思います。h3以降の色を変える時も同じです。

3-3. タイトルロゴ画像の設定

まず、タイトルロゴ画像をWordPressにアップロードします。続いて、header.phpを開きます。

この部分を次のように置き換えます。

すると、タイトルがテキストからタイトルロゴ画像に変わります。スマホにも反映されているはず。

ファビコンの設定

ファビコンの設定
 

まずはファビコンを作成します。私はICOOON MONOを使いました。ダウンロードする時はPNGでOKです。
この時にカラーコードを入力して色を変えることもできます。

ブログを始める前に決めておくべき5つのことにも書きましたが、色を先に決めておくと迷わずに済みますよ。

次にファビコン作成 favicon.icoでico.形式に変換。

ここまでできたらWordPressにアップロードします。メディアから新規追加しましょう。

最後に、header.php内のこの部分を

以下のように置き換えます。

これでタブの部分にファビコンが表示されます。
うまく表示されない場合はChromeがキャッシュしているfaviconを削除するを参考にキャッシュ削除を。

細かな設定

後は見た目の問題ですね。気になる方は設定することをおすすめします。

アドセンス記事下に余白を入れる

設定しておかないとこんな感じになります。スマホだと特に余白が少ないですね。

そこで、CSSに以下を追加しましょう。スタイルシートの一番下とかで大丈夫です。

商品リンク

PA-APIの規約変更により、カエレバでAmazonを利用できなくなってしまったので削除しました。

まずは記事を更新することに専念。次にAmazonアソシエイトに登録してPA-API経由の売上を発生。それから商品リンク作成用プラグインを使うのがおすすめ。

アソシエイト申請時の記事はこちら。

最後に「CSSをもっと追加したい」「他サイトのCSSってどうやったらわかるの?」という方にはが以下のサイトがおすすめ。単にコピペするより知識として確実に身に付きます。
» 素敵なサイトのデザイン(css)をパク…参考にする方法|AIUEO Lab

これで初期設定は終わりです。

※2018年7月19日追記
Minimalの便利な設定方法をまとめました。これで一通り必要な機能が追加できます。
» WordPressテーマMinimalの便利な設定【人気記事表示・ブログ高速化など】