Tumblr のブログテーマをカスタマイズする

公開:2013-02-25 20:54
更新:2017-07-30 10:00
カテゴリ:web,アプリ・ライブラリ・言語,css,tumblr
        <section>
            <h3>変更の動機</h3>
        <p>
            TumblrのBlog画面をほぼデフォルトのまま放置していたのだが、変えることにした。というのも動画を連続ポストした結果、無限スクロールだとスクロールが非常に遅くまた
            1ページのリソースが増大しそうな気がしたので。そもそも動画を連続ポストした私が悪いのだが、テーマをページ単位のもので、1画面に多く表示できるものに変更することにした。
        </p>
        </section>
        <section>
            <h3>テーマの選択</h3>
            <p>タイル状にコンテンツを表示できるようなものがないかなと探したところ、「Paper Stacks」を見つけた。これをベースにした。</p>
            <p>
                <img src="https://sfpgmr.github.io/images/20130224-3.png" />
            </p>
        </section>
        <section>
            <h3>CSSの修正</h3>
            <p>
                テーマファイルはCSSをクラウドからを読み込んでいたので、そのファイルをベースにCSSファイルを別に作り変更した。編集には今回VS2012Express For Webを使用した。CSSのソース整形機能と補完機能が結構よくできているので。Aptanaでもいいのだが、なぜかCSSのソース整形機能がうまく動作しなかった。
            </p>
            <p><img src="https://sfpgmr.github.io/images/20130224-4.png" /></p>
            <p>
               モバイル向けの画面も作ろうとしたが、どうも画面サイズを小さくするとYoutubeのプレーヤーが再生不能となるので、あきらめてTumblr標準のモバイル対応機能を使うことにした。
            </p>
            <p>編集はChromeの「要素を検証」機能を使い、タグにどのようにCSSが適用されるかを調べながら行った。この機能は非常に便利だ。</p>
            <p><img src="https://sfpgmr.github.io/images/20130224-1.PNG" /></p>
        </section>
        <section>
            <h3>完成?</h3>
            <p>
                完成品?は下記。CSSについてはかなり理解が進んだものの、まだまだしっくりこない。
            </p>
            <p><a href="http://sfpgmr.tumblr.com/" target="_blank">
                <img src="https://sfpgmr.github.io/images/20130224-2.PNG" />
               </a>
            </p>
        </section>