マテリアル2のカスタマイズ備忘録

当ブログではありませんが、wordpressテーマを『マテリアル2』に変更したのでその備忘録です。


ごりら
素人ゴリラのカスタマイズなので参考程度にどうぞ

(このブログでは現在simplicity2を利用しています)

マテリアル2の魅力

1.とにかくデザインがカッコいい!

2.プラグインが少なくてすむ

3.スマホでも見易そう

私が『マテリアル2』に変更した一番の理由はカッコいいから

特にトップページが無料テーマとは思えないほど洗練されています。

テーマダウンロードはこちら

ただ、問題が一つだけ。少し初心者にはカスタマイズしづらいです。

最低限の機能は備わっていたのですが、細かい部分のカスタマイズに結構苦戦しました。

まだ新しいテーマだからか、カスタマイズの紹介記事もあまりないように感じました。(誰か書いてください)

いじったこと

ヘッダーを画像に変更

これは、外観⇒カスタマイズ⇒ヘッダー画像 で簡単に変更可能です。

変更した後、カスタマイズ⇒色 でヘッダーの文字色と背景色を白色にして消しました。

アドセンス、アナリティクス設定

こちらも 外観⇒カスタマイズ から、コードを挿入するだけで簡単に設定することができました。

※レンタルサーバーでロリポップを利用している方は、コード挿入後に『保存して公開』を押しても保存されない不具合が生じてしまいます。(WAF設定が原因)

その場合は、ロリポップ側の設定でWAF設定を一時的に無効にする必要がありました。

参考記事:春なのでWordPressテーマを変えてみました

indexスタイルをカード型に

外観⇒カスタマイズ⇒Indexスタイル設定 で『カード型』をクリック。

トップページの記事一覧がカッコよくなります。(主観)

広告をh3の上に表示

マテリアル2には『h2タグの上に広告を表示』という便利な機能があるのですが、私はブログでh3タグしか使用していなかったので、広告を表示してくれませんでした。

解決策としては、functions.phpの『記事中にアドセンスを表示』と書かれた部分を少しいじる方法があります。

(いじる際にはバックアップをしっかりとっておきましょう)

注目してほしいのは↑6行目の部分。もとは

『$h2 = “/<h2.*?>/i”;』

と書かれていたのを

『$h2 = “/<h3.*?>/i”;』

に変更しています。

私の場合はこれだけで上手くいきました。

サイドバーのタグのデザイン

マテリアル2ではタグのデザインがデフォルトのままになっています。

ここのデザインをcssをいじって変えたいなあと思っていたのですが、中々上手くいきませんでした。

いろいろ試して悩んだ挙句、sidebar.phpに直接書き込むという強引な手を使いました。

↑このコードをsidebar.phpの適当な場所に挿入します。

『○○〇〇〇』の部分は各タグのリンク先のurlを、

『タグ名』の部分にはそれぞれのタグの名前を入力します。

子テーマを使用している場合は、まず親テーマのsidebar.phpをファイルごと子テーマにコピーしてからいじると良いです。

次に、タグのデザインを変更します。

style.cssに以下のようなコードを書き加えました。

これで上手い具合にタグのデザインが変更されました。

しかし、この方法の場合タグを更新するたびにsidebar.phpを修正しなければなりません。

もっと上手い方法があるはずなのですが、私には方法がよくわかりませんでした。

本文の行間調整

デフォルトのままだと行間が少し広いなあと思ったので、少し狭くすることにしました。

style.cssに以下のコードをコピペすると変更されました。

もともとは

margin-bottom: 2.0em;

に設定されていました。

いらないプラグインの削除

『All in One SEO』『AddToAny Share Buttons』『Head Cleaner』など

テーマの機能と被っていそうだったり、相性が悪いと噂のプラグインを削除しました。

サイト速度やSEOについては、今のところ特に目立った変化はありません。
(以前はMH magazine lite を使用)

まとめ

細かい所が気になったので少しいじりましたが、デフォルト機能だけでも十分良いサイトになりました。

有料でもおかしくないくらい素敵なテーマだと思います。おすすめです。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加
スポンサーリンク