ヘッダ部分の画像、テキスト、検索ボックス等について要素毎に解説します。
管理画面 > [デザイン] > [(1) ヘッダ] > [(2) タイトル下] のHTML記述欄にて各要素を調整して下さい。
企業ロゴとリンク設定
リンク先の設定
/ を適切なリンクに置き換えてください。デフォルトの遷移先はブログトップです。
<!-- メディアロゴ -->
<a id="hbm-head-media-logo" href="/"><!-- 遷移先 -->
ロゴの設定
画像URLと企業名を設定し、width と height の ◯◯◯ px には、使用する画像の適切なサイズを記述して下さい。
奨励画像サイズ:width:160px以内、height:40px以内
<img src="画像URL" alt="企業名" width="◯◯◯ px" height="◯◯◯ px"><!-- ロゴ画像 -->
リンクの設定
ナビゲーション
必要に応じて、href="/"
の / を適切なリンクに置き換えてください。
<!-- ナビゲーション -->
<div class="navbar-inner">
<ul class="navbar-list">
<li class="navbar-list-item"><a href="/">トップ</a></li>
<li class="navbar-list-item"><a href="/archive/category/インタビュー">インタビュー一覧</a></li>
<li class="navbar-list-item"><a href="/">リンク1</a></li>
<li class="navbar-list-item"><a href="/">リンク2</a></li>
</ul>
</div>
エントリーボタン
# を適切なリンクに置き換えてください。
文言変更したい場合は、『募集職種一覧へ』部分を変更してください。
<!-- エントリーボタン -->
<a class="navbar-entry-link" href="#" target="_blank">
募集職種一覧へ
</a>
アンカーリンク
このリンクはトップページでのみ表示されます。
「トップページメインカラム」の各モジュールのリンクが自動的に生成されます。
管理画面 > [デザイン] > [トップページメインカラム]の各モジュールを追加・削除することで、自動的にリンクも増減します。
個別で非表示にしたい場合は、デザインCSSにて調整してください。
この機能が有効になっている場合はbodyタグに『has-anchorlink』クラスが追加されます。
アンカーリンクを削除する
アンカーリンク自体が不要な場合は、次のモジュールを削除してください。
管理画面 > [デザイン] > [トップページメインカラム] > [【JS】アンカーリンク生成用]
再度有効にしたい場合
1. [モジュールを追加]からHTMLモジュールを追加
2. 下記のHTMLを貼り付ける
<script>
// --------------------------------------------
// グローバルナビにモジュールへのリンクを追加
// hatena-module-custom-hiddenクラスがついていないモジュールのタイトル文字を取得しリンク化します。
// 不要な場合はコメントアウトもしくはモジュールを削除してください。
// --------------------------------------------
(()=>{window.addEventListener('load',()=>{const target=document.querySelectorAll('#main .hatena-module:not(.hatena-module-custom-hidden, .hatena-module-custom-entry-sns)');if(target.length>0){const body=document.querySelector('body'),headerWrap=document.querySelector('.blog-headerWrap'),navWrap=document.createElement('div'),nav=document.createElement('div');body.classList.add('has-anchorlink');navWrap.classList.add('navbar-inner','anchor-link');nav.classList.add('navbar-list');headerWrap.appendChild(navWrap);navWrap.appendChild(nav);target.forEach(item=>{let itemLink=item.querySelector('.hatena-module-title');if(itemLink.childElementCount>0){itemLink=itemLink.querySelector('a')} const itemName=itemLink.textContent.trim(),listDOM=document.createElement('li'),linkDOM=document.createElement('a');item.id=itemName;listDOM.classList.add('navbar-list-item','navbar-list-item-'+itemName);linkDOM.textContent=itemName;linkDOM.href='#'+itemName;listDOM.appendChild(linkDOM);nav.appendChild(listDOM)})}})})()
</script>
3. [高度な設定] を開き、class名に『hidden』と設定する