MiMiC Labo

ほぼ、こちらの記事の内容で設定させていただき、タグの表示数だけ指定したかったため、そこだけ追加でカスタマイズしました。

※現在利用できなくなった過去の記事2つ http://mimic-labo.com/post/9093343456/tumblr-taglist-howto http://mimic-labo.com/post/151047081806/tumblr-tagcloud-howto

テーマアセットでアップロードするファイルを2つ用意

jquery.class.js

tumblrposts.js

上2つのソースコードをテキストエディタにコピペして「.js」ファイルとして保存する。（拡張子をきちんと表示設定にして.txtではなくきちんと.jsファイルで保存する）

MITライセンスの表記も2つのファイルに追記しておきましょう。 こんな感じで。

// The MIT License // Copyright (c) 2010, matsukaze. // https://github.com/mach3/js-jquery-class // https://github.com/mach3/js-tumblrposts.js/blob/master/LICENSE

アップロード

「テーマの編集」→「HTMLを編集」

「テーマアセット」を選択

下の方に表示されたら「ファイルを追加」クリックで2つのファイルをアップロードする

アップロードされたらファイル名をクリックするとそのファイル自体のURLが新規タブで開かれるので、そのURLを2ファイル分メモしておく。

tumblrのHTML編集で追記する

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://static.tumblr.com/◯◯/◯◯/jquery.class.min.js" type="text/javascript"></script> <script src="https://static.tumblr.com/◯◯/◯◯/tumblrposts.min.js" type="text/javascript"></script> <script type="text/javascript"> (function () { var posts = new TumblrPosts({ domain: "◯◯◯.tumblr.com", //自身のブログのドメイン名 maxNum: 1000　//タグを取得する投稿数（記事が膨大のときの制限用） }); posts.bind(posts.EVENT_COMPLETE, function (e) { var that = this; var tagMaxNum = 50; //表示するタグの最大数指定 $.each(this.getTags("desc"), function (i, tag) { var html = '<li>' + '<a href="/tagged/' + tag.name + '">' + tag.name + ' (' + tag.count + ')</a></li>'; if (i === tagMaxNum) {return false;} $(html).appendTo($("ul#tags")); }); }); posts.run(); })(); </script>

「＜/head＞」head終了タグ前に入れておけば大丈夫だと思います。

2,3行目のURLは先ほどメモしたURLを設定

domain、maxNum、tagMaxNumの値を設定

「function ()」の指定自体を「tumblrposts.js」ファイルに追記してしまって、アップロードする方がスッキリするとは思います。

タグクラウドを表示したい場所に設置

<ul id="tags" class="tagCloud"></ul>

こちらをサイドバーやフッターの追記したい箇所に設置。

サイドバーに表示したい方は、テーマによって違いはありますが、このテーマの場合、下記のように「id="widget"」のdivタグに入れて使うとデザインが崩れないかもしれません。

<div class="widget"> <ul id="tags" class="tagCloud"></ul></div>

CSSでタグクラウドのデザイン指定

テーマの編集の「HTML編集」を終了して、下部にある「詳細設定」から「カスタムCSSを追加」部分にCSS指定を入力。

#tags { margin: 0; padding: 0; list-style: none; line-height: 1.4em; } #tags.tagCloud li { display: table-cell; list-style: none; font-size: 100%; margin: 0; padding: 0; display: inline-block; } #tags.tagCloud li a { text-decoration: none; color: #ba2636; //テキスト色 border: 1px solid #ba2636; //囲み線の色と幅 padding: 0 0.5rem; margin: 0 0.2rem; position: relative; } #tags.tagCloud li a:hover { color: #fff; //マウスオーバー時のテキスト色 border-color: #ba2636; //マウスオーバー時の囲み線の色 background-color: #ba2636; //マウスオーバー時の背景色 }

デザインもほぼこちらの記事の内容で設定させていただきました。

参考URL

http://blog.designlabo-mika.com/post/155368179444/

http://chips-tips.tumblr.com/post/8642077808/tagcloud-tumblrapi

Chrome / Firefox ともに。IE / Edgeでは未確認。

一度フリーズしてしまうと、かなり時間をかけないと操作できない状態に陥ってしまう。

操作できるまで待ってエクスプローラー画面上作業を終了しても、後からブラウザがクラッシュして落ちる。

