うならぼ

どうも。アフィリエイトとか広告とか解析とかは/about見てね。

CDを紹介する記事

はてなブログの設定でアソシエイトIDを指定していたのに紹介している記事がほとんどなかった*1ことに気づき、かといってしれっとアフィリエイトリンクを貼るのは個人的に迷うところがあるので、それ用の記事を書いてみることにした。

以下の商品リンクを踏むとAmazon.co.jpアソシエイトでもって紹介料が発生したりしなかったりするので、(Amazon|アフィリエイト)が嫌いな人は申し訳ないですが商品名でググるなりなんなりしてもらえれば。あとレビューが雑だけど怒らないでね

デレマス

デレマスはデレステや周辺のオタクのせいおかげで個別に気になっている曲も多く、これだって感じのベスト盤もなくて、やむなくシングルも色々買っている。Amazonとかだと試聴できないけれどYouTubeにだいたい公式で上がってる。

THE IDOLM@STER CINDERELLA MASTER EVERMORE

THE IDOLM@STER CINDERELLA MASTER EVERMORE

曲名アーティスト名共に前方一致泣かせなあれ。

周子ってなんか魅力あるの?と知り合いに聞かれたが、曲を聞いてCD買っただけなのでよくわからない。謎の献血アピールは悪くなかった。

THE IDOLM@STER CINDERELLA MASTER 039塩見周子

THE IDOLM@STER CINDERELLA MASTER 039塩見周子

属性曲シリーズはカバー曲もドラマパートも入ってて三度おいしい。アタポンと咲いてJewelも買ったけれど、やっぱりこれが好き。

あとこういう曲好きなので薦めてもらえると喜びます。lilac timeは割と伏兵だった。

THE IDOLM@STER CINDERELLA MASTER 041大槻唯

THE IDOLM@STER CINDERELLA MASTER 041大槻唯

アイカツ

Amazonっていうかjmd試聴プレイヤーでだいたい試聴できるので試聴してどうぞという感じがある。だいたい好き。

TVアニメ/データカードダス アイカツ! 2ndシーズンベストアルバム SHINING STAR*

TVアニメ/データカードダス アイカツ! 2ndシーズンベストアルバム SHINING STAR*

TVアニメ/データカードダス「アイカツ!」4thシーズン挿入歌ミニアルバム「Wonderful Tour」

TVアニメ/データカードダス「アイカツ!」4thシーズン挿入歌ミニアルバム「Wonderful Tour」

  • アーティスト: AIKATSU☆STARS!,みほ・ななせ from AIKATSU☆STARS!,るか・ななせ from AIKATSU☆STARS!,もな from AIKATSU☆STARS!,ななせ・もな from AIKATSU☆STARS!,かな from AIKATSU☆STARS!,みき from AIKATSU☆STARS!,るか・かな from AIKATSU☆STARS!,るか・もな・みき・みほ・ななせ・かな from AIKATSU☆STARS!,GENMAI,只野菜摘
  • 出版社/メーカー: ランティス
  • 発売日: 2016/01/27
  • メディア: CD
  • この商品を含むブログ (2件) を見る

いくつか曲名を挙げろと言われると、Thriling Dreamとか、Sweet Sp!ceとか、Blooming Bloomingとか、ミエルミエールとか、他にも…え、聞いてない?そう。

アイカツスターズアイカツフレンズはまた別だし、スマホアプリであるところのフォトカツ向けに作られた曲はまた別。STARDOM!とかPOPCORN DREAMINGとか、話題になったりならなかったりしたDreaming birdとか。

アニメ

アニメ最近疎くって、音ゲーで知って周回遅れで買うみたいなのが増えている。

今になって絶望先生やっぱいいわねになった。最近豚のご飯も聞けるようになった。

絶望大殺界

絶望大殺界

絶望レストラン

絶望レストラン

2曲目は大久保瑠美のにゃんにゃんにゃーんを聞く曲。

TVアニメ「あっちこっち」エンディングテーマ 手をギュしてね

TVアニメ「あっちこっち」エンディングテーマ 手をギュしてね

その他

ソニックのCDがほしくて適当にこれを買ってみたけどよい。

HISTORY OF SONIC MUSIC 20th Anniversary Edition

HISTORY OF SONIC MUSIC 20th Anniversary Edition

あとここなつではキモチコネクトが好きです。よろしくお願いします。

*1:しかもそのわずかな記事はID設定前に書いたものらしく、はてなのデフォルトIDのままだった。意味がない。

ブラウザで表示する時だけmax-widthをつけてちょっと読みやすくする

職務経歴書とかをワープロソフトじゃなくてHTMLで書きたい人向けの話。

まずはCSSを書かずにだーっと見出しや表や箇条書きを並べていく。

f:id:unarist:20180612223905p:plain

……紙に印刷するならともかく、このウィンドウ幅だとちょっと広すぎて読みにくい。のでブラウザ(screen)で表示した時だけ幅上限とか余白とかほしいわねって話。

例えばそう、こんな感じに。テーブルのスタイルはおまけ。

f:id:unarist:20180612223739p:plain

@media screen {
    html {
        background: #eee;
        padding: 1em 2ch;
    }
    body {
        background: #fefefe;
        color: #333;
        padding: 1em 3ch;
        margin: auto;
        max-width: 65ch;
    }
}

section { page-break-inside: avoid; }

table { border-collapse: collapse; }
thead { border-bottom: 1px solid black; }
tbody > tr { border-bottom: 1px solid silver; }
th, td { padding: .3em 1ch; text-align: left; }

page-break-inside: avoid はその要素内での改ページを回避するものなので、このCSSで言うと section 要素はなるべくページをまたがないように、必要ならその直前に改ページが入る。これはケースバイケースな気もする。

htmlのpaddingは最初はbodyのmarginにしていたけれど、これだとウィンドウ幅が狭くなった時に上にだけ余白がついて微妙だなということで。真面目にやるならウィンドウ幅に応じてmargin消すメディアクエリ書いた方がいいだろうけど。

max-widthをchで指定するかmmで指定するか。幅の上限というと後者のような気もするし、一行の文字数ってことなら前者だし。どうなんだろうね。

印刷時のレイアウトというか幅をブラウザ上でも再現したい場合なら、@page { margin: 0 } として余白を消してからbodyにpaddingを指定するといった方法もあって、宛名印刷とか帳票みたいに要素の絶対位置を指定したい場合はそれ一択になる。が、今回はブラウザ上での見栄えをよくしようぐらいの話なので省略。プリンタによって余白の限界も違うし、用紙サイズもなんだっていいし。

まあこれとてユーザーの好みで選べた方がいいんではという気もして、そういうブックマークレットも作っているんですけどね。max-widthないサイトに遭遇した時のためだけど。