テーマ:
≪CSSの編集講座≫
■ランキングサイトへ行ってみよう!
■CSSのカスタマイズでオリジナルデザインにしよう!
・スクロールバーをオシャレに変身♪
・背景の壁紙指定&トップのイラストを変更する
・リンク色を変更する
・文字の色や大きさを変更する
・ブログタイトルの位置変更など

■CSSの編集(リンク部分をオシャレに♪)
■CSSの編集(記事の枠を好きな色に変更する!)
■CSSの編集(記事タイトルにアイコンをつけてみよう!)

≪初心者向けアメブロ活用法≫
■トラックバックとは?
■トラックバックの仕方
■リンクの仕方
■IMG画像タグの使い方
■メールフォーム設置の仕方
■スクリーンショットの撮り方
■アクセスカウンターの設置の仕方
■ランキングサイト

≪お遊び編≫
■新ブログペット☆メロメロパークを設置しよう!
■ブログペット(旧こうさぎ)設置の仕方
■面白占いや診断など紹介中!

≪育児関連≫
■育児日記RING参加者募集中!
■育児日記ランキング参加者募集中!
■母子手帳コレクション
■幼稚園のお弁当公開中!
AD
いいね!した人  |  コメント(65)  |  リブログ(0)
最近の画像つき記事  もっと見る >>

テーマ:

フルーツいっぱいのケーキだよんw

スタッフブログで紹介されていた「ブログペットといえばメロメロパーク!」っていうのをサイドバーに設置してみたよ!
まだね、今日リリースされたばっかりみたい!
うちの息子の誕生日とメロメロパークの誕生日は同じだねヾ(≧∇≦)〃
なので、この記事に誕生日ケーキを載っけてみた(笑

【メロメロパーク とは?】
メロメロパークとは、ブログペット「メロ」たちの生息する世界です。「メロ」はあなたのブログの言葉を学習しながら成長したり、いろんなブログに遊びに行きながら友達を増やす、全く新しいブログペットです。

とあまめにゅに書かれています^^

このメロメロパークっていうのは初めて見かけたもので、どういうものかまだ全然よく分かってないんだけど、とりあえず試しとこーってな感じでw
皆がブログペットを普通に設置できるようにして欲しい!って以前から願っていたので、その思いが通じたのでしょう♪
これはまだβ版らしいけどね。
記事を更新するにつれ、ペットちゃんも成長していくみたい☆
リブリーやハーボットなどにちょっと似てるのかな??
とりあえずどれも一度は設置したことのある私です^^;

コレ、飼主によって雰囲気の違うペットに育っていくと面白いね(o^-^o)

設置はとっても簡単なので、皆さんもいかがですか?
ぜひお友達になってくださーい。


設置の仕方は、あまめにゅを参考にしてねw

※アメブロ以外のブログでも設置OKらしいよw

名前:あーちゃん
里親:happy
住所ラブメロヴィレッジ 5-111-118


■メロメロパークお友達申請について追記
たくさんのお友達申請どうもありがとうございます!
全ての方を承認したいと思っていたのですが・・
どうやら100人までしかダメなようなんです><

なので、申請してくださったのに承認できなかった
多数の方々、大変申し訳ございませんm(_ _)m

今はまだβ版ですが、いつか正式版になったとき、
制限人数を増やしてくださるかも?ってことなので
そのときには改めてよろしくお願いいたします。。


*****
ちなみに、読んでる人には全く関係ないけど、この記事はアメブロリニューアル前の記事投稿エディタの復活版で書いてみました。あー、やっぱ使いやすくていいわ☆⌒(*^-゜)b


↓ クリックしてくれたら嬉しいですo(*^-^*)o ↓

子育て日記Ranking  COCO-RANKING  0574ママ部門
AD
いいね!した人  |  コメント(79)  |  リブログ(0)

テーマ:

質問の多い個所とリクエストにお答えして・・・

以前紹介しているのとだぶっている部分もありますが^^


■フレームや記事の幅を変更する

/* ----------------------- common ----------------------- */
* {
margin: 0;
padding: 0;
}
body#mainIndex {
margin: 0;
padding: 0;
text-align: center;
}
#frame {
width: 800px; /*←フレームの横幅変更はココ*/
margin-left: auto;
margin-right: auto;
text-align: center;
border: #色コード solid 1px; /*←全体の枠がないスキンを使っていたので自分で追加しました*/
}
#subFrame {
}
#wrap {
position: relative;
width: 800px; /*←記事部分の横幅変更はココ*/
margin-left: auto;
margin-right: auto;
text-align: left;
top: 10px; /*←メインの記事部分が上(ブログタイトル部分)からどのくらいの幅を開けるか調節するのはココ*/
}
img {
border: 0;
}
a {
color: #FF0000; /*←リンク色の変更はココ*/
}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration:none; color:#FFFFFF;background-color:#FF0066; /*←リンク触れたときの色の変化や背景色の変更はココ*/
}
input,textarea{font-size:12px}
ul,ol,dl,li,dt,dd{
list-style-type:none;
}
/* ----------------------- header ----------------------- */


