cover image

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

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

利用方法

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

デザイン変更方法

トップページの場合にはこちらのCSSを追加してボタン風のデザインにしています。
CSS
 
また、ヘッダー自体を画面に固定する場合には次のCSSを参考にしてください。こちらを追加すると画面上部に常に表示されるようになります。
CSS
 
リンクは同じドメインの場合やハッシュタグの場合にはページ内リンク、その他は別タブで開くように設定してあります。
 
※注意点 複数設定できますが、スマートフォンでは長い場合に2行になるなどしてリンクが横に潰れる場合があります。今後「スマートフォンの時にはハンバーガーメニューにし、リンクはメニューとして表示する」という機能追加をする予定はありますが、今はまだありませんのでご注意ください。

デザイン変更応用編

こちら、Twitterのロゴなどを表示したい場合には次のURLを追加CSSに設定し、
次のCSSを追加するとTwitterロゴになります。
CSS
 
もし指定方法・カスタマイズ方法がよくわからない場合にはお気軽にDiscordやメール、TwitterDMなどでも可能ですので、運営にお問い合わせください!
こちらにお問い合わせ先を記載しています。
 
今後もAnotionをよろしくお願いします。