2018/07/16
(Updated : 2019/09/16)

WordPress有料テーマ「Minimal」のカスタマイズ方法と購入した感想【初心者でもできる】

先日、WordPress有料テーマ「Minimal」を購入しました。

ブログの収益化を目指すのであれば、やはり見やすいデザインとSEO対策は必須です。素人がいきなり勉強して四苦八苦するより、先人にお金を払ってテクやノウハウを頂いた方が早くて確実だと思い、このテーマの購入に踏み切りました。

ブログを始めて早い段階で運用テーマを決めることで、「記事数増えてからテーマ変更したらデザインが崩れて、1記事ずつコードを修正しなきゃいけなくなった、、」みたいな悲劇を回避できると考えたことも理由のひとつです。これ、テーマの仕様によっては大いにありえることだと思います、、

Minimalは実装にあたり、phpファイルをある程度自力で編集する必要があります。私はhtml/css/phpの勉強に本腰を入れたことは全くありませんが、こんな私でも好みのデザインにカスタマイズできたのですから、調べる気さえあれば知識がなくてもなんとかなっちゃいます。

当記事では、
　 Minimal導入後に行ったカスタマイズ内容
　カスタマイズしたい箇所を編集する手順
　カスタマイズを得て感じたこと
について、コーディング初心者向けに紹介します。

なぜMinimal？

数ある有料テーマの中からMinimalを選んだ理由はいくつかあるのですが、

色数が少なく見やすいデザイン
余計な機能がなく、動作も軽そう
他のブログテーマより価格が低い
SEO内部対策実装済
機能実装には無料サポート可能

何より開発者であるマナブさんのブログとtwitterを、ブログを始めたころからずっと見ていて、私自身が彼のファンだからというところも大きいです。笑

でも最初だからこそ、テーマ選びなんて「好きな方の作った/使っているテーマだから」でいいと思います。駆け出しのうちは、どういうツールがあった方が便利で、なくても大丈夫かなんて分からないものですから。ミーハー心で選ぶ、大いに結構です。

そしてもし違うテーマを試したくなったら、出た収益を回して購入すればいいかなと思います。

いざ導入、そしてカスタマイズ

Minimalの公式ページから、Paypalで開発者マナブさんに料金を払い、しばらくするとZIPファイルの添付されたメールが届きます。このZIPファイルを解凍し、3種のテーマの中から使いたいものをフォルダごとサーバーにアップロード。

必要最低限のカスタマイズについては以下の記事をどうぞ。

cssやphpファイルの編集についてですが、標準装備のテキストエディタだと十中八九、改行の無効化や文字化けで編集どころじゃなくなってしまいますので、プログラミング専用のテキストエディタを使用することを強く強く強くおススメします。ていうか必須です。
私はAtomを使いました。とりあえず無料のエディタで十分ですよ。

微調整

細かいところをより自分好みに編集していきます。

画像の表示サイズ変更

私の編集がまずかったのかテーマの仕様なのか分からないのですが、ブログ中の画像が全て横幅いっぱいに拡大されてしまうので、style.css　中の5846行目付近にある

img {
  width: 100%;
  height: auto; }

これを

img {
  max-width: 100%;
  height: auto; }

と書き換えたところ解決しました。

「続きを読む」ボタンのデザイン変更

続きを読むボタンを角丸にしたかったので、style.cssの6038行目付近の

      main .wrap .readmore a {
        border: 1px solid #909090;
        color: #7B7B7B;
        padding: 15px 33px 14px; }

これに一行書き足します。

      main .wrap .readmore a {
        border: 1px solid #909090;
        color: #7B7B7B;
        border-radius: 10px;
        padding: 15px 33px 14px; }

下から二行目が追加された行です。

デフォルトではボタンの表記は「READ MORE」ですが、index.php内32行目の「READ MORE」の部分を書き換えれば、「続きを読む」など好みの文字列にも変更可能です。

デザイン枠の追加

記事内で文章を囲むデザイン枠を使いたいので、AddQuicktagプラグインに新しいタグを設定しました。

CHECK！

まずはこういうやつ
当ブログではレビュー記事に使ってます
汎用性ありそう

LOOK！

青いのも用意しました
あまりたくさん色を使うと
Minimalのシンプルさに反しそうですが……笑

以下のそれぞれのタグをAddQuicktagに新しく設定します。

