サポート » テーマ » フッター部を切り分けるためにはどうすれば良いでしょうか?

  • 解決済 echizenya

    (@echizenya)


    いつもお世話になっております。
    下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

    【質問の主旨】

    foooter.phpにある<div class="copyright">の記述をKIRINのようにするためには、CSSをどのように書き換えればよろしいでしょうか?

    【質問の補足】

    1.
    個人ブログのフッター部は、最終的にはKIRINのようなデザインにしたいと考えています。
    (1.png)

    2.
    現状、自分のブログサイトではfooter部はカテゴリーメニューとcopyrightで構成されていますが、両者を分離したいと考えています(2.png)

    3.
    カテゴリーの背景色は現状のままで、copyrightの部分の背景色は白にしたいと考えています。

    4.
    分離したcopyrightの部分にはトップページと固定ページのリンクを掲載できるようにしたいと考えています。

    5.
    今回の質問に関するコードはGitHubにて公開しています。

    6.
    画像ファイルとリンクについては、全て下記のGoogleドキュメントシートに集約しています。
    https://docs.google.com/document/d/1rtyAEmBVFrfXTK1h3bQQEbUEtom4fnxemeshBa_2PW0/edit

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

    ヘルプの必要なページ: [リンクを見るにはログイン]

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

    .copyright を .footer-inner の外に移動し、内側に .footer-inner を追加すればいいのではないでしょうか。

    footer.php:

    <footer>
    <!-- 月別の記事 -->
      <div class="footer-inner">
        <aside>
          <ul>
            <?php dynamic_sidebar('フッター1'); ?>
          </ul>
        </aside>
        <div class="copyright">
          <p><?php bloginfo( 'description' ); ?></p>
          <p>Copyright &copy; <?php bloginfo( 'name' ); ?></p>
        </div>
      </div>
    </footer>

    <footer>
    <!-- 月別の記事 -->
      <div class="footer-inner">
        <aside>
          <ul>
            <?php dynamic_sidebar('フッター1'); ?>
          </ul>
        </aside>
      </div>
      <div class="copyright">
        <div class="footer-inner">
          <p><?php bloginfo( 'description' ); ?></p>
          <p>Copyright &copy; <?php bloginfo( 'name' ); ?></p>
        </div>
      </div>
    </footer>

    スタイルの例:

    footer {
    	padding: 0;
    }
    .copyright {
    	display: inline-block;
    	width: 100%;
    	background-color: #fff;
    }

    4. 分離したcopyrightの部分にはトップページと固定ページのリンクを掲載できるようにしたいと考えています。

    メニューにすると汎用的でいいのではないでしょうか。

    functions.php:

    register_nav_menus( array(
    	'footer' => 'フッター メニュー',
    ) );

    footer.php:

    <?php if ( has_nav_menu( 'footer' ) ) { wp_nav_menu(array( 'theme_location' => 'footer', 'container' => 'nav', 'container_class' => 'menu-footer-container', 'menu_id' => 'menu-footer', 'depth' => '1' ) ); } ?>

    スタイルの例:

    ul#menu-footer {
    	display: inline-block;
    	margin: 0;
    	padding: 0.2rem 0;
    }
    ul#menu-footer li {
    	padding: 0 .5rem 0 0;
    	display: inline-block;
    }
    ul#menu-footer li:before {
    	content: "\03e";
    	margin-right: 0.25rem;
    }
    トピック投稿者 echizenya

    (@echizenya)

    @ishitaka さん。
    いつもコメントありがとうございます。
    またフッター部の切り分けと、copyrightの部分にトップページと固定ページのリンクを貼る方法についてそれぞれアドバイスをいただきまして助かります。

    下記の通り2点ご回答を申し上げます。

    1.

    .copyright を .footer-inner の外に移動し、内側に .footer-inner を追加すればいいのではないでしょうか。

    行き違いがございましたら申し訳ございません。
    教えていただいたコードを試してみたところ、当初の質問でした意図通りの表示になりません。
    下記のGitHubのアドレスで変更箇所を表しています。

    https://github.com/echizenyayota/e-yota/commit/9dad5bdfc0c70eb26a95528a5c12d9b47ee29fd5#diff-bff3332d2e7e3fa82450d5f9f0b87896

    WordPressフォーラム以外にも範囲を広げて質問をしてみます。

    2.

    メニューにすると汎用的でいいのではないでしょうか。

    誠に恐れ入ります。
    1の質問が解決していないので、functions.php・footer.php・style.cssとして教えていただいたコードは
    あえて試していません。先に1の問題を解決してから、2の問題に着手した方が良いと考えました。

    今回の質問は一旦解決済みとします。
    今後ともどうぞよろしくお願い申し上げます。

    • この返信は5年、 9ヶ月前にechizenyaが編集しました。理由: GitHubのリンク先が間違っていましたので、正しいリンク先を貼り直しました。
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「フッター部を切り分けるためにはどうすれば良いでしょうか?」には新たに返信することはできません。