Shoji

WordPressテーマ【Minimal】のカスタマイズのヒント

ブログ運営

注意:2020年現在、本記事のテーマ「Minimal」を卒業し、「Manablog Copy」へ以降しております。

このブログではmanablogでお馴染みのマナブさん(@manabubannai)が作成されたテーマ、【Minimal】を使用しています。

このテーマの使用感について、当ブログでレビューしているので良かったら参考にしてみて下さい。

このテーマを購入した方は恐らくそんなに多くはないと思いますが、それでも色々な思いからこのテーマを購入された方がいらっしゃると思います。

購入された方ならわかるかと思いますが、デフォルト状態のテーマは最低限の機能すぎて使いにくかったりしますよね。
かといってカスタマイズ例を解説するサイトがそんなに多くなかったりします。

ここでは、ご自身のMinimalを良いものにしてもらおうという思いを込め、当ブログのカスタマイズのヒントを解説します。

また、数少ないMinimalのカスタマイズを取り上げるサイトをも紹介します。

記事目次

ワードプレス有料テーマ【Minimal】のカスタマイズ内容と実装のヒント

PCで仕事をする人

あらかじめ、ご連絡しておきます。

Minimalテーマ購入前まで、プログラミングはおろかワードプレスの構造も知りませんでした。

なので、実装するにあたりとても苦労しました。勉強中はブログも書けませんでしたが、今振り返ってみれば、良い経験ができたと思います。

このブログにあるものは、デフォルトにあったもの以外はすべて独学で実装しました。以下に、カスタマイズした内容を備忘録的に書き残します。
カスタマイズに必要なコードについては、今(記事の初回投稿時)は公開しません。ご了承下さい。考えるヒントとなるものは書き残しておくので、ぜひご自身でカスタマイズにチャレンジしてみてください。

ブログタイトルのロゴの表示

ロゴを自作し、WordPressでアップロード。その画像URLを表示させます。

ここで注意したいのが、ロゴを表示させるための方法です。CSSを確認するとすぐわかるのですが、Minimalのテーマでは、Bootstrapのグリッドシステムが採用されている模様。

Bootstrapにより12等分されるうち、いくつを使うかロゴサイズに応じて変更します。

また、画面サイズがスマホかそれ以外かでサイズが適切に調整されるようにしています。

タイトルロゴ横にwritten by Shojiの追加

written byの表示

本家manablogさんの見よう見まねです。上記タイトルロゴで設定したグリットの余りを、この文字に当てています。そんなに難しくありません。

ヘッダーナビ

ヘッダーナビを登録します。header-nav.phpには最初からサンプルとしてテンプレートが定められてあります。そこに、自分のブログに適したカテゴリを当てはめていくだけです。アイコンについては、Font Awesomeを使用しています。アイコンと文字の間は半角スペースひとつあけると視認しやすくなると思います。

SNSボタンの追加

snsボタン

デフォルト状態から

  • Facebook
  • Twitter
  • Pocket
  • はてなブックマーク
  • LINE
  • RSS

上記の通りに変更しました。

実装のヒント

まずはテーマ内のsns.phpを確認し、ボタンの構造を解析します。実装したいボタンについて、既設をヒントに同様に構築します。その後、CSSでスタイルを整えます。それぞれのイメージに合った色を使用することが望ましいですね。

なお、アイコンについては、デフォルト状態ではicomoonが使用されているようです。こちらはFont Awesomeを使用したりもしました。

よく読まれている記事の表示

ホシタニッキさんの情報を参考としました。昔は購入時に送られるGoogleドキュメントにこのサイトのリンク張られていましたが、今は外されたみたいですね…。

ホシタニッキさんでは、この内容だけではなく、カスタマイズの参考となる内容がふんだんに盛り込まれています。Minimalを使用するなら確認して損はありません。

ファビコンの設定

ファビコンの設定

ファビコンとは、簡単に言うとサイトのシンボルマークのことです。例えば、ブラウザのタブなどに表示されます。ここも、ホシタニッキさんを参考としました。

ファビコンを含め、初期設定についての情報がふんだんにあるため、Minimalのテーマ使い始めの方におすすめです。

サイドバーのプロフィールの変更

プロフィールの設定

デフォルトの雰囲気の良い写真も良いのですがオリジナルのアイコンを準備した方が良いでしょう。また、ご自身のプロフィールに書き直すのも忘れずに。

一応Twitterリンクを張ったりもしています。ここのアイコンは毎度おなじみのFont Awesomeです。

