スクロール表示スライドバーでコンテンツ改造

>> ブログ改造カスタマイズ

posted by はに丸
edit 　re

スクロール表示スライドバーでコンテンツ改造

カテゴリーや新着記事に限らず、サイドバーやメインに表示させているコンテンツをオーバーフロー（スクロールバーを出現させて縦幅を固定する）表示にして見やすくしてみましょう。・・・つづきを読む

重いブログ・HPは嫌われる[読み込み表示測定]

>> ブログ改造カスタマイズ

posted by はに丸
edit 　re

重いブログ・HPは嫌われる[読み込み表示測定]

オシャレで楽しい画像やブログパーツなどは、ついつい貼り付けてしまいがち。特にブログペットなどのJAVAスクリプトは重くなる1番の要因です。
そんなブログやホームページの表示速度は、読み込むのに時間がかかりすぎて、実は訪問者にストレスを感じさせているかもしれません。
かくいうこのブログも色々付けすぎているのと、サーバー自体のレスポンスの悪さも手伝って、かなり重い（表示が遅い）と思います。
ごめんなさい｡･ﾟ･(ﾉ∀`)･ﾟ･｡

さて、そんなページの重さが気になるアナタ！
とっておきのダイエット商品診断ツールがあるんです！
その名もアブフレット！じゃなかった、ロデオボーイ！！
ダウンロード時間測定ツール。

※ただアドレスを打ち込んで計測するだけなのでお金はかかりませんｗ

ダウンロード時間測定ツール　powerd by ダウンロードTIMER

ダウンロード時間を測定したいウェブページのURLを入力してください * 測定までに数秒〜30秒程度はかかります。 * 測定ボタンを連打しないでください。

どうでしたか？

ダイエットになぞって書いてみましたが、やはり軽い（表示が速い）にこしたことはないですね！
画像は少ない方が軽くなります。画像を使う場合は保存方法を色々試して見ましょう！画質が悪くなりますがページは軽くなると思います。
軽くするにあたってはHTML文書をより簡略化するだけでも軽くする事はできます。
自分のブログやHPのソースを見直して無駄な部分を省きましょう！と言ってもこれはとても時間がかかるし難しいと思います。時間があったら挑戦してみましょう！

Seesaa自作デザインテンプレートリンク集

>> ブログ改造カスタマイズ

posted by はに丸
edit 　re

Seesaa自作デザインテンプレートリンク集

初心者Seesaaブロガーさんの悩みの種のデザインテンプレート。
自作なされてる方のブログをいくつか見つけたので、紹介します。

どれも大変素晴らしいデザインです♪


Style book
http://temp-css.seesaa.net/

Seesaa デザインテンプレート
http://template.seesaa.net/

・まとめブログ
tagebuch-zweit
http://tagebuch-zweit.seesaa.net/article/1920245.html

記事の下部分から上へ戻る「TOPへ戻る」を付ける

>> ブログ改造カスタマイズ

posted by はに丸
edit 　re

記事の下部分から上へ戻る「TOPへ戻る」を付ける

記事をだーーーっと読んでいて、上まで戻るのに、
毎回マウスをグリグリ回すのは、面倒くさいですね。

なので、下から上へ、ワープボタンを設置してみましょう。

　　うひょーヾ(´３｀)ﾉ


デザイン＞コンテンツ＞記事＞記事（ページコンテンツ）ＨＴＭＬ

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

間に

<% content.header -%>
<A name=ue></A>
<!-- Content -->

を足す。

次に真ん中辺りの

<div class="posted">posted by <% article.nickname %> <% if:article_weather -%>･･･

のところに

<div class="posted"><DIV class=updown><A href="#ue" name=sita>TOPへ</A></DIV>
posted by <% article.nickname %> <% if:article_weather -%>･･･

を足す。

コメントやトラックバックが沢山あって、いっちばん下からも戻れるように、
一番下の

<% /if -%>
<!-- /Content -->
<% content.footer -%>

の間に

<% /if -%>
<!-- /Content -->
<DIV class=updown><A href="#ue" name=sita>TOPへ</A></DIV>
<% content.footer -%>

を足して「再構築」をして、できあがりヾ(´囗｀)ﾉ

Seesaaブログ、カレンダーの表示を変える

>> ブログ改造カスタマイズ

posted by はに丸
edit 　re

Seesaaブログ、カレンダーの表示を変える

カレンダーを横1列で表示する方法

Style bookさんの記事を丸々参考にさせていただいてます＾＾；
下記は、それを自分なりにまとめてみました。

管理画面の
デザイン -> コンテンツ
を選択し、「新しいコンテンツの追加」というフィールド内で

種類　>　カレンダー
追加先ページ >　全ページ
配置　>　ヘッダー(付けたい位置にお好みで)
並び順　>　30(これもお好みで)

を選択し、「コンテンツの追加」ボタンを押してコンテンツを追加します。
「カレンダーの設定」というページに切り替わったら、右上のほうにある「コンテンツHTML編集」をクリック。
「コンテンツＨＴＭＬ」というページに切り替わったら、そのページの入力フィールドの内容を全て削除し、以下の内容を全てコピペします。

<style><!--
#cal{text-align:center;white-space:nowrap;width:100%;font-size:10px;padding:10px 0px 10px 0px;color:#ccc;(←お好みの色)}
#cal a{text-decoration:underline;}
--></style>

<% content.header -%>
<div id="cal">
<% date_format(now,content_calendar.datetime) %>　
<% loop:list_calendar -%><% loop:list_data_month -%><% loop:list_data_week -%><% if:data.day %><% if:article -%>　<a href="<% article.page_url %>"><% article.createstamp | date_format("%e") %></a><% else -%>　<% data.day %><% /if %><% else %><% content_calendar.spc_text %><% /if %><% /loop %><% /loop -%><% /loop -%></div>
<% content.footer -%>

*赤字の部分
色を変える必要のない場合は削除して結構です。

あとは「保存」をクリックしてください。
スタイルシートがいじれる方なら、上の<style>部分は直接スタイルシートに記述してもいいと思います。

で、次は日付の表示の変更。

日付が「○年○月」と漢字表示で固定されていますので、
コンテンツ > カレンダー > カレンダーの設定
で、「カレンダー年月」を変更します。

書式	内容	例
%Y/%m/%d	年/月/日　になる	2005/03/14
%x	月/日/年(下2桁)　になる	03/14/05
%a Y/%m/%d	曜日(省略名)　年/月/日　になる	Mon 2005/03/14
%A Y/%m/%d	曜日(省略なし)　年/月/日　になる	Monday 2005/03/14
%Y/%b/%d	年/月(英語・省略名)/日　になる	2005/Mar/14
%Y/%B/%d	年/月(英語・省略なし)/日　になる	2005/March/14
%F	年-月-日　になる	2005-03-14
%y/%m/%d	年(下2桁)/月/日　になる	05/03/14

カテゴリーページをタイトル一覧表示(見出し有り)にする

>> ブログ改造カスタマイズ

posted by はに丸
edit 　re

カテゴリーページをタイトル一覧表示(見出し有り)にする

ちなみに内容を表示する形の一覧表示はコチラ↓


デザイン→コンテンツ→記事→コンテンツHTML編集で

<% if:page_name eq 'category' -%>
<% /if -%>

となっている部分を

<% if:page_name eq 'category' -%>

<div id="clist">

<p>”<% category.name %>”の記事一覧です。</p>
<% loop:list_article -%>
<div class="blogbody">
<h3 class="title">
<a href="<% article.page_url %>" class="a">
<% article.subject %></a></h3>
<div class="text">
<%article.get_excerpt | tag_strip| shorten(160) %>
<a href="<% article.page_url %>" class="a">続きを読む</a>
<br>
<div style="text-align:right">
(<%article.createstamp | date_format("%Y/%m/%d %A") %>)

</div></div></div>
<% /loop -%>

</div>
<% /if -%>

と書き換える。

後は

<% loop:list_article -%>
〜
<div class="blogbody">
〜
<% /loop %>

を探し

<% unless:page_name eq 'category' %>

と

</unless>

ではさみこむ。


◆参考サイト様
ゴネるだけ損！

タイトルバーの表示をカテゴリー名に変更する方法(Seesaa)

>> ブログ改造カスタマイズ

posted by はに丸
edit 　re

タイトルバーの表示をカテゴリー名に変更する方法(Seesaa)

[変更前]

　トップページ　　　「ブログ名」　
　カテゴリページ　　「ブログ名: カテゴリ名」
　過去ログページ　　「ブログ名」
　記事ページ　　　　「ブログ名: 記事タイトル」


これを次のように変更しました。

[変更後]

　トップページ　　　「ブログ名」
　カテゴリページ　　「カテゴリ名 - ブログ名」
　過去ログページ　　「ブログ名」
　記事ページ　　　　「記事タイトル -ブログ名」
　


「デザイン」⇒「HTML」と進み、「HTML名」に任意の文字を記入。

タイトル・タグ（<title></title>）内、

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

<title></title>間がブラウザタイトルバーに表示される内容です。赤文字のif文を次のように変更します。
<% extra_title %>はカテゴリページではカテゴリ名、記事ページでは記事タイトルになります。

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

これで作業は完了です。


※はに丸的には
記事ページのタイトルバーの表示を
「記事タイトル - カテゴリータイトル」
にしたいのです。
article_categoryとarticle.subjectあたりを使えばできるかと思ったのですが、記事コンテンツHTMLでしか反応せず、全体HTMLでのTITLEタグではなぜかエラー。。。
どうにも出来ませんでした。

どなたかカスタマイズのやり方がお分かりの方、いらっしゃいましたら是非教えて下さい。
ﾍﾟｺm(_ _;m)三(m;_ _)mﾍﾟｺ

カテゴリーページを一覧表示(タイトルのみ)にする

>> ブログ改造カスタマイズ

posted by はに丸
edit 　re

カテゴリーページを一覧表示(タイトルのみ)にする

デフォルトではカテゴリーを選択すると、全記事が表示されてしまって、
表示するのにも大変なので、各ブロガー先輩様たちの知恵をお借りして
一覧表示にしてスッキリさせたいと思います。

＠「記事コンテンツの設定」の「コンテンツHTML編集」を開いて

<% if:page_name eq 'category' -%>
<% /if -%>

を

<% if:page_name eq 'category' -%>
<div id="clist">
<p>このカテゴリの記事一覧です。</p>
<ul>
<% loop:list_article -%>
<li><a href="<% article.page_url %>" class="a"><% article.subject
%></a></li>
<% /loop -%></ul>
</div>
<% /if -%>

に置き換え。

※追記※

このカテゴリの記事一覧です。

の部分を

『<% category.name %>』の記事一覧です。

に書き換えると「『カテゴリタイトル』の記事一覧です」と表示されるので、更にいいかも。
（このブログのカテゴリ見てみてください）

cssに

/* カテゴリ記事リスト */
#clist
{
text-align:left;
background:#FEFFF0;
margin: 20px;
padding:
10px;
border: 3px double #B2B2B2;
font-size: 90%;
}
#clist li
{
margin-bottom: 0.6em;
font-size:
90%;
font-weight:normal;
line-height:150%;
}

を追加。（見た目は好きに書き換えてみてください）
次は記事本文を消します。

再び記事(ページコンテンツ)の設定」の「コンテンツHTML編集」を開いて

<% loop:list_article -%>

を探します。
注意したい所は、上で一覧表示指定をする記述の中にも同じ文章がある所。
上で書き換えた部分より下に、もう一個出てくるはずですので、間違えずに探してください。

そこからずずずっと下を見て行って、ループ指定の終点

<% /loop -%>

を探します。
ここでも気をつけないといけない所は、ループの指定はいくつもあります。
ここで探すのは

<div class="blog">

を挟むループ指定部分です。
間に<div class="blog">が入っているか、
<% loop:list_article -%>と
<% /loop -%>の間にもう一つ
<% /loop -%>が入っていないか、よく確認してください。

目的の部分が見つかったら、それを

<% unless:page_name eq 'category' %>

と

<% /unless %>

で挟み込みます。

例えばこんな風に。

<% unless:page_name eq 'category' %>
<% loop:list_article -%>

<div class="blog">

<!--

うんちゃらかんちゃらごちゃごちゃ色々。

<% /if -%>
<% if:article.accept_tb %>
| <a href="<% article.page_url %>#trackback">TrackBack(<%article.tb_count
| __or__ | echo('0') %>)</a>
<% /if -%>
<%
if:style.disp_category
%>| <a href="<% article_category.page_url
%>"><%
article_category.name %></a><% /if
%>
</div>

</div>

</div>
<% /loop -%>
<% /unless %>

後は再構築してできあがり！
月別ページに対応させるには「category」を「archive」にかえればいいだけ。




◆参考サイト様
椰子の避暑地
Seesaa用テンプレート

バナー画像（ヘッダー）を変更する

>> ブログ改造カスタマイズ

posted by はに丸
edit 　re

バナー画像（ヘッダー）を変更する

ブログの一番上、バナー画像の改造について。

スタイルシートの

#banner{
margin:0px;←上の隙間
padding-left:45px;←文字の位置
text-align:left;
height:246px;←全体の高さ
background-image:url(画像アドレス);
background-position:top;
}