というちょっと厄介な状態でした。

（ブラウザだけでなく何かしらのアプリケーションでフォルダの場所指定する際にも「参照」ボタンのようにエクスプローラーが開かれると固まってしまうこともありました。※こちらは別の問題かもしれませんが、解決の確認はしてません。）

今回「参照ボタン」というワードで調べて、同じように悩まされていた方の記事を偶然にも発見し、有難いことに解決法が書かれていましたので試したところ、即座に解決してびっくり。

OS: Windows7 Pro

エクスプローラーの「ツール」→「フォルダオプション」を開いたら、下方の「すべてのフォルダを表示する」にチェックを入れるだけ

https://ameblo.jp/nikoameba/entry-12106365142.html

こちらの記事の方はOSが「Win7 Pro」でしたが、私の「Win10 Home」環境でちょっとUIが違う中での設定でもうまく解決してくれました。

Win10 解決法

フォルダ開いて「表示」→「ナビゲーションウィンドウ」→「すべてのフォルダを表示」にチェックを入れるだけです。

なんでこの設定で症状が治るのか、結局の原因は？とか何も分かりませんが、これに陥っている人は少ないのでしょうか。

しかし、ちょっと問題が。たった今記事を書いている際に使った↑画像をアップロードする際に出るエクスプローラーがまだ重たい感じでした。ですがフリーズはせず、解決法は機能しているとは思います。これは完全解決まで道のりは長いのか...。

今までは、

Win7からアップグレード方式でWin10にしたこと

QTTabBarというエクスプローラーカスタマイズツールを利用していること

選ぶべきポイント

以下のポイントを重視して選んでおります。 カスタマイズ性なども1つ考えても良いかもしれませんね。

文字が読みやすい

配色が見やすい

記事ブロックの配置が良い

レスポンシブでスマホも対応ならなお良し

あとは好み

文字についてはデザイン作った方が日本語を考慮していることは少ないと思います。なのでその点に関しては自身でフォント指定をカスタマイズするしかありません。

基本的にデザインについてはカスタマイズする必要もないぐらい見栄えが良いものをピックアップしてみました。

おすすめのtumblr無料テーマリスト

写真、画像投稿向けのテーマか、テキストタイプのライター向けのテーマかという焦点に絞って分けていきたいと思います。

写真や画像がメインとなるグリッドレイアウト #フォト

Persona

Minimalism

Maverick

ImNotWordy

Illustfolio4

Melvin

Simplig-folio

写真や画像がメインとなる1カラムレイアウト #フォト #1カラム

Emerald

Belfort

テキスト記事がメインとなるレイアウト #テキスト

ColorFall

Zen

AppBlog

Phaser

Cards

Sensé

Excelle

Miss Sourpuss

Oscar

ZEN

ザ・シンプル！なデザイン #シンプル

Posthat

Solo

Thinker

Monospace

Minimal

Persona

#フォト

1カラム～最大5カラムまで設定できる

カラムの横幅も細かく選択できる

ヘッダー、記事などのフォント、サイズ、カラーも細かく設定可能

表示、非表示の組み合わせだけでもオリジナリティが出る

Loading Typeでインフィニティスクロールやページネーションも

SNSのリンク設定数も豊富

※テーマ編集の設定項目が多すぎて逆に困るかも？

インストール：https://www.tumblr.com/theme/40552 サンプル：http://persona.themecloset.me/

Minimalism

#フォト

Body Grid Columnsで1カラム～最大5カラムまで設定できる

Header Alignmentでタイトルなどの位置、Header Positionでヘッダー自体をひ左右のサイドバーにするかTopに出すか選べる

Opacityの設定での見せ方が豊富（欠点はテーマ編集の段階で見え方が確認できないところ）

背景の一枚絵を設定して記事やヘッダの透明度の工夫次第で一目置くデザインに

SNSのリンクも豊富

※やはり編集項目が多いのが難点

インストール：https://www.tumblr.com/theme/39633 サンプル：http://minimalism-theme.tumblr.com/

Maverick

#フォト

Column Countで2カラム～最大4カラムまで設定できる

Photo Animationで画像をマウスオーバーしたときのアニメーション

Show Elevatorでページ内Topへ戻るリンク有無

