アメブロをカスタマイズしよう！ https://ameblo.jp/studycss/ アメブロを自由にカスタマイズすれば、一味違う自分のオリジナルブログのできあがりです。 ja アメブロ記事のフォントを大きくする

ブログを書く　⇒　デザインの変更　⇒　CSSの編集　から


以下のタグを一番下にそのままコピーして張り付けます。

----------------------------------------------

/*　　記事内の文字　　*/
.entry .contents{
font-size: 14px; /*文字サイズ*/
line-height:1.5; /*行間*/
}

----------------------------------------------


フォントは14pxのところを変えればOKで、

行間は1.5の数字を調整すると良いです。


]]> https://ameblo.jp/studycss/entry-10958174995.html Tue, 19 Jul 2011 09:09:25 +0900 アメブロの背景に画像を入れる アメブロの背景に画像を入れたい人向けのカスタマイズです。
背景にも画像を入れたい、というご意見があったので追加しました。

背景に入れたい画像をヘッダーなどと同じ要領で追加します。
詳細はこちら　→　ヘッダー画像とブログの幅を変える

アップロードした画像のURLを用意したら

ブログを書く　→　デザインの変更　→　cssの編集　

に入り、次のタグを追加します。


--------------------------------------------------

body{
background-image:url(アップロードした画像ＵＲＬ);
background-position:center top;/*位置を中央に*/
background-repeat:repeat;/*縦横に繰り返す*/
}

--------------------------------------------------


一枚ものの写真であれば、繰り返すタグは不要ですが
背景に設定するような画像は、パターン画像が多いので
画像の質によって使い分けて下さい。


一枚ものならば、横幅が1200ピクセルぐらいは必要になると思います。
縦だけに繰り返すのなら


background-repeat:repeat-y;/*縦に繰り返す*/

に入れかえて下さい。



ちなみに私が使ったタグはこんな感じです。

--------------------------------------------------

body{
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20110520/09/3f/4c/j/o03000211studycss1305850079655.jpg);
background-position:center top;
background-repeat:repeat;
}

--------------------------------------------------



アメブロをカスタマイズしよう！



あまりいないとは思います(笑)が、
ピンクの唐草模様が気にいったら遠慮なく使って下さい。


]]> https://ameblo.jp/studycss/entry-10897222290.html Fri, 20 May 2011 09:21:48 +0900 記事下にある広告の色を変えて目立たなくする 記事下広告を目立ちにくくするためには、
手っ取り早く色を変えてしまうのがおすすめです。

CSSの編集で、以下の文面を追加します。

--------------------------------------------------------------

.gadTitle,
.gadTitle_s,
.gadDisplayURL,
.gadBox a,
.gadDescription,
#gadLogo_footer a,
#footer_ad a,
.gadDescription_footer,
.gadDisplayURL_footer {
color:#cccccc !important;
}

--------------------------------------------------------------


#cccccc のところが色の指定になります。


]]> https://ameblo.jp/studycss/entry-10894311774.html Tue, 17 May 2011 11:57:57 +0900 記事の最後にランキングなどを挿入したい！ アメブロ記事の最後に、
ペタしてねボタンやランキングを自動挿入したい場合に使います。

いちいち書くのがめんどくさい人向けです。


フリープラグインに、次のJavaScriptを書いておくと
好きなタグを挿入できます。


--------------------------------------------------


<script>
  $(document).ready(function(){

    var entries  = $("div.entry > div.contents > div.subContents");
    var add_tag  = '<p>記事に挿入したいタグ</p>';

    for (i = 0; i < entries.length; i++) {
      if ($(entries).eq(i).is(":has('div#advertising2')")) {
          $("div#advertising2").before(add_tag);
      } else {
          $(entries).eq(i).append(add_tag);
      }
    }
  })

</script>


--------------------------------------------------


注意点は、タグをそのまま挿入したい部分に入れること。
改行するとダメになります。


]]> https://ameblo.jp/studycss/entry-10776241846.html Sat, 22 Jan 2011 16:27:49 +0900 アメブロカスタマイズの本 アメブロも自力でやるのがなかなか困難な人は、
本を購入してもいいかもしれません。


CSSをいじるのには、決まったパターンがあるので
プログラム付きのものも利用できたりします。


私が持っているのはこの本です。
評価するなら、星は5段階で3.5といった感じでしょうか。

ベーシックを基にしてカスタマイズする人には良いかもしれません。



]]> https://ameblo.jp/studycss/entry-10758199078.html Tue, 04 Jan 2011 21:10:54 +0900 アメブロの記事フォントを大きく 記事を見やすくするために、ナビゲーションと記事フォントを大きくします。


ブログを書く　⇒　デザインの変更　⇒　CSSの編集


font-sizeの数字を大きくすると、フォントが大きくなります。
小さい字が見にくいので、16pxぐらいにしてみます。




------------------------------------------------

.entry .contents,
#message .contents{
font-size:12px;
line-height:1.5;
}


------------------------------------------------

/* ---------- font : 文字サイズ・装飾---------- */
body{
color:#000000;
font-size:12px;
}

------------------------------------------------

赤字を16へいじります。

font-family: "ＭＳ Ｐゴシック",sans-serif;

を入れるとフォントがＭＳ Ｐゴシックに変わります。
変化は良く解りませんでした(^_^;)


HGP創英角ﾎﾟｯﾌﾟ体とかが良いかもしれないですね。