■リンク個所応用編についてはこちらで詳しく説明しています♪



■記事タイトルの横にアイコンを追加する方法♪

/* ----------------------- MainColumn ----------------------- */
#main {
padding-bottom: 10px;
}


   ─ 省略 ─


.entry .name{
position: absolute;
top: 26px;
left: 0px;
}
.entry .theme{
position: absolute;
top: 5px;
right: 2px;
}
.entry .title{
margin-top: 24px; /*←記事タイトルが上からどの位置にするかの調節はココ*/
margin-bottom: 14px; /*←記事タイトルと内容の開く幅調節はココ*/
padding-left: 32px; /*←タイトル文字の横位置を調節(画像と重ならないようにするため^^)*/
text-align: left;
background: url(ココに画像のURLを入力) no-repeat left top; /*←記事タイトルに画像を追加するのはココ*/
background-position:5px; /*←画像の位置を操作するのはココ*/
}
.entry .contents{
margin-bottom: 10px;
}
.entry .foot{
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
border-top: 1px dashed #999999;
}


   ─ 以下省略 ─

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


■参考になった方は・・ランキングクリックしてくださると嬉しいです♪

■他のCSS編集はこちらにて紹介中♪(初心者向け講座もあり)



↓ クリックしてくれたら嬉しいですo(*^-^*)o ↓

子育て日記Ranking  COCO-RANKING  0574ママ部門
AD
いいね!した人  |  コメント(28)  |  リブログ(0)

テーマ:
記事の枠色の変更を教えて欲しいと言われたので紹介しておきます。

■記事の枠を好きな色に変更する

/* ----------------------- MainColumn ----------------------- */
#main {
padding-bottom: 10px;
}
/*message*/
#message{
width:99%;
margin-bottom: 15px;
border-top: 1px dashed #999999; /*←トップ案内板の点線部分上の色変更はココ*/
border-bottom: 1px dashed #999999; /*←トップ案内板の点線部分下の色変更はココ*/
}
#message .contents{
margin-top: 10px;
margin-bottom: 10px;
}
/*entries*/
.entry{
position: relative;
width: 99%;
margin-bottom: 20px;
border: #999999 solid 1px; /*←記事の枠色を変更するのはココ*/
}
.entry .entry_head span {
display: block;
}
.entry .entry_head {
display: block;
border-bottom: 1px dashed #999999; /*←記事の日付背景下の点線部分の色変更はココ*/
}
.entry .entry_head span.date {
display: block;
width: 100%;
height: auto;
margin-bottom: 1px;
padding-top: 5px;
padding-bottom: 5px;
text-indent: 6px;
border-top: #999999 1px solid; /*←記事の日付背景上の色変更はココ*/
background-color: #999999; /*←記事の日付背景色の変更はココ*/
overflow: hidden;
color: #FFFFFF;
}

.entry .name{
position: absolute;
top: 26px;
left: 0px;
}
.entry .theme{
position: absolute;
top: 5px;
right: 2px;
}


   ─ 以下省略 ─

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



■サイドバーの枠色やバナー変更

