アメブロカスタマイズ「エントリー偏」その３
えーと今日はなんだっけ？
少し間が空いたらわすれちゃいそうです(；・∀・)
配置についてですね。
９/１４の記事で大体説明してますが、変更があったので
それをちょっと。
.entry{position:relative;}
.entry .title{
position:absolute;
width:417px;/*画像の横*/
text-align: center;/*文字色薄いグレー*/
top:60px;
}
.entry .date{
position:absolute;
color: #999999;/*文字色薄いグレー*/
width:417px;/*画像の横*/
text-align: center;/*真ん中配置*/
top:10px;
}
.entry .theme{
position:absolute;
color: #999999;/*文字色薄いグレー*/
width:417px;/*画像の横*/
text-align: center;/*真ん中配置*/
font-size: 10px;/*文字サイズ*/
top:170px;
}
前はtop・left・rightとちまちま設定してやってましたが、
どうもレイアウト的に気に入らなかったので、全部センター配置にしました。
で、どうゆう状態になってるかって言うと
薄いグレーの枠をつけてますけど、
分かりますでしょうか(；・∀・)？
width:417px;/*画像の横*/
この行で日付とかタイトルとか
テーマの箱の横幅を指定してやってます。
そして、
text-align: center;/*真ん中配置*/
この行でその箱の真ん中に
くるように配置してます。
後は、文字とか記事とかの微調整
A：.entry.dateのtop10px
B：.entry.titleのtop60px
C：.entry .themeのtop170px
D：.entry .contentsのpadding-top: 10px;（前回の記事CSS参照）
E：.entry .contentsのpadding-left: 20px;（前回の記事CSS参照）
F：.entry .contentsのpadding-raight: 20px;（前回の記事CSS参照）
G：
.entry .contentsのbackground-repeat:repeat-y;/*縦に繰り返し*/（前回の記事CSS参照）
になります(ﾟ∀ﾟ)
これで大体の設定はできるんじゃないかと思います。
最後に、margin-top: ですが、これはコンテンツとヘッダーの間、
コンテンツとフッターの間に隙間が出来てしまった時に
調整してやります。
色々数字を変えてみると、動きがさらに分かりやすいと思いますよ(・∀・)
とここまでで、エントリーの基本的なカスタマイズは終了ですね。
実際、初期の頃より見やすくなったとは思うのですが、
文字の行数や記事欄の横幅等、改善箇所は山ほどあります。
次回からサイドバーを弄りながら、レイアウトの変更に
挑戦してみたいと思います(ﾟ∀ﾟ)
おまけ
がんばれ！！にっぽん！！！ （ ＾ω＾）･･･
アメブロカスタマイズ「エントリー偏」その２
今回は、前回・前々回とやってきた事の説明をしたいと思います。
①記事画像の変更
②「このブログの読者になる」を非表示
③「記事下の同じテーマとか広告」非表示
これで簡単なのは、②と③ですね(・∀・) それを初めに。
まず、「このブログの読者になる」の非表示は、CSSの１番下に
.readerMainLink{
display:none;
}
を貼り付けるだけ（；^ω^）
で、記事下の「同じテーマの最新記事」を非表示にするは、
#amebaBar,#userNaviArea,#themeBox{
display: none;
visibility: hidden;
}
どこかで、見た事ありますね(´∀｀)９月５日のヘッダー偏の３の
記事でありましたね。
それに、#themeBox を付け足すだけです(ﾟ∀ﾟ)
#アメーババー,#ユーザーナビ,#同じテーマの最新記事
display: none; /*ディスプレイからのける*/
visibility: hidden; /*そのボックス（箱）ごとのける*/
と言う意味になります。
次に大体右上に表示されているPR広告ですが、
どうやら、これがあるから無料でブログが使えるみたいですね。
と言う事は外すとマズいんじゃね？
ワカチコ♪ワカチコ♪ですよねー。
#defaultAd,#advertising2{
position: absolute;
left: -9999px;
height: 1px;
display: none;
margin: 0px;
padding: 0px;
}
まっ、ググればいくらでも出ますけどね（ ＾ω＾）・・・
最後に、このエントリーの画像挿入ですが、
やり方は色々ありますが、ボクが選んだのは前々回の通り(｀・ω・´)
・ヘッダー
・コメント
・フッター
の3種類用意します。
1枚の画像で作成して
３枚に切った方が
楽ですね(・∀・)
４２０×４１７
の画像を３枚に
切りました。
４１７ｐｘって言うのは、CSSの#mainの幅が４２０ｐｘなので
それに収まる様に、少し小さく作りましたヽ(ﾟ∀ﾟ)ﾉ ﾊﾟｯ☆
これを適応させてやるのですが・・・・まずはCSSから見てみましょう。
.entry .entry_head{
background-image:url(ヘッダー画像のurl);
background-repeat:no-repeat;/*繰り返しなし*/
width:417px;/*画像の横*/
height:200px;/*画像の縦*/
}
.entry .contents{margin-top:0px;
background-image:url(コメント画像のurl);
background-repeat:repeat-y;/*縦に繰り返し*/
width: 417px/*画像の横*/
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.entry .foot{margin-top:-20px;
background-image:url(フッター画像のurl);
background-position: 0px bottom;
background-repeat:no-repeat;/*繰り返しなし*/
width:417px;/*画像の横*/
height:200px;/*画像の縦*/
text-align: center;
}
とりあえず赤字で書かれている部分が画像適応のCSSです。
青字は注釈
紫字は、それぞれの画像url＆画像の縦横を入れてください。
黒字の部分は配置に関するオマジナイです（ ＾ω＾）・・・
前々回の記事を被ってきてCSSだけで、長くなりそうなので、
次回に説明したいと思います(´∀｀)
とりあえず、上のCSSを CSSの編集画面で１番下に
貼り付けるだけで、思い思いの記事欄が作成できます(ﾟ∀ﾟ)
やってみようかなぁーって方は是非チャレンジしてみてみて！
目指せ！見やすいブログの旅はまだまだ続く(；・∀・)
①記事画像の変更
②「このブログの読者になる」を非表示
③「記事下の同じテーマとか広告」非表示
これで簡単なのは、②と③ですね(・∀・) それを初めに。
まず、「このブログの読者になる」の非表示は、CSSの１番下に
.readerMainLink{
display:none;
}
を貼り付けるだけ（；^ω^）
で、記事下の「同じテーマの最新記事」を非表示にするは、
#amebaBar,#userNaviArea,#themeBox{
display: none;
visibility: hidden;
}
どこかで、見た事ありますね(´∀｀)９月５日のヘッダー偏の３の
記事でありましたね。
それに、#themeBox を付け足すだけです(ﾟ∀ﾟ)
#アメーババー,#ユーザーナビ,#同じテーマの最新記事
display: none; /*ディスプレイからのける*/
visibility: hidden; /*そのボックス（箱）ごとのける*/
と言う意味になります。
次に大体右上に表示されているPR広告ですが、
どうやら、これがあるから無料でブログが使えるみたいですね。
と言う事は外すとマズいんじゃね？
ワカチコ♪ワカチコ♪ですよねー。
#defaultAd,#advertising2{
position: absolute;
left: -9999px;
height: 1px;
display: none;
margin: 0px;
padding: 0px;
}
まっ、ググればいくらでも出ますけどね（ ＾ω＾）・・・
最後に、このエントリーの画像挿入ですが、
やり方は色々ありますが、ボクが選んだのは前々回の通り(｀・ω・´)
・ヘッダー・コメント
・フッター
の3種類用意します。
1枚の画像で作成して
３枚に切った方が
楽ですね(・∀・)
４２０×４１７
の画像を３枚に
切りました。
４１７ｐｘって言うのは、CSSの#mainの幅が４２０ｐｘなので
それに収まる様に、少し小さく作りましたヽ(ﾟ∀ﾟ)ﾉ ﾊﾟｯ☆
これを適応させてやるのですが・・・・まずはCSSから見てみましょう。
.entry .entry_head{
background-image:url(ヘッダー画像のurl);
background-repeat:no-repeat;/*繰り返しなし*/
width:417px;/*画像の横*/
height:200px;/*画像の縦*/
}
.entry .contents{margin-top:0px;
background-image:url(コメント画像のurl);
background-repeat:repeat-y;/*縦に繰り返し*/
width: 417px/*画像の横*/
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.entry .foot{margin-top:-20px;
background-image:url(フッター画像のurl);
background-position: 0px bottom;
background-repeat:no-repeat;/*繰り返しなし*/
width:417px;/*画像の横*/
height:200px;/*画像の縦*/
text-align: center;
}
とりあえず赤字で書かれている部分が画像適応のCSSです。
青字は注釈
紫字は、それぞれの画像url＆画像の縦横を入れてください。
黒字の部分は配置に関するオマジナイです（ ＾ω＾）・・・
前々回の記事を被ってきてCSSだけで、長くなりそうなので、
次回に説明したいと思います(´∀｀)
とりあえず、上のCSSを CSSの編集画面で１番下に
貼り付けるだけで、思い思いの記事欄が作成できます(ﾟ∀ﾟ)
やってみようかなぁーって方は是非チャレンジしてみてみて！
目指せ！見やすいブログの旅はまだまだ続く(；・∀・)
うん。上手く出来た模様(∩´∀｀)∩
なかなかどうして、上手くいったようですね！
少しは見やすくなったかな(；´∀｀)？？
でも、こうして書いたり見たりしてると、記事部分（エントリーコメント）の幅が狭すぎですね（ ＾ω＾）・・・
サイドバーも見苦しいし(ﾉ∀`)
今日の変更事項メモ
①記事画像の変更
②「このブログの読者になる」を非表示
③「記事下の同じテーマとか広告」非表示
この位です。
これだけの事に随分時間かかってしまった( ；∀；)
次回にでも、今回の変更点について、
説明して見たいと思います(ﾟ∀ﾟ)
やっぱり1番時間を費やしたのは、画像作成ですた（ ＾ω＾）・・・
少しは見やすくなったかな(；´∀｀)？？
でも、こうして書いたり見たりしてると、記事部分（エントリーコメント）の幅が狭すぎですね（ ＾ω＾）・・・
サイドバーも見苦しいし(ﾉ∀`)
今日の変更事項メモ
①記事画像の変更
②「このブログの読者になる」を非表示
③「記事下の同じテーマとか広告」非表示
この位です。
これだけの事に随分時間かかってしまった( ；∀；)
次回にでも、今回の変更点について、
説明して見たいと思います(ﾟ∀ﾟ)
やっぱり1番時間を費やしたのは、画像作成ですた（ ＾ω＾）・・・
アメブロカスタマイズ「エントリー偏」その１
さて、見やすいブログを目指す為に欠かせないのが、
今、こうして書いている記事欄ですね(ﾟ∀ﾟ)
まず、この記事欄がどう言う構造になっているか分解してみましょう(｀・ω・´)
かなり大雑把な図ですが、大体こんな感じです。（これにフッターが付きますが今日は割合(；´∀｀)
大きな①.entry枠の中に②～⑥の箱が入ってます。
①.entry（1回の記事の大きな枠）
②.entry.contents（記事を書く所）
③.entry.theme（テーマ）
④.entry.h3.title（記事のタイトル（お題））
⑤.entry.entry_head（エントリーヘッダー）
⑥.entry.date（日付）
これらの位置をCSSで決めてやる事が出来れば、自分の好きな配置が可能です。
でも、闇雲に弄っても配置がガタガタになるだけで上手くいきません( ；∀；)
そこで、基準となる箱を決めてやります。
1番基準にしやすいのは、1番大きな箱＝①.entryですね。
CSSの1番下に
.entry{position:relative;}
を追加してやって下さい。
これはposition:relativeと言って、この箱を位置の基準に考えますよってオマジナイ(・∀・)
詳しく知りたい人は、「position CSS」とでも検索すると、山の様に出てきます(；´∀｀)
とにかく、これで、基準の箱が決まりました(´∀｀)
後は、それぞれの配置を決めてやるだけです。
.entry{position:relative;}
.entry .title{
position:absolute;
top:60px;/*基準となる枠の上辺より60px下の位置*/
left:0;/*基準となる枠の左辺より0pxの位置*/
}
.entry .date{
position:absolute;
top:30px;
right:0;
}
.entry .theme{
position:absolute;
top:120px;
left:0;
}
.entry .entry_head{
width:417px;/*画像の横*/
height:200px;/*画像の縦*/
}
見てみると、position:absolute と言うのが入ってます。
これは、その下に書かれている座標に配置するオマジナイです。
詳しく知りたい人は（ｒｙ
left とか top とかは、青字で注釈入れてる通りなんですが、
百聞は一見にしかずと言う事で、
配置が変わりました。（あんまり変わってないけど(；´∀｀)
緑の
.entry .entry_head{
width:417px;/*画像の横*/
height:200px;/*画像の縦*/
これは、後で、ここに画像を入れたいなーと言うボクの都合だけでこう言うとり方をしています。
これで、画像を入れてみて、上手く表示されるかどうかですが、
やってみないと、わかりません（ ^ω^）･･･
また、画像作成が1番時間かかってるので、上手く行かない場合は、
映画の話とか、本の話とかで間を持たせようと思います（；^ω^）
と言う事で、今度、見てくださった時に、画像が見事変わってたら
おめでとう！！！と心の中でほくそ笑んでやってください(*´ω｀*)
ではでは。
今、こうして書いている記事欄ですね(ﾟ∀ﾟ)
まず、この記事欄がどう言う構造になっているか分解してみましょう(｀・ω・´)
かなり大雑把な図ですが、大体こんな感じです。（これにフッターが付きますが今日は割合(；´∀｀)
大きな①.entry枠の中に②～⑥の箱が入ってます。
①.entry（1回の記事の大きな枠）
②.entry.contents（記事を書く所）
③.entry.theme（テーマ）
④.entry.h3.title（記事のタイトル（お題））
⑤.entry.entry_head（エントリーヘッダー）
⑥.entry.date（日付）
これらの位置をCSSで決めてやる事が出来れば、自分の好きな配置が可能です。
でも、闇雲に弄っても配置がガタガタになるだけで上手くいきません( ；∀；)
そこで、基準となる箱を決めてやります。
1番基準にしやすいのは、1番大きな箱＝①.entryですね。
CSSの1番下に
.entry{position:relative;}
を追加してやって下さい。
これはposition:relativeと言って、この箱を位置の基準に考えますよってオマジナイ(・∀・)
詳しく知りたい人は、「position CSS」とでも検索すると、山の様に出てきます(；´∀｀)
とにかく、これで、基準の箱が決まりました(´∀｀)
後は、それぞれの配置を決めてやるだけです。
.entry{position:relative;}
.entry .title{
position:absolute;
top:60px;/*基準となる枠の上辺より60px下の位置*/
left:0;/*基準となる枠の左辺より0pxの位置*/
}
.entry .date{
position:absolute;
top:30px;
right:0;
}
.entry .theme{
position:absolute;
top:120px;
left:0;
}
.entry .entry_head{
width:417px;/*画像の横*/
height:200px;/*画像の縦*/
}
見てみると、position:absolute と言うのが入ってます。
これは、その下に書かれている座標に配置するオマジナイです。
詳しく知りたい人は（ｒｙ
left とか top とかは、青字で注釈入れてる通りなんですが、
百聞は一見にしかずと言う事で、
配置が変わりました。（あんまり変わってないけど(；´∀｀)
緑の
.entry .entry_head{
width:417px;/*画像の横*/
height:200px;/*画像の縦*/
これは、後で、ここに画像を入れたいなーと言うボクの都合だけでこう言うとり方をしています。
これで、画像を入れてみて、上手く表示されるかどうかですが、
やってみないと、わかりません（ ^ω^）･･･
また、画像作成が1番時間かかってるので、上手く行かない場合は、
映画の話とか、本の話とかで間を持たせようと思います（；^ω^）
と言う事で、今度、見てくださった時に、画像が見事変わってたら
おめでとう！！！と心の中でほくそ笑んでやってください(*´ω｀*)
ではでは。
アメブロカスタマイズ「サイドバー偏」その２
前回の続きです。
前回は背景やフォントを変えれるけど、意味無いよ('A`)
って説明でした。
なので、今回はそのタイトルに画像を入れるCSSです。
その前に、入れる予定の画像を用意します。
用意した画像はこちらヽ(ﾟ∀ﾟ)ﾉ ﾊﾟｯ☆
（ ＾ω＾）・・・
相変わらず酷いセンスですね（；^ω^）
この画像の様に、画像内に好きなフォントで入れてしまえば
ブログ読者にもそのフォントが見れますね(ﾟ∀ﾟ)
それぞれ違う画像を用意しても良かったのですが、それは後ほど(；´∀｀)
この画像、サイドバーのサイズに合わせて（サイドバーの横幅170ｐｘ）
170ｐｘ以内の160ｐｘで作ってます。
縦は適当でいいのですが、この画像の場合だと80ｐｘです。
ホントは60ｐｘ位でもいけたかもですｗ
で肝心のどこのCSSを弄るかですが、
/*１０）サイドバーの見出し背景色を変更する*/
h4.menu_title{
の下に
margin: 0;
padding: 0;
border:none;
background-position:0px 0px;
text-indent:-9000px;
background-repeat:no-repeat;
width:160px;/*画像の横*/
height:80px;/*画像の縦*/
}
#profile .menu_title{/*プロフィール*/
background-image:url(画像のURL );
}
#calendar .menu_title{/*カレンダー*/
background-image:url(画像のURL );
width:165px;/*画像の横横幅が違う場合はそのつど指定*/
height:190px;/*画像の縦、縦が違う場合はそのつど指定*/
}
#reader .menu_title{/*このブログの読者*/
background-image:url(画像のURL );
}
#theme_list .menu_title{/*ブログテーマ一覧*/
background-image:url(画像のURL );
}
#recent_entries .menu_title{/*最近の記事一覧*/
background-image:url(画像のURL );
}
#search .menu_title{/*ブログ内検索*/
background-image:url(画像のURL );
}
#archives .menu_title{/*アーカイブ*/
background-image:url(画像のURL );
}
#favorite .menu_title{/*お気に入りブログ*/
background-image:url(画像のURL );
}
#bookmark .menu_title{/*ブックマーク*/
background-image:url(画像のURL );
}
#recent_comment .menu_title{/*最近のコメント*/
background-image:url(画像のURL );
}
#ranking .menu_title{/*ランキング一覧*/
background-image:url(画像のURL );
}
#defaultAd .menu_title{/*サイドＰＲ*/
background-image:url(画像のURL );
}
画像の横・縦の所は、各自作った画像に合わせて、ｐｘを設定してください(´∀｀)
これだと、好きなフォントで好きな画像を使えて、
自分好みのスタイルが作りやすいですね(・∀・)
しかし、このサイドバー、弄り方1つで凄く便利な物になりそうです。
まだまだ勉強中ですが・・・
当分、ブログタイトルに反して見にくい（醜いｗ）ブログが続くと思いますが、
どうか長い目でお願いします。
それと、分からない事はコメントでもなんでもじゃんじゃん聞いてくださいね。
全力で調べてお答えします(｀・ω・´)
前回は背景やフォントを変えれるけど、意味無いよ('A`)
って説明でした。
なので、今回はそのタイトルに画像を入れるCSSです。
その前に、入れる予定の画像を用意します。
用意した画像はこちらヽ(ﾟ∀ﾟ)ﾉ ﾊﾟｯ☆
（ ＾ω＾）・・・
相変わらず酷いセンスですね（；^ω^）
この画像の様に、画像内に好きなフォントで入れてしまえば
ブログ読者にもそのフォントが見れますね(ﾟ∀ﾟ)
それぞれ違う画像を用意しても良かったのですが、それは後ほど(；´∀｀)
この画像、サイドバーのサイズに合わせて（サイドバーの横幅170ｐｘ）
170ｐｘ以内の160ｐｘで作ってます。
縦は適当でいいのですが、この画像の場合だと80ｐｘです。
ホントは60ｐｘ位でもいけたかもですｗ
で肝心のどこのCSSを弄るかですが、
/*１０）サイドバーの見出し背景色を変更する*/
h4.menu_title{
の下に
margin: 0;
padding: 0;
border:none;
background-position:0px 0px;
text-indent:-9000px;
background-repeat:no-repeat;
width:160px;/*画像の横*/
height:80px;/*画像の縦*/
}
#profile .menu_title{/*プロフィール*/
background-image:url(画像のURL );
}
#calendar .menu_title{/*カレンダー*/
background-image:url(画像のURL );
width:165px;/*画像の横横幅が違う場合はそのつど指定*/
height:190px;/*画像の縦、縦が違う場合はそのつど指定*/
}
#reader .menu_title{/*このブログの読者*/
background-image:url(画像のURL );
}
#theme_list .menu_title{/*ブログテーマ一覧*/
background-image:url(画像のURL );
}
#recent_entries .menu_title{/*最近の記事一覧*/
background-image:url(画像のURL );
}
#search .menu_title{/*ブログ内検索*/
background-image:url(画像のURL );
}
#archives .menu_title{/*アーカイブ*/
background-image:url(画像のURL );
}
#favorite .menu_title{/*お気に入りブログ*/
background-image:url(画像のURL );
}
#bookmark .menu_title{/*ブックマーク*/
background-image:url(画像のURL );
}
#recent_comment .menu_title{/*最近のコメント*/
background-image:url(画像のURL );
}
#ranking .menu_title{/*ランキング一覧*/
background-image:url(画像のURL );
}
#defaultAd .menu_title{/*サイドＰＲ*/
background-image:url(画像のURL );
}
画像の横・縦の所は、各自作った画像に合わせて、ｐｘを設定してください(´∀｀)
これだと、好きなフォントで好きな画像を使えて、
自分好みのスタイルが作りやすいですね(・∀・)
しかし、このサイドバー、弄り方1つで凄く便利な物になりそうです。
まだまだ勉強中ですが・・・
当分、ブログタイトルに反して見にくい（醜いｗ）ブログが続くと思いますが、
どうか長い目でお願いします。
それと、分からない事はコメントでもなんでもじゃんじゃん聞いてくださいね。
全力で調べてお答えします(｀・ω・´)