注意点としては、アドワーズ広告もでっかくなることです。
投稿記事ごとにフォントをいじるのが、賢いかもしれません。


ということで、元に戻してしまいました。



ffffff＝白
000000＝黒
666666＝グレー
ff0000＝赤
ffff00＝黄
0000ff＝青
008000＝緑

これくらいの色を覚えておくと、ちょっとだけ便利です。


]]> https://ameblo.jp/studycss/entry-10729235928.html Mon, 06 Dec 2010 23:19:46 +0900 記事タイトルを目立たせる
よく見たら、日付が目立つ設定になっているので
タイトルが映えるようにカスタマイズしなおします。


見出しの色をタイトルにつけるように変更します。


ブログを書く　→　デザインの変更　→　CSSの編集


******************************************************************

/* ---------- entry : 各記事枠 ---------------- */
.entry{
width:99%;
margin-bottom:20px;
}
.entry .date{
width:99%;
background-color:#ffff00;
padding:5px 0 2px 5px;
border-bottom:1px solid #006600;
border-right:1px solid #006600;
display:block;
color:#333333;
}
.entry .name{
margin-top:5px;
display:block;
}
.entry .theme{
margin-bottom:10px;
display:block;
}
.title{
margin-top:10px;
margin-bottom:10px;
background-color:#ffff00;
padding:5px 0 2px 5px;
display:block;
}

******************************************************************

太字を消して、赤字を追加します。


アメブロをカスタマイズしよう！


目立つ場所が、日付からタイトルに変わりました。
最初からこうしている方が良いように思います。


]]> https://ameblo.jp/studycss/entry-10719082614.html Fri, 26 Nov 2010 21:37:55 +0900 記事タイトルの見出しの色を変える エントリーの見出しの色を変えたいと思います。


ブログを書く　⇒　デザインの変更　⇒　CSSの編集


*****************************************************************

/* ---------- entry : 各記事枠 ---------------- */
.entry{
width:99%;
margin-bottom:20px;
}
.entry .date{
width:99%;
background-color:#98CB00;/* 背景色 */
padding:5px 0 2px 5px;
border-bottom:1px solid #006600;/* 背景色下 */
border-right:1px solid #006600;/* 背景色右 */
display:block;
color:#333333;
}


*****************************************************************

赤字を書き変えて、
黄色（#ffff00）に変えてみます。


アメブロをカスタマイズしよう！

センスないなー（笑）

やっぱりどんな色にするのかが重要ですね。



*****************************************************************

/* ---------- font : 文字サイズ・装飾---------- */

.entry .title{
font-size:18px;
font-weight:bold;
color:#006600;
}

*****************************************************************


ついでに記事タイトルの大きさも
15pxから18pxに変えておきました。






]]> https://ameblo.jp/studycss/entry-10716699841.html Wed, 24 Nov 2010 12:55:14 +0900 メインカラムの読者になるボタン変更 メインカラムにある読者になるボタンをオリジナル画像に変えてみます。


ブログを書く　⇒　デザインの変更　⇒　CSSの編集

以下の下りを追加します。

******************************************************************************

/*読者になるボタン変更*/

.readerMainLink p{
text-indent:-9999px;
background-image:none;
}
.readerMainLink p a{
display: block;
padding:0;
margin:0 auto;
width:240px;/*画像の横幅*/
height:61px;/*画像の縦幅*/
background-image : url(http://stat.ameba.jp/user_images/20101121/23/studycss/34/3f/j/o0240006110873306262.jpg);
background-repeat : no-repeat ;
}
.readerMainLink a:hover {
background-image : url(http://stat.ameba.jp/user_images/20101121/23/studycss/03/94/j/o0240006110873449053.jpg);
background-repeat : no-repeat ;
}
******************************************************************************

赤字の部分は、アップロードした画像のurlになります。

$アメブロをカスタマイズしよう！


下の部分はマウスオーバー時の画像です。

アメブロをカスタマイズしよう！


読者登録ボタンはとても大事なので、
変えておくことをお勧めします。


]]> https://ameblo.jp/studycss/entry-10714311842.html Mon, 22 Nov 2010 00:04:40 +0900 読者登録ボタンの変更　サイドバー用 サイドバーの読者登録ボタンを入れ換えます。


ブログを書く　⇒　デザインの変更　⇒　CSSの編集

**********************************************

#reader .menu_frame dt {
margin:0 0 5px;
}
#reader .menu_frame dt a {
display:block;
width:156px;
height:68px;
text-indent:-9999px;
background:url(http://stat.ameba.jp/user_images/20101118/23/studycss/f1/fa/j/o0156006810867377145.jpg) no-repeat;
}
#reader .menu_frame dt a:hover {
background:url(http://stat.ameba.jp/user_images/20101119/00/studycss/ab/cb/j/o0156006810867441370.jpg) no-repeat;
}
#reader .menu_frame dd {
display:none;
}

**********************************************

最初の赤いurlにはマウスオーバー前の画像を貼ります。
アメブロをカスタマイズしよう！


後のurlにはマウスオーバー後の画像を貼ります。
アメブロをカスタマイズしよう！

widthはバナーの幅を
heightには高さを
それぞれ入力します。



マウスを上に持っていくと、色が反転します。

アメブロをカスタマイズしよう！

]]> https://ameblo.jp/studycss/entry-10711341028.html Fri, 19 Nov 2010 00:21:17 +0900