/* ------------------- each menu setting ------------------- */
/*profile*/
#profile {
background: url(http://nwimg.ameblo.jp/p_skin/bird/img/profile.gif ) no-repeat left top; /*←プロフィールバナーの変更する場合はココ*/
}
#profile p{
display: block;
}
/*readers*/
#reader {
background: url(http://nwimg.ameblo.jp/p_skin/bird/img/reader.gif ) no-repeat left top; /*←readerバナーを変更する場合はココ*/
}
#reader dl {
margin-bottom: 7px;
}
#reader ul {
margin-top: 5px;
}
#reader p {
display: inline;
}
/*calendar*/
#calendar{
border: 1px solid #CCCCCC; /*←カレンダーの枠色変更はココ*/
background: url(http://nwimg.ameblo.jp/p_skin/bird/img/calendar.gif ) no-repeat left top; /*←カレンダーのバナーを変更する場合はココ*/
border-top: 1px;
padding-top: 7px;
text-align: center;
}
#calendar .menu_title {
text-align: left;
}
#calendar table {
width: 165px;
}
#calendar caption {
padding:5px 0px;
}
#calendar caption a{
padding:0px 5px;
}
#calendar .sun {
color:#FF0000;
}
#calendar .sat{
color:#0000CC;
}
#calendar td {
text-align:center;
}
#calendar td a {
color:#CC0000;
text-decoration: underline;
}
/*theme_list*/
#theme_list {
background: url(http://nwimg.ameblo.jp/p_skin/bird/img/theme.gif ) no-repeat left top; /*←theme listバナーを変更する場合はココ*/
}
/*recent_entries*/
#recent_entries {
background: url(http://nwimg.ameblo.jp/p_skin/bird/img/recententry.gif ) no-repeat left top; /*←recent entriesバナーを変更する場合はココ*/
}
/*archives*/
#archives {
background: url(http://nwimg.ameblo.jp/p_skin/bird/img/archive.gif ) no-repeat left top; /*←archivesバナーを変更する場合はココ*/
}
/*search*/
#search {
border: 1px solid #CCCCCC; /*←サーチの枠色変更はココ*/
background: url(http://nwimg.ameblo.jp/p_skin/bird/img/search.gif ) no-repeat left top; /*←サーチバナーを変更する場合はココ*/
border-top: 1px;
}
#search form{
margin-top: 7px;
margin-bottom: 7px;
}
#search .searchbox{
width: 100px;
}
#search .searchbtn{
width: 40px;
}
/*favorites*/
#favorite {
background: url(http://nwimg.ameblo.jp/p_skin/bird/img/favorite.gif ) no-repeat left top; /*←favoriteバナーを変更する場合はココ*/
}
/*bookmarks*/
#bookmark {
background: url(http://nwimg.ameblo.jp/p_skin/bird/img/bookmark.gif ) no-repeat left top; /*←bookmarkバナーを変更する場合はココ*/
}
/*recent_trackback*/
#recent_trackback {
background: url(http://nwimg.ameblo.jp/p_skin/bird/img/recenttrackback.gif ) no-repeat center top; /*←recent trackbackバナーを変更する場合はココ*/
}
/*recent_comment*/
#recent_comment {
background: url(http://nwimg.ameblo.jp/p_skin/bird/img/recentcomment.gif ) no-repeat center top; /*←recent commentバナーを変更する場合はココ*/
}
/*ranking*/
#ranking {
background: url(http://nwimg.ameblo.jp/p_skin/bird/img/ranking.gif ) no-repeat left top; /*←rankingバナーを変更する場合はココ*/
}
#ranking .rank{
display: block;
padding-top: 3px;
padding-bottom: 3px;
}
#ranking a{
padding-left: 12px;
background-image: url(http://nwimg.ameblo.jp/p_skin/bird/img/icon.gif );
background-repeat: no-repeat;
background-position: 0px 3px;
}
#ranking img{
margin-left: 5px;
}
#ranking .rank_all,
#ranking .rank_genre {
margin-bottom: 12px;
}
#ranking .rank_ttl{
display: block;
}
#ranking p {
text-align: left;
}
/* ----------------------- adJavaScript ----------------------- */

/* ----------------------- advertising ----------------------- */
#advertising {
border: 1px solid #FFEED3; /*←広告の枠色変更はココ*/
border-top: 1px;
background: #FFFFFF url(http://nwimg.ameblo.jp/p_skin/bird/img/advertising.gif ) no-repeat; /*←広告バナーを変更する場合はココ*/
}
#advertising.mainMenu {
padding-bottom: 1px;
}


   ─ 以下省略 ─

/* ----------------------- MainColumn ----------------------- */



■CSSの編集基本編だけでも充分オリジナルなページに♪
■CSSの編集(リンク部分をオシャレにするにはこちら♪)
■アメブロ版色んな初心者向け講座などはこちら♪


↓ クリックしてくれたら嬉しいですo(*^-^*)o ↓

子育て日記Ranking  COCO-RANKING  0574ママ部門
いいね!した人  |  コメント(36)  |  リブログ(0)

テーマ:

要望が多いので、CSS講座(1) に続いてさらに技を追加。


ランキングのココクリックしてみてね♪

まず、↑リンク部分に触れてもらったら分かると思いますが、背景色がついて「?」マークが出てきますよね。それの方法を紹介しておきます。


