Luxeritas WordPressテーマに変えてからカスタマイズしたことまとめ

2017年4月5日ブログ運営

http://thk.kanzae.net/wp/

ここに徐々にまとめていこうと思います。

備忘録として”できていないこと”も記載していこうと思います…(;´∀`)

開発者(るな様!!!)が速度やSEOの最適化を考えて作ってくださっているので余計なことはしない方針。

Luxeritasのデフォルト機能で行ったこと

デフォルトでできることが非常に多いです。全て記載するときりがないので、速度面の設定のみ記載します。。

.htaccessの修正

Luxeritasにはサーバー設定を行うための.htaccessが同梱されています。

これを利用して、キャッシュを利用する設定を行います。LuxeritasはカスタマイザーからWebフォントの設定も行えるのですが、Webフォントをキャッシュにする設定も.htaccessに記載されていました。Luxeritasを使用する方は同梱されている.htaccessを利用したほうが良いと思います。

圧縮・最適化、CSS、javascript

以下、るな様のページを参考に関係あるものをピックアップ。

高速化に関する取り組み

私は以下を行いました。

  • HTML圧縮:圧縮率を低
  • CSS最適化:親子テーマのCSSを結合して圧縮
  • JS最適化:子テーマのjavascriptを結合・圧縮 (追加圧縮でシンタックスハイライトのprism.jsを読み込み)
  • アイコンフォントのCSS:非同期で読み込み。Luxeritasの最小限ではなくFontAwesomeオリジナルCSSを利用
  • jquery.js と jquery-migrate.min.js の結合
  • WordPressの絵文字スクリプトを読み込まない
  • WordPressのEmbed機能をオフ
  • 使っていないウィジェット用のCSSをオフ

以下については、高速化の観点で有効だと思うものの、副作用を考えて設定しておりません。

  • AMP有効化
  • jQueryを非同期で読み込む(jQueryにasync, プラグインにdefer)

ちなみに、上述したシンタックスハイライトのPrism.jsはコレのことを指しています。

Prismを利用するには、”prism.js”と”prism.css”を読み込ませる必要がありますが、Luxeritasの機能を利用してprism.jsは圧縮&自動読み込みしています。その為、Luxeritasを利用しているユーザーの場合、functions.phpにはprism.cssを読み込む設定のみ書けば十分。

グローバルナビゲーションにカテゴリを指定し固定表示する

グローバルナビゲーションというのは上部に表示されているバーのことです(赤で囲んだところ)。

このバーにカテゴリを表示させることにしました。又、ワンクリックで、このバーをスクロールに追従させることも可能でした。

最近は上部ナビよりも、↓のようなサイトの左ナビゲーションが流行ってるらしいですね。

プラグインで行ったこと

コンテンツの生成かかわるもののみ。

目次の生成

Table of Contents Plusというプラグインは継続使用。

人気記事の生成

WordPress Popular Postsというプラグインは継続使用。でも、このプラグインはサーバーに負荷を与えるらしいので、本当は使わないほうが良いのかもしれません。。

ちなみに、新着記事とサイトマップについてはLuxeritasオリジナルで機能が用意されている為、プラグイン不要です。

読み込むプラグインを設定

plugin load filterというプラグインを利用し、読み込むプラグインを設定しました。

これは、コンテンツ生成にかかわるプラグインではないのですが…

当サイトではTeX記法を用いたページがあるのですが、それを表示させるためにWP QuickLaTeXというプラグインを導入しています。これが重いのです。

そこでカスタムフィールドを利用して、該当ページのみMathJaxと当てようとしたのですが失敗。

苦肉の策として、plugin load filterで該当ページにだけWP QuickLaTeXを読み込ませています。

子テーマの編集

Google Analyticsの設定

アクセス解析用のスクリプトを埋め込むファイルが用意されています(add-analytics.php)ので、そこにAnalyticsのコードを記載するだけです。

ちなみに、Analyticsの計測対象からログインユーザーを除外したい場合は、phpの記述を

<?php if(!is_user_logged_in()): ?>

とすれば良いらしい(私はブラウザのアドオンを用いて、自信をカウントしないようにしているので、Wordpressには何も書いていませんが…!)

カエレバ・ヨメレバのCSSカスタマイズ

私はカエレバ・ヨメレバという商品紹介用のブログパーツを利用しています。

このブログパーツのCSSの設定を行います。

『第0版』様のCSSを拝借(丸パクリ)させていただきました。なんとこの方もLuxeritasテーマを使用しているみたい…!!

リンク先のCSSをstyle.cssにコピペすれば、

カエレバリンクがこんな感じに表示されます。

ちなみに、カエレバのCSS設定を調べてみると、検索上位にヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ! – Yukihy Lifeというサイトさんが出てきました。

これも控えめデザインですが、レスポンシブ版の方にimgタグの処理が入っていない(Luxeritasを使ってる人はレスポンシブ版を使うと思う)ので、表示がズレてしまっているようでした。

imgタグをinlineスタイルにするか、imgタグを消すか…ですが、こちらを使いたい人は

.kaerebalink-link1 img, .booklink-link2 img {
   display:none;
}

みたいなことをCSSに追加しないと表示が崩れると思います(本当は消すよりinlineにしたほうが良いとは思うのですが)。

キャプション付の図の周りに線を引く

WordPressで図を貼り付けたとき、”本文”と”キャプションの説明文”の境界がわかりにくかった為、周りに細い線を引くようにしました。

.wp-caption { 
    border-style: solid; 
    border-width: thin; 
    border-color: rgb(200,200,200); 
    padding: 0.5em 0.5em 0 0.5em; 
}
キャプション付の図。境界がわかりやすいようにこんな感じで周りに線を引きます。豚の貯金箱かわいい。でも、このデザインだとちょっとブログカードっぽく見えちゃって紛らわしいかも…?

他にも方法は色々あると思いますが(キャプションの文字を小さくして色を薄くしてみるとか、marginを確保するとか)、境界線が手っ取り早いかなという安直な方法。

図にキャプションがついている場合はfigureタグのクラスに.wp-captionが指定されているみたいでしたので、.wp-captionをターゲットにしています。

又、キャプションの説明文が左に寄りすぎていたので、paddingを設定してみました。本来であれば、キャプションの説明文(figcaption)に設定されている.wp-caption-textというクラスのpaddingをいじった方が良いと思うのですが、どうやらあえて左右のpaddingを0に設定しているっぽいので、figure毎いじってみた。

フォントを設定

Webフォントを利用しようかと思ったのですが、フォントが汚く表示されるのって基本的にWindowsだけなんですよね。Windowsの為だけに他の人にフォントをDLさせるのも微妙なのでデフォルトで頑張ってみることにしました。

ちなみに、LuxeritasではカスタマイザーからWebフォントを使用することが可能です。

Luxeritasのカスタマイザーからフォント設定の画面にいき、フォントを「指定しない」にしました。その上で2020年まで使えるfont-familyおすすめゴシック体 – Qiitaを参考に、以下の通りフォントを設定しました(CSSセレクタだけ少し変えています)。

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

body, body.mceContentBody {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

/* IE10以上 */
@media all and (-ms-high-contrast: none) {
  body, body.mceContentBody {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

Windowsでは、Windows 8.1以降に採用されたYu Gothicを利用していますが、Chromeで文字がカスれる等の問題があるので、その対策をしています。

見出しの設定

/* Heading */
.post h2 {
    border-left:none; /* デフォルトの設定を取る */
    color: rgba(255,128,171 ,1);
    text-align: center;
    margin-top: 45px; /* デフォルト:35px */
    padding: 8.5px; /* デフォルト:上下8px, 左右20px */
    border-top: solid 2px rgba(255,128,171 ,1);
    background: -webkit-repeating-linear-gradient(45deg, rgba(255,128,171,0.15), rgba(255,128,171,0.05) 4px, rgba(255,128,171,0.1) 4px, rgba(255,128,171,0.05) 7px);
    background: -o-repeating-linear-gradient(45deg, rgba(255,128,171,0.15), rgba(255,128,171,0.05) 4px, rgba(255,128,171,0.1) 4px, rgba(255,128,171,0.05) 7px);
    background: -moz-repeating-linear-gradient(45deg, rgba(255,128,171,0.15), rgba(255,128,171,0.05) 4px, rgba(255,128,171,0.1) 4px, rgba(255,128,171,0.05) 7px);
    background: repeating-linear-gradient(45deg, rgba(255,128,171,0.15), rgba(255,128,171,0.05) 4px, rgba(255,128,171,0.1) 4px, rgba(255,128,171,0.05) 7px);
}

.post h3 {
    border-style: none;     /* デフォルトの設定を取る */
    margin-left: 0px; 
    padding: 0;
    color: rgb(10,10,10);
}

.post h3:before { 
    font-family: FontAwesome;
    content: "\f292";
    margin-right: 10px;
    color: rgba(255,64,129 ,1);
}

main {
    color: rgba(90, 90, 90, 1);
}

デフォルトよりも本文と見出しのジャンプ率を上げたかったので、カスタマイザーから見出しのフォントサイズを上げました。それに加えて本設定をしてみた。

見出し2(h2)
h2要素は他の見出しとはっきりと区別したいので、上部のマージン(margin-top)を多めにとった。
より目立たせる為、文字中央揃えで、repeating-linear-gradientを使って背景をストライプにしてみた。まだ”勧告候補”の文法の為プレフィクスがカオスになってる。
見出し3(h3)
見出し2程は目立たせたくない。ジャンプ率を上げるため文字色のコントラストを強めにした(本文はよりグレーに近い色を使い、見出しはより黒に近い色を使う)。

記述リストのCSS設定

/* Description List */

.post dl {
        margin: 20px 0px;
        padding-left: 30px;
}

.post dt {
        font-weight: bold;
        border-bottom: dotted 1px rgba(0,0,0,0.3);
        margin-top: 10px;
}

.post dd {
        margin-bottom: 10px;
        padding-left: 20px;
        
}

HTML5で使い勝手がよくなったdl dt dd要素。

さっきのコレで使ってます。

見出し2(h2)
h2要素は他の見出しとはっきりと区別したいので、上部のマージン(margin-top)を多めにとった。
より目立たせる為、文字中央揃えで、repeating-linear-gradientを使って背景をストライプにしてみた。まだ”勧告候補”の文法の為プレフィクスがカオスになってる。
見出し3(h3)
見出し2程は目立たせたくない。ジャンプ率を上げるため文字色のコントラストを強めにした(本文はよりグレーに近い色を使い、見出しはより黒に近い色を使う)。

デフォルトで見た目が何も設定されていなかったので、せめてdt要素のfont-weightを濃くしようかなと思いました。

ついでにdt要素の下に線を引いてみた。本当は、最低限の見た目以外は、classを設定して作っていくのが良いと思うのですが、個人ブログですし、メンテ性より利便性ということで、コレで問題でたらその時考えます。

やりたいけどできてないこと

技術力の関係や時間の関係でできてないことを、とりあえず備忘的に残しておきます。

対処できたら更新していきます!

構造化データの「authorがありません」エラー

Google Search Consoleでめっちゃエラーが発生していました。hentryに「authorがありません」というエラーらしい。

例えばhttp://yutorinote.com/mozjpegを確認してみたら確かにauthorがない…。

投稿ページ、一覧ページでcontainerサイズを切り替えたい

  • 一覧ページは2カラムレイアウト
  • 投稿ページは1カラムレイアウト

でレイアウトを作ろうと思ったのですが、カスタマイザーから行えるwidthの調整がcontainerに対してでした。

1カラムレイアウトでcontainerのwidth 1280pxだとでかすぎるんですが、1カラムレイアウトに合わせてwidthを調整すると、今度は2カラムレイアウトの幅が小さすぎるのですよね(;´∀`)

