こんにちは
何れもスタイル(CSS)を追加することで対応できそうです。
カスタマイズの追加 CSS 等に
/* スライダーのメイン タイトルとサブ タイトルの間の線 */
.text-slider .maintitle:after {
background-color: transparent;
}
/* スライダーのボタン */
.roll-button {
color: transparent;
background-color: transparent;
border: none;
/* ボタンの画像 */
background: #f8dce0 url("images/button.png");
width: 200px;
height: 38px;
}
.roll-button:hover {
color: transparent;
}
.roll-button.border:hover {
background-color: transparent;
}
/* コンテンツの区切り線 */
.content-area .hentry:after {
background-color: transparent;
}
トピック投稿者
YZ
(@akkeyyyy)
> ishitaka ( @ishitaka ) 様
大変ありがとうございます。ボタン画像に関する設定以外は、疑問なく(「理解した」とは申せませんが)上手くゆきました。
追加的に、ボタン画像に関連した質問を申し上げてもよろしいでしょうか? 我ながら低水準な質問で、申し訳ないのですが。
お示し下さった CSS の中の、「ボタンの画像」直下の 3 行に関してです。この部分の指定内容は、事例としてお書きくださったものと思いますが、下記(A)~(C)の 3 つの質問がございます。
(A) すでに、ボタンとして使いたい具体的な画像がございまして、この縦横サイズとデザイン(画像は「角丸四角形」でして、四スミに透明部分があります)を「そのまま」表示させたいです。その場合、URL の指定部分を除いては、下記のように記述すればよろしいのでしょうか?(元は 3 行ですが、下記の通り、1 行に減ります。)
/* ボタンの画像 */
background: transparent url("[パス]");
(B) 前記の画像のパスの指定ですが、これは、どのファイルから見た相対パスなのでしょうか?
(C) 前記(B)に対するご回答を拝見すれば判明することではございますが、(B)で見当違いの事を申し上げている可能性もありますので、質問申し上げます。今回の私の場合、ボタン画像は、WP やテーマに組み込まれたインターフェイスからのアップロードではなく、FTP アプリでアップロードしなければならないのだろうと思われますが、この場合、通常、どのディレクトリにアップロードすればよろしいのでしょうか?
なお、最初の投稿に記した通り、当テーマは、改変していないものの、Sydney テーマの子テーマです。子テーマのディレクトリは、一般的に推奨されているとおり、”sydney” ディレクトリと並列の位置に作成した “sydney-child” ディレクトリです。また、functions.php 内でエンキューしております。
以上、どうぞよろしくお願い申し上げます。
-
この返信は6年、 10ヶ月前にYZが編集しました。理由: 誤字を修正、その他不自然な表現を修正
(A)
透過 PNG 等の画像ファイルであれば、指定のスタイルで透過すると思います。
(B)
カスタマイズの追加 CSS の場合は現在の URL、style.css の場合は style.css の URL がベースになります。
カスタマイズの追加 CSS の場合は相対 URL ではなく、絶対 URL で指定した方がいいかなと思います。
(C)
個人的には、カスタマイズの追加 CSS であれば、メディアでアップロードしたファイル、テーマ(子テーマ)の style.css 等であれば、そのテーマ内(images や img 等のフォルダ)のファイルを使用するのがいいかな思います。
トピック投稿者
YZ
(@akkeyyyy)
> ishitaka ( @ishitaka ) 様
ありがとうございます。
実は、カスタマイズメニューの「追加CSS」の項目に書き込むのだと思いこんでいたのですが、必ずしもそれを前提としたご回答ではなかったようですね。テーマや子テーマフォルダの style.css ファイルに書き込んでもよいという、幅を持ったご回答出会った様子。
とはいえ、仰る通り、カスタマイズメニューの「追加CSS」に書き込んでも、動きました。ただ、テーマ独特の挙動なのか、いくつか予想外の事象(Background image としてのボタン画像が X・Y方向両方に繰り返し表示されるなど)がありましたので、やはり縦横サイズを CSS で指定するなど、予定していなかった対処も必要になったりしました。
以下、私自身と他の方のために、まとめておきたいと思います。
・ボタン画像は、子テーマフォルダ > images フォルダを作成し、そこにアップロードした。
・URL は絶対 URL で指定した。
・「外観 > カスタマイズ > ヘッダーエリア > ヘッダースライダー > 行動喚起ボタンのテキスト」の指定内容は、何か文字列を入れると、マウスでボタン画像をクリックした後に当該文字列が画像の下に表示されてしまうし、一方、何も文字列を入れなければ、画像ボタン自体が表示されない。そのため、半角または全角スペースのみを入れておく。
・その他、ボタン画像に関する指定は下記の通り(指定内容は仮のもの)
/* ボタンの画像 */
background: transparent url("http://example.com/wp/wp-content/themes/sydney-child/images/button.png");
width: 200px;
height: 38px;
ishitaka 様の丁寧なフォローのおかげで、私のような初心者にも、乗り越えることができました。そして、また少し WP をカスタマイズするコツをつかむことができたような気がします。
大変ありがとうございました。心よりお礼申し上げます。
-
この返信は6年、 10ヶ月前にYZが編集しました。理由: 内容が返信先の内容と整合性がなかった部分を修正