PC Bibo 6 top > Seesaa(さくら)ブログ > Seessa(さくら)ブログ用のシンプルなテンプレート(パンくずリスト付)

Seessa(さくら)ブログ用のシンプルなテンプレート(パンくずリスト付)

Seessa ブログとさくらのブログで使えるシンプルなテンプレートです。

Seessa(さくら)ブログにパンくずリストを設置する」のとおりにパンくずリストを設置し、さらに記事の上に表示さるナビゲーションを記事の下に表示されるように変更しています。実際の表示サンプルはこちらを参照してください。

上記のサンプルは右サイドバーのデザインですが、左サイドバーのデザインにも対応しています。また、ブルー以外にもグリーンとレッドも用意しました。以下のサンプルは画像ですので操作はできません。

グリーンの左サイドバーサンプル(イメージ)

グリーンのサンプルイメージ

レッドの左サイドバーサンプル(イメージ)

レッドのサンプルイメージ

ブルーの右サイドバーサンプル(イメージ)

ブルーのサンプルイメージ

テンプレートの設定手順

1. 以下のテンプレートファイルを右クリックして、[対象をファイルに保存] を選び、PC の任意の場所に保存します。

seessa_template.zip

2. ダウンロードした seessa_template.zip ファイルを解凍します。

3. Seessa ブログ(さくらのブログ)の該当するブログの操作画面で、[デザイン] タブをクリックし、 [一覧からデザインを追加する] をクリックします。

4. 好みに応じて、右サイドバーまたは左バーのデザインを選び、[追加する] をクリックします。画面表示が変わったら [追加したテンプレートを今すぐ使用する] のチェックをはずしてから、[追加] ボタンをクリックします。

どのデザインを選んでもかまいませんが、白ベースのテンプレートですので、ヘッダ(Seessa ブログのロゴや検索ボックスなどが配置されているいちばん上の細い帯の部分)が白いものを選ぶとよいでしょう)。

5. 追加したテンプレートのタイトルをクリックします。

6. スタイルシートの編集画面が表示されます。既存の記述を希望のカラーのテンプレート(green_style.txt、blue_style.txt、または red_style.tex)の内容に書き換えます(テンプレートの内容をコピー&ペーストします)。

7. 書き換えが済んだら、[スタイルシートを変更する] ボタンをクリックします。

8. [デザイン一覧] タブをクリックしてデザイン一覧を表示します。今書き換えたデザインの [適用] ラジオボタンをクリックします。

これで、デザインの変更が完了しました。次にコンテンツの HTML を書き換えます。

9. [デザイン] タブの [コンテンツ] をクリックします。

10. [記事] をクリックします。

11. 右上にある [コンテンツHTML編集] をクリックします。

12. 表示された HTML を contents_html.text の内容に書き換えます。

13. [保存] ボタンをクリックし、[このウィンドウを閉じる] をクリックします。

14. コンテンツ画面で [設定を反映する] ボタンをクリックします。

以上で完了です。スタイルシートは、手順 8 で使った [適用] ボタンをクリックすることで、いつもで元のデザインに戻せますので、もしこのテンプレートが気に入らなかった場合でもいつでも無効にできます。また、コンテンツ HTML も手順 12 の画面で [初期値に戻す] にチェックを入れて [保存] ボタンを押すといつでも初期状態に戻せます。コンテンツ HTML を編集している場合は、現在の HTML 記述をメモ帳などにコピーしてバックアップしておくとよいでしょう。

* デザインだけ使う場合(パンくずリストは不要な場合)は、手順 9 以降は不要です。
* パンくずリストだけ設置したい場合(デザインは変更したくない場合)は、手順 9 以降を行います。

Seessa ブログとさくらのブログにパンくずリストを設置する方法については、「Seessa(さくら)ブログにパンくずリストを設置する」を参照してください。


« おしゃれでシックな FOLLOW ME アイコン | メイン(トップ)ページ | リンクにマウスを近づけたときに説明文を表示する »


あとで読む




trackbacks

trackbackURL:

comments

comment form

(PC Bibo 6 にはじめてコメントされる場合、不適切なコメントを防止するため、掲載前に管理者が内容を確認しています。適切なコメントと判断した場合コメントは直ちに表示されますので、再度コメントを投稿する必要はありません。)