■リンクに背景色をつける

/* ----------------------- common ----------------------- */


─ 上文省略しています。変更するのは下の部分のみなので。 ─


a {
color: #FF0000; /*←全体的なリンク色の変更はココ*/
}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration:none; color:#FFFFFF;background-color:#FF0066; /*←リンク触れたときに背景色を変える場合はココ*/
}
input,textarea{font-size:12px}
ul,ol,dl,li,dt,dd{
list-style-type:none;
}
/* ----------------------- header ----------------------- */


※背景色は私と同じ濃いピンク色になっていますので、各自好きな色に変更してください。右の赤文字(#FF0066)が背景色で、左の赤文字(#FFFFFF)は背景色の中の文字の色になります。


※また、元のスキンでは、リンクに触れると下線が出る状態→a:hover {text-decoration: underline}になっていましたが、現在紹介しているのは下線を消した状態になっています→a:hover {text-decoration:none}

これもまた色んな応用ができるので試してみてください♪


※色の変更はカラーサンプル でも参考にどうぞ♪


●リンク応用例●(↓それぞれコピペOK♪)
a:hover {text-decoration: underline} /*←リンクに触れたとき下線がでる*/a


a:hover{text-decoration:overline underline;} /*←リンクに触れたとき上下線がでる*/a


a:hover{border-bottom-width:1px;border-bottom-style:dotted;border-bottom-color:点線の色;}/*←リンクに触れたとき下に点線がでる*/a


a:hover{border-bottom-width:1px;border-bottom-style:dotted;border-bottom-color:色;border-top-width:1px;border-top-style:dotted;border-top-color:色;} /*←リンクに触れたとき上下に点線がでる*/a

a:hover{text-decoration:line-through;} /*←リンクに触れたとき真ん中に線がでる*/a

a:hover{text-decoration:overline underline line-through;} /*←リンクに触れたとき上下と真ん中に線がでる*/a

a:hover{border-width:1px 1px 1px 1px;border-style:solid solid solid solid;border-color:線の色;} /*←リンクに触れたとき線で囲む*/


a:hover{border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;border-color:点線の色;} /*←リンクに触れたとき点線で囲む*/


a:hover{border-width : 3px 3px 3px 3px;border-style : double double double double;border-color : 2重線の色;}/*←リンクに触れたとき2重線で囲む*/


a:hover{text-decoration:none;

visibility:visible;float:none;clear:none;position:relative;top:2pt;left:2pt;}/*←リンクに触れたとき文字が凹む(数字を変更すれば凹み具合も変わります)*/

■カーソルの変更の仕方


a{cursor: help; /*カーソルの変更はこれを追加するだけ!ちなみに、これはマークです*/}


場所は、↓「header 」「font-information 」↓どちらの部分でも追加OKでした。


/* ----------------------- header ----------------------- */

a{cursor: help; /*カーソルの変更はこれを追加*/}



/* --------------------- font-information --------------------- */
a{cursor: help; /*カーソルの変更はこれを追加*/}


●他のカーソルの種類●(マウスを乗せてみてね♪)

a{cursor: カーソルの種類}

  help;
  crosshair;
  move;
  n-resize;
  e-resize;
  ne-resize;
  se-resize;
  text;
  wait;


まだまだ伝授したいことはたくさんあるんだけど・・・

とりあえず今日はこの辺で^^


まとめて色んな講座を見たい方はこちら からどうぞ♪



↓ クリックしてくれたら嬉しいですo(*^-^*)o ↓

子育て日記Ranking  COCO-RANKING  0574ママ部門
いいね!した人  |  コメント(24)  |  リブログ(0)

テーマ:

質問が多いので、少しだけCSS編集の仕方(基本編?)を明記しておきます。

ココに書いた分を変更するだけでもオリジナルなページになりますよ(^ー^)b

■スクロールバーをオシャレに変身!?

下記の文字を追加すると好きなスクロールバーに変更すること出来ます♪

どの場所に追加するのが正しいのか知らないのですが、とりあえず私は↓下の部分に追加しました。

/* --------------------- font-information --------------------- */
html, body {
scrollbar-arrow-color: #FF9999; /*矢印の色*/
scrollbar-track-color: #FFE4E1; /*トラックの色*/
scrollbar-face-color: #FFFFFF; /*表面全体の色*/
scrollbar-shadow-color: #FFFFFF; /*右端・下端の明るい色*/
scrollbar-darkshadow-color: #FF9999; /*右端・下端の暗い色*/
scrollbar-highlight-color: #FF9999; /*スライド部分の色*/
scrollbar-3dlight-color: #FFFFFF; /*上端・左端の色*/
}
↑このスクロールバーは、私が前回設定していたピンク色基調のままになっていますので、赤字部分をご自分の好きな色に変更して下さいネ!
私は、こちらのカラーサンプル をいつも参考にしてます♪
色の後に説明つきですが、そのままコピー&ベーストOKです☆⌒(*^-゜)b
後でまた変更したいとき用に残しておくと便利ですし^^

 

ちなみに、たみきさん のブログで紹介されていた、スクロールバー専門街 は必見かも♪

 

■背景の壁紙指定&トップのイラストを変更する

/* ---------------- background-color-control ---------------- */
body{
 background-image:url(http://~となっているココに壁紙にしたいURLを入力);
 background-attachment: fixed;
}
#frame {
background-color: #FFFFFF; /*←トップ部分の背景色変更はココ*/
}
#subFrame {
}
#header {
background-image: url(http://~のココにトップに入れたい画像のURLを入力);
background-repeat: no-repeat; /*←画像のくり返し表示をno-で禁止しています。繰返し表示したい場合は、no-を消してください*/
background-position: center left; /*←画像の位置を指定。左はleft・中央はleft部分消す・右はright*/
}
#wrap {
background-color: #FFFFFF; /*←サイドバー部分の背景色変更はココ*/
}
#main {
background-color: #FFFFFF; /*←記事部分の背景色変更はココ*/
}
#sub_main{
}
#firstContentsArea {
}
#subFirstContentsArea {
}
/* ------------------- menu_element_basis ------------------- */

 

