Html研究
気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

 FC2Blog画像の枠


sumire3.jpg


とても苦労したんですが、。。。そう。一ヶ月、二ヶ月くらいです。
でも結局出来ない。
画像の枠をポラロイド風にしたいのですが。

どうも、プラウザがIEってことが駄目の原因と解りました。
エントリーの画像だけにスタイルシートで指定してもpaddingが反映されないのです。
BBSのスキンのように「IMG」が独立していればいいのですが、
テキストと一緒のなので、囲むと記事全部が囲われてしまう。。。

投稿時にスタイルを指定すると出来るのですが
テンプレートを替えた場合、ちょっと困ったりする。

そこで考えました。
っていううか「カスタマイズ・マニュアル」にそれらしいことは有るのですが、
前は出来なかったのです。

CSSの
entry_text img

適宜の名前にして。
それで投稿時に囲うのです。
すると、出来ました。ヾ(@~▽~@)ノわぁい
しかも、テンプレートを替えた場合は反映されません。
一応コレで対応します。
夏にはIEも新しくなるということで期待しています。
疲れました。

【2005/05/18 07:33】 カスタマイズ | トラックバック(0) |
コメント(6)
秋生/ どりーみー/ 秋生/ どりーみー/ 秋生/ どりーみー/ 

 画像に影をつける


sky2005-8-28.gif
長い間、憧れていた「画像に影をつける」方法、 花と写真とblogと。さんが紹介されていたので参考にしてやって見ました。 ヾ(@~▽~@)ノわぁい いいんじゃない? いつも同じ大きさの写真と決まっていれば、もう少しいい感じに成ると思うのですが、気まぐれな画像サイズの私にはコレで充分です。 花と写真とblogと。さん、ありがとうございました。
【More Open】
【2005/08/28 05:30】 カスタマイズ | トラックバック(0) |
コメント(3)
akiiy/ どりーみー/ どりーみー/ 

 FC2プラグインでコメントツリー化


テンプレートに「プラグインの設定 」が追加されてから、一つだけ、どうしようと気にかけていたことは、折角のコメント、トラバのツリー化です。
一生懸命有効、無効に対応しようとしていたのもこの事があったからこそでした。
でも、乏しい知識を振り絞って、思い当たりました。
以前、ivedoorーBlogのプラグインに「Script」を書き込むと書いていらしたscripts for livedoorさんの記事を思い出してやって見ました。

(ノ*~0~)ノ オオオオォォォ、素晴らしい。
出来ました。出来ました。
scripts for livedoorさんありがとうございます。ヾ(@~▽~@)ノ
【More Open】
【2005/09/04 07:36】 カスタマイズ | トラックバック(0) |
コメント(2)
K-taro/ どりーみー/ 

 なぜFirefoxなのか


Blogをカスタマイズする時、さまざまなブラウザによるウェブサイトの見え方の違いということが気になります。
そもそもパソコンに初めに装備されているのはインターネットエクスプローラ(IE)が一般的だということです。
つまり何もしなければIEなのです。
私はIEでいろいろとカスタマイズしてきましたので、すればするほど他のプラウザの方から指摘を受けてきました。

【More Open】
【2007/11/25 06:42】 カスタマイズ | トラックバック(0) |
コメント(0)

 テンプレート


FC2Blogのテンプレートの編集をしていてスタイルシートなどほとんど知らなかった私がいろいろなことを覚えました。いえいえまだまだほんの入り口から中を覗き見たといった程度などなのですが、とても面白いことだと思いました。
近頃、やっとそうなんどと納得したことは、FC2Blogのテンプレートにおいて、いろいろなナンバーについているIDがあるということです。
それを書いておくとその場所にリンクすることが出来るのですね。
例えば、頂いたコメントにはそれぞれ番号が付いていて「%comment_no」と書いてあるところへリンクすることが解かりました。
これをつけてないと、その記事のコメントが始まる頭に行っていたんです。
改めて、テンプレート中で使えるブロック変数に対して感心しました。
まだまだいろいろと楽しそうなことがありそうですね。

【2008/02/21 08:19】 カスタマイズ | トラックバック(0) |
コメント(34)
#11/ どりーみー/ mian/ どりーみー/ mian/ どりーみー/ clair/ どりーみー/ clair/ どりーみー/ 

 テンプレートで記事の部分が下に下がらないようにするには