フッターの設定

デフォルトではAbout me!とPortfolioそしてTwitterとなっていますが、

  • Category
  • Information
  • Twitter

にしました。画像の通り、カテゴリの羅列だったり、プライバシーポリシーなどの表記となります。ここをどう使うかは特に決まりはないため、自由に使ってOKだと思います。

レスポンシブ広告だと上手く表示されない時もあるため、divなどで広告を調整しました。Googleアドセンスのヘルプなどを参考としています。参考となる記事を紹介しますが、ヘルプ内にはこれだけではなく色々と解決策があったりしますので、必要に応じてご確認下さい。

» 広告コードをHTMLで貼り付ける場所(広告ユニット)【Adsenseヘルプ】

「ShareHtmlを、もっと綺麗にしたメーカー」の導入

テーマ製作者であるマナブさんの作品でもあります。以下のようなリンクが簡単に作れます。

導入方法としては、適当なURLを打ち込むとプレビュー画面に加えてHTMLコードとCSSコードが表示されるため、CSSコードをコピーしてテーマのstyle.cssへ追記するだけです。HTMLコードは、記事の原稿にぶち込みます。

その他

  • CSSの全体的な調整を行いました。
  • トップに戻るボタンを実装しました。
  • スマホ使用時、スワイプ効率を高めるため画面が左右に揺れないようにしました
  • 【停止中】本家manablogと同じように最新記事より前に3つの窓を作成しました
  • 【停止中】スマホ使用時、記事幅を縮小してみました

こんな感じです。需要が高そうなものは、簡単に解説したいと思います。

トップに戻るボタンの実装。

当ブログを少し読み進めていただくと、スマホPC問わず画面右下に半透明の灰色の矢印が出てくると思います。「トップに戻るボタン」でググると作り方の参考となるサイトがたくさん出てきます。

最新記事より前に3つの窓を作成する。

manablog様より引用させて頂きます。

テーマカスタマイズ3カラムのサンプル

こんな感じの窓ですね。

考え方としては、ブログタイトルのロゴについて解説しているところでもお知らせしましたが、Bootstrapを使用しているというところがカギかと。

単純に3分割するように設定してあげればOKですね。スマホ版では1窓ずつ表示されていますが、画面がスマホサイズかそれ以外かで分岐するようプログラムする必要があります。

この窓は良くも悪くも常にトップに表示されます。スマホ版だと最新記事にたどり着くまで少しだるいので、当ブログではあえて実装見送りにしています。

スマホ版で記事幅を変える。

元々はの通りです。

Minimalのスマホ版(デフォルト)

それを、こんな風に。これもBootstrapの仕組みですぐにできます。

スマホであれば変更後の方がアクセスしやすいかもしれませんね。今は保留中ですが、気が向いたら実装します。

PCとスマホのレスポンシブ画面比較

当ブログも少し参考にさせていただきました。同じようにMinimalを使用されていてお困りの方は、アクセスしてみてください。

Minimalのカスタマイズを取り上げているサイトをここまでまとめているのは当ブログだけかと。お役立て下さい。

自力でカスタマイズしてみよう

カスタマイズを謳うサイトは上記の通りたくさんあります。ありがたいことに、コピペOKなものもあったりします。ですが、そのままコピペしても、長期的な目で見ればあまり得しないような…。

なぜそのコードを使用すれば形になるのかを、やはり知っておいた方がいいと思います。例えばMinimalの構造から、「グリッドシステムを使用しており、その理論で求めるスタイルとなるようコードを作っていく」などヒントを解説するサイトはここしかないと自負します。

せっかくカスタマイズするのであれば、少しでも自分の血肉となるような方法をお勧めしたいです。

私はMinimalテーマ購入前まで、プログラミングはおろかワードプレスの構造も知りませんでした。他サイト等でプログラミングの基礎勉強もほとんどしていません。ほとんどはコードをものすごくよく見て、わからないところはググり、読み解き血肉としました。このテーマで鍛えられました。

このテーマ【Minimal】を堪能しよう

カスタマイズもそうですが、文章の作り方もサイトの見易さには重要となってきます。大事なことは、カスタマイズすることよりも、記事の質を高めることですね。

このMinimalは書いた記事をみやすく表示してくれるとても良いテーマだと思いますので、ぜひ長く使い続けましょう。

今後も何ら間カスタマイズを実施したら、ここに書き残したいと思います。ひとまずはこれにて終了です。