Show Categoriesで投稿につけたタグでカテゴリ別に表示メニュー（日本語だと反映されないかも？）

カテゴリは6つまで指定でき、下の方にタグ名入力欄があります

フォントの細かい指定を直接入力してデザインできるら欄がある

Googleフォントも2つまでAPIのURL入力可

インストール：https://www.tumblr.com/theme/40586 サンプル：https://theme-maverick.tumblr.com/

ImNotWordy

#フォト

Layoutで3カラムもしくは4カラムが選べる

多くはカラーの設定

Use Black and White Photoをオンにすると画像をグレースケールで表示してくれる（はずが、どうやら不具合。下記にて対応可。）

テーマの編集で「HTMLを編集」をクリック、下のimgタグを検索して、「opacity:0;」を削除するとグレースケール適用されました。photosetの方は未確認です。

<img src="{PhotoURL-500}" style="position:relative;z-index:99922299;opacity:0;" class="small">

※おすすめの1つとして紹介しましたが中身見るとちょっとおすすめ出来ない作りになっておりました。。画像投稿しか利用しないとか、見た目だけでOKなのであれば特に問題ありません。

インストール：https://www.tumblr.com/theme/39903 サンプル：http://imnotwordy.com/

Illustfolio4

#フォト

カラム数はThumbnails Sizeの指定で変わります。XS・Sで5カラム、M・Lで4カラム、XLで3カラムになります。

Thumbnails Marginで記事間のスペースを選択

タグリストの有無が選択できる

Crop Thumbnailsで記事サイズに合わせて画像を表示

Show Index Entry Footerのオンオフで記事のフッター情報の有無

Single Column Modeでは画像でなくテキスト重視のライター向けに

SNSリンクもFacebook、Twitter、Pixiv、Instagramと最小限

※非常におすすめです。設定もシンプルで見た目も良い。ただサイズがXSやSだと個人的にかなり小さい印象。それでも画像投稿の数が多く画面に目一杯敷き詰めたい方にはおすすめ。

インストール：https://www.tumblr.com/theme/40571 サンプル：http://illustfolio4-sanographixtheme.tumblr.com/

Melvin

#フォト

カラム数はブラウザのウィンドウサイズに依存（幅1280pxで4カラム）

背景、テキスト、リンクのカラーを細かく設定できる

サイドバーがボタン式の隠しメニューで位置を四つ角で指定可能

記事のサイズを選択できる

画像をマウスオーバーしたときのアニメーション3種

SNS、カスタムリンク数も多い

※典型的なグリッドオンリーのテーマで写真や画像にはもってこいなデザイン。しかしソースに改行が入っていないのでソースコードをいじってカスタマイズしたい方には向かない。

インストール：https://www.tumblr.com/theme/40629 サンプル：http://theme-melvin-1.tumblr.com/

Simplig-folio

#フォト

1カラム～3カラム

ヘッダテキストLeftかCenterを選択可

Show Profile Boxで投稿のTopにつねに定形の紹介文表示

インフィニティスクロールのオンオフ

※Lig社員の制作によるデザイン。JSを多く使用していて読み込みが若干遅いが、写真画像をおしゃれに見せるにはもってこい。tumblrのテーマづくりから連載記事で公開されていて、カスタマイズの勉強にもなる。

Tumblrテーマを本気でつくる Vol.1 Vol.2 Vol.3 Tumblrをカスタマイズして、無料テーマとして申請しました

インストール：https://www.tumblr.com/theme/39833 サンプル：http://simpligfolio.tumblr.com/

Emerald

#フォト #1カラム

1カラムのシンプルなレイアウト

写真画像は大きく表示され、テキストを綺麗に見せるライター向け

テーマ編集の設定もシンプル

インストール：https://www.tumblr.com/theme/39974 サンプル：http://emerald-themechimp.tumblr.com/

Belfort

#フォト #1カラム

基本的に記事は1カラム

写真や画像メインとして利用したいが、テキストも問題ない

ボタン式の隠しメニューあり

ヘッダーがサイドバーになっていてレスポンシブで幅が狭まると上にくる

Tagegoryというタグをカテゴリに見立てた画像つきリンクが6つまで設定可

※テーマ編集の設定項目は多いが、全体的なデザインとして秀逸。利用してみる価値あり。

