3カラム可変 2カラム 花空 ヌリドウォール

2005年03月13日

[HTML+CSS]メニューに●ポチをつけて遊ぶ

HOMEテンプレートカスタマイズ ⇒ この記事

後半でCSS部分を追加しました。

------

Seesaaブログのテンプレートカスタマイズ小技です。

2005年03月09日からSeesaaでHTMLのカスタマイズができるというアナウンスがありました。あれ、XHTMLだと思ってたらHTMLでしたっけ。記憶が曖昧なので深く考えずに遊んでみましょう。

以前から少し気になっていたサイドメニュー内の記事を●ポチつきにしてみます。●ポチとは、下のイメージのように、ひとつの記事リンク文字先頭に●がついてる状態のこと。

HTMLを知っている人ならば、リスト表示にしているといえばわかりやすいでしょうか。

temp.gif

ついでに、記事リンクの下の間隔を広げて少し見やすくしてみます。所要時間は10〜15分程度。HTML編集は初めてだという人もいるかもしれませんので、今回はできるだけわかりやすく図で手順を説明いたします。


まず、管理画面を開いて「デザイン」→「コンテンツ」へすすみます。

k_01a.gif

そのページの一覧から「新着記事」を選択。

k_01b.gif

新着記事の設定画面になりますので、右肩の「コンテンツHTML編集」を選択します。

k_01c.gif

こんな入力画面がでてきます。これが新着記事部分のテンプレートです。

k_01d.gif
※選択しているテンプレートによっては内容が違うかもしれません。


簡単にSeesaaのテンプレートタグを確認していおきます。ふらっと探しましたが現時点で詳細なヘルプやマニュアルが見つかりませんでしたので、適当な説明になっています。テンプレートの概念だとか使い方は、初めての人には難解ですので、とりあえず●ポチつけるんだという人は読み飛ばしてもよいです。

<% content.title %>
このコンテンツブロックの名前。この場合はこれが新着情報という文字に変換されます。

<% content.header -%> 〜 <% content.footer -%>
コンテンツブロック開始位置 終わり位置
たぶん、この中で以下のタグを使いましょうということです。

<% loop:list_article -%> 〜 <% /loop -%>
管理画面で設定した回数だけループさせます。

<% article.page_url %>
記事のアドレスに変換されます。

<% article.subject | tag_break %>
記事の見出しです。tag_break って何じゃらほい。

<% article.createstamp | date_format("%m/%d") %>
記事が作られた日付を表示 | 表示形式 %m:月 %d日
未確認:時間も指定可能ですよね?

以上のテンプレートタグが使われています。


さて●ポチですが、HTMLのリストを使います。簡単に説明すると

<ul id="newEntry">
<li>記事の見出し</li>
<li>記事の見出し</li>
<li>記事の見出し</li>
</ul>

と表示させれば、勝手に●ポチがつきますので、そうなるようにデフォルトのテンプレートを修正します。



<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<ul id="newEntry">
<% loop:list_article -%>
<li><a href="<% article.page_url %>"><% article.subject | tag_break %></a>(<% article.createstamp | date_format("%m/%d") %>)</li>
<% /loop -%>
<ul>
<% content.footer -%>
</div>


修正した点は ul id="newEntry" と li を追加しただけです。興味のある人は、どの位置に挿入したか確認してください。ul につけたid="newEntry"は、後でCSSを使ってレイアウトを調整するためです。同じ名前のid名 は一ページ中に一つだけ。今回は新着だけを修正するので、id名をつけました。

最後に保存して、再構築してみます。うまくいけば新着情報の記事リストに●ポチがついているはずです。

ちょっと、左に隙間があってかっこ悪いですか?これはCSSで修正します。

管理画面から「デザイン」 → 「スタイルシート」を開きます。

k_01e.gif

今、利用しているスタイルシートの一覧が表示されるので、タイトルをクリックします。

k_01f.gif

スタイルシートが表示されますので、その最後尾に次の命令を追加します。


//<ul id="newEntry">の上下左右マージン
ul#newEntry{
margin: 10px;
}

//<ul id="newEntry">の中にある<li>の下マージン
ul#newEntry li{
margin-bottom: 0.5em;
}


//がついている行は注意書きですので、必要ないなら消してもいいです。

入力したら画面下の「プレビュー」ボタンを押してマージンが調整されているか確認します。OKなら「スタイルシートを変更する」ボタンを押して完了です。おつかれさまでした。



--------------------------------------

これだけ別記事でまとめたいと思いますが、このHTMLテンプレートとCSSを使って自由自在にレイアウト!ということも可能です。可能でありますが、誰でも自由自在にできるというわけにはまいりません。次のような知識が必要です。


  • HTMLの文法知識

  • CSSの知識

  • Seesaaテンプレートの知識



お気づきデショウカ。HTMLとCSSで普通のホームページが作れます。+ Seesaaテンプレートの使い方をマスターしないと自由自在にといきません。

そのうちヘルプが完備され解説サイトが増えてくれば、ソースだけコピペしてカスタマイズということができるようになりますので、しばらく待ってみるのも手ですね。

なんだか難しそうに思えるかもしれませんが、地道にコツコツ進むタイプの人なら、誰でも使いこなせるようになるのは間違いありません。ただ敷居が高そうにみえるというだけです。

「高い山があるならば、登らぬわけにはいかんだろう」という人は、がんがん遊んでください。

でも遭難することもあるので注意だぞ。
この記事へのコメント
初めてのカスタマイズに挑戦しました。
こういう風にしてプロはHPを作ってるんでしょうね。
とても参考になり変化に感激です。
これからもお世話になります。
Posted by miyu at 2005年09月09日 18:15
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/2392963

Seesaa HTML編集link
Excerpt: SeesaaブログのHTML編集に関して調べているのだが、なかなかHTML編集をしている記事が見つからない。 私の探し方が悪いのか、HTML編集に興味がある人があまり多くないのか。 以下、発見したS..
Weblog: 無料ブログでビジネスブログ
Tracked: 2005-03-13 17:19

HTMLの説明が出たみたい
Excerpt: 最初実装された時に、 なお、HTML編集機能は上級者向けの機能となっております。HTMLの記述方法や内容に関するお問い合わせにはお答えできません。 (参照元・Seesaaからのお知らせ「Seesaaブ..
Weblog: tagebuch-zweit
Tracked: 2005-03-16 00:14

HTML改造途中経過
Excerpt: とりあえず。 Seesaa デザインテンプレートさんの [HTML+CSS]メニューに●ポチをつけて遊ぶ カテゴリで記事一覧を表示する [HTML+CSS] を参考に、 新着記事とカテゴリーページ..
Weblog: ボボ日
Tracked: 2005-03-29 11:42

ちょっと変更。
Excerpt: 現在、Seesaa BLOGを借りてブログをしているのですが、いろいろな方のブログを見る度に 「カスタマイズ」したくてなり、今のような感じのカスタマイズが精一杯の結果となっております。 前々からセンス..
Weblog: ++脳内イグニッション++
Tracked: 2005-05-07 13:11

blogカスタマイズ大作戦!
Excerpt: 今回は小説公開用ということで、今までの所謂日記風のブログデザインから大きくカスタマイズいたしました。 とりあえず箇条書きで軽く一覧。 ・カレンダーを横型に ・TOPページにジャンル別新着記事リスト..
Weblog: Novel's blog.
Tracked: 2006-02-14 04:20
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。