アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！ -190ページ目

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 188 | 189 | 190 | 191 | 192 | 最初次のページへ >>

はてなスター

はてなスターをつけてみます
入院中に考えていたことです・・・

これとはてなブックマークとyahooブックマークを考えていて

yahooブックマークはサイドにつけましたがはてなブックマークは・・・難しいです・・？

はてなスターってなに？や基本的な設置方法は

はてなスター日記

はてなスターをブログに設置するには

http://d.hatena.ne.jp/hatenastar/20070707 　も参考にして下さい

が・・・　なぜ？アメブロの設置方法が書いてないのでしょう？

※トークンの設定を行うとコメント機能が可能のようですが今回は使っていません

フリープラグインにこのままコピペするだけです

container: 'h3.title'　の部分がAddボタンと★をつける場所になります

entry の中の　h3.title　ですから・・記事タイトルの後につきます
私の場合は記事タイトルの後ろにつけると星が付いた場合タイトルが2行になったりして表示が崩れるとイヤなのでテーマの後につけています
その場合は　container: '.theme'　になります

日付の後なら　container: '.date'　とか・・・・

※Addボタンをもう少し離したいのですが・・・今のところ出来ません？

Addボタンをクリックすると★をつけることが出来ます

一人でいくつも付けられますので気に入った記事でしたらたくさん付けてください

ただ・・星にマウスをあわせるとＩＤが表示されますので自作自演は恥ずかしいです

星をつけるには、はてな(注1)の登録（無料）とログインが必要です

星が16個以上になると省略数字で表します

※左右の星2個+14で16個になります

Addボタンと★の画像も変更できます

コチラはＣＳＳに

/* Addボタンの画像をurl()の中に指定します */
.hatena-star-add-button-image {
background-image: url( 画像のＵＲＬ );
}

/* ☆の画像をurl()の中に指定します */
.hatena-star-star-image {
background-image: url( 画像のＵＲＬ );
}
/* 省略数字のスタイル */
.hatena-star-inner-count {
color: #4dac26;/* 文字色 */
font-weight: bold;/* 太字 */
font-size: 2.0em;/* サイズ */
padding: 0 8px;/* 左右にスキマ */
}

※font-size: 2.0em;　とか　font-size: 150%; とか　font-size: 12px;　のように指定下さい

　emはフォントサイズを何倍・・・　2.0em は2倍に　1.2em なら　1.2倍に　0.8em は0.8倍に

　font-size: 2.0em; と　font-size: 200%;　は、同じサイズになります

　font-familyを使って書体変更も面白いですね

　↓下の画像の中で指定しているサイズは　font-size: 2.0em; です（18の数字のサイズ）

アメーバ画像が大きいので数字も大きくしています　画像に合わせて設定下さい

画像を変更してみました・・・・

省略数字をクリックすると展開されます

★（この場合は画像を変更していますのでアメーバですが）の上にマウスをあわせると星をつけたたがわかります

また・・★を削除する場合は　自分の付けた星の上に5秒マウスをあわせておくと

↓下のような窓があらわれて削除が可能になります

注1　☆を付けるためにはログインが条件ですが

はてな以外でもOpenIDでの認証を提供しているサービスにログインしていれば星をつけることが出来ます

livedoor 　　　　 LiveJournal 　　　　 TypeKey 　　　　 Vox

気に入った記事や参考になった記事がありましたら

テーマ横の　　を押して　　をつけてみてくださいな

一人でいくつも付けられますが・・・たくさんつけるとはずかしいですよ・・・　たぶん？

※アメンバー限定記事は記事のURLが違ってきますから★をつけても表示されません

自由に使えるはてなスター素材

アメブロによってタイトルにまでgoogleのセクションターゲットが付いてしまいました・・・

<h3 class="title">はてなスター</h3>

なので・・・

本当はタイトルだけが表示されるはずなのに・・・・余計なものまで・・・

ピグ画像・・・

みなさまピグをブログに貼り付けていますが・・・

画面上で右クリック　→　拡大する　でドンドン大きくすることが出来ます

画像を撮る場合には便利です

Flashなんで拡大してもキレイです

あとは　アメーバピグの画像を撮りたい　を参考に加工してください

ご本人の希望によりモザイクをかけさせていただいております

CSS 検索ボタンをかっこよく・・・

前に　ＣＳＳ　検索窓をかわいく・・・　ボタン　をやりました

そのときに・・ボタンに画像を使う場合・・・って説明しましたが

詳しく説明してって～リクです

・・・じつは・・・前の記事で出来ますって書いておいて・・・

そのあと忘れたころに質問が来て「出来ません！」って断言してしまったんです　m(_ _)m

すみません・・・はじめに書いたように出来ます・・

で、・・・・　検索ボタンをかっこよく・・・

元のボタンのサイズが 38px × 20px ですので同じサイズで画像を作ります

サイズが大きいと検索窓の下にきたりする場合があります

38px × 20px

　　　　　　　　　　　　

　　　　

　　　　　　　　　　　　

　　　　　　　　　　　　

　　　　　　　　　　　　

　　　　　　　　　　　　

　　　　　

面倒になってなんか同じのばかりになってしまいました・・・

みなさまはタイトルの通りカッコイイボタンをつくってください

自分で画像を作ったり・・上からコピーしたりして自分の画像フォルダにアップしてから

画像のとりかたは　画像のＵＲＬって・・・？

マウスオーバーは必要ないし・・・画像も１枚で充分ですって～方は・・

#search .searchbtn{
width:38px;/*画像の幅*/
height:20px;/*画像の縦*/
background:url(画像のＵＲＬ) no-repeat;
border:none;
text-indent:-9999px;
}

普段のボタン画像とマウスがのった時用の画像の２枚を使います

#search .searchbtn{
width:38px;/*画像の幅*/
height:20px;/*画像の縦*/
background:url(画像のＵＲＬ) no-repeat;
border:none;
text-indent:-9999px;
}
#search .searchbtn:hover{
background:url(マウスオーバー時の画像のＵＲＬ) no-repeat;
}

IE6は疑似クラス :hoverに対応していないため変化しません

次は１枚の画像でマウスオーバーまでやります・・・

こちらの方が先に画像が読み込まれていますので切替がスムーズです

上（普段の画像）と下（マウスがのったときの画像）同じサイズの画像をつなげて１枚の画像にします

38px × 40px

　　　　　　　　　　　　

#search .searchbtn{
width:38px;
height:20px;/* 画像の縦の1/2 */
background:url(画像のＵＲＬ) no-repeat;
background-position:0 0;
border:none;
text-indent:-9999px;
}
#search .searchbtn:hover{
background-position:0 -20px;
}

※このブログはこのタイプです