インストール：https://www.tumblr.com/theme/40337 サンプル：http://belfort-theme.tumblr.com/

(adsbygoogle = window.adsbygoogle || []).push({});

ColorFall

#テキスト

ブログタイトル等を左サイドにフィックスした1カラムレイアウト

テーマ編集の設定項目はテーマカラーとリンク設定のみ

※カスタマイズのアシストこそ少ないが誰にでも受け入れられるシンプルなデザインが良い。レスポンシブ対応なのも高評価。

インストール：https://www.tumblr.com/theme/37818 サンプル：http://colorfalltheme.tumblr.com/

Zen

#テキスト

レイアウトはグリッドか1カラムのどちらかを選択できる

グリッドの場合は写真画像専用として利用して申し分ない

隠しメニューでページリンクやTwitterのウィジェットに対応

レスポンシブでグリッドでは最大4カラム

SNSなどのリンク設定も多い

他、Show Post Notesで投稿日時を記事下に表示

※テキストも画像もという迷っている方には非常にオススメ。グリッドか1カラムかを変更するだけで良い。初期のフォントも見やすく、デザインとして綺麗です。

インストール：https://www.tumblr.com/theme/39508 サンプル：http://zen-wayvo.tumblr.com/

AppBlog

#テキスト

ブログタイトル等を左サイドにフィックスした1カラムレイアウト

レスポンシブ対応

隠しメニューでページやアーカイブのリンク表示

テーマ編集はタイトルを見せるか、ツイートを見せるかの2つ

他はカラー設定が細かくできる仕様

記事投稿1つ1つに日付が左上に付いて、日記のようなイメージ

SNSリンク設定も多い

※はてなダイアリーのような日記を書くイメージでブログを扱いたい方にはオススメ。テキストはPCからでは若干小さめだが気にならない程度。

インストール：https://www.tumblr.com/theme/36932 サンプル：http://appblogtheme.tumblr.com/

Phaser

#テキスト

1カラムのシンプルなレイアウト

SNSのリンクを設定すると左サイドでフィックスされて表示

ヘッダに設定した画像をスクロールでアニメーションさせる設定あり

※記事間をボーダーで繋いだ特殊なデザインですが、タグや固定リンクのセンター表示でバランスが取れている作り。ヘッダにメインの画像を1枚設定してブログにしたい方にオススメ。

インストール：https://www.tumblr.com/theme/40193 サンプル：https://phaser-theme.tumblr.com/

Cards

#テキスト

カラム数は1～最大4カラムまで指定できる

Layoutで記事の幅を3種類から設定

Max Grid Columnでグリッドに設定したときの最大カラム数を指定

Grid Layoutのオンオフで1カラムかグリッドかを指定

Sidebarをオンにするとヘッダが左サイドバーに

Videoのアスペクト比やAudioのアーティスト情報の表示など設定項目も多様

フッターのカラム数も2カラムに設定可

※カードの名の通り、厚紙のカードを記事に見立てて並べたイメージのデザイン。テーマ編集上でのカスタマイズ項目も多く細かい好みにも対応。初期に設定されているフォントを自分好みに変更すれば良い味になります。

インストール：https://www.tumblr.com/theme/39644 サンプル：http://cards-simplicitythemes.tumblr.com/

Sensé

#テキスト

1カラムレイアウトの日記イメージのデザイン

Dark Themeをオンにすると背景が暗いタイプに

Featured Postをオンにするとタグに「Featured」を付けた投稿記事を必ず先頭に表示してくれる

Group Blogのオンオフで記事投稿者を表示非表示できる

クレジットの表示非表示もあり

レスポンシブ対応

※日付が左サイドにあり日記やカレンダーがイメージのデザイン。Featured機能で1つの記事をお知らせとしてずっとTopに表示してくれるが便利。

インストール：https://www.tumblr.com/theme/38187 サンプル：https://sensetheme.tumblr.com/

Excelle

#テキスト

基本は2カラム、レスポンシブ対応でウィンドウサイズ狭いと1カラム

とにかく細かい色・ボーダー・フォントの指定項目が多い

SNSウィジェットの表示、記事個々の情報の表示など設定可

