ブログテーマをLuxeritasに変更してカスタマイズした12項目と困ってること

2017-09-25ブログ運営

ルクセリタスのカスタマイズ

ブログサーバをお名前.comからXサーバーに移転したのと合わせて、ブログのテーマをSimplicityからLuxeritasに変更しました。

Luxeritasはボタンひとつでカスタマイズできる項目が多く、デフォルトのデザインが気に入ったので、ほとんどスタイルシート(CSS)を変更していません。

少ないながらも私がLuxeritasで行ったカスタマイズと、素人なばかりにつまづいた点をご紹介します。

ブログテーマを変更した経緯

Simplicityはカスタマイズが簡単で、インターネットで探すとかなり豊富な導入事例、トラブルシューティングが出てくる点が良かったです。Simplicityをブログで使っているユーザはとても多いからね。

自分でSimplicityのCSSをカスタマイズしておきながら、もっとシンプルな見た目にしたいなぁ、サクサク動くテーマがいいなぁと思ってました。

そんな時にLuxeritasを知りました。

Luxeritasは無料のテーマでありながら、

  • 見た目が超絶シンプル
  • ボタンひとつでカスタマイズできる項目が多い
  • SEO最適化済み
  • 高速
  • レスポンシブ対応
  • 不要なプラグインを一気に削除できそう

などなど理想すぎる利点が!

気に入らなかったら元のテーマに戻せばいいし、と思って試してみることにしました。すごく満足してるからもう戻さないけどね!

Luxeritasで行ったCSSのカスタマイズ

Luxeritasは「外観カスタマイズ」の項目でかなり色々と変更できるので、CSS(子テーマ)に変更を加えたのは最小限です。

Luxeritasはブラックグレー系カラーで統一されてるから、カラーを変更したのが多いかな。

見出しの変更

Luxeritasのデフォルト見出しはかなりシンプルなので、カラーと合わせて見出しを変更しました。飽きたらカラーのみ変更してデフォルトの見出しに戻すかも。

ルクセリタスの見出しカスタマイズ

H2見出しの変更

H2の見出しはカラーのみ変更しました。

/* h2見出しの変更 */
.post h2 {
    border-left:8px solid #ff667c
}

H3見出しの変更

H3の見出しは少しデザイン性のあるものにしました。こちらのソースコードを参考に、四角の大きさや位置を変更しました。

/* h3見出しの変更 */
.post h3{
    position: relative;
    margin: 0 0 1.5em;
    padding: 0.5em 0.5em 0.5em 2.0em;
    border-bottom: 2px solid #ff667c;
    border-left: none
}

.post h3:before{
    content: "□";
    font-size: 100%;
    position: absolute;
    color: #ffcdd4;
    top: -0.1em;
    left: 0.4em;
    height: 15px;
    width: 15px;
}

.post h3:after{
    content: "□";
    font-size: 100%;
    position: absolute;
    color: #ff667c;
    top: 0.3em;
    left: 0;
    height: 15px;
    width: 15px;
}

H4見出しの変更

H4の見出しは、カラーのみ変更しました。

/* h4見出しの変更 */
.post h4 {
    border-left:15px solid #ffcdd4
}

トップページの記事タイトルのホバー色を変更

リンクのホバー色はLuxeritasの外観カスタマイズで対応できるのですが、トップページの記事タイトルのホバー色は変更できなかったので、CSSで変更しました。

Atención

ホバー色とはPCでマウスオンした時の色です。

ルクセリタスのトップページホバー色カスタマイズ

/* トップページの記事タイトルホバー色変更 */
.entry-title a:hover{
    color:#ff667c
}

関連記事のタイトル色・ホバー色を変更

同様に関連記事のタイトルとホバー色も変更できなかったので、CSSで変更しました。

ルクセリタスの関連記事ホバー色カスタマイズ

/* 関連記事のリンク色・ホバー色変更 */
#related .toc a {
    color:#ff667c /*リンクテキストの色*/
}

#related .toc a:hover{
    color:#ffb2bc /*ホバーの色*/
}

記事ページ下にある前後の記事のホバー色を変更

各記事ページの下にある前後の記事のホバー色を変更しました。

ルクセリタスの前後記事ホバー色カスタマイズ

/* 前後記事のホバー色変更 */
#pnavi a:hover{
    color:#ff667c
}

ブログカードのホバー色を変更

ブログカードのホバー色がデフォルトではオレンジなので、CSSでピンクに変更しました。

ルクセリタスのブログカードカスタマイズ

/* ブログカードのホバー色変更 */
a.blogcard-href:hover {
    color:#ff667c
}

ページネーションの色を変更

ページ下にあるページネーションの色はLuxeritasの外観カスタマイズでは変更できなかったので、CSSで変更しました。

ルクセリタスのページネーション色カスタマイズ