訪問先でたまに記事の部分が下がってしまっているのを見かけることがあります。
スクロールしていかないと記事に行き当たりません。
これはだいたいの場合画像の幅が広すぎるのですね。
こんな時、どうしたらいいかというと
私はこんな方法でやっています。サンプルとして
http://dreamy.blog2.fc2.com/blog-entry-90.html
この記事ですが、実際の写真は
http://blog-imgs-27.fc2.com/d/r/e/dreamy/sikuramen.jpg
幅が790pxあるんです。実験のためにわざわざ入れたものです。

でもテンプレートのスタイルシートの
<%topentry_body>と<%topentry_more>を囲っている
DIVのclassに

div.△△{
width: ○○px;
overflow: hidden;
}

のように
幅(width)
「はみ出した場合はカットします。」

っていう感じのものを記述しますと、
写真の右側がカットされテンプレートはきれいなままです。
幅の設定は
primary-column
の幅かそれより10px位小さくしておけば大丈夫だと思います。

もし右側をカットしたくないなら予め小さくした画像を入れればいいですね。



もうひとつの方法

違うテンプレート
http://dreamy.blog2.fc2.com/?template=mike-neko&index
の同じ記事「幅広い画像」では
overflow:auto;
と記述してあるため
スクロールが出ています。
こちらもテンプレートが崩れないようにと思ってやってみたことです。
【2008/06/15 06:43】 カスタマイズ | トラックバック(0) |
コメント(0)

 絵文字の背景画像を消す


記事内の画像に背景をつけている場合
小さな絵文字にまで背景が付くと困ります。
.entry_text img.emoji {
border:none;
float:none;
margin:0px;
padding:0px;
valign:bottom;
background:none;
}
そこで上記のように

background:none;
と入れる

更に記事を作成時、

<img src="画像のアドレス" class="emoji" style="border:none;" />


すると絵文字に背景が付きませんね。
【2008/07/07 20:14】 カスタマイズ | トラックバック(0) |
コメント(0)

 BlogパーツのFC2 blogxml


Blogに貼るブログパーツがいろいろとあって楽しいです。
中にはブログのRSSが必要な場合がありますね。

FC2Blogでは最新記事のRSSをクリックすると

http://dreamy.blog2.fc2.com/?xml  (例はこのブログ)
のようにIDが先に書かれたURLが出てきます。

このままでうまく行かない時は

http://blog2.fc2.com/dreamy/?xml
↑のようにblog○○.fc2.comを先に書かれているRSSが有効の場合があります。

【2008/08/07 08:43】 カスタマイズ | トラックバック(0) |
コメント(0)

 テキストを回り込ませない


①写真の右側に文章を入れたくない場合は
例1<img src="ファイルのURL" alt="タイトル" border="0" />
写真の下に文章写真の下に文章
写真の下に文章


サンプル

2008-6-13-10.jpg 
写真の下に文章写真の下に文章
写真の下に文章



例2
書き方の例
<img src="ファイルのURL" alt="タイトル" border="0" />
<br clear="all" />
写真の下に文章写真の下に文章
写真の下に文章
投稿前に改行の扱い 自動改行 にチェックを入れたほうがいいですね



サンプル

2008-6-13-10.jpg

写真の下に文章写真の下に文章
写真の下に文章
投稿前に改行の扱い 自動改行 にチェックを入れたほうがいいですね



以前は自動的に挿入されていたんですが2008-7-16FC2側で変更されたようです。

http://blog.fc2.com/info/blog-entry-243.html





②画像の右側の一番下一行だけに文章が来る。

書き方の例
<img src="ファイルのURL" alt="タイトル" border="0" />画像の右側の一番下一行だけに文章が来る。後は画像の下になる後は画像の下になる後は画像の下になる後は画像の下になる後は画像の下になる
後は画像の下になる



サンプル

2008-6-13-3.jpg画像の右側の一番下一行だけに文章が来る。。後は画像の下になる後は画像の下になる後は画像の下になる後は画像の下になる後は画像の下になる
後は画像の下になる





③画像の横、右側の一番上から

書き方例