※フッターのデザインが秀逸。SNSのリンクもアイコンで表示してくれる。色に関しては本当に細かく設定できるのでオリジナルに化ける可能性も。

インストール：https://www.tumblr.com/theme/39425 サンプル：http://excelle.elletricity.com/

Miss Sourpuss

#テキスト

2カラム固定のレスポンシブ非対応

フォントをプライマリ、セカンダリと指定できる

タグやNote、リンクの表示非表示切り替え

フリーのリンクを5つまで設定可

※レスポンシブデザインではないため、スマホなどではtumblrデフォルトのモバイルデザインを設定していないといけない。昔ながらの2カラムデザインという感じで色彩などは女性好みのデザインかも？

インストール：https://www.tumblr.com/theme/29192 サンプル：http://safe.txmblr.com/theme/preview/29192

Oscar

#テキスト

1カラムのヘッダが左サイドバーにフィックスタイプ

ヘッダーがサイドバーになっていてレスポンシブで幅が狭まると上にくる

カラーとフォントを細かく指定できる

Googleフォントの使用有無あり

Posts widthで記事幅を直接指定できる

SNSリンクはヘッダと一緒にアイコン表示される

※オーソドックスなデザインのブログ。記事のwidthは自分で指定できるが、このままでもバランスが取れていて見やすい。

インストール：https://www.tumblr.com/theme/39874 サンプル：http://oscar-theme.tumblr.com/

ZEN

#テキスト

1カラム

SNSのシェアボタンを記事ページに表示可

Enable Syntax Highlightで記事内のpreタグでプログラム用の強調構文が利用できる

※グリッドデザインで前述した「Zen」とは別物。シンタックスハイライトについての参考記事はこちら↓

シンタックスハイライト | コード記法

インストール：https://www.tumblr.com/theme/38954 サンプル：http://zen-sanographixtheme.tumblr.com/

Amazon.co.jp ウィジェット

Posthat

#シンプル

1カラム

ヘッダと記事間をボーダー1本で区切るシンプルなデザイン

投稿タイプによってバッジ（アイコン）の色を指定可能

バッジ自体の有無を選べる

フォントやリンクの表示を設定可

レスポンシブ対応でヘッダメニューはスマホで隠しのドロワーに

※白背景にバッジで色分けされた投稿タイプ別の表記はアクセントになります。

インストール：https://www.tumblr.com/theme/39773 サンプル：http://posthat.tumblr.com/

Solo

#シンプル

1カラム

Enable Permalink Pagerで記事個別ページに前後記事へのリンク設置

Simple Viewでは記事のタイトルのみのリンク表示になる

※特殊な要素はやはりSimple View。記事内容をインデックスページに表示させたくない場合には使える機能だと思います。

インストール：https://www.tumblr.com/theme/40241 サンプル：http://solo-sanographixtheme.tumblr.com/

Thinker

#シンプル

1カラム

記事の幅を700px,900px,1200pxから選択可

Use Sticky Headerでスクロールしてもヘッダが上部についてくる

カラー指定がいくつかとフォントを2つまで設定可

※記事の幅が固定幅の3つからの選択なのでレスポンシブは非対応。モバイル用にはデフォルトのテーマを使いましょう。

インストール：https://www.tumblr.com/theme/39580 サンプル：http://thinkertheme.tumblr.com/

Monospace

#シンプル

1カラム

Column widthで記事幅を選択

Fullres photo postsで画像を画面幅一杯に表示

Separator Textで記事間のセパレート文字をテキストで入力可

Additional linksでフッターにリンク追加（htmlタグで入力できる）

※コーダー向けのローマ字フォント設定されたもの。日本語フォントで打つには好みのフォントを指定して使いたいところ。個人的にはもの凄い好み。

インストール：https://www.tumblr.com/theme/39229 サンプル：https://monospace-theme.tumblr.com/

Minimal

#シンプル

2カラム

レスポンシブ非対応、xhtml

Show About Widgetでアバター画像とサイト説明文を右サイドバー表示

Show Stuff I Like WidgetでLikeした記事を表示

Show Latest Tweets WidgetでTwitterの最近のつぶやき表示

Show People I Follow Widgetで自分がフォローしてるユーザー表示

