나만의 무료 웹사이트 제작 2부 - トップメニュー(navbar)

1部で基礎作業として作成したウェブサイトの初期画面に続き、quartoのホームページで関連文書(quarto.org/docs/websites)を見ながら、私たちのホームページを一つずつ変えてみましょう。 (一人でやってみる独立性！その独立性を育ててみましょう～。）

もし1部を見ずに2部のページに直接アクセスした場合は、まず下の1部のページ(ここをクリック)を先に読んで来てください。

Quartoホームページ制作案内ページ

レンダリングでポップアップしたブラウザの初期画面にQuartoのウェブサイトアドレスが見えますか？ (To learn more about Quarto websites visit https://quarto.org/docs/websites.をクリックします)クリックしてアクセスしてみましょう。 上記のようにCreating a Websiteと書いてあるのが見えます。

英語が苦手な方は 右クリック > 韓国語に翻訳 を選択すると、より簡単に見ることができます。マイクロソフトのエッジやグーグルのクロムブラウザの両方で 翻訳画面を表示します。

これで目が楽でいいのですが、問題はこれがどういうことなのかわかりません！Quartoの用語自体も馴染みがないのに、ハングルではもっと理解できない！ここでQuartoのホームページを見るのはやめよう！(後でQuartoに慣れてきたら、詳しい内容を一度じっくり読んでみてください。)

ウェブサイトの名前を変更する

まず、今日は私たちが作った作品の上部メニュー（quarto-website、Home、About）を一度変えてみます。 このメニューをだいたい navbar(ナビゲーションバー)といいます。

まず、メインタイトルを変更します！quarto-website <-これ、IT Playground <- このように変えてみます。 RStudioを実行して右下のFilesウィンドウのrootフォルダ(私の場合はC:\R\Project\quarto-website\)でウェブサイトの初期画面を担当している index.qmd ファイルをクリックしてコードソースから title を IT Playgroundもちろん、皆さんはお好きなサイト名に変更すればOKです。

ナビゲーションバー(navbar)メニューを追加する - talks

Files」ウィンドウの一番上にある _quarto.yml ファイルが見えますよね？ ymlはヤムル(YAML)ファイルのことで、ヤムル(YAML)ファイルを指します。 タイトル、メニューなどウェブサイトの全体的な設定を扱うファイル。です。参考までに、YAMLはYet Another Markup Languageの略語です。 そのファイルをクリックしてソースコードを下記のように変更します。変更前と変更後を見たら違いが分かるかと思います。 ウェブサイトのタイトルを変更(quarto-website -> IT Playground)して、navbarにtalksメニューを生成するためtalks.qmdを追加しました。

ところで、よく考えてみるとrootフォルダにindex.qmdはあるけどtalks.qmdはないですよね？そうです！なので、そのファイルを作って内容も入れてみます。 下の図のようにFilesウィンドウから ブランクファイル > Quarto Doc を辿っていくと新しいウィンドウが開き、そこで talks.qmdを入力してOK！するとrootフォルダにtalks.qmdが出来上がります。

新しく生成されたtalks.qmdファイルをクリックすると /yamlを入力してEnterを押します。 そして、次の図のように - の間に、navbarでtalkをクリックしたときに表示されるウェブページに表示されるメインタイトル(talks)と本文(IT Playgroundで....)を入力します。

ショートカットキーでレンダリングする

上のステップまで実行した後 Crtl + Shift + Bを押すとウェブサイトがレンダリングされ、ウェブブラウザで下記のように変更や追加した内容を確認することができます。サイトのタイトルが変わって、初期画面のメインタイトルが変わってtalksメニューが出来てそのメニューを押すとtalksページが表示されます。

整理する

まとめると、今回は index.qmdのtitleを変更して, yamlファイルのタイトルを変更し、talks.qmdを挿入します。と、 rootフォルダにtalks.qmdを作成します。して そのファイルに'/yaml'を入力してtalk.qmdセクションのtitleと本文の内容を入力します。しました。 そして レンダリング すると、私たちがやろうとしていたことがパッと現れました。簡単ですねぇ〜。

追加1 - iconを挿入する

さらに、navbarにアイコンを入れてみます。 Quartoホームページ内のnavbar関連ページ(ここをクリック)を見ると、下記のようなオプションと説明表があります。iconが見えますか？

Quartoで Bootstrap 5 iconsを使いますね。

right：
  - icon: github
    href: "#"
    aria-label: R Playground

_quarto.yml ファイルから上の図のように入力してください。 hrefはアイコンをクリックした時、接続したい場所のアドレスを入れればいいです。私は一旦"#"に設定してクリックしても何も反応しないようにしました(ちなみに！navbarでiconは右(right)、その他のメニューは左(left)に表示されるように設定しました。 そしてnavbarの背景はwhiteにしておきました)。この説明は下の図を見てもらえれば分かると思います。

レンダリングしてウェブブラウザで確認するには、ショートカットは何でしたっけ？ はい！ Ctrl+Shift+Bすると、下記のように右上の虫眼鏡の横にGitHubのアイコンがポコポコと表示されます。これもそんなに難しくないですよね？

第2の人生が満面の笑みを浮かべる日まで！テリーありがとうございました～と挨拶をしようと思ったのですが、一つ足りないものがありますね。 うっ。あの～、メインタイトルのIT Playgroundの横にあるあのロゴは何ですか？ 氷のようなホットパンツに見えるのですが、下半身裸ですっと通り過ぎようとしているのですか～？

追加2 - ウェブサイトのロゴを挿入する

さあ！ ウェブサイトのロゴを挿入してみます。 まず、rootフォルダにロゴファイルを入れます。 imgフォルダを作ります。

そして、そのフォルダに自分の好きなlogoを入れます。 ピクサーベイ(pixabay) または フラットコン(flaticon) で好きなキーワードで検索してロゴファイルを取得すればいいようです。 私はテリーのロゴ(プレイブロック)をimgフォルダに入れます。 と _quarto.yml に logo: ./img/tere-logo.png と入力し、レンダリングしたら終了！今日の授業もここで終了！(ふぅ～長い)

*追加
logo: 次に入力する ./ の意味は _quarto.yml ファイルのフォルダ位置(root, C:\R\Project\quarto-website)を意味します。

'secondlife.lol'のすべてのコンテンツは著作権法の保護を受けています。無断転載やコピー、配布などを禁じます。