SLMaMe Blog TEMPLETE

  

SuginamiKuにあるYukikochanのお店YCZ primworksに私の描いたイラストをでかでかと飾って頂いちゃいました♪
めちゃでかーー
ユキコちゃんに会うのは本当に久しぶりで、久々に会ったらなんかちょっと大人になっていて時が経つと色々変わるなぁーーと思ったり（笑）
こんな風にイラストのことを覚えていてくれて本当に嬉しい＞＜。。
「できたー！」とユキコちゃんからIMもらって、お店へイラストを行ってみたらテンプレートを使ってくれているkahoさんも一緒に居て、仲良くなっちゃった♪ブログを通じた出会いはこれが初めてで、嬉しくなっちゃった。わぁーい。

素敵な眼鏡が置いてあるユキコちゃんのお店はコチラです↓
http://slurl.com/secondlife/SuginamiKu/115/241/22

こんなかっこいいフリーのバケツが入手できちゃうので、ちょっと寄るだけでもぜひ行ってみてw

その昔まだ市松でなかった頃にユキコちゃんがくれたので、なんとなく持ち歩いていたら、Awayになった隙にみんなにSS撮られまくっていたw（SSはｼﾞｬｽﾐﾝのSNSから拝借）  

ブログのタイトルを自分で作ったロゴ画像に変えてみましょー。意外と簡単に出来ちゃうのです。

まずは下準備の画像作成の注意事項です。
このサイトで配布しているテンプレートの場合、
画像の高さは60px以内くらいがちょうどよいです。（解像度は72dpiにしてください）
あまり大きいとブラウザによってはレイアウトが崩れる可能性も出てくるので気をつけてくださいね。

自分の気に入ったフォントを使うだけでも、けっこう雰囲気が変わります。
今回は「バタフライ：ブラック（幅100%）」テンプレを使用してこんなロゴ画像を作ってみました。

では、作成した画像をテンプレートに適用してみましょう！

1.作成した画像に半角英数字の名前をつけ、画像一覧からオリジナルサイズでアップロードします。
2.アップロードした画像を一覧から選択して表示させ、 画像のURLをコピーします。
3.テンプレート＞カスタマイズをクリックし、「トップページ」のコードから以下の記述を見つけてください。
（35行目くらいにあります。メモ帳などに一旦全てコピーすると良いです。）

<div id="banner">
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>
</div>

赤字の部分がブログタイトル、このサイトでいうと「SLMaMe Blog TEMPLETE」
青地の部分がサイトの説明、同様に「ソラマメ専用ブログテンプレート配布」となります。

4.ヘッダにサイト説明を載せない場合や、画像内に説明も書いてしまうような場合は、青地部分を全て削除。
上のコードの赤字部分を下のオレンジのように書き換えます。太字部分は2でコピーした画像URLにします。

<div id="banner">
<h1 class="blogtitle">
<a href="<%BlogUrl%>" accesskey="1"><img src="http://www.slmame.com/usr/tomoyo/bb_logo.gif" alt=" <%BlogTitle%>" /></a>
</h1>
</div>

5.「個別ページ」「アーカイブ」も同様に、3.4.を繰り返します。
6.登録して完了です。

ちゃんと適用されているかどうかサイトを確認してみてね♪  

ジュリエットファンの皆さんへ
先日勝手にデザインしちゃったLittle Tiaraブログのパーツ流用？デザインテンプレートです（笑）

ロゴの部分を自分で作ったらかわいいかも、、と思います。
しかし、ロゴの差し替えはちょこっとだけ面倒なんだけど、後で差し替え方法もアップします。
どの方法がわかりやすいかなぁー。。。

→ブログタイトルをオリジナル画像にするには

[続きを読む]をクリックするとこのテンプレートの適用手順が書いてます。
本当はスタイルシートのみ変更で行きたかったんだけど、なかなかね〜〜＞＜。。

