テーマ-Lightningのカスタマイズ&設定TwitterFacebookB!HatenaLINELINECopyLightningにはデフォルトでトップページにスライダーを設置する機能があります。そのまま使用するとPCではスライダーが大きく、スマホだと随分と小さく表示されてしまうなど、デザインに難あり。中身のHTMLを書く必要はありません。外観のカスタマイズからLightningトップページスライドショーに移動します。画像は同じサイズのものを使う画像は、1920×1280pxの画像を使います。横長の長方形画像ならサイズはどのくらいでも大体大丈夫ですが、すべてのスライドで同じ大きさの画像を使用してください。画像のリンク先も設定しておきます。タイトルと強調部分、説明文を入力タイトルは2行に分け、2行目にstrongタグを使って強調する部分を作ります。※strongタグの前に改行しましょう。見た目のデザインを同じにするために、タイトルや説明文は大体すべてのスライドで同じ大きさにします。次のコードをCSSカスタマイズに追加します。rgba(22,150,25,0.5)などと書いてある色の部分は自分のサイトカラーに変更しましょう。説明文の長さによって調整と書いてあるところで、説明文のスペースが変えられます。様々なサイズで確認しながら、自分が入力した説明文の高さに合わせて変えてみてください。タイトルが長すぎて綺麗に配置されない場合は、タイトルの文字の大きさを変更してください。li:nth-child(1):before{content:"レスポンシブ";}この部分でカルーセルインジケーターに文字を入れています。ここの数字が何番目のスライダーかの指定になっているので、スライドの数を増やすときはこの部分を数字を増やして追加しましょう。a.btn-ghostに変更しました。}にtext-alignt:centerを追記しました。文字数によって表示が崩れたけどCSSの基本がわからない方、もっと自分でカスタマイズしていきたい方はこの記事をチェック!完全初心者がサイトデザインのCSSカスタマイズをするための基礎知識と手順!つまづきWordPressサイトはCSSの知識がなくてもテーマの基本的なデザインで作ることができます。知らない間にカルーセルの矢印がi要素から画像に変わっていました。Awesomeに置き換えます。Awesomeのアイコンだった気がするので、置き換えてもそれほど問題はないはずです。テーマの更新などでデザインが崩れる可能性もあるので、Lightningの更新時には注意しましょう。Awesomeのアイコンを表示させています。Awesomeから見つけたアイコンのコードと入れ替えれば、他のアイコンも使えます。色だけ変えたい場合はcolor:rgba(255,103,152,0.8)を変えます。STEP0.8は透明度の指定なので、自分の選んだ色に合わせて調整してください。大きさはfont-sizeで変えられます。2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e);}画像はフリー素材で探し、大きさやファイルサイズを適切なサイズにしてから、WordPressのメディアに追加。20px~40pxくらいの大きさで、画像の圧縮などでなるべく小さいファイルサイズにしてからアップロードすると良いです。デザイン的なことを考えると背景透過の画像を用意しましょう。画像のURLを使って上書きします。backgroud-repeatなどで調整します。面倒なので、色を変えたいだけの場合はFontAwesomeを使った方法の方がおすすめです。オシャレなスライダーが簡単に設置できる!企業サイトやショッピングサイトでよく目にするスライダーがHTMLやJavaScriptを書かなくても設置できるのはLightningの良い所!見た目を少しカスタマイズしただけで一段上のサイトになります。さやお役に立てたらぜひシェアをお願いします。