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

2018-07-16 / 2019-12-04

先日、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時間くらいで完了します。

カスタマイズを終えた感想

「Minimal」は、デフォルトのままで使うなら大した作業はいらないのですが、細かい点まで自分の好みにカスタマイズしようと思うと、初心者には少し難しかったし時間もかかりました。けれどそのぶん得られたものも大きかったです。

css、phpに対する理解と自信を得た

ぺ～ぺ～の素人でも、自分でなんとかする気とサーチ力があればまあまあなんとかなりました。まだまだカスタマイズしたい点があるので、今後もちまちま格闘していくつもりです。

コーディングへの興味を持てた

プロが本気で書いたコードは確かに複雑ですが、少し調べて触ってみると、基本的な決まり事はそんなに難しくないかも、と思えました。もともとプログラミングには興味があったのですが、もっと勉強してもっと自由に触れるようになりたいと感じました。

「有料テーマ」の価値と開発者のすごさが分かった

これは最初から理解していたつもりではありましたが、いざその中身に触れてみると改めて圧倒されました。呪文のようにしか見えない英数字の羅列もすべて、何らかの意味があって記述されているものなのです。

開発者さんたちにブッ飛ばされることを承知で言いますが、初めて有料テーマについて調べたとき「なんで1万円とか余裕でするの？高くない？」って感じたんです。

けど、実際に自分でカスタマイズしてみて、wordpressテーマがいかに複雑で難しくて、完成させるのにどれほど膨大な知識、ノウハウ、技術、そして時間を要するかを肌で理解することができました。

今は「Minimalって5000円で買ってしまっていいの……？JINとかSANGOとかも安いんじゃない……？」と思うくらいです。すべての開発者さまたちに、改めて大きな敬意と感謝を示したいと思います。

ごく一部分だけど、自分がブログのデザインを作った満足感

やっぱりこれですね。
もちろん基礎を作ったのはマナブさんやwordpressに関わった開発者さんたちなのですが、四苦八苦して編集したコードが思った通りに機能してくれると嬉しいです。月並みではありますが、今後もブログ活動頑張ろうって思えました。

Minimalは、コーディング初心者には敷居が高く感じられる有料テーマかもしれませんが、「今は知識がなくとも、cssやphpにこれから慣れ親しんでいきたい」という方には向いていると感じました。

最後に、当ブログのWordpress テーマ変更前と変更後の比較を置いておきます。みなさんもぜひ「Minimal」検討してみてくださいね。

before↓

after↓

Minimal WordPress ブログプログラミング

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

なぜMinimal？

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

微調整

画像の表示サイズ変更

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

デザイン枠の追加

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

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

カスタマイズを終えた感想

関連記事

ノウハウ系有料noteって別に買わなくてもいいんじゃない？...

【WordPress】プラグインなしで現在記事と同じカテゴリーの人気記事一覧を出力する...

【WordPress】テーマ『Minimal』がプログラミング学習者にぴったりな件。機能追加の方法も紹介...

【実録】HTML/CSSコーディング模写で挫折したけどリベンジ成功した方法...