<img src="ファイルのURL" align="left" alt="タイトル" border="0" />画像の横、右側の一番上から。画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ・・・・・・・


サンプル

2008-6-13-2.jpg画像の横、右側の一番上から。画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ画像が終わると下に回りこむ





結論として
画像の右側に文章を入れたくない場合は
画像を挿入するタグの次に <br clear="all" />と書く。とテンプレートで指定してあったとしても大丈夫ですね
【2008/08/12 09:49】 カスタマイズ | トラックバック(0) |
コメント(2)
荒野鷹虎/ どりーみー/ 

 画像の位置


2008-9-2-5.jpg

画像を真ん中に置く。
【2008/09/04 05:38】 カスタマイズ | トラックバック(0) |
コメント(0)

 Flashなどのobjectやembed がz-indexを無視して最前面に表示


私はshow hideを使ってメニューを表示させようと思っているのですが、Blog-PETやYouTube,
Flashなどのobjectやembed がz-indexを無視して最前面に表示されてしまうため悩んでいます。

ネット検索で
Lightbox JS v2.0 と Flash
http://web-conte.com/blue/200610/23_1952.php
という記事をみつけこれをshow hideの
scriptに何とか書き加えられないものかと思考錯誤して一ヶ月余り、
悲しいかな、JavaScriptが全く解からないためあれこれ書き換えては試しているんですが、遂に思いが叶わず、それらのobjectやembedっを display-none とすることにしました。
もしこの問題が解決できれば嬉しいと思っています。

また似たような感じで
YAHOO.widget.Menu、HTML + JavaScriptでやってみようとしたんです。これはすごいことにメニューが最前面で動画やFlashは背面に行って良い感じなのですが、
FC2のブラグインでメニューを表示した場合
このメニューからジャンプしようとすると消えてしまうのです。
ちなみにブラグインではない以前のようなメニューや普通のリンクはは、ちゃんとできるのです。

話がそれますが、自作のFlashコンテンツは背景を透過して使うので、前面に重ねて文字などを入れることが出来ます。
方法は
通常
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="125" height="125">
<PARAM NAME=movie VALUE="xxx.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#000000>
<EMBED src="xxx.swf" quality="high" width="125" height="125">
</OBJECT>

のようになっていて、この場合の背景色は黒です。
色を指定しない場合は白になります。

そして背景を透過する場合は

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="125" height="125">
<PARAM NAME=movie VALUE="xxx.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=wmode VALUE=transparent>
<EMBED src="xxx.swf" quality="high" width="125" height="125">
</OBJECT>

このように
<PARAM NAME=wmode VALUE=transparent>と背景を透過させる一行を入れます。
ただこの場合、ブックマークやお気に入りをマウスで探っている時、Flash部分がそれこそフラッシュというか白く光ってしまいますね。
解決策はFlash事態に文字を入れることです。

今回の悩みはBlogパーツなどのように配布されているFlashについてなのです。

話を戻します。
showhideのscriptは内部HEAD部分に書き込み

<script language="JavaScript">
<!--
function ShowHide(id, visibility) {
obj = document.getElementsByTagName("div");
obj[id].style.visibility = visibility;
}
//-->
</script>

menuを開くところは

IDがaDiv
<a href="javascript:ShowHide('aDiv','visible')">開く</a>

<div id="aDiv">
にその内容

閉じるところは
<a href="javascript:ShowHide('aDiv','hidden')">閉じる</a>

またスタイルシートで
初めは非表示にしています。

#aDiv
{
visibility:hidden;
}

以上です。
どなたかメニューを開いた時、Flashなどが背面に表示できることに詳しい方、教えていただければ幸いです。よろしくお願いいたします。

またはYAHOO.widget.MenuでFC2のブラグインが消えないでリンク先にジャンプできる方法でもいいのですが
よろしくお願い致します。
【2008/10/05 14:58】 カスタマイズ | トラックバック(1) |
コメント(4)
相馬称/ どりーみー/ 相馬称/ どりーみー/ 

 FC2Blogサイドメニューツリー化


メニューがツリー化されていると
見やすくなりますね。
以前にやってみたのですが、改めてここに書いておきます。
参考にさせていただいたのは
scripts for livedoorさんです。ありがとうございます。

メニューのツリー化のためのscriptを</body>タグの直前に入れました。