■画像表示の応用編

background-repeat: no-repeat;  ← 画像を繰り返さない場合

background-repeat: repeat;    ← 全面に繰返し表示する

background-repeat: repeat-y;  ← 縦に繰返しする

background-repeat: repeat-x;  ← 横に繰返しする

 

 

■リンク色を変更する。(かなり雰囲気変わりますよw)

 /* ----------------------- common ----------------------- */

 

 ─ 上文省略しています。変更するのは下の部分のみなので。 ─

 
img {
border: 0;
}
a {
color: #FF0000; /*←リンク色の変更はココ*/a
}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: underline}
input,textarea{font-size:12px}
ul,ol,dl,li,dt,dd{
list-style-type:none;
}
/* ----------------------- header ----------------------- */

 

※リンク部分をもっとオシャレにするワザは、こちらで詳しく紹介中♪


■文字の色や大きさを変更する

/* --------------------- font-information --------------------- */
body {
color: #999999; /*←記事本文の色変更はココ*/
font-size: 11px;
}
#header h1 {
font-size: 25px; /*←ブログ名の大きさ変更はココ(数字が大きいほど文字は大きい)*/
line-height: 200%;
}
#header h1 a {
color: #666666; /*←ブログ名の色変更はココ*/
}
#header h2 {
color: #909090; /*←サブタイトルの色変更はココ*/
font-size: 11px; /*←サブタイトルの大きさ変更はココ(数字が大きいほど文字は大きい)*/
font-weight: normal;
}
.menu_title {
font-size:12px;
font-weight: bold;
}
.mainMenu {
color: #999999; /*←サイドバーの文字色変更はココ*/
font-size: 10px; /*←サイドバー文字の大きさ変更はココ*/
line-height: 130%;
}
#reader dd {
}
#calendar table {

            ─ 以下の文字省略^^; ─

/* ----------------- background-color-control ----------------- */

 

 

■ブログタイトルの位置変更など

/* ----------------------- header ----------------------- */
#header{
display: block;
width: 800px; /*←ブログ名のあるトップ部分の幅を調節できます*/
height: 170px; /*←ブログ名のあるトップ部分の高さを調節できます*/
padding-bottom: 5px;
}
#header h1 {
margin-bottom: 10px;
padding-right: 26px;
padding-top: 38px;
text-align: right; /*←ブログ名の位置を調節できます(右はright・中央はcenter・左はleft)*/
}
#header h2{
padding-right: 26px;
text-align: right; /*←サブタイトルの位置を調節できます(右はright・中央はcenter・左はleft)*/
}
/* ----------------------- footArea ----------------------- */

 

※色の変更はカラーサンプル を参考にどうぞ♪

 

※スキンによって表示が異なるかと思いますので、これは鳥の一例です。


■CSS講座NO2(リンク部分をオシャレに♪)
■CSS講座NO3(記事の枠を好きな色に変更する!)UP!
■アメブロ版初心者向け講座などの案内板はこちら♪


