シーサーブログをカスタマイズしてみる

「ロードバイク」
ブルーを使った爽やか系
初公開です

初めてテンプレートを公開します。
テーマはロードバイクです。右サイドバー２カラムです。




使用している画像はこちら↓
１．タイトル画像
２．記事１
３．記事２
４．記事３
５．サイド１
６．サイド２
７．カレンダー１
８．カレンダー２

＊注意事項＊

・使用している画像は加工・再配布禁止ですが、スタイルシートは加工自由です。どんどんアレンジしてください。
・スタイルシートについては、まだまだ初心者なので不具合があるかもしれません。何かありましたらお知らせください。
・全体的なデザイン、画像のサイズや色などで希望があればご相談ください。
・使用してくださる方は一言コメントしてくださるとありがたいので、ぜひお願いします。

＊つかいかた＊

１．上のスタイルシートを開いて全部コピーし、８種類の画像をパソコンにダウンロードする
２．ブログ管理画面のツール→ファイルマネージャで、画像を全部アップロードする
３．デザイン→テンプレートで、「ペット」を選択して追加する
４．デザイン→スタイルシートで、２で追加した「ペット」（一番下に追加されている）をクリック
５．スタイルシートが表示されるので、全部消去して、１でコピーしたスタイルシートを貼り付ける
６．スタイルシート＊ブログURL＊と書かれた部分にご自分のブログのURL（例：http://trycustomize.seesaa.net/）を上書きする（全部で１０箇所）
７．プレビューで確認し、問題がなければ「スタイルシートを変更する」で完成

・より詳しい解説は自作配布CSSテンプレの使い方を参照してください。



このスタイルシートには、記事と同じスタイルの自由形式を作るためのタグが一番下に追加されています。
使い方は次回ご紹介します。

タイトル画像を少し変えました。
かかしがお墓に見えると言われたので・・・。
オランダっぽく風車とチューリップにしてみました。前よりかわいくなったと思います。

あと右サイドバーの上下の間隔も調整しました。ブラウザによって間隔が変わってしまうので、なんとか違和感のない様にしたつもりです。

これで公開できるようになったかな？
でももう一晩寝かせて明日もう一度味見してからにします。気が小さいので慎重に･･･

いま作っているテンプレートですが、メインのブログの内容がトライアスロンなので、それに関連してロードバイク（トライアスロン等で使用する自転車）をテーマにしました。
いかがでしょうか。色数が少なくてちょっと淋しいかな。シンプルだけど。素人っぽさが出てる気が･･･。特にタイトル画像。

これから変更するかもしれないので公開はまだです。
もし意見などありましたらコメントください。
初めてなので手探り状態です。

前回のブラウザの問題、解決しました。
スタイルシートの「date」と「sidetitle」の部分で、

background-position:bottom;

と指定するだけでした。
直ってよかったよかった。

でも、他のブラウザで見ていないのでまた問題が出てきたりして･･･


あ、あと画像はいい位置に来たのですが、文字は上の方に行ったままです。そこまで違和感はないので無視できる問題かもしれませんが・・・
検討の余地アリですね。

このページ、いろいろ改造してみました。あとタイトル画像を作ったら、テンプレートとして配布できる形になるかなぁと考えているのですが、問題浮上です。
ブラウザによって、見え方が違う。分かってたことなんですけど、いざ問題が持ち上がるとどうしたらいいのかサッパリです；；
ＩＥだとちゃんと見えます。オペラだと

こんな感じで隙間があいてしまいます。他のブラウザは･･･見るのがこわいです。

原因を考えながら、タイトル画像も作っていこうと思います。

前回は、自由形式に、サイドメニューと同じタイトルをつける方法を紹介しました。
今回は、サイドではなく記事と同じスタイルにする方法をご紹介します。

前回と同じように、「デザイン」→「コンテンツ」で、タイトルを表示したい自由形式をクリックします。出てきた画面の右上に、「コンテンツHTML編集」とあるので、そこをクリック。
そうすると、

<% content.header -%>
<% content.free.text %>
<% content.footer -%>

が出てくるので、全部消して、

<div class="blog">
<h2 class="date"><% content.title %></h2>
<div class="blogbody" style="margin-top:20px">
<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>
</div>

を入れてください。
あとは保存して再構築してください。


素人ががんばって考えながらやったので、もしかしたらこれよりいい方法があるかもしれません。いい方法があったら、ぜひ教えてください。


注：テンプレートによっては、うまくいかないものもあります。試行錯誤中です。

何かバナーをはりたいとき等は、自由形式を使うとできるんですが、タイトルが出なくて、中身だけ表示されますよね。

「カフェ・てぃーだ」さんを参考に、と言ってもソースはそのままですけど、タイトルも表示することができました。しかも、文字色なども他のコンテンツと同じにすることができるんです。

「デザイン」→「コンテンツ」で、タイトルを表示したい自由形式をクリックします。出てきた画面の右上に、「コンテンツHTML編集」とあるので、そこをクリック。
そうすると、

<% content.header -%>
<% content.free.text %>
<% content.footer -%>

と出てきますよね？それを消してしまって、

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>

を入れてください。
あとは、保存して再構築するだけです。

ただ、この方法では記事の上に表示しようとすると、長さがあわなくなってしまいます。メインの領域より、サイドの領域のほうが幅が短いので。
メインに表示するために、記事と同じスタイルにする方法はコチラ

シーサーのテンプレートで使いたいものがあまりなかったので、ブログのカスタマイズをしてみようと思います。幸いなことに、お手本となる先輩ブログもいろいろあるので。

こっちはサブのブログで、いろいろ試してうまくいったらメインに使ってみようと思います。

いずれ、テンプレートを配布できたらなぁ、と思います。まだまだ遠い道のりですが。