Footer

すべてのテンプレートには 2 つの異なるフッター構成が付属しています。みてみましょう：

Footer – Config. 1

これは非常に基本的なフッター構成です。ページ数が少ないサイトに最適です。

<footer class="site-footer center-content-mobile">
    <div class="container">
        <div class="site-footer-inner">
 
            <!-- Footer top -->
            <div class="footer-top space-between text-xxs">
 
                <!-- Logo image or site name -->
                <div class="brand">
                    <a href="#">
                        <!-- Site name, or image (ideal size: 32x32px) -->
                    </a>
                </div>
 
                <!-- Social icons -->
                <div class="footer-social">
                    <ul class="list-reset">
                        <li>
                            <a href="#">
                                <!-- SVG icon -->
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
 
            <!-- Footer bottom -->
            <div class="footer-bottom space-between text-xxs invert-order-desktop">
 
                <!-- Footer links -->
                <nav class="footer-nav">
                    <ul class="list-reset">
                        <li>
                            <a href="#">Footer link</a>
                        </li>
                    </ul>
                </nav>
 
                <!-- Copyright text -->
                <div class="footer-copyright">&copy; Copyrights</div>
 
            </div>
 
        </div>
    </div>
</footer>

同じフッター設定は、/src/components/layout/ パスに保存されている Footer.js (React) および Footer.vue (Vue) ファイルによって提供されます。

このファイルをインポートし、この方法でコンポーネントをページレイアウトにロードします 👇

<c-footer />

Footer – Config. 2

これはより複雑な構成であり、表示するリンクが多い場合に非常に便利です。

<footer class="site-footer">
    <div class="container">
        <div class="site-footer-inner">
 
            <!-- Footer top -->
            <div class="footer-top text-xxs">
                <div class="footer-blocks">
 
                    <!-- Block -->
                    <div class="footer-block">
                        <div class="brand mb-16">
                            <a href="#">
                                <!-- Site name, or image (ideal size: 32x32px) -->
                            </a>
                        </div>
                        <div class="footer-copyright">&copy; 2019 Abstract, all rights reserved</div>
                    </div>
 
                    <!-- Block with links -->
                    <div class="footer-block">
                        <div class="footer-block-title">Block title</div>
                        <ul class="list-reset">
                            <li>
                                <a href="#">Block links</a>
                            </li>
                        </ul>
                    </div>
 
                    <!-- Block with links ... -->
                    <!-- Block with links ... -->
 
                </div>
            </div>
 
            <!-- Footer bottom -->
            <div class="footer-bottom space-between center-content-mobile text-xxs">
 
                <!-- Footer links -->
                <nav class="footer-nav">
                    <ul class="list-reset mb-0">
                        <li>
                            <a href="#">Footer link</a>
                        </li>
                    </ul>
                </nav>
 
                <!-- Social icons -->
                <div class="footer-social">
                    <ul class="list-reset">
                        <li>
                            <a href="#">
                                <!-- SVG icon -->
                            </a>
                        </li>
                    </ul>
                </div>
 
            </div>
 
        </div>
    </div>
</footer>

このフッター構成は、/src/components/layout/ フォルダーに保存されている Footer02.js (React) および Footer02.vue (Vue) ファイルによって提供されます。

Logo

詳細については、「ヘッダー - ロゴ」の段落を参照してください。

上枠

フッター領域の上部に境界線を表示したい場合は、以下の例のように .has-top-divider ヘルパークラスを使用できます 👇

<footer class="site-footer">
	<div class="container">
		<div class="site-footer-inner has-top-divider">
			<!-- footer content -->
		</div>
	</div>
</footer>

React と Vue にはそのための prop があります 👇

<c-footer top-divider />

full 幅のディバイダーの場合は、.has-top-divider クラスを .site-footer 要素に追加します 👇

<footer class="site-footer has-top-divider">
	<div class="container">
		<div class="site-footer-inner">
			<!-- footer content -->
		</div>
	</div>
</footer>

React と Vue にはそのための prop があります 👇

<c-footer top-outer-divider />

属性一覧

React

Prop	Type	Default	Accepted values
`topOuterDivider`	boolean	`false`	–
`topDivider`	boolean	`false`	–

vue

Prop	Type	Default	Accepted values
`top-outer-divider`	boolean	`false`	–
`top-divider`	boolean	`false`	–

React と Vue では、すべてのコンテンツをフッターコンポーネントにネストする必要があります。

ヘッダーセクション