カテゴリーの階層化

前回の記事でカテゴリの階層化を試すと言ったけど、キレイに階層化できたのでメモも含めてここに書いておく。

　

　　階層化実装後の現在はこんな感じ。

さて、導入にあたってだが、そもそもHTMLを触ったことがなく、CSSもナニソレ？状態なのでネットに頼るしか無かったのだが、

色々探しまくった末に見つけたのは以下の記事。

俺と同じ悩みを持っていたようで、カテゴリの階層化に挑戦したことを記事にしているようだった。

その中にこの記事があった。

指定されたところにペタペタと貼りつけるだけで、あら不思議。

カテゴリーを整理するだけであっという間に階層化ができた。

しかもなかなかにキレイ。

これでもとても満足なのだが、最初の記事を見ているとさらに
枠線を付けてボックスのようにしていた。

これはマネるしか無い。

はい、導入。

これも言われるがままにペタペタと貼り付けるだけ。

だが、自分好みにするには、これに手を加える必要があった。
もちろん、ソースコードは意味ワカメ。

特にこのコードを書かれた人は、「0.～」の「0」を省略していた（もしかしたらそれが普通なのかもしれないが）ようで、

最初「少数点」ではなく「ドット」だと思いこんでいた。
(C言語とかで関数にアクセスしている感じだと思っていた) 

なので、「数値を変えても見た目が一切替わらない。。。なんで。。。？？」を30分くらい繰り返していた。

小数点以下の数値しか変えていないので、ほとんど見た目が変わらないのはそりゃ当然だ。

ここに気づいた後はもうやりたい放題。

　「うわっ、枠でっかｗｗ」

　「ここもう少し調整したいな・・・」etc...

結果、自分好みに調節し、とても満足。

自分で納得できるものになったのは嬉しい限り。

晴れて、階層化の実現ができた。

で、別の話になるのだが、この記事を書きながらもいくつか試したことがある。

まず、冒頭に貼っつけた画像。

　

　コレ

最初は、枠線は無く編集で付け足したわけだが、
なんかアップロードした画像を編集や管理ができる「はてなフォトライフ」なるものがあるみたいで。

これを使って編集しようとしたが、ダウンロード中？で止まって何もできなかった。。。

諦めてペイントで編集したが、何か使い方が悪かったのだろうか。

まあ、あまり使うことも無いだろう。

それからリンクの貼っつけ方。

リンクを貼っ付ける時に、リンク先のタイトルを含めたグラフィカルな形にするのか、
URLの文字だけにするのか、を変更できる。

当然、グラフィカルな形の方が見やすいのでこれを選択するのだが、いかんせん、デカイ。

なんとか調整できないかと思いポチポチしてると、ツールバーの文字の大きさで小さくなることがわかった。

普通に貼っ付けるとこのデカさ。

それがここまで小さくなる。しかもリンク前に空白を入れて位置を調節できる。

が、これだと小さすぎる。
普通に楽に調節したい。でもそんなのツールバーにない。
どうしたものか。

と、HTMLを眺めているとなんかサイズの指定があるじゃないか。

・・・これじゃね・・？

<iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="シロウトとゲームと、ときどき日常" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fshirotogame-everyday.hatenablog.com%2F" frameborder="0" scrolling="no"></iframe>

これが実際のコード（つーかこれ貼るのにも色々調べすぎたわ）

というわけで、以下のように変更し、万事解決。

　 width: 100%
　 height: 150px;
　 max-width: 600px;
　 scrolling="yes"

んで、このスクロールするボックスは、
はてな記法で空記事作って、以下のように「>|| ||<」で区切ってプレビューからコピって貼り付ける。以上。

>|html|
<iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="シロウトとゲームと、ときどき日常" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fshirotogame-everyday.hatenablog.com%2F" frameborder="0" scrolling="no"></iframe>
 ||<

ハイ、ここまで長々と書いて、書きながらいろいろ調べて既に2時間経過・・・

普通にしんどいわ。

これがブログか。

おそろしい。