本記事は私が運営する「急がば回れ！」ブログから移転させた記事です
ブログサーバをお名前.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の見出しは少しデザイン性のあるものにしました。こちらのソースコードを参考に、四角の大きさや位置を変更しました。
見出しのデザインをCSSのみでカスタマイズする（一部CSS3対応）
/* 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で変更しました。
ホバー色とは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で変更しました。
たくさんのカスタマイズが掲載されていてとっても参考になるこちらのページを参考にし、ページネーションの色を変更の部分のみ使わせていただきました。
Luxeritas（ルクセリタス）の見た目をオシャレに！ 13のカスタマイズしたことまとめ【WordPressテーマ】
/* ページネーションの色を変更 */
.pagination>.active>span, .pagination>li>a:hover{
background: none;
background-color: #ff667c;
}
.pagination>li span, .pagination>li>a{
background-color: #fbfbfb;
}
タグクラウドのデザインを変更
タグクラウドはデフォルトだと文字の大きさが統一しなくて個人的には見にくいので、タグクラウドの大きさを統一してアイコンにしました。
タグクラウドをシンプルに見せてくれるデザインが素敵なこちらの記事を参考にさせていただきました！
大きさやカラーは変更しています。マウスホバー時に色が逆転するような設定にしています。
WordPress無料テーマ「Simplicity2」カスタマイズ備忘録
/* タグクラウドのデザイン変更 */
.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にソースコードを書くとアイキャッチ画像の下に余白を入れられました。
Luxeritasの開発者さんが書いているこちらの記事を参考にさせていただきました。
Luxeritasで個別記事のタイトル下にアイキャッチ画像を表示させる方法（プラグイン使わない版）
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はタイムラインを埋め込みたかったので、ウィジェットで追加しました。
twitterのプロフィールと設定>ウィジェットを選択し、新規作成を選びます。4つ出る表示リストの中から「Embeded Timeline」を選択し、自分のtwitterのアドレスを入力して「Preview」を押します。
「set customization options」を選択すると、ウィジェットの大きさを変更できます。「copy code」を押して、それをウィジェトのテキストとして入力します。
Instagramの連携
LuxeritasにはInstagram連携の機能はないようなので、Instagramと連携するために「Instagram Feed」というプラグインを使いました。
Instagram Feedのプラグイン設定画面>カスタマイズで、写真の枚数を3列9枚表示に変更しました。モバイルで見ると3列×3列にならずに1枚ずつ表示されるので、写真数は余り多くない方がいいと思います。
「フォローする」ボタンの色を変えました。「もっと見る」ボタンは外しました。設定変更が完了した後、[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 3.2.3にアップデート！カスタマイズと不要なプラグイン削除
本記事は私が運営する「急がば回れ！」ブログから移転させた記事です Luxeritasを使い始めて半年以上。Luxeritasの機能が結構増えていたのでそろそろアップデートしてみようかなと思って、Lux ...
Luxeritasのダウンロードはこちらからできます。こんな素晴らしいテーマを作ってくださった開発者さん、本当にありがとうございます。超気に入ってます。
