サポート » テーマ » テーマ “Sydney” の、いくつかのカスタマイズ方法についてお教え願えますでしょうか。

  • 解決済 YZ

    (@akkeyyyy)


    <環境>

    ・WordPress 4.7.5(最新)。
    ・テーマ: Sydney(https://ja.wordpress.org/themes/sydney/)無料版(最新)の子テーマ(改変していない)。
    ・プラグイン: なし。

    上記の環境で、すべての設定項目を変えてみましたが、コードを変えなければ変更できないと思われる事項が複数残ってしまいました。しかし、今の私には、PHP の書き方や、WP における HTML・CSS の構造に関する知識が、非常に不足しております。そこで、各事項について、どのように改変すればよいか、お教え願えないでしょうか。

    複数の事柄について、当フォーラムに丸投げするという、大変失礼と思われる事をいたしますが、ご勘弁願います。

    <改変したい事項>

    (1) 当テーマの、各「スライダー」の「タイトル」(上記プレビューページでは、1つ目のスライドに “Welcome to Sydney” とあるもの)のすぐ下にあり、その下の「サブタイトル」(同 “Feel free to look around”)との間に挟まれた、横線(同 高さ1pxのオレンジ色の横線)を、消したいです(すべてのスライダーから)。

    (2) 当テーマの、「スライド」画像(プレビューページでは、各「スライダー」の「タイトル」および「サブタイトル」が次のものに変わると同時に変更される、背景画像)に重なって表示されている、「行動喚起ボタン」(同 “CLICK TO BEGIN” と表示されているオレンジ色のボタン)を、自分で用意した特定の画像(ボタンに見える画像)に、入れ替えたいです。なお、用意した画像自体に文字が入っていますので、ボタンの画像の上に指定した文字列を表示する機能は不要となりますが、クリックすると指定した URL に飛ぶという機能は必要なままです。

    (3) 当テーマの、トップページおよびブログページに表示される、記事と記事の境い目に表示される、短い横線(同 現在のトップページでは、たとえば、最新の記事 “Worth A Thousand Works” の本文 “Boat.” と、その 1 つ前の記事 “Elements” のタイトルとの間に挟まって表示されている、高さ 1pxで、幅 10~20px 程度に見える、ピンク色の横線)を、(すべての記事の境い目について)消したい。

    ついては、上記各事項の、1 つまたは複数につき、WP または当テーマの、どの部分をどのように変更すればよいか、お教え願えないでしょうか。

    どうかよろしくお願い申し上げます。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • こんにちは

    何れもスタイル(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;
    }

    > 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 内でエンキューしております。

    以上、どうぞよろしくお願い申し上げます。

    • この返信は2 ヶ月、 2 週間前に  YZ さんが編集しました。理由: 誤字を修正、その他不自然な表現を修正

    (A)
    透過 PNG 等の画像ファイルであれば、指定のスタイルで透過すると思います。

    (B)
    カスタマイズの追加 CSS の場合は現在の URL、style.css の場合は style.css の URL がベースになります。
    カスタマイズの追加 CSS の場合は相対 URL ではなく、絶対 URL で指定した方がいいかなと思います。

    (C)
    個人的には、カスタマイズの追加 CSS であれば、メディアでアップロードしたファイル、テーマ(子テーマ)の style.css 等であれば、そのテーマ内(images や img 等のフォルダ)のファイルを使用するのがいいかな思います。

    > 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 をカスタマイズするコツをつかむことができたような気がします。

    大変ありがとうございました。心よりお礼申し上げます。

    • この返信は2 ヶ月、 2 週間前に  YZ さんが編集しました。理由: 内容が返信先の内容と整合性がなかった部分を修正
4件の返信を表示中 - 1 - 4件目 (全4件中)
  • このトピックに返信するにはログインが必要です。