1カラムレイアウトの横幅だけがとっても横長になってしまっています笑

wordpressはis_single()とかそんな感じで、投稿ページか、一覧ページか判別する関数があるらしいので、たぶんなんとかできるんだと思いますが、wordpressの知識皆無の為とりあえず保留。

Qiita風の見出しを作りたい

Qiitaじゃなくても良いんですが、右側に出てくる見出しあるじゃないですか。例えば、↑こーゆーヤツ(Qiita の記事の見出しに Font-Awesome を利用して見栄えを良くする)。

スクロールに追従して、該当の見出しにきたら色がつく…という例のアレ。

あれウィジェットでなんとかなるのかなぁ(;´∀`)

これができたら、投稿ページも2カラムレイアウトでもよいかも。

ちなみにtoc+プラグインはサイドバーにウィジェットとして貼り付けできました。

やりたいことは近いのですが、目次のないページにアクセスした際にゴミが生成されてしまいました…笑

1カラムの時はSidebarを選択できないようにする

1カラムを使用していても、スマホ表示にした際、Sidebarが有効化されてしまっているようなので、これを無効化したい。

欲を言えば、私のような雑記ブログだと、Prev/Nextのボタンがほぼ意味をなさないので、”人気記事”とか”新着記事”みたいなものを配置できないかなぁと思案中。

※追記:Sidebarの件はVer 1.53で修正が入り、1カラムでは表示されなくなりました
機能追加と仕様変更とその他ちょこちょこ Luxeritas 1.53 | Thought is free

カテゴリ階層への対応

私はグローバルナビゲーションの部分にカテゴリを用意しました。

PCでは第一階層(ここでは”資産運用”)をクリックすることができるのですが、スマホでは第一階層をクリックできません(ドリルダウンのボタンになっている為)。

 


最上部へ戻る