<!--ここから下はメニューのツリー化のためのscriptです-->>

<script type="text/javascript">
<!--
function makeTreeElements (idName,objList) {
if (!objList.innerHTML) return;
var objLink = objList.getElementsByTagName('a')[0];
var linkUrl = objLink.getAttribute('href');
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
var tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join('');
this.elem = objLink.innerHTML;
} else if (idName.indexOf('entry') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/¥((¥d¥d¥/¥d¥d)¥)/);
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
} else if (idName.indexOf('link') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/¥[(.+)¥](.+)/) ) {
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
}
} else if (idName.indexOf('category') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/¥[(.+)¥](.+)/) ) {
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$2).join('');
}
} else if (idName.indexOf('archive') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/¥((¥d+)¥)/);
var tmpCnt = Array(' (', RegExp.$1, ')').join('');
tmpText = objLink.innerHTML;
tmpText.match(/(.+) (¥d+)/);
this.base = Array('<strong>',RegExp.$2,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$1,'</a>', tmpCnt).join('');
}
return this;
}
function createTreeList(idName,option) { // version 2.2
var objFocus = this.document.getElementById(idName);
if (!objFocus) return;
if (!objFocus.innerHTML) return;
var objLists = objFocus.getElementsByTagName('li');
var linkList = new Array();
var outText = new Array();
if (objLists.length > 0) {
for (i=0;i<objLists.length;i++) {
var chckFlag = true;
var elemText = new makeTreeElements(idName,objLists[i]);
if (!elemText.base || !elemText.elem) return;
for (j=0;j<linkList.length;j++) {
if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
chckFlag = false;
linkList[j][linkList[j].length] = elemText.elem;
}
}
if (chckFlag) {
var tmpNum = linkList.length;
linkList[tmpNum] = new Array();
linkList[tmpNum][0] = elemText.elem;
linkList[tmpNum].base = elemText.base;
}
}
if (linkList.length > 0) {
outText[outText.length] = '<ul>¥n';
for (i=0;i<linkList.length;i++) {
outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
for (j=0;j<linkList[i].length;j++) {
outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
outText[outText.length] = Array(linkList[i][j],option.leef).join('');
}

outText[outText.length] = Array(option.btm,'</li>').join('');
}
outText[outText.length] = '</ul>¥n';
objFocus.innerHTML = outText.join('');
}
}
}
var gTreeOption = new Array;
gTreeOption['list'] = '<li class="lst">'; /* ツリー用マーク(通常) */
gTreeOption['end'] = '<li class="end">'; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '</li>\n'; /* 各枝の末尾 */
gTreeOption['top'] = '<ul class="tree">'; /* ツリー本体の最初 */
gTreeOption['btm'] = '</ul>'; /* ツリー本体の最後 */

createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
createTreeList('archivelist',gTreeOption); // アーカイブリストのツリー化
// -->
</script>
<!--メニューのツリー化のためのscriptここまで-->

</body>
</html>

それから次の二つの画像をパソコンに保存してからBlog の管理ページ「ファイルアップロード 」からアップし、そのアドレスを調べます。

tate.gif


matu.gif


次にスタイルシートの一番後ろに次を書き足します。


ul.tree {
list-style: none;
margin: 0px;
padding: 0px;
}
ul.tree li {
margin: 0px;
padding: 0px 0px 0px 16px;
background-image: url(アップしたtate.gifのアドレス);
background-repeat: no-repeat;
}
ul.tree li.end {
background-image: url(アップしたmatu.gifのアドレス);
}

次にプラグインの設定 に行き
「最新コメント」の「詳細 」→【HTMLの編集】をクリック

<div id="commentlist">
<ul>
<!--rcomment-->
<li><%rcomment_etitle><br /><a href="<%rcomment_link>#comment"><%rcomment_name>(<%rcomment_month>/<%rcomment_day>)</a></li>
<!--/rcomment-->
</ul>
</div>


同じくcategoryカテゴリーの「詳細 」→【HTMLの編集】をクリック


<div id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>"><%category_name>(<%category_count>)</a></li>
<!--/category-->
</ul>
</div>





同じくlinkリンクの「詳細 」→【HTMLの編集】をクリック


