ヘッダーをカスタマイズしたい

Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › ヘッダーをカスタマイズしたい

  • このトピックには9件の返信、1人の参加者があり、最後にkishinoにより8年、 7ヶ月前に更新されました。
9件の返信スレッドを表示中
  • 投稿者
    投稿
    • #58555
      kishino
      ゲスト

      Simplicity2の子テーマを編集してサイトのカスタマイズしています。
      トップページは手動で編集したいので固定ページを使っています。

      全体のデザインやレイアウトはこんな感じにしたいです。
      https://prottapp.com/p/27e2d3#/s/5a74172686e465086c8625fe

      今サイトはこんな感じです。
      http://nstyle.cms.am/

      ヘッダーの背景を白30px とグレー30px にして、右側にはサイトロゴ、左上には総合ロゴ(このサイトはあるグループのサイトなんですよーーと匂わせたいので)を付けたいです。

      1)ヘッダーの背景は幅2ピクセル高さ60ピクセルのGIFを連続の横並びにすればいいのかなぁと思ったりしてるのですが、その背景になるGIFはどこのフォルダに入れて呼び出せばいいのかわかりません。

      2)左上の総合ロゴ(画像)はどうやって入れたらいいでしょう?

    • #58556
      かうたっく
      ゲスト

      具体的にどのような表示にしたいか、イメージがわいてませんが

      その背景になるGIFはどこのフォルダに入れて呼び出せばいいのかわかりません。

      メディアにアップロードしても良いし、子テーマ内のimagesフォルダや子テーマ内に新規フォルダを作って入れても、画像のパスをキチンと指定していれば大丈夫です。

      リンク先があるなら<a href="http://nstyle.cms.am/betu/"><img src="画像のパス" alt="ほげほげ" class="site-hoge-img"></a>などしても良いかもしれません。

      子テーマimagesフォルダ内hoge.pngの場合、
      /images/hoge.png” />

      今メディアにアップロードした場合は画像のパスはこのようになるので。
      https://domain.com/wp-content/uploads/2018/02/hoge.png

      2)左上の総合ロゴ(画像)はどうやって入れたらいいでしょう?

      左上に領域:例えば<p class="hoge">を作成して、そのなかに画像を入れる領域をまた作成すれば良いと思います。全てのHTMLに特有のclass指定を入れるとCSSで装飾できるので。

    • #58557
      かうたっく
      ゲスト

      子テーマimagesフォルダ内hoge.pngの場合、
      /images/hoge.png” />

      codeタグの入れ忘れ。

      <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/hoge.png” />

    • #58563
      kishino
      ゲスト

      >かうたっくさん
      いつもアドバイス、フォローありがとうございますw

      1)について
      今は応急処置で
      子テーマのstyle.cssに以下のコードを書いてます。
      /************************************
      header
      ************************************/
      #header {
      background-color: #e6e6e6;
      border-top: 30px solid #fff;

      }

      高さのあるボーダーをトップに入れて白とグレー背景のヘッダーにしてます。
      本当はあらかじめ見せたい高さに合わせて作ったGIFファイル(bg.gifとする)と
      以下のコードをスタイルシートに書いてヘッダー背景にしたいのですが、

      #header {
      background-image: url(どこなんだろ?/bg.gif);
      background-repeat: repeat-x;
      }

      どこなんだろ?にあたる階層は simplicity-child2の中のimagesフォルダでいいんでしょうか?

      2)について
      /images/hoge.png” />

      ....( * * ) こんな難しいこと書かないと右上にロゴが置けないのでしょうか?
      style.cssにロゴをPタグかDIVタグの背景としてロゴを呼び出し、<p id=”home”></p>か、
      <div id=”home”></div>とかにしてheader.phpに書く、だけじゃだめなんでしょうか?

    • #58564
      kishino
      ゲスト

      追記です。うまくコピーできてませんでした。

      2)について、で、難しいことと私が言っているのは、

      はてなマークから始まってphp echo get_stylesheet_directory_uri();なんちゃらと書いてある部分です。

    • #58567
      かうたっく
      ゲスト

      どこなんだろ?にあたる階層は simplicity-child2の中のimagesフォルダでいいんでしょうか?

      画像のパスをキチンと指定していれば大丈夫です。
      #58556

      簡単な方法でしたら、メディアに画像をアップロードして、画像のパスを指定してください。

      見出し:添付ファイルのURL・ 画像のURLをコピーする。

      https://bibabosi-rizumu.com/additional-media/

    • #58570
      kishino
      ゲスト

      >かうたっくさん

      ヘッダーの背景に画像を入れることはできました。
      ありがとうございます。

      子テーマ内のimagesフォルダに背景として使う画像を入れ、そこから読み込むようにcssを書きました!
      右上にロゴを入れる予定なので、今は左上のサイトロゴが中途半端な縦位置に置かれてますが、
      これは後で修正できると思います。

      http://nstyle.cms.am/

      どなたか助けてください。こまってますw

      子テーマのstyle.cssに以下の記述をして
      /************************************
      corp-logo
      ************************************/
      div.corp-logo {
      width; 150px;
      background-image: url(images/corp_logo.png);
      background-repeat: no-repeat;
      text-align: right;
      }

      親テーマのheader.phpの中の<div id=”header-in”></div>の中に以下の記述をしてみましたが、
      <div class=”corp-logo”></div>

      右上どころかヘッダーのどこにもロゴが表示されません。

      (><)CSSの指定がおかしいのか、置くべきところに置いてないのか、わかりません。

    • #58605
      kishino
      ゲスト

      報告です。

      なんとかできました。ヾ(*´∀`*)ノ

      やったことは、
      1.右上に表示させたい画像corp_logo.pngをWP管理画面のメディアアップローダーでアップロードし、
      絶対パス「http://nstyle.cms.am/wp-content/uploads/2018/02/corp_logo.png」をメモ帳にコピーぺースト。

      2. 親テーマsimplicity2の中にあるheader.phpの中の<div id=”header-in”>の中に以下を入れる。

      <!-- 右上ロゴ -->
      <div class="corp-logo"><a href="飛ばせたいサイトアドレス" target="_blank"><img src="http://nstyle.cms.am/wp-content/uploads/2018/02/corp_logo.png"></a></div>

      3.子テーマsimplicity2-childの中にあるstyle.cssに以下を書く。

      /************************************
      corp-logo
      ************************************/
      div.corp-logo {
      text-align: right;
      margin-top: 10px;
      margin-right: 10px;
      padding-right: 30px;

      }
      div.corp-logo img {
      width: 140px;
      }

      結果はこれです。
      http://nstyle.cms.am/

    • #58607
      kishino
      ゲスト

      最初の質問で誤字がありましたので訂正です。

      1)ヘッダーの背景は幅2ピクセル高さ60ピクセルのGIFを連続の横並びにすればいいのかなぁと思ったりしてるのですが、その背景になるGIFはどこのフォルダに入れて呼び出せばいいのかわかりません。

      2)左上の総合ロゴ(画像)はどうやって入れたらいいでしょう?

      訂正:右上 でした。

      左上にサイトロゴ、右上に任意のロゴを表示したかったのでした。

      m(_ _)m

    • #58693
      kishino
      ゲスト

      追記です。

      この投稿を参考にされる方へ

      親テーマ内のPHPファイルを編集しても、テーマの更新があると元に戻ってしまうので、
      いじりたいPHPをコピーして子テーマに持っていき、そこで変えたいところを変える、追記を入れる、のが安全なで確実なやり方です。
      ただ、こちらのフォーラムでは親テーマのPHPの改変はサポートしていないのと、初心者にはハードルが高く、場合によってはFTPでアップロード後、画面真っ白にもなり兼ねないのでお勧めしません。

      私は自分でできる範囲内でカスタマイズしています。

9件の返信スレッドを表示中
  • このトピックに返信するにはログインが必要です。
スポンサーリンク
アドセンス(大)
アドセンス(大)