* 少しでも参考になった方はクリックしてくれると嬉しいです *
↓     ↓     ↓
子育て日記Ranking  COCO-RANKING  0574ママ部門

ちなみに、素材探しをしたい方は0574ランキングサイトが最適ですよん↑
いいね!した人  |  コメント(175)  |  リブログ(0)

テーマ:

4/17日追記:【改訂版】

 ブログペットの設置方法/アメブロ限定

 

1.BlogPet へアクセスし、新規登録をします。

2.MyClip へアクセスし、新規登録をします。

3.あめまにゅ を見ながら、プラグインの追加で、MyClipを追加します。

4.MyClip表示設定NEW装の空欄にBlogPet ペット設定の一番下にある■コード生成 をそのまま貼り付けます。

5.MyClipのTOPページ で、記事の右端にある丸いClipを一つクリックして、切り替わった画面の追加を押すと自分のブログにブログペットが表示されます。

 

<重要な注意>

 ※記事は経過時間(最高設定48時間)が過ぎると消えてしまい、ブログペットも消えてしまうそうです!でも、慌てずにまた5番の『MyClipのTOPページで、記事の右端にある丸いClipを一つクリックし、切り替わった画面の追加を押すと、自分のブログにブログペットが表示されます。 』を再度行えば、また新たにブログペットが表示されるそうです(〃⌒ー⌒〃)

 【経過時間10日の設定方法】

MyClip表示設定 の画面右上設定方法をProに変更する をクリックしProに変更した後、

Clipフォーマット内の

NEW second=000000 部分の数字を

         ↓

NEW second=864000

に設定すると10日間ブログペットが表示されます!

 

※また、二個以上の記事をClipすると、二匹ペットが設置されてしまいます。

  これは、Clipの一覧で削除すれば、また一匹に戻ります。

 

ちょっと面倒でも、設置したいって方はこの方法でお試しくださいね☆

 

こんな面倒な方法しなくても・・、普通の設置ができるようになれば一番いいのに・・・・ね。

なお、この件に関しては私は試しておりませんので、サポートできません。

情報元は、miniminiさんtenhoさん です。

どうもありがとうございましたm(_ _)m


アメブロがリニュされてから、ブログペット も設置できるようになったみたいなので、早速サイドバーに設置してみた☆以前ライブドアでしていたブログではウサギを飼っていたんだけど、新たにペットの種類も増えているので、犬を選んでみたよw

ブログペットって何??って方は、まずこちら を見てね♪

でも、ブログペットを設置するためには、忍者ツールズアクセスカウンター を設置しないとダメみたい・・。それはいらないって思ったんだけど、仕方ないので設置したさ^^;

【忍者ツールズアクセスカウンターの設置の仕方】
1.忍者ツールズ で管理IDを取得し、アクセスカウンターをレンタルする。
 (そこにカウンター設置用のタグソースが書かれています。)
2.アメブロ管理画面のサイドバーの設定プラグインを追加をクリック。
3.忍者ツールズアクセスカウンターを選択し、空欄にアクセスカウンターのタグを入力する。
4.追加ボタンを押し、保存する。
5.デザインと機能サイドバーの配置で「忍者ツールズ アク…」と書かれているカウンターを好きな場所に移動させて終わり。

4/8 追記
私が説明するまでもなく・・、あめまにゅ にてプラグインの追加方法が公開されましたので、ぜひチェック!

【ブログペットの設置の仕方】

1.こちら でブログペットの新規登録をする。
2.取得したブログペットのコードを、アクセスカウンターのタグの上に入力して設定をクリックする。

3.サイドバー設定画面で保存する。

4.サイドバー配置画面で再度保存してOK~♪

 

【ブログペットの背景配布サイト】

BlogPet背景工房  ・ NEOといっしょ  ・ 絵・と・せとら

 

※エラーの対処法など・・

●先に設置した忍者ツールズアクセスウンターの種類によってはエラーになることもあるみたいなので、その時は別の種類を選び直してみて下さい。

●また、サイドバーの設置する位置によってもエラーになる場合があるらしいので、色々移動させて試してくださいね☆⌒(*^-゜)b

●カウンターがベットの横に出てしまう場合、カウンタータグとペットタグの間に、<br>タグを入力してください。

●配置を真ん中にしたい場合、全てのタグの前に<center>を入力。一番最後に</center>を入力。


皆さまもぜひ設置してみませんか~?

 

