キャッチフレーズ位置変更

Simplicityの特徴 フォーラム Simplicityについての質問 キャッチフレーズ位置変更

5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #30263 返信
      paklee
      ゲスト

      お世話になっております。

      キャッチフレーズの位置をロゴ画像の上に移動させたく、

      #header .alignleft {
      max-width: none;
      width: 1010px;
      }

      #site-description {
      text-valign: top;
      }

      #header .alignright {
      display: none;
      }

      過去検索から考え、上記の形でやってみましたが、初心者の為上手くいきません。

      ロゴを乗り越える事が出来てないのか、他のalignが邪魔しているのか、
      方法がわかりません。

      ぜひとも、ご教授をお願いします。

    • #30266 返信
      Hidekichi
      ゲスト

      俺ならこうするシリーズ

      #header .alignleft {
        display: flex;
        flex-flow: column wrap;
      }
      
      #site-title {
        order: 2;
      }
      
      #site-description {
        order: 1;
      }

      ベンダープレフィックスはつけてないので、別途付けてください。ちなみに、画像ロゴはどんなのかわからないので上記の例としては、通常のタイトルとディスクリプションを入れ替える方法です。
      位置を変えることにより、マージンやらパディングが色々おかしなことになると思うので、そのあたりは要調整です。

    • #30273 返信
      アバター画像わいひら
      キーマスター

      オーソドックスなやり方として、header-logo.phpのタグの位置を変更するという方法もあります。

    • #30301 返信
      paklee
      ゲスト

      毎度お世話になっています。

      要調整が知識に追い付かなさそうでしたので、
      今回はheader-logo.phpのタグ位置を、

      <h1 id=”site-description”>
      <?php echo $site_description ?>
      </h1>
      <h2 id=”site-title”>
      <?php echo $site_title ?>
      </h2>

      上記に入れ替えて解決しました。
      ご教授ありがとうございました。

    • #30306 返信
      Hidekichi
      ゲスト

      header-logo.phpをいじくると親テーマのアップデートのたびに修正しないといけないのを記憶しておいてください。あれ?子テーマにheader-logo.phpありましたっけ?

      解決された処理を見ると、jQueryで簡単にできそうな感じです。

      つまりは、

      (function($){
      	$(function(){
      		$('#site-title').replaceWith("<h2>"+$("#site-title").html()+"</h2>");
      		$('#site-description').replaceWith("<h1>"+$("#site-description").html()+"</h1>");
      		$('#h-top h2').prependTo("#h-top .alignleft");
      	});
      })(jQuery);

      こういう感じです。これなら子テーマjavascript.jsに追記するだけでよいので、親テーマのアップデートに影響されません。また以前は、#site-titleがh1、#site-descriptionがh2だったと思うんですが、現在はpタグになってるようなので、どちらも対応できるようにidからタグの付け替えしてみました。

      タグをつけかえた後、#h-top .alignleftの先頭にh2を持って行くことで位置の変更をしています。
      まぁjQueryの場合は一瞬チラつくと思うので、phpの方がさっくりイケるにはイケルんですけどね。

      そのphpとjQueryよりもサックリといけるのがcssではあるんですが・・・ここらはまぁ好きな感じで良いと思います。

    • #30327 返信
      アバター画像わいひら
      キーマスター

      子テーマにはheader-logo.phpは、用意してありません。
      親テーマのheader-logo.phpをコピーしてやるしかないかもしれません。

      もちろん#30306のような方法でもどちらでもOKです。

5件の返信スレッドを表示中
返信先: キャッチフレーズ位置変更
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)