1. TOP
  2. 【TCD013】メインスライダーを消して、画像に差し替える方法!

【TCD013】メインスライダーを消して、画像に差し替える方法!

ワードプレス この記事は約 3 分で読めます。

今回は結構ニッチなニーズに応える記事です。
というか、ほとんど私の奮闘記みたいなもんですね(笑)。

TCD013のテンプレートは完成されてはいるんですが、
その分カスタマイズがやりにくいというデメリットはあります。

そのため色々と苦労はしましたが、
メインスライダーを消して画像に差し替える方法を、
画像付で解説していきます。


メインスライダーって何?

メインスライダーと言うのは、赤で囲った部分です。



記事を作成する時に「この記事をおすすめの記事として表示する」
というチェックを入れて公開すると、
このメインスライダーに表示されるんですよね。

2014-08-14_225253

これは複数の記事を登録することができ、
複数登録すると色々な記事がスライドショーのように表示されます。

まあ、基本はいじくる必要は無いかもしれません(笑)。
と言っても始まらないので、カスタマイズ方法を書いていきます。

メインスライダーの記載箇所

メインスライダーはCSSに記載されていますので、
まずは「外観」→「テーマ編集」をクリック。

2014-08-14_225759

次に「メインインデックスのテンプレート」をクリック。

2014-08-14_225821

そして赤で囲っているのがメインスライダーです。

2014-08-14_225922

※操作する前に、必ずバックアップは取りましょう!
中身の分を丸ごとコピーして、
テキストファイルなどにペーストしておけばOKです。


ここを丸ごと消して画像を差し込めば、
現在のトップ画面のようになります。

2014-08-14_224527

画像のスマホ最適化

しかしこうやって画像を差し替えただけでは、
スマホの表示は酷いものになります。

2014-08-14_230816

明らかにはみ出してしまっているのがわかりますよね。
かといってスマホサイズに縮小してしまうと、
パソコンでの見栄えは良くない。

そんな悩みを一発で解決してくれる方法があります。

これもCSSをいじるので、同じく「外観」→「テーマ編集」と進み、
次の画面で右下の「スタイルシート」をクリックします。



※操作する前に、必ずバックアップは取りましょう!
中身の分を丸ごとコピーして、
テキストファイルなどにペーストしておけばOKです。


ここの一番下に、下記コードを埋め込んでください。

img {
max-width: 100%;
height:auto;
}

こんな感じで埋め込んだら、「ファイルを更新」をクリック。

2014-08-14_231405

するとこのように、スマホでもちゃんと表示されます。

2014-08-14_230741

\ SNSでシェアしよう! /

LSCの注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

LSCの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

関連記事

  • EWWW Image Optimizerで画像サイズを一括最適化

  • WordPress Popular Postsでカスタマイズ!

  • 【2016最新版】ワードプレスで入れておくべきプラグイン22選!

  • 【TCD013】アップデートはなぜ必要?更新の方法と影響は?

  • 【TCD013】有料テンプレート導入のメリット・デメリット

  • ユーチューブ動画が埋め込めない?ワードプレスの権限とユーザー設定