// 赤いボックス
<div class="point-red">
    <span class="point-red-title">ここにタイトル</span>
    <p><i class="fa fa-check" aria-hidden="true"></i>ここに文字
</p></div>

//青いボックス
<div class="point-blue">
    <span class="point-blue-title">ここにタイトル</span>
    <p><i class="fa fa-check" aria-hidden="true"></i>ここに文字
</p></div>

style.cssに次のように追記します。

.point-red {
  position: relative;
  margin: 3em 3em;
  padding: 0.5em 1em;
  font-size: 1.2em;
  border: solid 2px #EC6969;
  border-radius: 8px;
  max-width: 80%;
  text-align: left;
}
.point-red .point-red-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 24px;
  background: #FFF;
  color: #EC6969;
  font-weight: bold;
  text-align: left;
}

.point-blue {
  position: relative;
  margin: 3em 3em;
  padding: 0.5em 1em;
  font-size: 1.2em;
  border: solid 2px #6091d3;
  border-radius: 8px;
  max-width: 80%;
  text-align: left;
}
.point-blue .point-blue-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 24px;
  background: #FFF;
  color: #6091d3;
  font-weight: bold;
  text-align: left;
}

main .point-red p, main .point-blue p {
  margin: 30px 0;
  padding: 0;
}

@media only screen and (max-width: 479px) {
  .point-red {
      position: relative;
      margin: 2em 1em;
      padding: 0.5em 1em;
      font-size: 1.2em;
      border: solid 2px #EC6969;
      border-radius: 8px;
      max-width: 90%;
      text-align: left;
  }
  .point-blue {
      position: relative;
      margin: 2em 1em;
      padding: 0.5em 1em;
      font-size: 1.2em;
      border: solid 2px #6091d3;
      border-radius: 8px;
      max-width: 90%;
      text-align: left;
  }
  main .point-red p, main .point-blue p, main .box2 p {
    margin: 20px 0;
    padding: 0;
  }
}

CSSは、下の方に書かれたコードが優先される仕様なので、必ず末尾に追記してください。上の方にコードを書くとデザインが反映されなくなる可能性があります。

デザイン枠のコードは以下の記事を参考にさせていただきました。似たような手順でお好みの枠を使えるようにできるはずです。

記事最上部の日付表記を変更

デフォルトのままだと、記事最上部の日付表記は投稿日で、記事が更新された場合は最終更新日のみが表示されます。

「投稿日**月**日（最終更新日**月**日）」のように、投稿日と更新日とを並記したかったので、meta.phpを次のように編集しました。

<?php if ( $mtime = get_mtime('Y/m/d') ) { ?>
  <time itemprop="dateModified">
    Last-Modified: <?php echo $mtime; ?>
  </time>
  <?php } else { ?>
    <time itemprop="datePublished"><?php the_time('Y/m/d'); ?></time>
<?php } ?>

これを、

<?php if ( $mtime = get_mtime('Y/m/d') ) { ?>
  <time itemprop="datePublished"><?php the_time('Y/m/d'); ?></time></br>
    <time itemprop="dateModified">
    (Updated : <?php echo $mtime; ?>)
  </time>
  <?php } else { ?>
    <time itemprop="datePublished"><?php the_time('Y/m/d'); ?></time>
<?php } ?>

こう書き換えます。

コーディングわからないのにどうやって編集したの？

８割カンです。

半分くらいうそです。

Google chromeには、なんとブラウザで表示しているサイトのコードを覗き見るツールが標準装備されています。これを使って、編集したい箇所に対応しているコードがどのファイルの何行目にあるか探し、そこを編集します。

大規模な変更を加える前には、必ず編集前のファイルをバックアップしておこうね……。

ありがたいことにcss、phpは、基礎から応用まで大量の情報をgoogle検索で得ることができます。あとはgoogle先生にお尋ねしながらトライ＆エラーです。

※2019/04/13 追記

この記事を最初に書いた当初はぺーぺーのコーディングど素人だった私ですが、html・CSSの基本的な構造を理解できる程度まで勉強したところ、カスタマイズが非常にスムーズにできるようになりました。自分好みにガンガンカスタムしていきたいぜ！って方は、少しだけでもこのあたりの勉強をしておくと良いと思います。具体的には、「ドットインストール」のレッスン動画「はじめてのHTML」「はじめてのCSS」のすべてを学習するくらいです。2～3時間くらいで完了します。