PC Bibo 6 top > Seesaa（さくら）ブログ
Seesaa（さくら）ブログ

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（さくら）ブログにパンくずリストを設置する」を参照してください。

タグ:

Seessa（さくらの）ブログのカテゴリーなどの記事数を非表示にする

Seessa（さくらの）ブログでは、サイドバーのカテゴリーなどの表示に、記事数や日付が表示されます。これを非表示にします。

カテゴリー
HP/ブログの作成・カスタマイズ(10)
お役立ち・便利情報(10)
アフィリエイト(5)

最近の記事
(12/17)Seessa（さくらの）ブログのカテゴリーなどの記事数を非表示にする
(12/15)外部のサイトへのリンクは別ウィンドウで
(12/11)YouTube の動画を途中から再生するリンクを作成する方法


たとえば、各カテゴリーの記事数を表示しないようにするには、

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

2. [カテゴリー] をクリックします。

3. [コンテンツHTML編集] をクリックします。

4. HTML タグを以下のように編集します（赤い箇所を追加します）。

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %></a><!--(<% category.article_count | __or__ | echo("0") %>)--><br />
<% /loop -%>
<% content.footer -%>
</div>

5. [保存] ボタンをクリックして、[コンテンツHTML編集] を閉じます。

これで、各カテゴリーの記事数が非表示になります。

要するに、<!--　 --> で囲った部分が表示されなくなるということです。<!-- から --> までを削除してしまってもかまいません。しかし、<!-- 　--> を使って非表示にそした場合は、<!-- --> を削除して元に戻すだけでいつもで元の表示に戻せるので便利です。

最近の記事の(日付)を非表示にしたい場合は、(<% article.createstamp | date_format("%m/%d") %>) の部分を <!--　 --> で囲います（または削除します）。

タグ:

Seessa（さくら）ブログにパンくずリストを設置する

Seessa（さくらの）ブログの各ページの先頭記事の上に、以下のようなパンくずリストを設置する方法。この方法は、Seessa ブログにも、さくらのブログにも有効です。

メインページ
表示なし

個別記事ページ
[ブログ名] Top > 該当するカテゴリー > 記事タイトル

カテゴリ別ページ
[ブログ名] Top > 該当するカテゴリー

過去ログページ
[ブログ名] Top > 該当する年月


1. [デザイン] タブから [コンテンツ] を選択します。

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

3. 右上の [コンテンツHTML編集] をクリックします。

4. コンテンツの HTML の先頭部分の

<% content.header -%>
<!-- Content -->

のすぐ下に以下の赤で示した記述を挿入します 。

<% content.header -%>
<!-- Content -->

（この下に以下の記述を追加）

<% if:page_name eq 'article' -%>
<div class="pankuzu">
<a href="<% blog.page_url %>"><% blog.title %> Top</a> > <% loop:list_article -%> <a href="<% article_category.page_url %>"><% article_category.name %> </a> > <% article.subject %> <% /loop -%></div>
<% /if -%>

<% if:page_name eq 'archive' -%>
<div class="pankuzu">
<a href="<% blog.page_url %>"><% blog.title %> Top</a> > <% archive.createstamp | date_format("%Y年%m月") %></div>
<% /if -%>

<% if:page_name eq 'category' -%>
<div class="pankuzu">
<a href="<% blog.page_url %>"><% blog.title %> Top</a> > <% category.name %></div>
<% /if -%>
（挿入ここまで）

<% if:page_name eq 'index' -%>
<% if:pager.need_pager -%>
<div class="navi">
・
・
・

5. [保存] ボタンを押して変更を保存し、[コンテンツの HTML] ページを閉じます。

6. [デザイン] タブから [デザイン一覧] を選択します。

7. [適用] されているデザインをクリックして、スタイルシートの編集ページを開きます。

8. スタイルシートのいちばん下までスクロールし、スタイルシートの最後に、パンくず部分（pankuzu クラス）のスタイル記述を追加します。自分のブログのデザインに合わせて設定してください（以下の記述は単なる例です）。よくわからない場合は、navi クラスと同じスタイルに設定し、font-size だけ navi の font-size よりも若干大きめに設定しておくと見栄えがよいでしょう（たとえば、navi の font-size が 10px の場合は 12px）。navi クラスは、ブラウザで「.navi」を検索して探します。

.pankuzu {
color:#D97B65;
font-size:12px;
text-align:left;
padding-left:23px;
padding-right:0px;
padding-top: 5px;
padding-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}

.pankuzu a {
font-size:12px;
color:#D97B65;
}

9. 最後に、[スタイルシートを変更する] ボタンを押してカスタマイズは終了です。

* 「Seessa（さくら）ブログ用のシンプルなテンプレート（パンくずリスト付）」で、パンくずリストを設置し、さらに記事の上に表示されるナビを削除したコンテンツ HTML を配布しています。

参照サイト:
パンくずリストを付ける@Seessaカスタマイズ

「さくらのブログ」でパンクズリストを作成するには

タグ:

Seesaa ブログとさくらブログのタイトル表示を変える

Seesaa ブログとさくらブログでは、個々の記事ページやカテゴリーページのページタイトルは「ブログ名: 記事タイトル（またはカテゴリータイトル）」と表示されます。

これを「記事タイトル | ブログ名」と表示されるようにするには以下のようにします。

1. [デザイン] タブから [HTML] を選択します。

2. [HTML の追加] をクリックします。

3. [HTML 名] フィールドに適当な HTML 名を入力して（たとえば、custom など）、[保存] ボタンをクリックします。

4. HTML のコードの上から数行目にある title タグを以下のように書き換えます。

変更前の title タグ

<title><% blog.title %><% if:extra_title %>: <% extra_title %><% /if %></title>

変更後の title タグ

<title><% if:extra_title %><% extra_title %><% /if %> | <% blog.title %></title>

5. title タグを書き換えたら、[保存] ボタンをクリックします。

6. HTML 一覧画面で、新しく作成した HTML の [適用] ラジオボタンをクリックします。

7. さくらブログの場合はすべてのファイルを再構築します。

これで、記事タイトルやカテゴリー名が、ブログ名よりも先に表示されるようになるので、検索で上位表示されやすくなるとのことです（SEO 効果あり？）。

ただし、seesaa ブログやさくらブログでは、すべてのページを 1 つのテンプレートでカバーしているため、上記の方法ではメインページのタイトル表示が「| ブログ名」になってしまいます。無意味な「|」が先頭に表示されるのがいやだという人は「|」の代わりに「-」や「★」などを使うといった工夫をしてみてください（記号を何も使わずに単にスペースを挿入するという手もあるかもしれません）。

参照サイト:

タイトルタグのカスタマイズをするには

タグ:

seesaa ブログと さくらブログの「自由形式」の表示を左寄せにする

自由形式に記述した内容が中央そろえで表示される場合に、これを左寄せで表示したいときは、「自由入力欄」に以下のように入力する。

<div class="side">
表示したい内容
</div>

これで左寄せになるはずです。というか、スタイルシートの div class "side" の text-align に指定したとおりになるということです。通常は、div class "side"（.side）は text-align:left; に指定されているはずなので、左寄せになります。

また、自由形式のタイトルは何も表示されないようになっているので、これを表示したいときには、以下のように side クラスの前に sidetitle タグを挿入してタイトルを指定します。

<div class="sidetitle">コンテンツのタイトル</div>
<div class="side">
表示したい内容
</div>

参考サイト:
シーサーブログのサイドバー

タグ:

　1


Copyright © PC Bibo 6. All Rights Reserved.