【注意】Minimalについて

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

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

私も現在はSnow Monkeyに移行しました。強いて言えばSnow Monkeyの方が初期設定が楽で扱いやすい感じです。

Minimalはブログを始めた初期の頃に使っていたのですが

  • Gutenberg未対応
  • デフォルトで使える機能が少ない
  • 初期設定に時間がかかり過ぎる

以上の点から2019年以降ブログを始める方にはおすすめできません。

一応当時のメモを残しておきますが、一般の有料テーマなら同じ設定をするにしてももっと簡単にできます。

WordPressテーマの導入を検討しているなら、まずはCocoonかSnow Monkey。購入を検討されている方はどちらも確認してみてくださいね。

下準備

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

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

テーマをアップロード

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

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

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

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

注意

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

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

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

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

まずはここだけ編集

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

nav-menu

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

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


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

sidebar

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

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

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

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

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

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

footer

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

About me! (フッター左)

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

Portfolio (フッター中央)

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

Twitter(フッター右)

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

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

Copyright (ブログ最下部)

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

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

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

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

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

個性を出す

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

nav-menuにアイコン表示

nav-menuにアイコン表示


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

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

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

次に、

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

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

CSSで見出しや線の色を変える

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

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

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

タイトルロゴ画像の設定

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

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

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

ファビコンの設定

ファビコンの設定
 

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

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

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

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

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

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

細かな設定

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

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

商品リンク

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

そのかわりもしもアフィリエイトのかんたんリンクが使いやすいです。

この記事を書いた人

ホシタニ