Tumblrのテーマにサイドバーを挿入する

ビジネスにサイドバーを追加すると、Tumblrは、ビジネスに関する追加情報、パートナー組織または関連Webサイトへの送信リンク、またはサイト内の特定のコンテンツを検索するための検索フィールドを提供することで、テーマにメリットをもたらします。多くのテーマはサイドバーをサポートするように設計されていますが、TumblrのHTMLエディターを使用してテーマに挿入することもできます。テキストエディタで独自のサイドバーを作成し、CSSでスタイルを設定すると、その機能と外観を完全に制御できるため、外観をビジネスIDに正確に一致させることができます。

サイドバーマークアップの記述とスタイル設定

1

サイドバーに表示する内容を決定し、後で使用できるようにサイドバーコンテンツのドラフトをプレーンテキストドキュメントに書き込みます。

2

テキスト編集アプリケーションを使用して、スタイル設定用のタグを使用して新しいHTMLドキュメントを作成します。HTML5ページ構造は次のようになります。

3

HTML5ドキュメントの本文に「サイドバー」というIDのサイドタグを挿入します。asideタグは次のようになります。

4

サイドバー用に以前に作成したコンテンツをコピーして、脇のタグに貼り付けます。

5

標準に準拠したマークアップを使用して、サイドバーのコンテンツをHTML5に変換します。たとえば、ヘッダーをヘッダータグで囲み、段落の内容を段落タグで囲み、リンクテキストをアンカータグでハイパーリンク参照で囲みます。これがどのように機能するかわからない場合は、HTMLリファレンスガイドを参照してください(「参考文献」を参照)。

6

ファイルをHTMLドキュメントとしてデスクトップに保存します

7

Webブラウザーを開き、「ファイル」を選択し、「開く」をクリックして、デスクトップに保存したHTMLドキュメントを選択します。ブラウザにスタイルのないサイドバーが表示されます。

8

テキストエディタに戻り、スタイルタグの間にカーソルを置き、「#sidebar」セレクタを使用してマークアップのスタイルを設定し、サイドバーをターゲットにします。サイドバーのスタイルは、好み、既存のTumblrテーマのデザイン、サイドバーのマークアップに大きく依存します。CSS3リファレンスガイドを使用して、プロパティとその値を正しく構成していることを確認してください(「参考文献」を参照)。

9

サイドバーを左側に配置するか右側に配置するかを決定し、それに応じてfloatプロパティを割り当てます。たとえば、プライマリコンテンツの左側にサイドバーが必要な場合、「#sidebar」セレクター、floatプロパティ、および値は次のようになります。

float:left; 

}

10

ブラウザの[更新]をクリックしてサイドバーの外観をテストし、外観に満足するまでマークアップのスタイルを調整し続けます。

Tumblrテーマにサイドバーを挿入します

1

Tumblrダッシュボードにログインし、右側のサイドバーでブログのタイトルをクリックし、[カスタマイズ]をクリックして、[HTMLの編集]をクリックしてTumblrソースコードエディターを開きます。

2

開いているHTMLドキュメントからCSSをコピーして、Tumblrテーマのスタイル領域の最後に貼り付けます。

3

Tumblrエディターでプライマリコンテンツ領域のCSSセレクターを見つけ、中括弧の後にカーソルを置き、サイドバーと同じfloatプロパティと値を割り当てます。たとえば、サイドバーが右側に表示されるようになっている場合は、値が「right」のfloatプロパティをコンテナセレクタに割り当てます。

4

テキストエディタからasideタグとその内容をコピーして、Tumblrテーマのbodyタグに貼り付けます。サイドバーをプライマリコンテンツの右側に表示する場合は、そのコンテナの後に配置します。左側に表示する場合は、プライマリコンテナの前に貼り付けます。

5

[プレビューの更新]、[外観]、[保存]ボタンの順にクリックして、テーマに加えた変更を確定します。