このブログペットにはアクセス解析もついてるので便利ですよんw

あと、ペットをクリックするとお喋りしてくれるので、構ってあげてね☆

 

【タイトルバナ―について】

私のところを見てもらったら分かると思うけど、ペットの上にタイトルバナ―を貼り付けることも可能です。スキンにあわせて自作しました^^;

 

<自作バナーの貼り付け方法>

ブログペットタグを入力した上にIMGタグを入力するだけ~~!!

バナーを作成するのは面倒だけど、貼り付けは超簡単!

例)<img src="ココにバナーのURL" border="0"><br>ココからペットのタグ

※ちなみに、バナーなしで文字入力もOKですよんw

 


※<4月11日追記>※
先日は↑この方法で簡単に設置できたのですが、今試してみると、私も設置できませんでした><

 

もしかしたらアメブロ内で何か操作されたのかもしれませんね・・(汗

それとも、トラバもできない状態なので、サーバーエラーなのか・・

 

なので、新たに試した方法を説明しておきます。

 

■これが元のペットの貼り付けコード(数字は適当に書いてます^^;)

<script language="JavaScript" type="text/javascript" src="http://www.blogpet.net/js/1a2e345a6bc789a123e4aa5e678d123.js " charset="Shift-JIS"></script>

 

【アメブロのプロフィール欄に貼り付けるタグ】(EMBEDタグを使用)

<embed src="http://www.blogpet.net/usa.swf?username =ココに赤字部分の英数字を入力&tseconds=" name="blogpet" width="130" height="200" type="application/x-shockwave-flash" /></embed /> 

 

そのままコピペOKです♪

赤字部分の英数字は、自分のブログペットのコード生成部分から抜き取って入れてくださいね。その際、( / )や( .)が入らないように注意!

 

例)<embed src="http://www.blogpet.net/usa.swf?username=1a2e345a6bc789a123e4aa5e678d123&tseconds =" name="blogpet" width="130" height="200" type="application/x-shockwave-flash" /></embed />

 

管理画面の設定→ユーザー情報プロフィール欄に貼り付けて完了☆

 

(余談)

EMBEDタグとは・・、音楽などを鳴らすことの出来るタグです。

なので、ブログにBGMを設置することも可能かもしれませんね(〃⌒ー⌒〃)

まぁ、重くなってしまうので私は設置しませんが、興味ある方はご自分で調べて設置してみてね。

 


* よかったらRankingクリックしてねん♪ *
↓     ↓     ↓
子育て日記Ranking  COCO-RANKING  0574ママ部門
いいね!した人  |  コメント(147)  |  リブログ(0)

テーマ:
やーっとIMGタグが解禁になりましたね!
これは結構便利なので首をながーくして待っておりました♪
でも、初心者の方にとってはまた??が増えるだけですよね。そういう方のために、簡単に説明&使い方を書いておきます。

まず、IMGタグとは、記事の中に画像を表示させるためのタグのことです。

1.管理画面の画像フォルダにまず画像をUPさせる(携帯orPCから)
2.記事に載せたい画像を選び、その上でマウスを右クリック
3.下の方にある『プロバティ』をクリック
4.その中の『アドレス(URL)→http://~』をコピーする
5.<img src="ココにコピーした画像のURLを入力する" border="0">
6.↑5のタグを記事内の好きな場所に貼り付けでOK!

別に、わざわざ↑このタグを使わなくても、携帯から画像を送信したり、パソコンから画像を取り込んだりすると簡単に記事に表示することが出来ますので、普通には必要ありませんけどね~。応用したい人向けかな^^
同じ記事内に複数の画像を表示したい場合や、画像を記事の真ん中や下の方へ持ってきたい場合に便利ですね♪
複数載せたい場合は、<img src="ココに画像のURL" border="0">を好きな場所に追加するだけでOK!

記事の途中や下の方の真ん中など場所指定したい場合は↓こちら
■中央寄せ<center><img src="ココに画像のURL" border="0"></center>
■左寄せ<mg src="ココに画像のURL" border="0" align="left">
■右寄せ<img src="ココに画像のURL" border="0" align="right">

■ さらに応用編にもトライしてみる?? ■
↑この画像の上にマウスを載せてみてください。何か文字が出てきましたでしょう?
そういうのをしたい場合はIMGタグの中に→title="ココに好きな文字"を追加してください♪
例)<img src="画像のURL" border="0" title="ココに好きな文字">

※また、画像にリンクを貼ることも可能です♪