たくさんのカスタマイズが掲載されていてとっても参考になるこちらのページを参考にし、ページネーションの色を変更の部分のみ使わせていただきました。

/* ページネーションの色を変更 */
.pagination>.active>span, .pagination>li>a:hover{
    background: none;
    background-color: #ff667c;
}
.pagination>li span, .pagination>li>a{
    background-color: #fbfbfb;
}

タグクラウドのデザインを変更

タグクラウドはデフォルトだと文字の大きさが統一しなくて個人的には見にくいので、タグクラウドの大きさを統一してアイコンにしました。

ルクセリタスのタグカスタマイズ

タグクラウドをシンプルに見せてくれるデザインが素敵なこちらの記事を参考にさせていただきました!

大きさやカラーは変更しています。マウスホバー時に色が逆転するような設定にしています。

/* タグクラウドのデザイン変更 */
.tagcloud a {
    font-size: 12px !important; /* 文字サイズ */
    line-height: 1em;
    border: solid 1px #ff667c;
    background: #fff; /* 背景色 */
    color: #ff667c; /* 文字色 */
    display: inline-block;
    white-space: nowrap;
    padding: 8px 8px; /* 文字周り余白 */
    margin-top: 3px; /* タグ余白 */
    border-radius: 4px; /* 角を丸くする */
    text-decoration: none;
}

.tagcloud a:hover {
    background: #ff667c; /* マウスホバー背景色 */
    color: #fff !important; /* マウスホバー文字色* /
}

/* タグクラウドにアイコンを入れる「Font Awesome」*/
.tagcloud a:before {
    font-family: "FontAwesome";
    content: "\f02b"; /* アイコンのコード */
    padding-right: 4px;
}

記事アイキャッチの下に余白を入れる

Luxeritasのデフォルト設定だと記事トップにアイキャッチ画像が入りません。

記事トップにアイキャッチ画像を入れる場合は、functions.phpにソースコードを書くと記事トップにアイキャッチ画像が挿入されます。

さらにCSSにソースコードを書くとアイキャッチ画像の下に余白を入れられました。

ルクセリタスの記事にアイキャッチ表示

というわけで、こちらのページを参考にさせていただきました。

functions.phpに追加するコード

function display_post_top_thumbnail( $content ){
	if( has_post_thumbnail() === true ) {
		global $post;
		$content = '<div class="post-top-thumbnail">' .  get_the_post_thumbnail( $post->ID, 'full' ) . '</div>' . $content;
	}
	return $content;
}
add_filter( 'thk_content', 'display_post_top_thumbnail', 11, 1 );

CSSに追加するコード

.post-top-thumbnail {
    text-align: center;
    margin-bottom: 30px;
}

WordPress Popular Postsの見た目を変更

人気記事を表示するにはWordPress Popular Postsを使っています。

Luxeritasにはデフォルトで新着記事を表示するウィジェットがありますが、新着記事のデザインとWordPress Popular Postsのプラグインが作り出す人気記事のデザインが異なってしまいます。

ルクセリタスの人気記事カスタマイズ

人気記事のデザインをLuxeritas仕様の新着記事のデザインに合わせて、さらに順位も表示されるように。こちらの記事を参考にさせていただきました!

順位表示のバックグランドカラーをピンク色に変えました。

/* Popular Postの見た目カスタマイズ */
    ul#popular-posts.wpp-list li img {
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #ddd;
    padding: 1px;
    margin-bottom: 1em;
}
.wpp-post-title {
    font-size: 100%;
    font-weight: bold;
    line-height: 1.4;
}
.wpp-excerpt {
    font-size: 1.2rem;
    line-height: 1.4;
}
ul#popular-posts.wpp-list {
    counter-reset: pupular-ranking;
}
ul#popular-posts.wpp-list li {
    position: relative;
    padding: 15px 0 15px 0;
    border-top: 1px dotted #ccc;
}
ul#popular-posts.wpp-list li:first-child {
    border-top: none;
}
ul#popular-posts.wpp-list li:before {
    background: none repeat scroll 0 0 #ff667c;
    color: #fff;
    content: counter(pupular-ranking, decimal);
    counter-increment: pupular-ranking;
    font-size: 100%;
    left: 0;
    top: 15px;
    line-height: 1;
    padding: 4px 7px;
    position: absolute;
    z-index: 1;
    opacity: .9;
    border-radius: 0;
}

モバイルの記事を読むボタンカラーを変更

モバイルの「記事を読む」のボタンがデフォルトではグレーなので、ピンク色に変更しました。

ルクセリタスの記事を読むボタンカスタマイズ

/* モバイルの記事を読むボタンカラーを変更 */
@media (max-width: 540px){
.read-more-link{
    border: solid #ff667c;
    color: #fff;
    background: #ff667c;
}
}

ウィジェットのカスタマイズ