<div id="linklist">
<ul>
<!--link-->
<li><a href="<%link_url>"><%link_name></a></li>
<!--/link-->
</ul>
</div>


同じく最新記事の「詳細 」→【HTMLの編集】をクリック


<div id="newentrylist">
<ul>
<!--recent-->
<li &align>
<a href="<%recent_link>" title="<%recent_title>" onMouseOver="runSound()"><%recent_title> (<%recent_month>/<%recent_day>)</a>
</li>
<!--/recent-->
</ul>
</div>

更に
リンクリスト、
カテゴリリストをグループ分けします。
[友達]○○
[友達]▼▼
[友達]□□
などですね。
カテゴリーでは
[生活]○○
[生活]▼▼
[生活]□□などです。


尚アーカイブについてはFC2では上手く行かないとの検索エンジンの噂・・・・・
なおも検索しているとプラグインに良い物があるとのこと
共有プラグイン追加で

プラグイン名 TreeArchive_PD と検索
名前:TreeArchive_PD 作者:daniel[pcafe] ▼他の作品 というところ
▼他の作品 をクリック
2ページ目の Tree-Arcive をダウンロードしました。

daniel[pcafe]さま、ありがとうございます。




【More Open】
【2008/11/21 17:25】 カスタマイズ | トラックバック(1) |
コメント(14)
noa/ どりーみー/ noa/ どりーみー/ noa/ どりーみー/ noa/ どりーみー/ noa/ どりーみー/ 

 YouTube


【2008/11/23 16:28】 カスタマイズ | トラックバック(0) |
コメント(0)

 Thanks[Flashなどのobjectやembed がz-indexを無視]に良回答


2008-10-05の記事
「Flashなどのobjectやembed がz-indexを無視して最前面に表示」に対して、ご回答を頂きました。
[menu-open]クリックで現れるメニュー部に記事内に添付しているFlashなどのobjectやembed が突き破って最前面に現れていたのです。

この度、http://web-conte.com/blue/200811/25_2053.phpの 相馬称 さんからコメント及びトラックバックを頂き解決いたしました。

↓[menu-open]をクリックした時、YouTubeが非表示になっているのが解かります。

合わせて、menu-openした時、クリックした同じ場所がmenu-closeに変わるように教えて頂きました。

私のために「showhideのscriptが開いた時、Flashが非表示になる」という記事を書いていただいてほんとうにありがとうございました。
詳しくは、こちらをご覧ください。


相馬称 さんは Lightbox JS v2.0 と Flashという記事を書いていらした方だったのです。


【More Open】
【2008/11/27 07:06】 カスタマイズ | トラックバック(0) |
コメント(0)

 新しいコメントにNEWマーク


お友達から「新しく頂いたコメントにNEWマークを付ける方法は?」と
お問い合わせいただいたのでネットサーフィンしたみたら
ぴったりのカスタマイズを紹介している方を見つけました。
初心者でもできる簡単FC2ブログの作り方さんの最近の記事・コメント・トラックバックにNEWをつけたい!です。
コメントを頂いてから24時間NEWマークが付くそうです。
今までBlogPeopleさんなどではお友達の新しい記事にNEWマーク賀付くことは知っていたのですが、
これは自分に頂いたコメント、またトラックバックや記事にもマークを付けることが出来るそうです。
また表示時間の設定も出来るようです。
私は画像にしてみました。

そのほか 自分のコメントに背景色をつけたい!も気に入りましたので使わせていただきました。

このサイトは以前にも画像にぼんやりした影をつけるには?でもたいへん参考にさせていてだきました。
ありがとうございます。
トラックバックさせていただきます。

みなさんも是非、どうぞ。
【2008/12/21 13:47】 カスタマイズ | トラックバック(0) |
コメント(0)

 650pxまでの画像


2-15-650px.jpg
夜の雪です。幻想的でした。
【2011/02/15 10:12】 カスタマイズ | トラックバック(0) |
コメント(2)
Ktaro/ どりーみー/ 

 discus-3column-1の真ん中の幅を広くする



discus-3column-1をお使いの方のカスタマイズ一例です。

管理者画面→テンプレートの設定で 現在使用しているテンプレートの複製をクリックし
念のため複製をカスタマイズしてください。


