--
--.--

スポンサーサイト

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

2013
01.25

sky1680

Category: テンプレート
【DEMO】
利用にあたって
カスタマイズ○
HTML、CSSの再配布○
"designed by potar"を消す○
スクロールスクリプトの再配布×
画像の再配布×
※背景画像はBEIZ Graphicsさんからお借りしたものです。

特徴?
最低限の表示でちまちましたかった。
プラグイン非対応。
記事部分だけをスクロールして記事を読みます。
スクロールバーが浮かないように、デザインを変えてみました。

デメリット
右サイドバーが長くなると、レイアウトが崩れます。
記事部分のスクロールにJavaScriptを使用しています。JavaScriptがOFFになっていると記事をスクロールできません。


↑JavaScriptを無効にして閲覧するとこうなります。

カスタマイズ例
◆右上のリンクを減らす・足す
HTML編集から、下記の部分を探し、赤色・黄色の部分を変更します。この部分を削除してもレイアウトには影響ありません。
< !-- バナー -->
< div id="banner">
< div class="syndicate">
< a href="<%url>archives.html?all" title="すべての記事"> archives< /a>   
< a href="<%url>?xml" title="最近の記事のRSS">RSS»< /a>   
< a href="<%url>?xml&comment" title="最近のコメントのRSS"> comment< /a>   
< a href="<%url>?xml&trackback" title="最近のトラックバックのRSS"> trackback< /a>   
< a href="<%url>?admin" title="管理者ページ"> *admin< /a>
< /div>


◆カレンダーを消す・プロフィールを消す
HTML編集から下記の部分を探し、赤字の部分を削除します。カレンダーが削除されます。
プロフィールも同じように、<!-- プロフィール -->~<!-- プロフィール END -->で囲まれ場部分を削除すると、プロフィールが削除されます。この2ヶ所を消しても、レイアウトは大きくは崩れません。
<!--カレンダー-->
<div class="line_calendar">
<a href="<%prev_month_link>"><%prev_year> <%prev_month></a>

<!--calender2-->
<span class="line_cal_day"><<%days></span>
<!--/calender2-->

<a href="<%next_month_link>"><%next_year> <%next_month></a>
</div>
<!--カレンダーEND-->



◆右サイドのカテゴリーを消す・リンクを消す
HTML編集から下記の部分を探し、赤色・黄色になっている部分を削除します。
<!-- サイドバー -->
<div id="links">
<!-- カテゴリ -->
<div class="sidetitle">カテゴリー</div>
<div class="side">
<ul>
<!--category-->
<li>
<a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a>
</li>
<!--/category-->
</ul>
</div><!-- .side END -->
<!-- カテゴリ END -->

<!-- リンク -->
<div class="sidetitle">リンク</div>
<div class="side">
<ul>
<!--link-->
<li>
<a href="<%link_url>" title="<%link_name>"><%link_name></a>
</li>
<!--/link-->>
</ul>
</div><!-- .side END -->
<!-- リンク END -->



◆右サイドに項目を追加する
HTML編集で下記の部分を探し、赤色の部分を削除します。黄色の部分は、それぞれ、項目のタイトル、項目の内容に書き換えます。複数の項目を足したい時は、コピペして下さい。
<!--■■右サイドにメニュー等を足したい時は、この行を消して下さい■■
<div class="sidetitle">項目のタイトル</div>
<div class="side">
項目の内容
</div>
■■右サイドにメニュー等を足したい時は、この行を消して下さい■■-->


◆記事部分の表示サイズを変える
スタイルシート編集から、下記の部分を探し、赤字の数字を変更します。
#scrollbar1のwidthの数値>#scrollbar1 .viewportのwidthの数値>.blogのwidthの数値になるように調節すると良いです。
/*------------------スクロールバー -----------------*/
#scrollbar1 { width: 600px; clear: both; margin: 10px 0px 0px 10px;}
#scrollbar1 .viewport {
background: rgba(255,255,255,0.3); width: 585px; height: 400px; overflow: hidden; position: relative; }

/*---------------------記事表示部----------------------*/
#content{
position:relative;
margin: 0px;
padding: 0px 10px 5px 0px;
float: left;
}
/* 記事全体 */
.blog{
padding:0px;
width: 580px;
}


記事部分の表示サイズを変更するとレイアウトが崩れるので、サイドバーも適宜調節して下さい。
/*---------------------サイドバー----------------------*/
#links{
width:290px;
margin: 10px 10px 0px 20px;
padding:0px 0px 20px;
float: left;

}
スポンサーサイト

Comment:4  Trackback:0
トラックバックURL
http://potar.blog.fc2.com/tb.php/14-da8ecfcf
トラックバック
コメント
初めまして。
テンプレートをお借りして、カスタマイズしたいんですが・・・。
YOUTUBEの右端の画面が少し切れてしまうのを改善したいんです。どうしたら、いいでしょうか?

教えてもらいたいのですが、よろしくお願いします。
きみーとdot 2013.02.10 11:51 | 編集
はじめまして。
YouTubeで動画埋め込み用のコードを出力すると、デフォルトで幅640px等になっていて、テンプレートの記事部分の幅が足りない、ということで合っているでしょうか?それでしたら、基本は、このエントリーの「◆記事部分の表示サイズを変える」の部分で書いた赤字の箇所を直せば良いかと思います。

やり方1
記事表示部分の幅を広げて、その分サイドバーの幅を狭くする。
例えば、#scrollbar1のwidthの数値を650に、#scrollbar1 .viewportのwidthの数値を635に、.blogのwidthの数値を630にして、記事の幅を50px広くします。その後、#linksのwidthの数値を240にして、サイドバーの幅を50px狭くします。
(ブログ全体を#containerという幅950pxのボックスで囲っているので、サイドバーを狭くする必要があります。)

やり方2
記事表示部分の幅を広げて、ブログ全体の幅も広げる。
#scrollbar1のwidthの数値、#scrollbar1 .viewportのwidthの数値、.blogのwidthの数値を大きくして、記事の幅を広げます。さらに、#container、#banner、#footerの幅も広くしてブログ全体の幅も広げます。
例として、記事の幅を100px、ブログの全体も100px広げる場合のスタイルシートを作ってみました。
http://blog-imgs-55.fc2.com/p/o/t/potar/sky1680_comment.txt
(スタイルシート編集のスタイルシートを全部一度消してから、このスタイルシートにコピペして置き換えると、そのまま使える。はずです。)

やり方3
質問からはずれるのですが、ブログに埋め込む動画の表示サイズ自体を小さくしてしまうという方法もあります。
http://support.google.com/youtube/bin/answer.py?hl=ja&answer=171780
埋め込みしたい動画のページを開く→共有→埋め込みコード→動画のサイズを選択
これで、小さめのサイズを選んでおくと、他の作者さんのテンプレートを使うときも、切れたりはみ出したりしにくいかなー思います。
potardot 2013.02.11 14:15 | 編集
ありがとうございました。

さっそく、その2のコピペ方式(ほんとにありがたいです。)を採用してカスタマイズできました~。

きみーとdot 2013.02.26 02:22 | 編集
こちらこそ、テンプレート使って頂いてありがとうございます。
解決したみたいで良かったです!
potardot 2013.02.26 18:50 | 編集
管理者にだけ表示を許可する
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。