Google Web Fonts

Fonts-Ennobled Pet

Fonts-CameoAntique

Fonts-Frazzle

Fonts-Peeps

さて、これをご覧いただいてる皆様にお尋ねします。
↑ここに書かれてある文字……どんなふうに見えますか?

WebFonts04.gif私が今使っているパソコンでは①のように見えているのですが、同様に見えている方はいらっしゃいますでしょうか?
多分ほとんどの方が②のように見えていると思います。
もしも全てのフォントが表示されていて①のように見えている方がいらっしゃるなら、私、お友達になりたいわ~(#^.^#)
かなりのフォントフェチのお方かと……。

あ…話が横道にそれてしまいそうですので、本線に戻します。

HTMLでいろんなフォントを指定したとしても、見ている側のパソコンにそのフォントがインストールされていなければ、指定したフォントを表示することができません。

例えば…この例のように、私のパソコンではこれらのフォントが入っているので自分の見ているブラウザでは表示されるから、このフォントで書いた文字を皆さんにも見ていただきたいと思って「<span style="font-family: CameoAntique">Fonts-CameoAntique</span>」←のように指定して使ったとしても、見てる側のパソコンにこれらのフォントが入っていなければ、ブラウザのデフォルトのフォントで表示されてしまいます。
ですので、②のように見えてしまうというわけです。

前置きが長くなりましたが、本題です。

こんなときに簡単で便利なのが「Google Web Fonts」。


Web Fonts-IM Fell English

Web Fonts-Reenie Beanie

Web Fonts-Tangerine

↑これはどんなふうに見えていますか?
WebFonts01.gif←きっとこんなふうに見えてるのではないか…と思うんですが、いかがでしょうか?
(ひょっとしたらIEのバージョンによっては見られないかも? IE8で確認すると表示されず、しかしIE9で確認すると表示されています。)

これは「Google Web Fonts」を使っているので、それぞれのパソコンに依ることなく表示されるというわけです。
(ブラウザによっては表示されなさそう……(T_T))

以下導入手順です。

» 続きを読む…

ロールオーバー効果

【備忘録】

一部の画像(個別の画像)に簡単にロールオーバー効果をかける方法。

CSS部分に

a img.hoverImg{
background:none!important;
}
a:hover img.hoverImg{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
background:none!important;
}
を挿入。
※「0.7」「70」の数字は透明度。
好みに応じて変更。


使い方
ロールオーバーしたい画像のタグに
class="hoverImg"
を追加。

» 続きを読む…

ブログパーツ「おきてがみ」

「こころの旅・・・日々の想い」の紅葉さんのところで「おきてがみ」というブログパーツを知りました。
クリックするだけで(最初はURLなどの登録が必要ですが)、足跡が簡単に残せます。

おもしろそうだったので、私も設置してみました。
知らない方も足跡を残してくださったりして、とてもうれしいものです。
コメント入れるほどでもないけど、訪問したことを残しておきたい…という時には気軽に利用できるので、ブログの輪がどんどん広がっていく可能性もありますね♪

クリックして、そこに書いてある説明通りにやっていくと、簡単に足跡を残せたり、設置したりできると思いますが、またまた私の悪い(?)クセ…。
事細かに説明を入れてみたいと思います( *^艸^)

興味のある方はご覧くださいm(__)m

» 続きを読む…

コメント欄の背景(色・画像)を名前によって変える

09072701.jpgテンプレートのカスタマイズでおもしろいもの(?)を見つけました\(^O^)/

コメントを入れるとそのコメントを入れた人に応じて背景色や背景画像が変えられるというもの。

たとえば…コメントのName欄に「れん」と入れると「れん」が送信したコメントの背景には愛犬レンのイラストが出るようにしてみました。
(サンプルは過去記事のコメント欄をご覧ください。)

ブログ管理者だけでなく、常連さんにもそのようにすることができます。

» 続きを読む…

コメント欄のメールアドレスを公開しない(備忘録)

ずっと以前からコメント欄のメールアドレスのことで思っていたことがあります。

私は自分のプロバイダーからのアドレスは親しい人にしか知らせていません。
ネットショッピング、またはWEB上で使う場合などはyahooメールやGmailなどのフリーアドレスを使ったりしています。
スパムメールが多くなってもすぐにそのメールアドレスを捨てることができるようにです。

最近知ったのですが、yahooメールは「セーフティアドレス」というものも取れるようで、会員登録する場合なんか良さげですね。

私のブログにもコメントを入れてくださる時にきちんとメールアドレスを書いてくださる方もいらっしゃいます。
きっとコメント欄にメールアドレスを記入する欄があるので記入されるんだと思います。
ありがたいことですよね、こちらを信用して大切なメールアドレスを記入してくださるわけですから。

ところがスパムメールを送ってくるような業者(?)は電子メールアドレス収集ロボットを使ってはネット上に表示されている電子メールアドレスを自動的に収集しています。
これはhtmlファイル内の<mailto:>を探して収集していくそうなのです。

善意で書き込んでくださったプライベートアドレスがそういう収集ロボットに拾われて、もしその方のメールアドレスにスパムメールが入るようになったら……と思うとなんだか申し訳ない気持ちになってしまうのです。
百歩譲ってフリーメールアドレスで書いておられる方はそう心が痛みませんが(ごめんなさい)、プロバイダーのきちんとしたアドレスで書いておられる場合は特に。

けっこうプロバイダーで取っているアドレスって個人名が推測できるようなものも入っていたりして個人情報満載のような気がして……。

そこで…

メールアドレスを記入する欄をなくしたりしてみたのですが、送信ボタンを押したあとに出てくる確認画面でメールアドレスを記入する欄があり、そちらに記入すると結局公開されてしまいます。
確認画面はFC2自体の画面なのでこちらでカスタマイズすることができません。

いろいろと確認していくと、変数を触ればよいことがわかりました。

09072501.gif今までのテンプレートだとメールアドレス欄に記入してあると、名前をクリックすると記入されたメールアドレス宛にメーラーが立ち上がるようにリンクされています。

テンプレートのコメント欄を触ったのもだと、メールアドレスが入っていても公開されず(リンクもされません)、ブログ管理画面でのみ見ることができます。

今は私のブログのコメント欄はメールアドレスを記入されても、公開されないようにテンプレートを触っておきました。
(ブログ管理画面の「コメントの管理」画面では記入してくださったメールアドレスは見れるようになっています。)

備忘録として触った箇所を書いておきます。

» 続きを読む…

リンク先の記事が更新されたらマークを表示

09071101.gif私のブログでも使っているのですが、リンク先の記事が更新されたらお知らせしてくれるマーク…。
順番に訪問して拝見させていただくのが本来かとは思うのですが、ちょっと忙しい時なんか、このマークがついているところだけを先に訪問させていただいたりして…(^^ゞ

今回はこの表示方法について書いてみます。

これはFC2ではそういう機能がなく、「BlogPeople」のサービスを利用しています。

ただし…、相手先のブログの設定によっては記事が更新されてもマークがつかないこともあります。
例えば…Pingの送信先にBlogPeopleが入っていない場合はこのマークは表示されません。

09071102.gif
まずこちらからBlogPeopleの会員登録をしましょう。

会員登録をすると自分のブログ設定をしていくわけですが、そのあたりはこちらのガイドをご覧ください。
「BlogPeople 利用ガイド」

続いてリンクリストの作成です。

» 続きを読む…

新着記事に「New」をつける

今回はブログの記事タイトルの横に新着マーク(「New!」など)を表示させる方法です。

新着記事のタイトルの横に「New」マークがついているブログありますよね(#^.^#)
↓ こんなふうに…。
(それぞれの画像をクリックしてください。サンプル表示されます。左は「new!」を文字だけで表示、右は画像で表示してあります。)
new!_moji    NEW_gazou
これは「テンプレートの設定」画面で「HTML編集」を触ると簡単にできます。

<head>~</head>の間に以下(どちらか)を貼り付けます。
(よくわからない場合は</head>の直前に貼り付ければよいと思います。)

赤の太字の数字「24」は、このマークを表示させる時間です。
この場合は24時間表示されるという意味です。
12時間表示の場合はこの「24」の数字を「12」に変更します。
【文字で表示させる場合】

<script type="text/javascript"><!--
function nw(u1,u2,u3,u4) {
var today=new Date();
var nt=24; var c=new Date(u1,u2-1,u3,u4);
if (today-c<3600000*nt) {
document.write('<font color="#ff0000" size="x-small;">new!</font>')}
}
--></script>
この例では「ff0000」の部分が文字色、「x-small」は文字の大きさ、「new!」が表示させる文字ですので、お好みでこの部分を変更してください。

【画像で表示させる場合】

<script type="text/javascript"><!--
function nw(u1,u2,u3,u4) {
var today=new Date();
var nt=24; var c=new Date(u1,u2-1,u3,u4);
if (today-c<3600000*nt) {
document.write('<img src="http://blog-imgs-32.fc2.com/x/x/x/xxxxooo/12345.gif" border="0">')}
}
--></script>
こちらは、青字の部分が表示させる画像をアップロードしたURLになります。

次に下記を新着マークを表示させたい場所に貼り付けます。
<a id="<%topentry_no>" name="<%topentry_no>"><script type="text/javascript">
nw(<%topentry_year>,<%topentry_month>,<%topentry_day>,<%topentry_hour>)
</script>
HTML編集の中からタイトル部分を探し出します。

09071003.gif
私の今使っているテンプレートだと赤く囲んだ部分の直前に↑を挿入するとタイトルの前に表示され、青く囲んだ部分の直後に↑を挿入するとタイトルのあとに表示されます。

09071004.gif
テンプレート作者さんの違うテンプレートもほぼ同じで、このテンプレートの場合でもこの赤や青色で囲んだ部分の直前、直後に挿入すると表示されます。


画像の回りに枠線をつける(テンプレートCSS編)

前記事では画像自体に個別に白縁や枠線をつけましたが、CSSで設定しておくと、加工していない画像をアップロードするだけで全ての記事の画像に枠線をつけることができます。

また、過去記事の画像にも枠線がつきます。

管理ページの「テンプレートの設定」を開きます。
09062851.gifテンプレートを編集する場合は、失敗しても元に戻せるように必ず「複製」を作っておいてから編集する方がよいと思います。
おかしくなった場合、元のテンプレートにすぐに戻すことができますから。


09062852.gif
「スタイルシート編集」の一番下に下記(画像の赤枠内)のように記入します。

.entry_text a img {
background: #fff;
border: 1px solid #808080;
padding: 7px;
}

.entry_more_text a img {
background: #fff;
border: 1px solid #808080;
padding: 7px;
}

「background: #fff;」は縁の色。
「#fff」が色のコードになります。
色を変えたい時はこの「#○○○の部分を変えるとOKです。

「border: 1px solid #808080;」は枠線の幅と色。
「1px」の数字の部分を変えると枠線の幅が変わります。
「#808080」の部分を変えると枠線の色が変わります。

「padding: 7px;」の部分はこの場合は白縁の太さ。
数字を変えると縁取りの幅が変わります。

ここで注意しなければならないことは、テンプレートの作者さんによって上記画像赤枠内の黄色い線の部分の表記が違います。
この部分の表記を統一しておかないと枠線が出ません。
09062853.gif

このテンプレートではスタイルシート編集の画面をスクロールして戻ってみるとこのように書かれています。
黄色の下線部分(青色文字部分)はここの部分と同じにしないといけません。

09062854.gif

ところが…別のテンプレートでは「.entry_text」「.entry_more_text」ではなく「.EntryBody」「.EntryMore」になっているので黄色下線部分(青色文字部分)をそれぞれ「.EntryBody」「.EntryMore」としなければなりません。

スタイルシートの設定が終わったら「更新」ボタンを押しておいて下さい。
これで設定は完了です。

» 続きを読む…

わからないっ(ThickBoxとブログパーツが被る)

ThickBoxにブログパーツが被るThickBoxを設置した時、サイドバーにはブログペットなどのようなFLASHを用いたブログパーツ(?)をおいていなかったので気がつかなかったのですが、最近になりブログペットを復活させたり、別のブログパーツをおいてみると……
ブログパーツがThickBoxに重なると、ThickBoxの画像が下になり、ブログパーツが上に出てきます。

つまり……見た目…とっても変なんです…

いろいろと調べてみるとブログペットとLightBoxでの対処方法が見つかりました。
ブログペット自体に手を加える方法でした。
LightBoxもThickBoxも同じだろうと思いますので、書いてあるとおりにやってみましたが、ブログペットのソースがそこに表示されているものとちょっと違っており、どうもわからない箇所があります。

仮に、ブログペットがクリアできても、もう一つのブログパーツはソースがまた全く違っており、こちらの対処のしかたが分かりません。

ブログパーツに手を加えるのではなく、ThickBoxのスクリプト自体で改変できると、全部のブログパーツに有効になってよいのではないかな~と思い、探しまくりました。

外国のサイトも含めて、これは!と思うものを試してみましたが、残念かな…どれもうまく表示できませんでした。

もちろんうまく表示できなかったのは私の力不足です。
JavaScriptなんてチンプンカンプンなのに手を出そうとするのがおかしな話です。

この状態で満足して使ってればいいことなんですよね~。

ThickBox2ThickBoxとブログパーツが被った時はブログパーツが表示されていない部分までスクロールしてやると問題なく見ることができます。

そこでお手軽に……
ThickBoxが表示された時に上部に「サイドのブログパーツが被る時はスクロールしてください」と表示することで手を打ちました( -。-) =3

しかも!
適当に触って表示されるようにしただけなので、お詳しい方がご覧になると「なにやってんだ?」と言う感じのいいかげんなカスタマイズです…

でも、まいっか。
とりあえずそういう文言だけでも表示されるようになったし…♪

しかも……
画像をクリックして拡大表示して見る人も少ないだろうし♪

お気楽な私でございます…( *^艸^)


ブログパーツがThickBoxの下に来るよう、私でもできるようにどなたかご教授願えませんか?

背景を半透明にする

昨日テンプレートを変えてみました。

(3月20日追記:IE6.0ではきちんと表示されていないことがわかりましたので、一旦、前のテンプレートに戻しました。)

パッと見、とても気に入ったテンプレートがありましたので、早速ダウンロード。
でも、細かな部分で自分の好みでないところがたくさんありましたので、自分の好みにカスタマイズして使っています。

2009031902.jpg昨日は気にならなかったのですが、今日ふと気になり始めたことがありました。
私のパソコンのディスプレイの解像度は横幅1440。
横幅1440のディスプレイで見ると←こんな感じに見えます。

左側の花柄の背景と記事欄とがちゃんと離れているので、記事も読みやすいと思います。

2009031906.gif
ここ2ヶ月ほどの訪問者のディスプレイの解像度が気になり調べてみると、一番多いのは1024×768のもの。

1024の横幅で試して見てみると記事部分と背景が少し被りました。

2009031901.jpg←横幅800の大きさにして確認してみるとご覧の通り。
かなり被ってしまって、読みにくそうです。
そうなると、どうも気になって気になって……(^^ゞ

記事欄の背景に白色のべた塗りを持ってくると、記事の文字は読みやすくなりますが、全体の背景(花柄)が少し見えなくなり、ちょっとそれも変……。

そこで、記事欄の背景に白色のべた塗りをもってきて、それを半透明にしようと思いつきました。
CSSに
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;

を書き加えてやると半透明になり、見やすくなるのですが、写真などの画像も半透明になってしまうのよね…il||li _| ̄|○ il||li
それに…ブラウザによっても半透明にならない場合もあるし…。

元々記事欄の背景画像に半透明の画像を持ってくるようにしたらいいんじゃないか…と考えたのですが、透明度のある(透けている)画像を貼り付ける方法がわかりません。

2009031901-1.jpgそこで、調べてみると「なるほどぉ~!」と思う方法が書いてありました♪
その方法で貼り付けたのがこれ←。

ちゃんと花柄の背景も見えてるし、記事欄の文字も読みやすくなってるでしょ?
この方法思いついた人すごいっ!

2009031903.jpg
例えば…
前回使った画像を使って表示してみると……
それを貼り付けることによって、右側のチューリップのように見えるようになります。

少し白く見えるので、文字をその上にのせても読みやすくなりますね(#^.^#)

ちょっと面倒くさ~い作業ですが、簡単にできますので、以下手順を書いておきます。

使用ソフトはPhotoshop Elements 6ですが、他の画像編集ソフトでも同様にできると思います。

» 続きを読む…

TAG :
テンプレート
Photoshop
プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