スタイルシートのところで緑の文字の所をプラス200してください。2箇所ありまして下のほうはIE6向けですので両方やってください。
先ずcontainer、全体の幅です。

div#container {
width : 900px; /* コンテンツ幅を設定 */     プラス(+)200=1100px
margin-left : auto; /* 左側のマージンを自動算出 */
margin-right : auto; /* 右側のマージンを自動算出 */
text-align : left; /* body要素で指定したセンタリングを戻す */
border-top: solid 1px #6080C0;
border-left: solid 1px #6080C0;
border-right: solid 1px #6080C0;
border-bottom: solid 1px #6080C0;
voice-family: "\"}\"";
voice-family:inherit;
width: 880px;       プラス(+)200=1080px
}


*次にbrandingというところ、ここにディスカスのフラッシュが入ります。まだ前のままの幅です。


div#branding {
width : 900px; /* 幅を設定 */     プラス(+)200=1100px
border-top: solid 0px #685d4d;
border-left: solid 0px #685d4d;
border-right: solid 0px #685d4d;
border-bottom: solid 0px #685d4d;
voice-family: "\"}\"";
voice-family:inherit;
width: 880px;       プラス(+)200=1080px
}

*次にラッパーです。


div#wrapper {
float : left; /* ラッパー(プライマリーカラム+セカンダリーカラム)を左側に回り込ませる */
width : 700px; /* 幅を設定 */  プラス(+)200=900px
voice-family: "\"}\"";
voice-family:inherit;
width: 680px;       プラス(+)200=880px
}


プライマリーカラムです。ここが真ん中の写真や記事が入るところです。


div#primary-column {
float : right; /* プライマリーカラム(記事等)を右側に回り込ませる */
width : 500px; /* 幅を設定 */       プラス(+)200=700px
border-top: solid 1px #6080C0;
border-left: solid 1px #6080C0;
border-right: solid 1px #6080C0;
border-bottom: solid 1px #6080C0;
background-color : ; /* 背景色を透明に設定 */
voice-family: "\"}\"";
voice-family:inherit;
width: 480px;       プラス(+)200=680px
}


更にプライマリーカラムの中にentry_textがあります。

その前にentry_titleも広くしたほうがいいですね。緑の所プライマリーカラムに入る大きさで変えてくださいね。

