【Scrapbox活用Sample】少子化対策で増税(Add images of reference site)
## overview
本投稿では、Scrapboxにて、知識・情報管理を行う中で、Scrapboxで参照情報を管理、連携する方法を、検討する。
利用するサイト、ツールは、以下。知恵袋サイトは、知識を整理する際の題材サンプルとして利用。
Scrapbox - 次世代Wikiサービス
## orientation
本投稿では、QAを作成する際に、参照したサイトや、確認した表、データ等を、Scrapbox Pageで連携する。
Scrapboxは、Wikiツールであり、PageとPageを連携させる機能がベースにある。
参照している外部リンクは、urlを記述すれば、リンクとなる。
参照しているScrapbox内部のPageへの内部リンクも、同様に記述する。なお、hashtag形式 ”#keyword…” のSyntaxでも、内部リンクを作成できる。
内部リンクについては、内部リンクされたPageの一番上にある画像を、アイコン画像として取得可能
[link] -------- 内部リンク
[link.icon] --- 内部リンク・アイコン
この内部リンク機能を使って、QAで作成したページと、図表のページを連携する。
QAのページとは別に、図ごと、表ごとに、各々のページを作成。
図表は、観察された対象を、数字、表、等で整理して、状態変化などをわかりやすく提示するもの。この表を、情報カードとして、別出して管理するイメージ
## Q
## Scrapboxで図表を管理
https://scrapbox.io/jee54321/少子化対策で増税
### outcomes
## discussion
GIFでは短縮されすぎて、分かりづらいが、こちらの想定している操作ができた。
Page Viewで、図表Page(「少子化」図表page, 「国家資産」図表page)のiconを、strong-iconで表示を大きくし、視認性を上げた。
Presentation Modeで、挿入されている図・表を、Page幅を大きくして、表示した。
対象の図表をクリックすると、リンクされているページに飛ぶ。
Presentation Modeだと、対象の図表PageもPresentation Modeで表示される。
以下、settingsページに、Styleを追加した。一部、設定が理解不足で、正しくは設定出来ていない。
```style.css
/** img */
.line img {
}
.line .strong-img {
max-width: 450px;
min-width: 300px;
}
.app.presentation .line img {
width: auto !important;
zoom: 200%;
}
.app.presentation .line .strong-img {
max-width: 450px;
min-width: 300px;
width: auto !important;
zoom: 80%;
}
/** icon */
.line img.icon {
}
.line img.strong-icon {
max-height: 600px;
width: 300px;
height: auto;
}
.app.presentation .line .section-title img.icon {
height: 80%;
}
.app.presentation .line img.strong-icon {
max-width: 100%;
max-height: 100%;
width: auto !important;
height: 450px !important;
}
```
図表のリンク部を、もっとわかりやすく強調しようとStyleを見直したが、理解が足りず、未完成。
## appendix
以下、こちらが提示した回答文 (902文字)