[横幅100%2カラム] 昨日のChouchou in GIONライブも最高でしたねー☆
新曲neverland、私はもう完全にツボでした。一時間前から並んでてよかったーー。
これからも応援するのです。

  続きを読む

「横幅固定」のテンプレートを使用している場合、記事の画像の埋め込みについての注意事項です。
記事にオリジナルサイズの画像を埋め込む場合、私のテンプレート「横幅固定」では、大体横450px以内を目安にしています。
もし横450pxより大きいサイズにしたい場合は、サムネールを使用してください。
または、「横幅100％」のテンプレートを使用しても良いと思います。
「横幅固定」テンプレートで大きい画像を使うと、レイアウトが崩れてしまう可能性もあります。

「横幅固定」の場合、これぐらいの大きさを目安にしているのは、理由があります。
現在、メジャーなディスプレイのサイズは1024×768です。環境によってはまだ800×600のディスプレイを使用している場合も考えられます。左右のナビゲーションのサイズを考えると、画像のサイズは450px以内でないと、800×600のディスプレイを使用している方は、画面からはみ出してしまうんですね（笑）
なので、大きく画像を見せたい場合には、サムネールを使用することをオススメしますよ〜。  

こういうの一度作ってみたかったのです。古い紙に日記をつづっていってくださいね。
シンプル系もっと増やそうと思ってたんだけど、なんかどんどん違う方向に行ってしまった。。
古い感じを出すのをちょっとやりすぎちゃった感じで、汎用性は全くないかも、、
このまま使ってください（笑）
このテンプレートの適用の仕方は[続きを読む]をクリックしてくださいね。

[横幅固定3カラム][横幅固定2カラム]   続きを読む

こんにちは。久々の更新ですな〜。
まだ新しいテンプレートできません＞＜
いや、さぼってた訳じゃないんだよ？
リアルの仕事もけっこう忙しいしさ〜、ちょっとお腹痛かったりさ〜〜。いろいろ言い訳してみる、、、 今週は、一パターンくらいはアップしたいです。頑張ります。

でも、先週はLittle Tiaraのオリジナルテンプレートを作れたので満足です。
julietさんはイメージがとても固まっているので、作りやすい反面、難しい面もあったなぁ〜〜。
作りやすい面は、こういうのが好きそう、似合いそうっていうのがハッキリ固まっているから、そのイメージに近づければいいっていう点。
逆に、難しかったのは、そのイメージぽいのが私の引き出しに入ってない！という事と、ブログってやっぱりニュースっぽさがあるので、アートというか柔らかいイメージになりにくいということでした。本当はChouchouのロゴみたいな雰囲気にしようかなと思っていたのに、あのふわっとした感じが全然出せませんでした＞＜。。

今まで、載せたい情報が多すぎて、左メニューがビッチリで狭そうだったので、まず少し広めに、左右の余白も多めにして、余裕を持たせました。
milkaさんの写真をはじめ、雰囲気のある素敵な写真がたくさんなので、あまり邪魔しないようにシンプルさも残しつつ、キュート＆クールなカンジ？を目指したかなぁ〜〜。

けっこう自分では気に入っているので、Little Tiaraモデルテンプレートの変形版みたいのをココでも上げれたらいいなと思ってます。
乞うご期待？  

写真を大きく載せたい方のために、カスタムヘッダ（横幅100％）のテンプレートに、2カラムレイアウトも追加しました。
お好みで使い分けてくださいね〜。
→カスタムヘッダ（横幅100％）

このままず〜っと仕事が暇なら、一日ずっとブログデザインに飽きるまで考えていられるんだけどな〜。

実は、Webデザイナーのくせにブログって人生初だ〜。
あまりにもソラマメのテンプレートが少なすぎるのではじめてみたけど、スタイルシートだけをいじるだけで、こんなにサイトのデザインを変更できるってやっぱり楽しい。
改めてスタイルシートに感動してます。

