メニューとタイトルの構造を理解しよう│BASEデザインカスタマイズの勉強会記録(3)

BASEの使い方/カスタマイズ

勉強したことをアウトップとしていきます。

タイトルとメニューの構造

おそらく1880行目の<header>からがタイトルとメニューのコードが書いてあります。

<h1><a href="{IndexPageURL}" id="logo">{LogoTag}</a></h1>
        <nav>
            <ul>
                <li><a href="{IndexPageURL}">HOME</a></li>
                <li><a  href="{AboutPageURL}">ABOUT</a></li>
                {block:AppsBlog}
                    <li><a  href="{BlogPageURL}">BLOG</a></li>
                {/block:AppsBlog}
                {block:AppsCoinFunding}
                    <li><href="{CoinFundingPageURL}">COIN</a></li>
                {/block:AppsCoinFunding}
                {block:AppsItemCategory}
                    <li>
                        <div id="category-menu">
                            <span >category</span>
                            <div>
                                {AppsItemCategoryCategoriesTag}
                            </div>
                        </div>
                    </li>
                {/block:AppsItemCategory}
                {block:AppsCommunity}
                    <li><a href="{CommunityPageURL}">COMMUNITY</a></li>
                {/block:AppsCommunity}
                <li><a href="{ContactPageURL}">CONTACT</a></li>
                
            </ul>
        </nav>

見えやすいように省略をしているところもありますが、だいたいは上記のような構造です。

タイトルは見出し1のタグである<h1>で挟まれています。

また、メニューのリンクはナビゲーション<nav>にさらに<ul><li>で挟まれているのが分かると思います。必須ではない追加機能を入れたもののブロックもありますね。タグの中に{URL}のモノはそのページのリンクに飛ぶために必要です。また、ここには表記されていませんが、classというものがあると思います。これはデザインを付け足すためのものでCSSというプログラミング言語であるデザイン関連の機能を付け足すときなどに使います。

プログラミング言語がより複雑にならないようにするためにやっているみたいですね。

まとめ

第二回目はこちら↓

BASE独自タグを理解しよう│BASEデザインカスタマイズの勉強会記録(2)
BASEでデザインカスタマイズをしたい方に参考になれば幸いです。自分で勉強したことをアウトプットしていきます。 BASEには独自のプログラミング言語であるタグがある {}が見ているとあると思います。これはBASE独自のプログラミング言語...
BASEの使い方/カスタマイズ
スポンサーリンク



鹿丸雑貨店
タイトルとURLをコピーしました