twitterのタイムライン埋め込みとInstagramを連携をさせたかったので、ウィジェットで追加しました。

twitterのタイムライン埋め込み

Luxeritasのデフォルト機能でtwitterとFacebookのアカウント連携はできます。twitterはタイムラインを埋め込みたかったので、ウィジェットで追加しました。

wordpressルクセリタスにtwitterウィジェット連携

twitterのプロフィールと設定>ウィジェットを選択し、新規作成を選びます。4つ出る表示リストの中から「Embeded Timeline」を選択し、自分のtwitterのアドレスを入力して「Preview」を押します。

ルクセリタスtwitter連携

「set customization options」を選択すると、ウィジェットの大きさを変更できます。「copy code」を押して、それをウィジェトのテキストとして入力します。

Instagramの連携

LuxeritasにはInstagram連携の機能はないようなので、Instagramと連携するために「Instagram Feed」というプラグインを使いました。

wordpressルクセリタスをインスタ連携

Instagram Feedのプラグイン設定画面>カスタマイズで、写真の枚数を3列9枚表示に変更しました。モバイルで見ると3列×3列にならずに1枚ずつ表示されるので、写真数は余り多くない方がいいと思います。

wordpressルクセリタスをインスタ連携

「フォローする」ボタンの色を変えました。「もっと見る」ボタンは外しました。設定変更が完了した後、[Instagram Feed]という文字をウィジェットのテキストで入力すれば、Instagram連携の完了です。

Luxeritasに変更して良かったこと

  • 本当に高速、スピードテストの結果が抜群に良くなった
  • 見た目がシンプル
  • 外観のカスタマイズが簡単
  • プラグインの数が減った

困っていること

私に知識がないため、ちょいと困っていることがあります。

H3見出しがヘッダー上帯状メニューに表示されてしまう

なぜかH3見出しがWordPressのヘッダー上帯状メニューに表示されます。

ルクセリタスのカスタマイズした見出しが帯状ヘッダーに表示されてしまう

タイミングによってヘッダー上帯状メニューに表示されたり、そのバックグラウンドに表示されたり、と症状が落ち着かないのですが、何が原因でこのような表示が出てしまうのかが不明です。どなたか原因わかったら教えてください…。

とブログで助けを求めていたら、なんと!このページでカスタマイズ記事を紹介したとみーさんからアドバイスいただきました。嬉しすぎる。

私がもともとCSSに書いていたH3見出しに誤りがありました。

以前に書いていたコード(現在は修正済)

.post h3{
    position: relative;
    margin: 0 0 1.5em;
    padding: 0.5em 0.5em 0.5em 2.0em;
    border-bottom: 2px solid #ff667c;
    border-left: none
}

h3:before{
    content: "□";
    font-size: 100%;
    position: absolute;
    color: #FFBEDA;
    top: -0.1em;
    left: 0.4em;
    height: 15px;
    width: 15px;
}

h3:after{
    content: "□";
    font-size: 100%;
    position: absolute;
    color: #ff667c;
    top: 0.3em;
    left: 0;
    height: 15px;
    width: 15px;
}

どこを修正したのか。

それはh3:beforeとh3:afterの部分です。ここが何も指定がない状態になっていると、帯状メニューにもH3見出しの適用が入ってしまうようです。

.post h3:beforeと.post h3:afterに変更すれば帯状メニューの見出し表示はなくなる」ととみーさんよりアドバイス。

ルクセリタスでは.postが記事に対してカスタマイズをする指定になります。とみーさんのおかげで今日も一つ勉強になりました。

かわいいルクセリタスのカスタマイズだけでなく、ブログカスタマイズ記事がとても参考になるとみーさんのブログはこちらです。

twitterのシェア数カウントがされない

なぜかtwitterのシェア数がカウントされないの。

SSL化以前の分はまだ引き継げてないのだけど、Luxeritas変更後のFacebookやPocketはカウントされてる。twitterだけなぜなのだー。どなたか原因わかったら教えてください…。

Luxeritasをアップデート

2018年7月にLuxeritas 3.2.3にアップデートしました。

アップデート後に行ったカスタマイズと、不要なプラグインの削除はこちらです。

Luxeritasのダウンロードはこちらからできます。こんな素晴らしいテーマを作ってくださった開発者さん、本当にありがとうございます。超気に入ってます。

最後まで読んでくれてありがとう。
Hasta luegui!!!

ブログはエックスサーバーで運用中です。

こんな記事も読まれています

この記事を書いた人

moni

10年勤めた会社を退職し、スペイン語とスペイン文化+αを学ぶため、2015年6月よりスペインのセビージャ暮らし。日々の生活で気づいたこと、スペイン語のこと、セビージャのこと、などなどをブログに記録。熱中したら止まらないB型。Sevilla tiene un color especial〜♬

2017-09-25ブログ運営

Posted by moni