Custom Theme

Tumblrに置いてあるK’s blogを「無料のテーマを参考にしつつ、オリジナルデザインに」という方向でカスタマイズしてみる。
Tumblrの内容だからTumblrサイトに書きたいけど、こういう内容はGoogleサイトやGitHub Pagesのほうが楽にできる。

カスタム前に

カスタマイズの多くはJQueryを使うことが前提なので、<head>...</head>の間で呼び出しておく。 最新はGoogle Hosted Librariesで確認。

投稿記事などを取得するのにTumblr APIキーが必要になってくる。
Applications(要・Tumblrログイン)よりアプリを登録して、APIキーを取得する。
デフォルトのコールバックURL:にOAuth認証用のスクリプトを置いて登録するが、記事取得だけなら不要なので、てきとーな自分サイトのそれっぽいURLを入れておく。

タグ一覧

Tumblr APIを通してタグクラウドを表示させてみた」「使用中のタグクラウドのCSSとか(2011年12月現在)」に沿って設置してみた。
前者を見つつ設置、後者を見つつ表示のカスタマイズしてみた。元記事の方はカスタマイズ半端ないっす…
元記事から少し手を入れてみたのを晒しておく。

Jqueryはすでに使用中という前提。
tumblrposts.jsはJs-tumblrposts.jsからダウンロード & テーマアセットからアップロード。
カスタムのHTML編集画面、左上の  歯車アイコン→テーマアセット、でtumblrposts.jsを送信、<head>内にて呼び出し。

参照記事ではclass.jsをアップロードして、となっているが、CDNで呼び出す。1

Script
元ネタからだいぶいじってある。

getTags("desc")とすることで、投稿数の多い順にソートされる(TumblrPosts.js が新しくなりました)。
タグ一覧全部だと多いかな、と思い「投稿数が6つ以上のタグ」をデフォで、“more tags”をクリックで「投稿数5つ以下のタグ」を表示するように細工。
Tags Off Tags On

HTML
<span>で囲ってあるのが「投稿数5つ以下のタグ」を見るためのリンク。

CSS
付箋紙やテープで貼り付けたような「紙感」のために、いろいろ突っ込んである。
.btn-moreの設定は、ちょっとしたお遊びでFont Awesomeを使ったトグルスイッチになっている。

新着記事一覧

新着記事リストをTumblrに設置してみたを参考に。
デザインは「CSS3だけでつくる付箋紙(Post it)風Box」を元に、こういう感じの見た目になるようにカスタマイズ。
RecentPosts

CSS

Script
テキスト投稿のみを拾うようになっている

HTML “Recent posts”の前にFont Awesomeな文字を入れているので、このあたりは好みで変更を。

関連記事一覧

こういう感じの見た目になるようにカスタマイズ。デザインは「コピペで使えるリストデザイン例34選:CSSでおしゃれな箇条書きを作ろう」より。
Related Posts

CSS
Font Awesomeが使える前提なので、環境を整えるか文字部分を変更するかが必要。

Script & HTML
タグを参照する都合上、スクリプトは<body>の中に。
取得する投稿はテキストとリンク。{block:Permalink}…{/block:Permalink}内に置く。

PhotosetページをLightboxに

こういう感じの記事に。

上記リンクのようにJQueryを追加したあと、fancyBox3も追加しておく。バージョンはfancybox cdnjsにて確認2

オリジナルのTumblrSlider.jsを変更。ってか、かなり変えたので自分のメモ用(←なので要注意)として晒しておく。
アセットにアップロードではなく、テーマHTMLに直書きしてある。

  1. 2017/06/27追記・どうやらclass.jsがなくてもいいっぽい。 

  2. 元ネタ執筆時よりバージョン上がってました。今後も要確認。 

Updated:

Leave a Comment

Leave a Comment