お仕事の依頼はココをクリック
スポンサーリンク
スポンサーリンク

コピペで簡単|ワードプレス無料テーマルクセリタスのカスタマイズをまとめてみた!

ブログ
スポンサーリンク

 

まいどおおきに!おおもと(@so88qa)です

今回は、前回の記事『wp無料テーマ』Luxeritas(ルクセリタス)を詳しく解説!』で解説をした、Luxeritas(ルクセリタス)のCSSのカスタマイズ記事です。

『wp無料テーマ』Luxeritas(ルクセリタス)を詳しく解説!
ワードプレス無料テーマの『Luxeritas(ルクセリタス)』の解説記事です! この、Luxeritas(ルクセリタス)という無料テーマは使用者が少なく情報が少ないワードプレス無料テーマですが、めっちゃスペックの高いテーマです!

この、Luxeritas(ルクセリタス)という無料テーマは使用者が少なく情報が少ないワードプレス無料テーマですが、めっちゃスペックの高いテーマです!

Luxeritas(ルクセリタス)の特徴として

  • 高速化
  • SEO最適化
  • レスポンシブ最適化
  • 多機能

を実現している、数少ない無料テーマです!

そのLuxeritas(ルクセリタス)を「もっと自分好みにカスタマイズしたいよ!」と考えている人はぜひみてください!

 

2019年|本気でおすすめするワードプレス テーマを4つ紹介します!
ブログを始めたけど、テーマが多すぎて何をつかったらいいのかわからない そんな人に本気でオススメするテーマを「SANGO・JIN・Cocoon・Luxeritas」の4つだけ紹介する記事です PCが得意な人・PCが苦手な人の基準で紹介するので、ワードプレスのテーマで迷っている人は参考にしてください。

 

スポンサーリンク

Luxeritas(ルクセリタス)のCSSカスタマイズ

 

おおもと
おおもと

ぼくが変更しているCSSのカスタマイズはこれだ!

 

見出しの色の変更

/*見出し変更*/

.post h2 {

padding: 0 5px 5px;
 clear: both;

border-left: 8px solid #008899;

border-bottom: 3px solid #008899;

}

.post h3 {

clear: both;

border-left: 5px solid #008899;
       margin-left: 0px;

}

このCSSはh2タグとh3タグのタグの表示と色をしてているものです。

線の色を自分のブログにあった色に変更してください。

 

スマホ記事を読むボタン色

/*スマホ記事を読むボタン色*/

@media (max-width: 540px){

 .read-more-link{

border: 1px solid #57a5cc;

color: #008899;

background: #fff;
 }

 #list .excerpt{

margin-bottom:10px;
 }

 .entry-title{

       font-size: 18px;

}

}

このCSSはスマホで表示される記事を読むというボタンの色と文字の色を変えているものです。

これも、緑色を塗っているところを変えてください。

 

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

/*ページネーションの色 */

.pagination>.active>span, .pagination>li>a:hover{

   background: none;
   background-color: #008899;

}

.pagination>li span, .pagination>li>a{

   background-color: #57a5cc;

}

このCSSはベネーションの色を変えているものです。

これも、緑色を塗っているところを変えてください。

 

トップ下前後記事の色の変更

/* トップ下記事色変更 */

#pnavi a:hover{

   color:#008899

}

このCSSはトップ下の前後記事の色を変えているものです。

これも、緑色を塗っているところを変えてください。

以上のものが、style.cssに記載したものです。

次が、functions.phpに記載するものになります。

 

トップページ会員カテゴリー非表示

/*トップページ会員カテゴリー非表示*/

function exclude_category( $query ) {

   if ( $query->is_home() && $query->is_main_query() ) {

       $query->set( 'cat', '-16' );
   }

}

add_action( 'pre_get_posts', 'exclude_category' );

 

このCSSは特殊で最初に表示されるページに特定のカテゴリーの記事を表示させないようにするものです。

 

 

CSSを書く上の注意点

 

おおもと
おおもと

バックアップをとってからCSSを書こう!

 

CSSはプログラミング言語です。

 

書き間違えて保存するとブログが吹き飛びます。必ずバックアップをとってから書いてください。

ぼくは、2回ほどサイトを壊しました

 

画面が真っ白になってマジで焦るので注意!!!!

 

 

CSSをむやみやたらに書かない

 

おおもと
おおもと

CSSを書きまくると重くなるので注意

 

Luxeritas(ルクセリタス)のような高速なテーマでなくても、CSSをやたら記載しすぎるとサイトが重くなります。

必要最小限の記載にとどめて、むやみやたらに書かないでください。

 

さらに、CSSを圧縮してしまうとうまく反映されないことがあるので注意してください。

 

 

まとめ

 

おおもと
おおもと

どんどんチャレンジしてみよう!

 

CSSは見た目が大事なブログにとって欠かせないものです。

有料テーマ・無料テーマに限らず覚えておいて損はないものになっています。

ぜひめんどくさがらず、チャレンジして見ましょう!

 

最後に、バックアップは忘れないようにしてくださいね!

 

2019年|本気でおすすめするワードプレス テーマを4つ紹介します!
ブログを始めたけど、テーマが多すぎて何をつかったらいいのかわからない そんな人に本気でオススメするテーマを「SANGO・JIN・Cocoon・Luxeritas」の4つだけ紹介する記事です PCが得意な人・PCが苦手な人の基準で紹介するので、ワードプレスのテーマで迷っている人は参考にしてください。

 

 

わたし
おおもと
質問などがあれば、コント覧に書き込んでください!

- Comments -

タイトルとURLをコピーしました