【ルクセリタス】一覧の「続きを読む」リンクをボタン風にカスタム

Programming

今回はWordPressの人気無料テーマのLuxeritas(ルクセリタス)の投稿記事一覧の「続きを読む」リンク/ボタンを好きな形にカスタムする方法を紹介します。(CSSクラス/idの解説です。)

ルクセリタスとは?

ルクセリタスは「るな」さんという方が制作しているWordPressの無料テーマです。SEO対策関連が非常に強く、PWAに対応、AMP対応。カスタムのし易さ、完全レスポンシブ対応。そしてスピードが超速い。とにかく扱いやすく高機能で個人的に最もおすすめなテーマです。しかも「GPL v2 or later」ライセンス、カスタマイズ自由自在で商用利用が可能です。

Luxeritas は SEO 最適化済み、多機能なのに高速な無料の WordPress テーマです。

詳しくはルクセリタス公式ページより。

「続きを読む」

ルクセリタスの「続きを読む」のレイアウトはLuxeritasカスタム(外観)グリッレイアウトで設定可能です。

初期設定ではPCでの見た目は下記の様にテキストリンクになってます。

スマホ表示では下記の様なボタンになっています。

「続きを読む」リンクをカスタム

上記の「続きを読む」リンクをカスタムしていきます。
カスタムと言っても、CSSで見た目を変えるだけなので、CSSのリテラシーが少しでもあれば可能です。(コピペでOK

「続きを読む」リンクのidとCSS class

「続きを読む」リンクのCSS classは「.read-more-link」です。(リンクが入っているdivが「.read-more」です。)
「続きを読む」リンクが入っているセクションは「#list」です。

そのため「#list .read-more-link」に対してスタイルを記述していけばOKです。

/*記事一覧初めの3つ_続きをみる*/
#list .read-more {
 margin: 0px 10px 10px 10px;  /*「続きを読む」ボタンの位置調整*/
}
#list .read-more-link {
 text-decoration: none;  /*「続きを読む」リンクの下線を消す*/
 border: 1px solid #aaa;  /*ボタン風に*/
 padding: 12px;  /*ボタンの大きさ調整*/
 text-align: center;  /*「続きを読む」のテキスト位置調整*/
 background: #f4b364;  /*ボタンの背景*/
 border-radius: 8px;  /*ボタンを丸く*/
 color: #555;  /*リンクの色*/
 transition: .4s;  /*動作開始時間*/
}
/*記事一覧初めの3つ_続きをみる_ホバー時*/
#list .read-more-link:hover { 
 background: #4e92df;  /*ボタンの背景*/
 color: #fff;  /*リンクの色*/
 transition: .4s;   /*動作開始時間*/
}
#list .read-more-link i {
text-decoration: none;   /*アイコンのリンクの下線を消す*/
}
/*スマホ時の調整*/
@media (max-width: 575px) {
 #list .read-more-link {
  margin: 10px 60px 10px;
 }
}

上記のCSSを使えば下記の様に、マウスホバーした時にオレンジ → 青 に切り替わるボタンが完成します。

上記のCSSの「background: #f4b364;」や「color: #555;」の部分の色を変更したり、「border-radius: 8px;」のpx数をあげたり、消したりとしてオリジナルに編集してみて下さい。


以上が「【ルクセリタス】一覧の「続きを読む」リンクをボタン風にカスタム」でした。
押したくなる「続きを読む」ボタンがあると回遊率の増加にも繋がると思います。またデザイン的にもオシャレになるので是非今回のカスタムを参考に色々と編集していってみて下さい。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

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