TumblrでHTMLを使ってテーマを編集する方法

Tumblrはあなたが選択したどんな無料テーマのための完全なカスタマイズも、あなたのTumblrブログのための完全にカスタムのテーマもサポートします。 Tumblrのテーマはさまざまな開発者によって作られており、その多くはTumblrユーザーです。 そのため、コードの設計とレイアウトはテーマによって大きく異なりますが、重要な要素のみが共通しています。 実験はシステムの内外を学ぶための効果的な手段ですが、編集する前にテーマをある程度理解しておくことが最善です。 Tumblrはカスタムテーマと変数に関するドキュメントの全ページを提供します。

1。

Tumblr.com/customizeでTumblrのカスタマイズページを開きます。 Tumblrダッシュボードの上部にあるユーザー名をクリックしてから、サイドバーの[外観のカスタマイズ]をクリックすることもできます。

2。

「テーマ」ボタンをクリックしてください。 デフォルト画面はテーマ選択画面です。 まだ選択していない場合は、編集しやすいテーマを選択してください。 選択したら、テーマメニューの下部にある[カスタムHTMLを使用]をクリックします。

3。

コードを調べて、開発者が最初にテーマを作成した方法を実感してください。 テーマは、HTML、CSS、Javascriptなどのコードを組み合わせて使用​​します。 Tumblrのテーマは、ブログのさまざまな投稿やセクションに適用されるコードの領域を定義するために、標準的なブロックのセットを使用します。 たとえば、音声投稿を定義するセクションは "{block：Audio}"で始まり "{/ block：audio}"で終わり、見積もり投稿のセクションは{block：Quote}で始まり "{/ block：Quote"で終わります。 "個々の投稿タイプとセクションを見つけやすくします。 特定の要素を検索している場合は、ブラウザの「検索」機能によってテーマHTML内の単語を検索できるはずです。

4。

必要なカスタムHTMLを挿入します。 テーマに新しいスタイルシートを作成したい場合は、それをドキュメントの先頭の開始タグと終了タグの間のどこかに挿入します。 スタイルシートは

スタイルシートには、必要に応じていくつでも要素を含めることができます。 CSSを使用して任意の要素を変更できます。 たとえば、H2タグで変更したものを縦22ピクセル、濃いグレーに設定したい場合は、スタイルシートに次のブロックを含めます。

h2 {フォントサイズ：22ピクセル。 カラー：＃A8A8A8;}

5。

"style"タグを使用して個々のHTML要素に任意のスタイルを追加します。 例として、ページ上の引用符を薄い灰色のテキストの影に変更する場合は、引用符を変更してHTMLタグの括弧内に追加するHTMLを見つけます。 この方法で追加されたCSSは、ページのスタイルシートに加えて機能します。

6。

変更を保存せずにプレビューでTumblrブログの変更を確認するには、[プレビューの更新]をクリックします。 Tumblrブログに必要な変更を加え、それらをコミットする準備が整ったら、[保存]をクリックします。

先端

• あなたのテーマへの変更はあなたのページにのみ影響し、あなたのダッシュボードやTumblelogには影響しません。

警告

• 構文には注意してください。 タイプミスや構文エラーがあると、テーマ全体が壊れる可能性があります。
• テーマ選択オプションに戻るには、「カスタムHTMLを無効にする」を選択する必要があります。 暗黙のうちに、これはあなたが使ったどんなカスタムHTMLも削除します。
• テーマでテーマ要素に外部スタイルシートを使用している場合は、CSS要素を変更するのがより難しい場合があります。