I made this Flash Music Player at MyFlashFetish.com.

Labirinto di Oresama ~俺様的迷宮

Eurobeatの周辺のどうでもいいような話を中心に

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Sleek

sleek前作のBaileysが男性が使うにはちょっと抵抗があるということで、男性用の手帳タイプのテンプレートを作って欲しいとのリクエストを何件か頂きました。それで作ってみたのがこちらのSleekです。

基本構造はBaileysとほとんど同じなんですが、今回は個別ページとそれ以外のページ(トップページ、カテゴリー、アーカイヴ等)で背景が変わるようにしてみました。

個別ページではダーティーでラフなイメージ、それ以外のページではクリーンでスタイリッシュなイメージに仕上げたつもりです(笑)。また、背景をどちらかに固定することも簡単にできますので、好みに合わせてカスタマイズして頂ければ宜しいかと思います。
プラグインは左カラムの左からカテゴリ1、2。カテゴリ3は右カラムの一番上にトップページにのみの表示となります。

カテゴリーページ(カテゴリーをクリックした時に表示されるページ)とアーカイヴページ(月別アーカイヴやカレンダーから年月日を選択した時に表示されるページ)の記事の上に、そのページ内の記事タイトルリストが表示されるようになっていますので、記事数が多いページ内での移動が楽に行えます。

全記事タイトル表示に対応しています。

表示領域はエントリー部分の横幅が368~370px、メニュー部分が160pxで、はみ出した部分は自動的にカットされるようになっています。



では、背景画像の固定の仕方を説明いたします。

  • 背景をダーティーな方に固定する場合
    背景をダーティーな方に固定する場合ブルーで囲った部分を削除してください。


  • 背景をクリーンな方に固定する場合
    背景をクリーンな方に固定する場合水色で囲った部分を削除してください。


ダーティーな方に固定された場合、ブログタイトルと説明文、フッター部分の著作権表示の文字色が見え難くなるかも知れません。その場合にはスタイルシートの下記の部分で文字色をお好みに合わせて修正してください。

