Tumblrをいじっている

f:id:kkzy9:20140614123306p:plain

tumblrに関しては2012年頃からブログとしての活用や企業サイトとしての活用が目立ってきており、一度いじってみたいと思いながらもめんどくさくて何もしてなかった。

今再びtumblrをいじりだしたことに深い意味はなく、とりあえずGoogle Adsenseが自由に埋め込みできるので入れてはいるけれどそもそもコンテンツが無いため、今もただレイアウトだけをいじっているだけになる。
更新している最中に参考にした記事なんかを書き残しておきたいと思った。

tumblrカスタマイズ

tumblr更新履歴

僕はcmsのカスタムなんてやったことがないんだけど、tumblrに関してはindexもpermalinkもcssも全て同じページに記述されいるという特徴があり、そこに追記していく形でレイアウトや仕様変更ができる。これが慣れるまでは非常に見にくい。なにせ同じ1ページに書かれているわけだから、どこからどこまでがindexの内容でどこが個別ページの内容なのかパッと見わからない。その上tumblr独自タグまである。

グローバルナビゲーションをつけてみた

公式サイト風にアレンジしてみようということで、グローバルナビゲーションをつけてみた。入れる場所が記事の上しか無いだろうなと思い、wrapperとcontentを探してその間にnaviのdivを作って挿入した。
元々利用しているテンプレートがスクロールで読み込むタイプのグリッドデザインだから、ナビは上部に固定しようと思い、position:fixed、z-indexを最大に、横並びは今回はじめてtable-cellというタグを利用し、vertical-align:middleにて縦位置を中央に揃えた。position:fixedでcontentのdivと重なってしまうため、contentに上部paddingを効かせてとりあえず開いた状態では重ならないようにした。どうでもいいけどhtmlのtableを横並びのために使うのは禁じ手とされている。このcssのtableってなんだろう。ありなのか?
コンテンツが無いため表示名はとりあえずcategory1とかにしてある。

aboutを追加してみた

aboutぐらいは後々も使うだろうと思って追加してみた。右上にある"テーマの編集"から一番下の"ページの追加"を選択し、aboutページを追加した。urlも内容もここで記述できる。これ自体はブログの1ページを作る作業と同じ。あとは先ほど設置したグローバルナビゲーションからa hrefで飛べるようにしただけ。中身はまだ考えていないので適当。

indexとpermalinkの編集

ここからが本当のtumblrカスタマイズ始まりである。先ほど書いたようにtumblrのソースは1ページに全て記載されている。だから1ページの上にindexの内容はここでpermalinkの内容はここでという風に書き分けなければいけない。これ、果たしてどういう順番で書いたらいいのだろうか。本当に迷った。
既存のテンプレートを使用しているため、全体的には初めから仕上がっている。そのソースを見て一体どう書き分けされているのか確認しながら、自分が変更したい内容を追記していくことになる。
例えば、tumblrといえば写真だ。写真の投稿内容というのは{block:Photo}というでかい枠の中に記述され、その内側でのみ写真の投稿に関する独自タグ等が有効になる。
<div class="photo post"> というdivの中に全ての表示パターンなどを一通り全部記述し、その後indexページのみで表示させたい部分を{block:IndexPage} {/block:IndexPage}で囲ったり、個別ページでのみ表示させたい内容を{block:PermalinkPage} {/block:PermalinkPage}で囲ったりしていく。その後classごとにcssを書いたりと、とにかく見にくい上に整理が非常にめんどくさい。cssだけでも別シートで上げるべき。

world clockというwidgetを追加してみた

これは完全に僕の趣味で、おまけになる。このworld clockに限らずtumblrで利用できるwidgetはかなり多いんじゃないだろうか。基本的に制限がないと思うからブログとしていろんな機能を持たせることも簡単にできると思います。

今後の課題

何しろいじっているだけなのでコンテンツがない。酔っている時に何か考えていたんだけど完全に忘れてしまった。traveler's cafeみたいなそういうのだったと思う。忘れた。
せっかく英語を勉強しているので、英語と日本語を切り分けられるようにしたいけれどこれが途方もなくめんどくさいんじゃないだろうかと思ってきた。webクリエイターボックスの仕様なんかが理想だけどこれtumblrで実装できるのか?いや、まあ企業サイトは絶対やっているだろうから可能なんだろう。どちらにしても日本語の内容と英語の内容を両方用意しないといけないことには変わりない。まあまだ中身ないんだけど。
"続きを読む"の機能がデフォルトであるみたいで、これ使ったら一体どうなるんだろう。indexページはどう見ても情報量が多すぎるので、なるべく省きたいと思う。 

Designing Tumblr デザイニング・タンブラー

Designing Tumblr デザイニング・タンブラー