カテゴリー:
タイトルロゴ
閲覧数:460 配信日:2015-12-27 21:20
Yahoo! JAPAN
ドロワーメニュー / グローバルメニュー
・常に分離
ドロワーメニュー位置
・スクロール
検索フォーム位置
・上部固定
グローバルメニュー位置
・上部固定
ドロワーメニューを押すと?
・ドロワーメニューだけをアニメーション表示
ユニクロ
フォントアイコン使用
・UNIQLO
HTML
・<span class="uni-site-logo-text">Uniqlo</span>を削除しても実際の表示には全く影響がない
<div class="uni-site-logo-container ab-max-component visible-at-start">
<a class="uni-site-logo-link" ng-click="header.goHome()" analytics-on="" analytics-event="click" analytics-category="Common Header" analytics-label="H_logo">
<span class="uni-site-logo-text">Uniqlo</span>
</a>
</div>
CSS
・フォントアイコンなので、大きさや色を自由に変更可能
.uni-site-header .uni-site-logo-link:before {
font-size: 48px;
color: red;
}
.icon-logo:before, .uni-site-header .uni-site-logo-link:before {
content: "\e601";
}
感想
・短いブランド名だから可能
・長いサイト名の場合はどうすれば良いの?