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