当ブログではありませんが、wordpressテーマを『マテリアル２』に変更したのでその備忘録です。
（このブログでは現在simplicity2を利用しています）
マテリアル２の魅力
１．とにかくデザインがカッコいい！
２．プラグインが少なくてすむ
３．スマホでも見易そう
私が『マテリアル2』に変更した一番の理由はカッコいいから。
特にトップページが無料テーマとは思えないほど洗練されています。
テーマダウンロードはこちら
ただ、問題が一つだけ。少し初心者にはカスタマイズしづらいです。
最低限の機能は備わっていたのですが、細かい部分のカスタマイズに結構苦戦しました。
まだ新しいテーマだからか、カスタマイズの紹介記事もあまりないように感じました。（誰か書いてください）
いじったこと
ヘッダーを画像に変更
これは、外観⇒カスタマイズ⇒ヘッダー画像 で簡単に変更可能です。
変更した後、カスタマイズ⇒色 でヘッダーの文字色と背景色を白色にして消しました。
アドセンス、アナリティクス設定
こちらも 外観⇒カスタマイズ から、コードを挿入するだけで簡単に設定することができました。
※レンタルサーバーでロリポップを利用している方は、コード挿入後に『保存して公開』を押しても保存されない不具合が生じてしまいます。（WAF設定が原因）
その場合は、ロリポップ側の設定でWAF設定を一時的に無効にする必要がありました。
indexスタイルをカード型に
外観⇒カスタマイズ⇒Indexスタイル設定 で『カード型』をクリック。
トップページの記事一覧がカッコよくなります。（主観）
広告をh3の上に表示
マテリアル２には『h2タグの上に広告を表示』という便利な機能があるのですが、私はブログでh3タグしか使用していなかったので、広告を表示してくれませんでした。
解決策としては、functions.phpの『記事中にアドセンスを表示』と書かれた部分を少しいじる方法があります。
（いじる際にはバックアップをしっかりとっておきましょう）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/**** 記事中にアドセンス表示 ****/ function add_ads_before_1st_h2($the_content) { $is_no_adsense = get_post_meta(get_the_ID(),'is_no_adsense',true); if (is_singular() && !$is_no_adsense) { //$ad_responsive = get_option("ad_responsive"); $h2 = "/<h3.*?>/i"; if (preg_match($h2, $the_content, $h2s)) { if(get_option("ad_responsive")){ $ad_responsive = "<div class='ad' style='margin-bottom:30px'><p>スポンサーリンク</p>".get_option("ad_responsive")."</div>"; if(is_ad_second_h2()){ $the_content = preg_replace($h2, $ad_responsive.$h2s[0], $the_content, 2); }else{ $the_content = preg_replace($h2, $ad_responsive.$h2s[0], $the_content, 1); } } } } return $the_content; } add_filter('the_content','add_ads_before_1st_h2'); |
注目してほしいのは↑６行目の部分。もとは
『$h2 = “/<h2.*?>/i”;』
と書かれていたのを
『$h2 = “/<h3.*?>/i”;』
に変更しています。
私の場合はこれだけで上手くいきました。
サイドバーのタグのデザイン
マテリアル２ではタグのデザインがデフォルトのままになっています。
ここのデザインをcssをいじって変えたいなあと思っていたのですが、中々上手くいきませんでした。
いろいろ試して悩んだ挙句、sidebar.phpに直接書き込むという強引な手を使いました。
|
1 2 3 4 5 6 7 8 |
<div class="box"> <h2>タグ</h2> <div class="tagcloud"> <a href='http://〇〇〇〇〇' style='font-size: 18px ;'>タグ名１</a> <a href='http://〇〇〇〇〇' style='font-size: 18px ;'>タグ名２</a> <a href='http://〇〇〇〇〇' style='font-size: 18px ;'>タグ名３</a> <a href='http://〇〇〇〇〇' style='font-size: 18px ;'>タグ名４</a> </div> |
↑このコードをsidebar.phpの適当な場所に挿入します。
『○○〇〇〇』の部分は各タグのリンク先のurlを、
『タグ名』の部分にはそれぞれのタグの名前を入力します。
子テーマを使用している場合は、まず親テーマのsidebar.phpをファイルごと子テーマにコピーしてからいじると良いです。
次に、タグのデザインを変更します。
style.cssに以下のようなコードを書き加えました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/*タグ*/ .tagcloud a { background-color: #ccc; border-radius: 2px 0 0 2px; color: #222; display: inline-block; height: 30px; margin: 5px 10px; line-height: 1.8; padding: 0 15px; position: relative; text-decoration: none; transition: all 1s linear; } .tagcloud a:hover { color: #3498db; } .tagcloud a:after { background: #eee; border-radius: 50%; content: ""; padding: 5px; position: absolute; right: 0; top: 10px; width: 1px; } .tagcloud a:before { border: 15px solid transparent; border-left: 15px solid #ccc; content: ""; position: absolute; right: -30px; } |
これで上手い具合にタグのデザインが変更されました。
しかし、この方法の場合タグを更新するたびにsidebar.phpを修正しなければなりません。
もっと上手い方法があるはずなのですが、私には方法がよくわかりませんでした。
本文の行間調整
デフォルトのままだと行間が少し広いなあと思ったので、少し狭くすることにしました。
style.cssに以下のコードをコピペすると変更されました。
|
1 2 3 4 |
.content_body p{ line-height: 1.8; margin-bottom: 1.7em; } |
もともとは
margin-bottom: 2.0em;
に設定されていました。
いらないプラグインの削除
『All in One SEO』『AddToAny Share Buttons』『Head Cleaner』など
テーマの機能と被っていそうだったり、相性が悪いと噂のプラグインを削除しました。
サイト速度やSEOについては、今のところ特に目立った変化はありません。
（以前はMH magazine lite を使用）
まとめ
細かい所が気になったので少しいじりましたが、デフォルト機能だけでも十分良いサイトになりました。
有料でもおかしくないくらい素敵なテーマだと思います。おすすめです。