WordPressテーマ【Minimal】のカスタマイズのヒント
このブログではmanablogでお馴染みのマナブさん(@manabubannai)が作成されたテーマ、【Minimal】を使用しています。
ミニマリスト向けのWordPressテーマ『Minimal』を作りました
世の中にはいろいろなWordPressテーマがあるけど、色使いがごちゃごちゃしてる気がしたので、ミニマリスト向け（シンプルデザイン）のWordPressテーマを作りました。PC、スマホに対応したシンプルなWordPressテーマです。基本的には個人のブロガー向けですが、トップページをカスタマイズすれば企業サイトにも使えるかと思います。
このテーマの使用感について、当ブログでレビューしているので良かったら参考にしてみて下さい。
WordPressテーマ【Minimal】の使用感などのレビュー
2019年8月現在、このブログではワードプレスの有料テーマ【Minimal】を使用しています。manablogでお馴染みのマナブさんが作成されたテーマで、導入検討されている方は多いのではないでしょうか？他の有料テーマとは異なり、情報が少なくお困りの方も多いかと思います。ここでは良くも悪くも知って欲しい点を解説します。
このテーマを購入した方は恐らくそんなに多くはないと思いますが、それでも色々な思いからこのテーマを購入された方がいらっしゃると思います。
購入された方ならわかるかと思いますが、デフォルト状態のテーマは最低限の機能すぎて使いにくかったりしますよね。
かといってカスタマイズ例を解説するサイトがそんなに多くなかったりします。
ここでは、ご自身のMinimalを良いものにしてもらおうという思いを込め、当ブログのカスタマイズのヒントを解説します。
また、数少ないMinimalのカスタマイズを取り上げるサイトをも紹介します。
記事目次
- ワードプレス有料テーマ【Minimal】のカスタマイズ内容と実装のヒント
- 当ブログ以外のMinimalカスタマイズを取り扱う参考記事
01.ブログタイトルロゴの使用
02.タイトルロゴ横にwritten by Shojiの追加
03.ヘッダーナビの編集
04.SNSボタンの追加
05.サイドバーに「良く読まれている記事」一覧の追加
06.ファビコンの設定
07.サイドバーのプロフィールの変更
08.フッターの設定
09.アドセンス広告のサイズ調整
10.「ShareHtmlを、もっと綺麗にしたメーカー」の導入
11.その他
トップに戻るボタンの実装
ピックアップ記事３窓分の実装
スマホ画面のサイトトップ表示変更
ワードプレス有料テーマ【Minimal】のカスタマイズ内容と実装のヒント
あらかじめ、ご連絡しておきます。
なので、実装するにあたりとても苦労しました。勉強中はブログも書けませんでしたが、今振り返ってみれば、良い経験ができたと思います。
このブログにあるものは、デフォルトにあったもの以外はすべて独学で実装しました。以下に、カスタマイズした内容を備忘録的に書き残します。
カスタマイズに必要なコードについては、今（記事の初回投稿時）は公開しません。ご了承下さい。考えるヒントとなるものは書き残しておくので、ぜひご自身でカスタマイズにチャレンジしてみてください。
ブログタイトルロゴの使用
ロゴを自作し、WordPressでアップロード。その画像URLを表示させます。
ここで注意したいのが、ロゴを表示させるための方法です。CSSを確認するとすぐわかるのですが、Minimalのテーマでは、Bootstrapのグリッドシステムが採用されている模様。
Bootstrapにより12等分されるうち、いくつを使うかロゴサイズに応じて変更します。
また、画面サイズがスマホかそれ以外かでサイズが適切に調整されるようにしています。
タイトルロゴ横にwritten by Shojiの追加
本家manablogさんの見よう見まねです。上記タイトルロゴで設定したグリットの余りを、この文字に当てています。そんなに難しくありません。
ヘッダーナビの編集
ヘッダーナビを登録します。header-nav.phpには最初からサンプルとしてテンプレートが定められてあります。そこに、自分のブログに適したカテゴリを当てはめていくだけです。アイコンについては、Font Awesomeを使用しています。アイコンと文字の間は半角スペースひとつあけると視認しやすくなると思います。
SNSボタンの追加
デフォルト状態から
- はてなブックマーク
- LINE
- RSS
上記の通りに変更しました。
実装のヒント
まずはテーマ内のsns.phpを確認し、ボタンの構造を解析します。実装したいボタンについて、既設をヒントに同様に構築します。その後、CSSでスタイルを整えます。それぞれのイメージに合った色を使用することが望ましいですね。
なお、アイコンについては、デフォルト状態ではicomoonが使用されているようです。こちらはFont Awesomeを使用したりもしました。
サイドバーに「良く読まれている記事」一覧の追加
ホシタニッキさんの情報を参考としました。昔は購入時に送られるGoogleドキュメントにこのサイトのリンク張られていましたが、今は外されたみたいですね…。
WordPressテーマMinimalの便利な設定【人気記事表示・ブログ高速化など】
WordPressテーマMinimalの便利な設定についてまとめました。基本的にコピペで対応可能です。
ホシタニッキさんでは、この内容だけではなく、カスタマイズの参考となる内容がふんだんに盛り込まれています。Minimalを使用するなら確認して損はありません。
ファビコンの設定
ファビコンとは、簡単に言うとサイトのシンボルマークのことです。例えば、ブラウザのタブなどに表示されます。ここも、ホシタニッキさんを参考としました。
【ミニマリスト向けのシンプルなテーマ】Minimalの編集方法
ミニマリスト向けのシンプルなWordPressテーマ、Minimalの編集方法です。
ファビコンを含め、初期設定についての情報がふんだんにあるため、Minimalのテーマ使い始めの方におすすめです。
サイドバーのプロフィールの変更
デフォルトの雰囲気の良い写真も良いのですがオリジナルのアイコンを準備した方が良いでしょう。また、ご自身のプロフィールに書き直すのも忘れずに。
一応Twitterリンクを張ったりもしています。ここのアイコンは毎度おなじみのFont Awesomeです。
フッターの変更
デフォルトではAbout me!とPortfolioそしてTwitterとなっていますが、
- Category
- Information
にしました。画像の通り、カテゴリの羅列だったり、プライバシーポリシーなどの表記となります。ここをどう使うかは特に決まりはないため、自由に使ってOKだと思います。
アドセンス広告のサイズ調整
レスポンシブ広告だと上手く表示されない時もあるため、divなどで広告を調整しました。Googleアドセンスのヘルプなどを参考としています。参考となる記事を紹介しますが、ヘルプ内にはこれだけではなく色々と解決策があったりしますので、必要に応じてご確認下さい。
» 広告コードをHTMLで貼り付ける場所（広告ユニット）【Adsenseヘルプ】
「ShareHtmlを、もっと綺麗にしたメーカー」の導入
テーマ製作者であるマナブさんの作品でもあります。以下のようなリンクが簡単に作れます。
より美しいHTMLをシェアしよう｜ShareHtmlを、もっと綺麗にしたメーカー
ブログ記事内で他サイトリンクをサムネイル（アイキャッチ画像）付きで表示するためのブログパーツです。デザインが洗練されているツールがなかったので作りました。より美しいHTMLをシェアできる、ShareHtmlを、もっと綺麗にしたメーカーです。
導入方法としては、適当なURLを打ち込むとプレビュー画面に加えてHTMLコードとCSSコードが表示されるため、CSSコードをコピーしてテーマのstyle.cssへ追記するだけです。HTMLコードは、記事の原稿にぶち込みます。
その他
- CSSの全体的な調整を行いました。
- トップに戻るボタンを実装しました。
- スマホ使用時、スワイプ効率を高めるため画面が左右に揺れないようにしました
- 【停止中】本家manablogと同じように最新記事より前に３つの窓を作成しました
- 【停止中】スマホ使用時、記事幅を縮小してみました
こんな感じです。需要が高そうなものは、簡単に解説したいと思います。
トップに戻るボタンの実装。
当ブログを少し読み進めていただくと、スマホPC問わず画面右下に半透明の灰色の矢印が出てくると思います。「トップに戻るボタン」でググると作り方の参考となるサイトがたくさん出てきます。
最新記事より前に３つの窓を作成する。
manablog様より引用させて頂きます。
こんな感じの窓ですね。
考え方としては、ブログタイトルのロゴについて解説しているところでもお知らせしましたが、Bootstrapを使用しているというところがカギかと。
単純に3分割するように設定してあげればOKですね。スマホ版では１窓ずつ表示されていますが、画面がスマホサイズかそれ以外かで分岐するようプログラムする必要があります。
この窓は良くも悪くも常にトップに表示されます。スマホ版だと最新記事にたどり着くまで少しだるいので、当ブログではあえて実装見送りにしています。
スマホ版で記事幅を変える。
元々はの通りです。
それを、こんな風に。これもBootstrapの仕組みですぐにできます。
スマホであれば変更後の方がアクセスしやすいかもしれませんね。今は保留中ですが、気が向いたら実装します。
当ブログ以外のMinimalカスタマイズを取り扱う参考記事
当ブログも少し参考にさせていただきました。同じようにMinimalを使用されていてお困りの方は、アクセスしてみてください。
Minimalのカスタマイズを取り上げているサイトをここまでまとめているのは当ブログだけかと。お役立て下さい。
【ミニマリスト向けのシンプルなテーマ】Minimalの編集方法
ミニマリスト向けのシンプルなWordPressテーマ、Minimalの編集方法です。
WordPressテーマMinimalの便利な設定【人気記事表示・ブログ高速化など】
WordPressテーマMinimalの便利な設定についてまとめました。基本的にコピペで対応可能です。
マナブ産テーマ『Minimal』のレビュー＋カスタマイズ内容
当ブログで使用しているWPテーマ『Minimal』についてレビューを残しておきます、使用テーマについて質問が多いのでこの記事を持って回答とさせていただきます。記事の内容「①：マナブ産テーマ『Minimal』のレビュー」「②：『Minimal』はこんな人にオススメ」「③：おまけ：実施したカスタマイズ内容まとめ」
WordPress有料テーマ「Minimal」のカスタマイズ方法と購入した感想【初心者でもできる】
html、css、phpについて、本腰を入れて勉強した経験なし。そんな私が、Wordpress有料テーマ「Minimal」を導入、カスタマイズした方法、カスタマイズを経て分かったことを紹介します。
【マナブログ】ワードプレステーマ『Minimal』のデザインカスタマイズ【まとめ】
当ブログのデザインはブロガーのマナブ（@manabubannai）さん作のワードプレス有料テーマ『Minimal』を使ってます。このデザイン、すごくシンプルでカッコいいんですよね。ワードプレスの有料テ
【初期設定】Minimalカスタマイズ方法【WordPressテーマ】 | 01blog「ぜろいちぶろぐ」
マナブさんが開発のWordPressテーマ「Minimal」の初期編集方法のメモ書きです。Minimalの編集はエディターで行うため多少のスキルや知識が必要です。このメモ書きを見ればコピペで簡単に設定することができるのでお試しください。
ワードプレスのみでテーマMinimal初期設定【FTP無し】
【manablog】Minimalの設定方法を完全網羅【ミニマリスト向けのシンプルなテーマ】 | MUKKUN QUEST
manablog（マナブログ）マナブさん作成のWordPressテーマminimalの設定方法を完全網羅！！全くのブログ初心者でもMinimalを自分色に染めて行けるよう、細部に到るまでの解説を細かく行います。ボク自身もminimalを愛用しているので、画像付きで丁寧に説明しています。
自力でカスタマイズしてみよう
カスタマイズを謳うサイトは上記の通りたくさんあります。ありがたいことに、コピペOKなものもあったりします。ですが、そのままコピペしても、長期的な目で見ればあまり得しないような…。
なぜそのコードを使用すれば形になるのかを、やはり知っておいた方がいいと思います。例えばMinimalの構造から、「グリッドシステムを使用しており、その理論で求めるスタイルとなるようコードを作っていく」などヒントを解説するサイトはここしかないと自負します。
せっかくカスタマイズするのであれば、少しでも自分の血肉となるような方法をお勧めしたいです。
このテーマ【Minimal】を堪能しよう
カスタマイズもそうですが、文章の作り方もサイトの見易さには重要となってきます。大事なことは、カスタマイズすることよりも、記事の質を高めることですね。
このMinimalは書いた記事をみやすく表示してくれるとても良いテーマだと思いますので、ぜひ長く使い続けましょう。
今後も何ら間カスタマイズを実施したら、ここに書き残したいと思います。ひとまずはこれにて終了です。