cover image

ヘッダー右側にリンクを置けるようになりました

管理画面で「ヘッダー右側へのリンク追加」へリンクを置くと、ヘッダー右側に配置されるようになりました!
 
早速Anotion自体にも適用してみました。
notion image
このような形でヘッダーにリンクを配置できます。ログイン済ユーザーの場合には管理画面に遷移します。
 

利用方法

  1. 管理画面のサイトデザイン編集を開く
  1. ↓のような項目が増えていますので、URLとテキストを入力して「追加する」をしてから保存してください。
notion image

デザイン変更方法

トップページの場合にはこちらのCSSを追加してボタン風のデザインにしています。
.header__btn {
    background-color: #559ebd;
    padding: 2px 20px;
    color: #fff;
    border-radius: 4px;
}
CSS
 
また、ヘッダー自体を画面に固定する場合には次のCSSを参考にしてください。こちらを追加すると画面上部に常に表示されるようになります。
.page {
  padding-top: 40px;
}
.header {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
}
CSS
 
リンクは同じドメインの場合やハッシュタグの場合にはページ内リンク、その他は別タブで開くように設定してあります。
 
※注意点 複数設定できますが、スマートフォンでは長い場合に2行になるなどしてリンクが横に潰れる場合があります。今後「スマートフォンの時にはハンバーガーメニューにし、リンクはメニューとして表示する」という機能追加をする予定はありますが、今はまだありませんのでご注意ください。

デザイン変更応用編

こちら、Twitterのロゴなどを表示したい場合には次のURLを追加CSSに設定し、
次のCSSを追加するとTwitterロゴになります。
.header__btn::before {
    content: "\f099";
    font-size: 32px;
    color: #0ea6e6;
    font-family: "FontAwesome";
}
CSS
 
もし指定方法・カスタマイズ方法がよくわからない場合にはお気軽にDiscordやメール、TwitterDMなどでも可能ですので、運営にお問い合わせください!
こちらにお問い合わせ先を記載しています。
 
今後もAnotionをよろしくお願いします。