.entry_title {
width : 350px;
text-align : left ;
height : 36px;
color : #6080C0 ;
font-size: 17px;
font-weight : bold;
padding-top: 8px;
padding-left: 40px;
padding-right: 0px;
padding-bottom: 0px;
background-image : url(http://blog-imgs-27.fc2.com/d/r/e/dreamy/discus-main-title.jpg);
background-repeat : no-repeat;
voice-family: "\"}\"";
voice-family:inherit;
width: 330px;
}



そしてentry_text

.entry_text {
width: 470px;       プラス(+)200=670px
font-size: 17px;
line-height: 180%;
color: lightsteelblue;
 padding: 0 5px;
margin-top: 10px;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 0px;
overflow: hidden;     消す?(これを書くことで決められた幅からはみ出した画像などの右端をカットします)
voice-family: "\"}\"";
voice-family:inherit;
width: 450px;       プラス(+)200=650px
}

少し下の方のentry_text imgです。記事内の画像の設定です。画像の周りの白い部分どうします?
padding: 7px;がダブっていますのでとりあえず上の赤いのを消してください。
周りがいらないと本来の画像をその分大きく出来ますがどうします?
消すようだったら緑のも消してください。


.entry_text img {
background-color: #ffffff;
padding: 7px;            消す
border-top: 0px solid #000000;
border-right: 0px solid #808080;
   border-left: 0px solid #000000;
border-bottom: 0px solid #808080;
padding: 7px;             がぞうのまわりの白  消す?
margin: 0px 0px 0px 0px;
}

以上で幅が広くなったと思います。プレビューを押して確認してください。良かったら
更新ボタンを押します。

カスタマイズ後の様子はこちら
http://dreamy.blog2.fc2.com/index.php?style2=discus-3column-1_1&index
トップページしか見れませんが、どうでしょうか?
【2011/02/18 07:11】 カスタマイズ | トラックバック(1) |
コメント(5)
Ktaro/ どりーみー/ -/ -/ -/ 

 カテゴリ別スタイルシート


一つのBlogでカテゴリによってまるで違うBlogを見ているようにスタイルシートを変えることができるそうです。
参考にさせていただいたのは
Glim.さま・・・最後のあがき・・・・・です。ありがとうございます。

テンプレートの設定から
htmlの編集
<ink href="style.css" rel="stylesheet" type="text/css" />
という部分を

<link rel="stylesheet" type="text/css" href="スタイルシートファイルが置かれているサーバーアドレス/ctest_style<%cno><!--permanent_area--><!--topentry--><%topentry_category_no><!--/topentry--><!--/permanent_area-->css" />
と書き換えます。
(注 < と > を英数字に書き換えて下さいね)

そして
ファイルのアップロードに移り
ctest_style.css(トップページ用) ctest_style1.css ctest_style2.css ctest_style3.cssなどカテゴリの数だけcssファイルをアップします。

テンプレートの設定のスタイルシートは使えなくなっていると思いますので、
それぞれのスタイルシートにそのページのbodyの背景画像や色、linkの色 や左右のカラムの左右への配置、幅のピクセルなどの設定をします。
例として
ctest_style1.cssは
blog-category-1.htmlのスタイルです。

カテゴリのナンバーを調べるのは
カテゴリの編集に移り上のほうにある # をクリックすると作成した順番に数字が現れるのでその番号が
ctest_styleの番号になります。

Glim.さま・ありがとうございます。



後日記2018‐10‐09
その後、改めて実験してみましたら
<link href="<%css_link>" type="text/css" rel="stylesheet">
という部部を書き換えるのではなく残しておき、
その下に
<link rel="stylesheet" type="text/css" href="スタイルシートファイルが置かれているサーバーアドレス/ctest_style<%cno><!--permanent_area--><!--topentry--><%topentry_category_no><!--/topentry--><!--/permanent_area-->css" />
を書き加えます。
そして ctest_style.css はトップページ用ではなく、真っ白なメモ帳にこの名前を付けアップします。
ctest_style0.css は最初からあったカテゴリで削除ができないものです。
以下スタイルを変更したいcssを作りますが、基本的にテンプレートの編集のスタイルが使われますので
変更したいところだけを書き込めばいいようです。
例えばbodyの色や背景画像、h2の背景画像などを変えるだけでいいようです。
書き込まないところは、テンプレートの編集のスタイルが使われます。
またアップされないカテゴリではテンプレートの編集のスタイルが使われます。

前述の記事を参考になさった方がいらしたらすみません。
実験してみたのでこの後日記のほうは大丈夫です。m(__)m

実験的に一つのカテゴリだけやってみてもいいかもしれませんね。
【2018/10/03 09:20】 カスタマイズ | トラックバック(0) |
コメント(4)
りんご/ どりーみー/ りんご/ どりーみー/ 

 Masonryを使用時「flexbox」で2カラムレイアウト更に幅狭ではプルダウンに変化させる


floatに代わってページをレイアウトするのに「flexbox」を使うととても短いコードでできると知りました。スタイルシートは
.container {
display: flex;
}
.left {
width: 300px;
}
.contents {
flex: 1;
}

だけだそうです。ほんとにびっくりです。詳しくは

floatより辛くない「flexbox」でざっくりレイアウト



高さの違うアイテムを隙間なく並べてくれる
jQuery プラグイン Masonry
を使用時、2カラムにするとMasonryの部分がcontainerの幅になって右側にはみ出してしまいます。
そこで「jQuery プラグイン Masonry のイニシャライズ(初期設定)」において
#containerを2カラムの右側のdivクラス名にしてisFitWidth: trueをisFitWidth:falseに変更すると右側の中に納まってくれました。


更にPC表示サイズ960pxが切れるときブルタウンメニューに設定しました。
cssにおいて960px以下ではleftを display: none; としてブルタウンメニューのオープンボタンを出しました。
パソコンのかたはウインドウサイズを狭めてみてください。


詳しくはDEMOのソースをご覧ください。
【2018/11/28 11:32】 カスタマイズ | トラックバック(0) |
コメント(0)






| ホーム |
ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

05 | 2021/06 | 07
- - 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 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

author_name=Dreamy/album

気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

05 | 2021/06 | 07
- - 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 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

Template production /preview