ＣＳＳ ブログの枠線
これも質問が多すぎて・・・
ベーシックスキンを使って説明します
まずは・・・
ヘッダをタレントブログのように画像にしてクリックできるようにします・・
※夏用の画像が用意できませんでした・・・
#header{
height:350px;/*画像の縦*/
background-image: url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
}
#header h1,
#header h2{/*位置の初期化*/
margin:0;
padding:0;
}
#header h1 a{
width:800px;/*画像の横*/
height:350px;/*画像の縦*/
display:block;
text-indent:-9000px;
text-decoration:none;
}
#header h2{
display:none;/*概要を非表示*/
}
つぎに ユーザーナビを消します
なんで・・・こんなことは許されるんですか？ （←記事タイトルと内容があっていませんが）
#overHeader #userNaviArea{
display:none !important;
}
つぎにジャマなフッターの線を消します（ベーシックスキン以外は必要ありません）
div#footerArea {
border-top:none;/*線を消す*/
}
ブログの上も空けちゃいます
#frame{
margin-top:30px;
}
最後に・・ブログ全体に枠線をつけます
#frame{
border: 10px solid #ff0000;/*太さ 線種 線の色*/
}
線種には
solid 1本線 border: 3px solid #ff0000;
double 2本線 border: 3px double #ff0000;
dashed 破線 border: 3px dashed #ff0000;
dotted 点線 border: 3px dotted #ff0000;
groove border: 3px groove #ff0000;
ridge border: 3px ridge #ff0000;
inset border: 3px inset #ff0000;
outset border: 3px outset #ff0000;
色は・・ 色 color
を参考にして下さい
アレンジ・・・してみます
（ブログ全体に枠をつける前に戻ってから・・）
ヘッダの周りに枠線をつけます
#header{
padding:0;
border: 10px solid #ff0000;
}
#wrap{
border: 10px solid #0000ff;
}
上と下でずれちゃったら・・・
#header,
#wrap{
width:800px;/*ブログの横幅*/
}
上と下の間を空けます・・
#wrap{
margin-top: 20px;/*上と下の間*/
padding-top: 20px;/*下の線の下*/
}
スキマがおかしくなっちゃうので間は背景を透明にします
#frame{
background-color:transparent;/*透明に*/
}
今度は下の中まで背景が入り込んでしまいました・・
下の中に背景色をつけます
#wrap,#sub_a,#sub_b{
background-color:#e0ffff;/*背景色*/
}
もし・・背景色ではなくて背景画像を敷き詰める場合は・・
#wrap,#sub_a,#sub_b{
background-color:transparent;/*透明に*/
background-image:url(画像のＵＲＬ);
}
スィートとかのようにフッターがない場合は・・
#frame{
margin-bottom:30px;
}
※スキンを携帯のように細くするためにはアメブロ広告を消さないとと出来ません
なので・・やり方は教えられませんので 質問もＮＧです
メッセージでＣＳＳの質問は送らないで下さい・・・
体調のいいときにコメント欄を開放しますのでそれまでお待ち下さい m(_ _)m
表示が崩れて困っている場合はメッセージでかまいません
JavaScript 記事下に定型文を自動挿入してみる jQuery
JavaScript 記事下に定型文を自動挿入してみる を書いてから2年半以上たってしまいました
この間にjQueryなども使えるようになって簡単に書くことができるようになってきました
って～ことで
記事下に定型文を自動挿入してみる jQuery版
以前のを使われている方でフリープラグインの文字数がキツイなどの問題がなければ変更する必要はありません・・
やっていることは同じなんで・・・・（チョット動作は軽くなるのかな？）
ではでは・・ほとんど前の記事のコピペですが・・
全部の記事下に表示する場合・・・
こんなバナーを記事下につけてみようと思います
<a href="http://blog.with2.net/link.php?123456 " target="_blank"><img height="15" src="http://stat001.ameba.jp/user_images/12/f3/1000000123_s.gif " width="80" border="0" target="_blank" /></a>
標準エディタを使って組み立ててみます
HTMLタグを表示にしてみると下のような変な改行があるはずです
このような改行はエラーになりますので削除してくっつけてしまいます
注意・・この部分に1ヶ所でも改行が残っていると動作しません
できましたら・・・・
コピーして ここにタグを書いてください ←ここに貼り付けてから フリープラグインに貼り付けます
ここにタグを書いてください ←さわるのはこの部分だけです この中の改行はＮＧです
前後についています ' は、消さないようにしてください
また ここで ' を使用していますので タグで使えるのは " だけです
<script type="text/javascript">
var myMe ='ここにタグを書いてください'
$(function() {
$(".entry .foot").before('<div class="fix">'+ myMe + '</div>');
});
</script>
※タグの書き方はJavaScript 記事下に定型文を自動挿入してみる の記事下も参考にして下さい
CSSは・・
.entry .fix{
padding:30px 0 30px;/*上 左右 下*/
text-align:center;/*中央寄せ*/
}
CSSの編集が出来ないスキンの場合は・・
フリープラグインに
<style type="text/css"><!--
.entry .fix{
padding:30px 0 30px;
text-align:center;
}--></style>
padding:30px 0 30px;/*上 左右 下*/ の 上下は 自由に設定下さい
中央寄せしない場合は text-align:center;/*中央寄せ*/ を削除します
一番上の記事の場合・・・padding:30px 0 30px;の場合
2番目以降の記事の場合・・padding:30px 0 30px;の場合
記事と記事下広告の間に表示する場合（1番上の記事だけに付きます）・・・
↓CSSの編集が出来ないスキンでも大丈夫です
記事下広告の上に表示しますので・・・・・
1ページに3記事、5記事表示している場合・・・
記事下広告の付いている一つめの記事にしか付けることは出来ません
フリープラグインに・・
<script type="text/javascript">
var myMe ='ここにタグを書いてください'
$(function() {
$("#advertising2").before('<div class="fix">'+ myMe + '</div>');
});
</script>
※タグの書き方は上やJavaScript 記事下に定型文を自動挿入してみる の記事下も参考にして下さい
CSSは・・
.entry .fix{
padding:30px 0 30px;/*上 左右 下*/
text-align:center;/*中央寄せ*/
}
CSSの編集が出来ないスキンの場合は・・
フリープラグインに
<style type="text/css"><!--
.entry .fix{
padding:30px 0 30px;
text-align:center;
}--></style>
padding:30px 0 30px;/*上 左右 下*/ の 上下は 自由に設定下さい
中央寄せしない場合は text-align:center;/*中央寄せ*/ を削除します
前のJavaScriptのに比べたらメチャ短くなっていますね・・
それにwindow.onload命令もなくなったので使いやすくなっています
※jQueryで記事下に挿入していますのでメッセージ部分のＣＳＳは今回は必要ありません
携帯からは見ることが出来ません
携帯はフリープラグインを読み込みませんのでどうしようもありません
ネットにつながりません
昨日からネットにつながりません
もう一台の方もつながりませんので・・
ルーターがこわれた？
連休中にアキバへ買いに行ってきます・・・
どんどんテレビが遠のく（先に風呂修理だろ～）
つながるまでコメント欄は開放できません
また・・すみませんがメッセージではCSSの質問は受け付けておりません
コメント開放時までお待ち下さい
（表示がおかしくなったりして困っている場合はメッセージ下さい）
借りたPCより・・
（ノートはキーボードが打ちにくい・・・ ノートを持っていないヒガミ？）