人とか機械とか

デジタルガジェットやコンピュータについてのブログです。

Tumblrの個別記事ページで表示が長すぎるnotesを短くする方法


2chねらーに相談してみたら解決したので参考用に。
僕はプログラマではありますがcssとhtmlについてはド素人なので、ググってマネしたらできた!ワーイというレベルです。


参考

カスタムHTMLテーマの作成
http://www.tumblr.com/docs/ja/custom_themes+

{PostNotes}のところを参照。

<html>
    <head>
        <style type="text/css">
            ol.notes {
                padding: 0px;
                margin: 25px 0px;
                list-style-type: none;
                border-bottom: solid 1px #ccc;
            }

            ol.notes li.note {
                display:none; /******* 追加 *******/
                border-top: solid 1px #ccc;
                padding: 10px;
            }
            /** 追加 **/
            ol.notes li.note:nth-child(-n+5){  /* 先頭から5個だけ表示 */
                display:block;
            }
            /** 追加 **/

            ol.notes li.note img.avatar {
                vertical-align: -4px;
                margin-right: 10px;
                width: 16px;
                height: 16px;
            }

            ol.notes li.note span.action {
                font-weight: bold;
            }

            ol.notes li.note .answer_content {
                font-weight: normal;
            }

            ol.notes li.note blockquote {
                border-color: #eee;
                padding: 4px 10px;
                margin: 10px 0px 0px 25px;
            }

            ol.notes li.note blockquote a {
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        {block:Posts}
            ...
            
            {PostNotes}
        {/block:Posts}
    </body>
</html>


メリット

  • zenbackや共有ボタンや関連記事など、そのほかのパーツを個別記事の下に貼り付けるとき見た目を整えやすい。
  • 長くない。うざくない。

デメリット

  • display:noneしているだけであって実際はlist-itemをqueryしているためネットワーク帯域が無駄になってしまう。多分。
  • IEとかモバイル端末用レイアウトで上手く動かない。
  • IE9はnth-child()をサポートしてると書いてあるのに上手く動かない。IEなら仕方ない。
  • 「もっと読む」が働かない。nth-last-child(1)で表示するだけならできるが、クリックしても何も起きない。「クリックしたらCSS上書き」ということができれば可能かも知れない。 a.hoverとかcss工夫すればできるかな?
  • まあTumblr運営に要望を出すしかなさそうです?かね。