デザインのカテゴリは、今は汎用的なシンプル系から作ってますが、今後、キュート系やクール系、ナチュラル系なんかも追加して、好みに合わせて選んでもらえるようにしたいです。
こんな感じの欲しいとかあったら、リクエストも受け付けます。
・・・作るかどうかは謎・・・・

あと、私がスタッフをしているsapporoSLMもよろしくです。
こちらのブログも私のオリジナルデザインで、時々記事を投稿してますのでぜひ遊びに行ってみてね。
→sapporoSLM Blog  

こんばんは。Tomoyoです。
ブログの足跡たどって、何人かの人がテンプレート使ってくれてるのみつけてうれし〜な〜＾＾
早速幅100％テンプレートで表示のバグを出してしまいましたが、何しろ自宅ではMacユーザなもので確認できず、、、
もし表示の崩れとか見つけたら教えてくださいませ〜。

え〜と、それでですね。今適用されているこのテンプレート、カスタムヘッダ：レッド（横幅可変3カラム）
このままでもオシャレかな〜とは思うんですが、ヘッダの画像を変えて楽しんでほしいと思ってる！というのは前回書いたとおりです。
→画像の差し換え方

でも、SLでのものづくりはお手のものの皆さんも、サイトのヘッダ画像となるとどうやって作ったらいいか、なかなか最初のとっかかりが掴めない人もいるかな〜と勝手に想像しました（笑）
↓まずはこちらをご覧下さい。


今、市松がしょっているデフォルトの花のみの画像を背景に使用して、自分のSSの切り抜き画像をこんな風に貼り付けちゃってください♪
今回はシンプルなテンプレートなので、彩度を落としてかっこつけてみましたよ。
ね、なかなかいいでしょ。

↓背景の花のみの写真は下のをダウンロードして使ってくださいね。
  続きを読む

ご、ごめんなさい＞＜。
昨日アップした「カスタムヘッダ：レッド（横幅可変3カラム）」の表示を先ほどwindowsのIE6.0で確認した所、レイアウトの崩れが発生してました！ ほんと、申し訳ない、、、
いち早く適用してくれたかがみん、ごめんね、、、
修正したので、もう一度、適用しなおしてね。。。

→修正したテンプレートはこちら   続きを読む

先ほどアップしたカスタムヘッダ：レッド（横幅可変3カラム）について、ヘッダ画像の差し換え方法を補足します。
この画像を自分の好きな画像に差し換えてオリジナルデザインを楽しんでね♪
私はデフォルト画像に、市松人形を配置しました。なんと！ｶﾜｴｴ!!!萌え〜〜〜

さて、まずは画像作りの注意事項です。
画像例：

・解像度は72dpiにしてください。
・画像サイズは、基本的に自由ですが、私はこのような627px×384pxの画像を使用しています。
・画像の上部でグレーになっている部分は、SLMaMeのヘッダで隠れてしまう部分です。このようにグレーにする必要はありませんが、上部を20px空けてください。
注：画像例には市松人形が居ますが、カスタムヘッダ：レッド（横幅可変3カラム）のデフォルトテンプレートでは市松人形はいませんのでご安心ください。

【画像変更手順】
1.作成した画像に半角英数字の名前をつけ、画像一覧からオリジナルサイズでアップロードします。
2.アップロードした画像を一覧から選択して表示させ、 画像のURLをコピーします。
3.テンプレート＞カスタマイズをクリックし、スタイルシートのコードから、以下の部分を2でコピーしたURLに書き換えます。（赤字で表示）
body{
font-family: font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック","sans-serif";
font-size: 90%;_font-size: 80%;
background-image:url(http://www.slmame.com/usr/tomoyo/cst-red_main.jpg);
background-repeat:no-repeat;
background-position:top right;
color:#666;
}

（メモ帳などに一旦スタイルシートをコピーすると見つけやすいと思います。大体30行目くらいです）
あとは登録するだけです。簡単でしょ♪ やってみてね。