/* 著作権表示の設定 */
.copyright{
color : #191919;
clear : both;
text-align : right;
padding : 40px 30px 4px;
margin : 0;
font-family : verdana, tahoma, arial, sans-selif;
font-size : 10px ;
line-height : 1.3;
}
(リンク部分)
.copyright a:link {color: #191919;}
.copyright a:active {color: #62627c;}
.copyright a:visited {color: #191919;}
.copyright a:hover {color: #62627c;}

/*ヘッダーの設定*/ (ブログ説明文の文字色)
.head{
height : 112px;
text-align : left;
color : #191919;
margin : 0;
line-height : 1.1;
}

/* ブログのタイトルの設定 */
.site_title{
font-family : verdana, tahoma, arial, sans-selif;
font-weight : bold ;
padding : 30px 15px 0 36px;
margin : 0;
}

.site_title a:link {font-size: 16px; color:#191919;}
.site_title a:active {font-size: 16px; color:#62627c;}
.site_title a:visited {font-size: 16px; color:#191919;}
.site_title a:hover {font-size: 16px; color:#62627c;}


次にエントリー本文にテーブルタグを使用される場合にご注意頂きたいことなのですが、このテンプレートではデフォルトでエントリー内のテーブルに対して次のようにスタイルを設定しております。

/*tableの設定*/
.main_txt table {
color: #666;
margin:0 0 1em;
border-collapse: collapse;
border: 2px solid #495b6d;
}

.main_txt th {
padding: 0.2em 0.3em 0.1em;
border: 2px solid #495b6d;
text-align:center;
font-weight:bold;
font-size:11px;
}

.main_txt td {
font-size:11px;
padding: 0.2em 0.3em 0.1em;
border: 2px solid #495b6d;
}


ご自分でテーブルのスタイルを設定される方はこの部分を削除、または変更してください。

こんなところですが、質問その他ございましたら、こちらにコメントをお残しください。


2008年12月7日

・IE7で見ると右のメインカラムに横スクロールバーが出現する問題を修正。

詳しくはこちらの記事を参照
スポンサーサイト
テーマ:共有テンプレート - ジャンル:ブログ

この記事に対するコメント

質問なんですけどー
姉ー、助けてくださーい(T▽T)
あのですね、背景に割りとうるさく絵が描いてあるのを使うときにね、テキストボックスが半透明になって字が読みやすくなってるブログ、あるでしょ?あのテクを覚えたいんだけど、この方法http://ymwatson.com/alpha/ であたしにも出来るのかしら?で、このタグはどこに入れればいいのかしら?じゅじゅpはほんとに困ってます(T▽T)あるjavascriptをサーバーにダウンロードして、CSSで指定してって方法も見つけたんだけど、こっちは全くだめでしたー、ぐすん。
【2007/11/17 09:53】 URL | じゅじゅp #GgoiIYCg [ 編集 ]


あら?あーた、そういうが好きになっちゃったのかしら。それで大丈夫よ。でも、それだとIEにしか対応してないから、他のブラウザ用の記述もしといた方がよくってよ。

半透明にしたい内容を囲ってるボックスのクラスを見つけて、スタイルシートでそのクラスの場所に付け足すの。

.main_entry {filter:Alpha(opacity=60); opacity:0.6; -moz-opacity:0.6;}

こんな感じで。
【2007/11/17 19:29】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]

じゅじゅp、討ち死にの模様
姉ー、アルファ合成はね、なんとか出来たの。出来たんだけど、あれだと上に書く字も写真も透けちゃうでしょ?わかってたんだけど・・・で、それを防ぐ方法とか調べたんだけど、ものごっつ長いタグを書かないとだめみたいで、じゅじゅpはお手上げです。で、考えようとすると、熱ぼけ頭と折れた差し歯が邪魔をするので全くアイディアが浮かびません。じゅじゅp、討ち死にでございます。
【2007/11/19 21:44】 URL | じゅじゅp #-


あぁ、アタシも調べたことあるわそれ。FFとか他のブラウザだと半透明のPNG画像を表示できるんだけどねぇ。IE7は対応してるのかしら・・・。

簡単なのはバックの画像をそういう風に加工してしまうことね。公式テンプレのuniverseなんかがそうなんだけど。

これね。
http://oresamachan.blog23.fc2.com/?public=universe&mob=0
【2007/11/19 23:14】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]

か、かっこえぇ~(☉д☉)
すんごくかっこいいわねぇ、これ・・・
姉が作ったんじゃないのね?でも。
ところで、なに、この姫っぽくメリクリなテンプレ(* ̄m ̄) 「あみあみ」模様がすんごく意味深だわぁ(ΦωΦ)あたしもさっさと何とかしないとクリスマスどころか年明けておまけに節分なんて事になっちゃうわっヾ(`◇´)ノあぁ、やだやだ・・・
【2007/11/20 03:29】 URL | じゅじゅp #-


ええ、公式のよ。こんな風に画像を加工すれば透けてるように見えるでしょ?画像や文字は透けないし。
で、結局やっぱりお水系のを作ることにしたのね?ほどほどに頑張るのよ(笑)

アタシもクリスマステンプレを作ってみたってわけ。毒々しいイチゴシロップみたいな色じゃない?これはハズレだと思うわ(笑)。
【2007/11/20 20:13】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]

テンプレート【Sleek】についてのご質問
いつもハイセンスなテンプレを公開しておりまして大変感謝しております。
俺様ちゃんファンの一人DISと申します。
【Sleek】を利用させていただいておりまして、その際の質問を一点。

・コメント記入ページに遷移すると、右の手帳部分(main_txt)の文字すべてが
 バインダー部分に入ってしまう(margin要修正?)件について

個別ページ(パーマネントリンク・最近の記事・カテゴリ)から、コメントリンクを押下してコメント記入ページに行くと、正常なマージンで記事やフォーム欄が表示されるのですが、TOPページからコメントリンクを押下して記入ページに行くと、記事全体が左にズレてしまいます。

運用上さほど問題ないのですが、css修正箇所の助言をいただければ幸いです。
大変お手数ではございますが、ご指導よろしくお願いいたします。

カスタマイズ経緯としては、あまりいじってはいないのですが、関連し得る箇所としては、
・記事部分(div#box_main{)のwidth数値を少し変更

ブログURL
http://dotdis.blog38.fc2.com/
【2007/12/03 12:02】 URL | DIS #-

追記
追記といたしまして、再現するのは Firefox のみでした。
IE では再現しないので、マージンが倍に計算されてしまうという
IE 自体のバグが問題なのでしょうか。

実際に色々なブログやサイトを見てもマージンがおかしく表示されている
現象を多く見かけますので。
【2007/12/03 16:34】 URL | DIS #-


DISさん、初めまして。テンプレートのご利用ありがとうございます。

FFとIE(一応)で何通りかのルートでコメント投稿欄のページを表示してみましたが、私の方では仰られているような症状は再現できませんでした。実際にその状態のものを見ることが出来れば何か分かるかも知れないですが。スクリーンショットを見せていただけますか。

>個別ページ(パーマネントリンク・最近の記事・カテゴリ)から、コメントリンクを押下してコメント記入ページに行くと、正常なマージンで記事やフォーム欄が表示されるのですが、TOPページからコメントリンクを押下して記入ページに行くと、記事全体が左にズレてしまいます。

とのことですが、コメント投稿欄のあるページというのは、個別ページ(http://***********/blog-entry-●●●.html)ですから、どのリンクから入ろうと表示されるページは1つしか無く、従ってそれが同じに見えない状態というのは想像できないのですが。
【2007/12/03 21:01】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]


あの、どのようにして背景の画像を固定するのでしょうか??

http://naruto667.blog115.fc2.com/
【2007/12/04 19:08】 URL | まるけん #dEwF.R3Q [ 編集 ]


まるけんさんこんばんは。

管理画面の左側のメニュー「テンプレートの設定」⇒テンプレート管理⇒sleekの編集ボタンをクリック

すると、上にHTML、下にCSSの編集ウィンドウが現れます。この場合はHTMLを編集します。

方法は記事の中に書いてありますが、固定されたい方の説明の画像をクリックしてください。(別窓で原寸サイズのものが開きます)

そして、その指示通りに削除する部分を削除して、更新をクリックしてください。それで完了です。
【2007/12/04 21:13】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]


ご回答有り難うございます。

個別ページ=記事+コメント欄のあるページ なのは心得ており、その際にコメントリンクを押下すると、ページ遷移ではなく、コメント欄にジャンプするので、ズレることは有り得ません。
前回質問しました件は、何度かTOP(記事が一覧表示されて、コメント欄が出ていない状態、此方の設定では記事は1件表示にしている)からコメントリンクを押下後、ズレるという件ですが、再現しなくなりました。恐らくcssのマージンを変更したからかと思います。ご迷惑をおかけしました。

それと、コメント欄本文記入部分のフォームですが、IEだと幅はカラム右を飛び出さず、スクロールバーが出るのですが、FFだと飛び越えてしまい、その部分に文字を入れても折り返さないで隠れたままになります。
(入力時のみで、送信完了後コメントを見ると綺麗に折り返し表示されますのであまり問題はない)
col数を少なくすれば、FFでも幅調節はできますが、IEでの幅が狭くなってしまいます。これもブラウザ間の問題なのでしょうか。
【2007/12/05 10:37】 URL | DIS #-


取り敢えず、修正できてよかったですね。

コメントフォームの件ですが、はい、閲覧者の環境によりそれらは変わってきます。

こちらとか参考になると思います。
http://www.umechando.com/tips/10.htm

どのブラウザから見ても同じになるようにされたい場合は、textareaのwidthとheightを絶対値で指定してしまうといいですよ。
こちらのページが参考になると思います。
http://www.tagindex.com/stylesheet/form/width_height.html

つまり、スタイルシートの方に次のような感じで追加する、という形がスマートかと思います。

textarea#comment{width: 300px; height: 200px;}
数値はお好みで。
【2007/12/05 19:00】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]


俺様様
1年ぶりです。陰鬱な状況の中で、1年という時が流れ去りました。家族、力をあわせて、再起を目指しています。1年の間に、テンプレートは大きく進化している事、驚きです。自分のブログの使い方すら忘れてしまいました。初心に戻っています。
木場
【2007/12/07 21:31】 URL | 木場 #-


木場さん、お久しぶりです。
そうですね、南アフリカへご旅行に行かれるとお聞きして以来です。

そのような陰湿さというのは日本を含め北東アジア方面の特質かと思っておりました。また、警察の対応がなんとも怖ろしいですね。

ともあれ、新天地での暮らしが平穏でありますことをお祈り申し上げます。
【2007/12/07 23:56】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]


はじめまして。
テンプレート、有難く使わせてもらってます。

カスタマイズについて一つ質問があります。左のプラグインと右の記事のフォントを大きくしたいのですが、どのようにすればよいのでしょうか。

CSSで「ページ全体の設定部分」のフォントをいじったのですが、反映されません。他に修正しなければいけないところがあればぜひ教えてください。
【2008/02/10 09:46】 URL | たかうじ #VAjyZ3Ik [ 編集 ]


たかうじさん、ご利用いただきありがとうございます。実は以前ユーザーフォーラムでブログ内検索結果の表示について質問された時に回答させていただいたことがあります(笑)。

記事本文のフォントサイズは次の部分で指定してあります。

.main_txt{
text-align : left;
font-size: 11px;
margin : 0;
padding : 8px 6px 16px 30px;
}

プラグインのフォントサイズは次の部分になります。

.side_txt{
color : #535353;
font-size : 11px;
padding : 4px 8px 16px;
line-height: 1.4;
border-bottom : 1px #535353 dotted;
}


あと、コメント当高欄は、次の部分になります。
/*コメント投稿欄の設定*/
.cmt_txt{
text-align : left;
font-size: 11px;
margin : 0;
padding : 8px 6px 16px 30px;
}

取り敢えずはこれぐらいでしょうか。
【2008/02/11 21:46】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]


共有テンプレートなので製作者ご本人に直接伺ったほうが良いのかなと思いコメントさせてもらったのですが、まさか既出だったとは…。
お手数をお掛けしました。
【2008/02/11 23:34】 URL | たかうじ #VAjyZ3Ik [ 編集 ]


あー、いえいえ、そういう意味ではありません。

昨年の秋頃ですが、たかうじさんがユーザーフォーラムで質問をなさった時、私が回答をしたのですが、その時にブログを拝見しておりましたので、「たかうじさんのことを存じております」というつもりのレスだったんです。ハンドルネームとプロフィールに書かれている内容が似ていましたので、同じ方だと思ったんですが、人違いでしたらすみません。
【2008/02/12 20:37】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]


あっ、そうだったんですか…(苦笑)
勘違いしてすみません。

では、俺様ちゃんさんはけんさくさんだったんですね。あの時は本当にお世話になりました。こんな形でまたアドバイスをいただけるなんて、なんだか不思議ですね。

これを機にブログ拝見させていただきたいと思います。今後ともよろしくお願いします。
【2008/02/16 17:09】 URL | たかうじ #VAjyZ3Ik [ 編集 ]


>たかうじさん
そうなんです!けんさくです。
あの時にブログの中味も少し読ませて頂いたのですが、味のある文章で強く印象に残っていたものですから。

ありがとうございます。こちらからも宜しくお願いします。
【2008/02/17 12:14】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]

Sleek 質問です
初めまして、ムツラボシといいます。

前からこちらのテンプレは格好良いと思って
いたのですが、Sleekを使ってみたい上で質問が
あります。

当テンプレートは3カラムで作られていて左側に
二列表示となっているのですが、2カラムにして
シンプルにできませんでしょうか。
また、今後そのようなものを出す予定はあるので
しょうか・・・

初めてで失礼かと思いましたが、時間のあるとき
にでも、回答して頂ければ幸いです。
よろしくお願いします。
【2008/06/15 01:53】 URL | ムツラボシ #7VkyQBlk [ 編集 ]


ムツラボシさん、初めまして。

*HTMLの変更部分
<div id="box_right">
<div id="box_left">
を2つとも<div id="box">に。

* CSSの変更部分
/* サイドバーの設定 */のところのdiv#box_rightとdiv#box_leftに対するスタイルの指定を全部削除して次のものを加える。
div#box{
float : right;
width : 320px;
overflow : hidden;
margin-lft : 46px;
}

これで大丈夫だと思います。
【2008/06/16 23:37】 URL | 俺様ちゃん #JZ2AL5Xs [ 編集 ]


はじめまして。
こちらのテンプレートを使わせて頂いています。
日記として使っています。
実は質問なのですが横幅はそのままで、
縦だけもう少し長くできないでしょうか。
スタイルシートをいじってみましたが、
どうしてもうまくいきません。
お時間があります時にお返事頂ければ有難いです_(._.)_
【2008/09/24 02:24】 URL | kaorin #JZ2AL5Xs [ 編集 ]

承認待ちコメント
このコメントは管理者の承認待ちです
【2011/08/15 16:39】 | #


この記事に対するコメントの投稿
















この記事に対するトラックバック

トラックバックURL
→http://oresamachan.blog23.fc2.com/tb.php/221-495cf996
この記事にトラックバックする(FC2ブログユーザー)
SEARCH

Enter keyword, click on Search button and you can find all the articles including it.

LINK J
LINK F
SHOW ALL ARTICLES


全タイトルを表示

CALENDARCHIVE

03 ≪│2017/04│≫ 05
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -

TRACK WORD
RSS FEED

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。