これはタグ書かなくても分かりますよね・・?
分からない場合はこちらを参考にしてね♪


■ 追記
↓このように画像を2枚横に並べることも可能です♪

※但し、大きい画像の場合は無理です。

タグ例)
<img src="1枚目画像のURL" border="0" align="left"> <img src="2枚目画像のURL" border="0">

※Macの方4姉妹ママさんの記事を参考になさってください。
いいね!した人  |  コメント(101)  |  リブログ(0)

テーマ:
リンクの仕方を教えて欲しいと言われましたので、記事にて紹介しておきます。他にも分からない方がいらっしゃるかも・・・なので。

【アメブロ内でのリンクの仕方】

<タグの非表示画面での場合>
1.管理画面→「新しく記事を書く」をクリックで開く
2.本文を書くスペースの上にある「リンク」をクリック
3.リンクの追加と書かれている小窓が出てくるので
  テキスト部分にはリンク先の文字を入力。
  URL「http://   」と書かれているところにリンク先のアドレスを入力。
4.最後にリンクをクリックすると、記事内に自動でリンクが張られています。

例)人気blogランキング ←こんな感じになっています。
※タグの非表示画面では、実際には飛べません。

<HTMLタグを表示画面の場合>
<a href=" ココにURLを入力" target="_blank">ココにリンク先の文字</a>

例)<a href="http://happy-magic.ameblo.jp/" target="_blank">魔法のことば</a>       結果はこんな感じ→魔法のことば

【画像にリンクを貼る場合】
←同窓
例)<a href="ココにリンク先のURL"><img src="ココに画像のURL" border="0"></a>

←別窓
例)<a href="ココにリンク先のURL" target="_blank"><img src="ココに画像のURL" border="0"></a>

※2番目の画像をクリックしていただくと分かるかと思いますが、
<target="_blank">タグを追加すると、別窓で開く設定になります。


【オマケ】URLなどコピーの仕方が分からない人のために…
http://happy-magic.ameblo.jp/
↑このURLの文頭にカーソルを合わせると( )になりますよね?そこで「左クリックを押しっぱなし」にして右へ進んでみてください。
すると、色が反転して紺色になりましたでしょ?
次にその反転したURLの上で「右クリック」して「コピー(C)」をクリックします。
そうすることによってコピーされています。

次に、記事を書く本文でマウスを「右クリック」して「貼りつけ(P)」をクリックします。

はい、それでコピー&ベーストの出来上がりです♪

※自分のブログのURLをコピーしたい場合は、右上にアドレスが表示されている欄がありますよね?そのURLの上をマウスでクリックすると色が反転されますので、後は同じ仕方でOK!

いいね!した人  |  コメント(44)  |  リブログ(0)

テーマ:
ヾ(≧∇≦)〃きゃっ ジャンル別で1位なんかになっちゃいましたっ☆
一度は経験してみたかったので、嬉しいです♪
←これぞ記念に画像を撮っておくべきっしょ♪


せっかくなので?、少しは誰かの役に立つ事でも書いてみましょうか。。
このランキング画像を保存しているように、スクリーンショットの撮り方を教えて欲しいというのというのも時々言われますので、ちと説明をば。知ってる方は多いと思いますが、なかには知らない方もいると思いますので・・
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

1.まず、撮りたい画面を表示させます。

2.キーボードにある左下「Alt」を押しながらと右上「PrintScreen」キーを押すことによって現在画面に表示されている状況をクリップボード(コピー状況を記録するもの)に貼り付けられます。
(見た目には何も変わらず分かり難いですが、ちゃんとコピーされています。)

3.「スタート」→「プログラム」→「アクセサリ」→「ペイント」の手順でペイントを開きます。Windowsの種類によってはペイントの場所が多少違うかも知れません。

4.「ペイント」の画面が開いたら、上のメニューから「編集」→「貼り付け」を選択します。その際、「クリップボードの絵はビットマップより大きいです。ビットマップを大きくしますか?」という案内が出た場合は「はい」をクリックします。

5. 画像が貼り付けられたら、メニューから「ファイル」→「名前を付けて保存」を選択します。好きなファイル名をつけて好きな場所に保存してください。そのままの場合はマイドキュメントに保存されることになるかな?
※ファイルの種類は「JPEG形式」か「GIF形式」を選択します。私は「JPEG形式」に保存することが多いです。

6.保存された画像をアップロードでアップすればOK!

※Macの場合は触ったことないので、全然分かりません。ごめんなさい。
いいね!した人  |  コメント(38)  |  リブログ(0)

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。