※最後はこのMiMiC Laboの元となったテーマをご紹介。xhtmlで古いデザインですが、ボーダーで区切られたシンプルなデザインに惹かれました。カスタマイズにも力が入りました。

インストール：https://www.tumblr.com/theme/10375 サンプル：http://safe.txmblr.com/theme/preview/10375

24選の中でご興味があるデザインは見つかりましたでしょうか？ 今回ご紹介したテーマについては「無料」の「人気」の中からのチョイスですが、人気のもの以外にも無料のデザインはございますので、探してみるのもありかと思います。

また機会があったら別のデザインなど紹介したいと考えています。 あとは自分でデザインを作ってみようかと模索中ですので、このサイトでもし紹介できればと思います。

と入力すれば「さらに読む」のリンクになります。

コード記法 pre code

<div> <header><h1>半角スペース4つ or 余白tab2つ</h1></header> <article>直前の行は空白行が1つ以上必要</article> <footer>tumblr上では文字がオレンジになっていればOK</footer> </div>

※上のようにコード記法のデザインを良くしたい方はこちら Syntax Highlighting on Tumblr

脚注参照リンク

文章1[^脚注1]で参照リンクを作成。 文章2[^脚注2]で参照リンクを作成。 　　 [^脚注1]: 「:」のあとに半角スペース忘れずに脚注テキスト1 [^脚注2]: 脚注テキスト2

文章11で参照リンクを作成。 文章22で参照リンクを作成。

※脚注のテキストは記事の一番下に表示されます。

ページ内リンク #リンク

タイトルのhタグには半角スペースで空けて{#◯◯}でページ内リンクを作れる

###h3タイトル {#h3title} [h3タイトルに戻る](#h3title)

h3タイトル

h3タイトルに戻る

※ただしページ内リンクのため記事ページでのみしか機能しません。 　tumblrブログのトップページでも機能させたい場合は、

[h3タイトルに戻る](http://mimic-labo.com/post/157020058446/tumblr-markdown#h3title)

　このように絶対パスで記述してください。

というわけで目次

目次

tumblrのMarkdown(マークダウン)記法

タイトル hタグ

段落と改行 p

リンク aタグ

画像 img

画像リンク a img

リスト ul li

引用 blockquote

強調タグ em strong

テーブル table

罫線

続きを読む Read Moreリンク

コード記法 pre code

脚注参照リンク

ページ内リンク #リンク

「:」のあとに半角スペース忘れずに脚注テキスト1 ↩︎

Tumblrでの事前準備

事前に必要となる準備はTumblrで新規にブログを用意することです。Tumblrでは複数のブログを一つのアカウントで管理できるため、新規に作成するときも特にこだわりが無ければ、独自ドメインで既に運用しているアカウントに追加するだけで良いです。

1.ダッシュボード右上の人のマークから新規作成をクリック

2.新規に作るブログの情報を入力

※TumblrでのURLは後に設定してサブドメインに置き換わるので特に気にせず。

Value Domainでの設定

Value Domainで利用しているドメインのDNS設定の項目に入ります。すでに独自ドメインをTumblrで利用している場合は以下のように設定されていると思います。

「www」なし

a @ 66.6.44.4

「www」あり

cname www domains.tumblr.com.

そもそも自分は「www」ありのサブドメインの指定の仕方が分からなかったのですが、

サブドメインをTumblrに向ける記述を上記の下に追記

cname bbb domains.tumblr.com.

※制御タイプcnameレコードの最後の記述に「.」ドットが入るのを忘れずに。

Value Domainの場合、末尾に「.」ドットを入れないと サブドメインのホスト名として解釈されてしまいます。 つまり

cname bbb domains.tumblr.com

と設定してしまうと cnameが「domains.tumblr.com.aaa.com」を指すことになってしまいます。

tumblr公式の設定

公式では、

2つのレベルがある場合 (mywebsite.comなど) ドメインのAレコード（IPアドレス）を66.6.44.4に指定してください。

3つ以上のレベルがある場合 (www.mywebsite.com または blog.mywebsite.comなど) CNAMEレコードを"domains.tumblr.com"に指定してください。

https://www.tumblr.com/docs/ja/blog_management#customdomain

過去記事の方法は現在利用できなくなりました

tumblrにタグリストを設置

以前こちらの記事で投稿させて頂きましたが、ツールが利用できなくなっていたため、別の方法でタグリスト（タグクラウド）を設置するやり方を解説します。

Tumblr Tag Cloud Script

Tumblr Tag Cloud Script

こちらのJavascriptをtumblrブログに設置することで、タグクラウドが利用できるようになります。

このツールなかなか高機能で表示させるタグのカスタマイズが豊富です。

タグのソート機能

タグの頻度の最小数の設定

タグの最大数

フォント（タグ数によって変更可）

タグの右にタグ数を表示するか否か

タグクラウドの表示方法

などなど細かく設定できるのがに魅力的。

設定方法

サイトにアクセスして自身のtumblrブログURLを最初に入力。

Tumblr Name: ◯◯◯◯.tumblr.com

この◯の部分を入力。すると自動でタグクラウドを生成してくれます。

設定項目は英語表記ですが、右画面にプレビューが表示されているため、感覚的に設定することが可能です。これは本当に便利ですね。

設定が終わったら「This is your Code:」の欄をコピーして、自サイトの表示したい箇所に入れ込むだけです。

サイドバーに表示したい方は、テーマによって違いはありますがこのテーマの場合、下記のように「id="widget"」のdivタグに入れて使うとデザインが崩れないかもしれません。

tumblrに設定する方法

highlight.jsを利用する

google-code-prettifyを利用する

SyntaxHighlighterを利用する

だいたい以上の3つの設定方法があるようです。

その中でも今回簡単に導入できた「highlight.js」を利用するやり方を紹介しようと思います。

jQueryを使う

highlight.jsというjavascriptファイルは、ダウンロードして自サイトのサーバーにアップロードして利用することが可能です。

しかし、多くのブログサービスが、jsファイルやCSSファイルを個人のブログ用にサーバーにアップロードして使用することができないのと同様に、 tumblrでもファイルをアップロードすることが基本的にはできないため、jQueryを用いて対応します。

jQuery highlight.js

highlight.jsを使えるようにするために、tumblrのテンプレートカスタマイズで「html編集」に入り、headタグ終了直前に以下の記述を追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/atom-one-dark.min.css"><script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script><script> $(document).ready(function() { $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); });

※こちらのjQuery、highlight.jsのバージョン指定は「2016.09.28」現在最新版です。

シンタックスハイライトのデザインを変える

highlight.jsではシンタックスハイライトのデザインが豊富で、linkタグのCSSファイルの指定を変更することでそのデザインを選べる仕様になっています。

背景色や要素ごとの色付けを下記デモで確認して選ぶことができます。

スタイル表示のデモ

linkタグ内の「styles/◯◯◯.min.css」をstyles directoryからデモで見つけた指定したいデザインの名前を探し「.css」前の名前をつけます。

マークダウン記法

tumblrブログ記事を更新する際には、

リッチテキスト

HTML

マークダウン

という3つの手法で投稿する内容を記述できますが、今回のシンタックスハイライトを使ったプログラムソースコード込みの記事を投稿する場合、「マークダウン」記法っを用いるのがおすすめです。

基本的に「＜pre＞＜code＞～～」で囲った中の内容がシンタックスハイライトされます。

しかしながら、tumblrのリッチテキストとHTMLでの記述は思うように行かない可能性が高いです。マークダウン記法であれば比較的簡単に編集できると思います。

まずソースコードを表示したい上の行では「改行」を2回入れて下さい。 ソースコード記述開始行では先頭に「半角スペース」4つを入れてから。

上図のようにソースコード部分が橙色に変化していれば適用されていると考えてもらって良いです。コピペで貼り付けるとどうしても全体が橙色にならずに指定から外れてしまうことがありますので、整形する際は改行を詰めたり、半角スペース4つをその行の先頭に配置するなどで対処できます。

その他マークダウン記法での書き方

参考サイト

highlight.js

tumblrテンプレートにシンタックスハイライトを導入した話

ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方

TumblrにCodeSyntaxを追加する

google-code-prettify

google-code-prettifyでシンタックスハイライト

Tumblrで簡易シンタックスハイライト

google-code-prettifyの設置

忙しいbootstrapperのためのシンタックスハイライトを最速で導入する方法

SyntaxHighlighter

Tumblrでソースコードをシンタックスハイライトする方法

その他