041234567891011121314151617181920212223242526272829303106



今年も多摩川土手をオレンジに彩るタチバナモドキ

今日の多摩川は朝方曇っていましたが、徐々に晴れていい天気となりました。

今年も多摩川土手のあちらこちらでオレンジ色が目立っています
タチバナモドキの実です。

1049q1.jpg

1050q1.jpg

1056q1.jpg

この実を食べに野鳥が来てくれるといいが・・・、

旨くないのかな・・・、まだあまり見かけません。

以上、多摩川土手でした。



スポンサーサイト
【 2016/11/09 (水) 16:34 】 FC2ブログサイトの小技 | TB(-) | CM(0)

シジミ貝のような・・・、ベニシジミ

今日の多摩川は晴れで、暑い一日となりました。

多摩川土手で『ベニシジミ』見つけました。ヒメジョオンの花をしきりに
突いてました。ヒメジョオンの花の密は美味しいのかな・・・

8173p1.jpg

8172p1.jpg

8257p1.jpg

ベニシジミの名前は、羽を閉じている時の様子がシジミ貝の内側に
似ているところから付けられたようですが・・・

シジミ貝の内側ってこんなでしたか・・・・・?

以上、多摩川土手でした。



【 2016/06/17 (金) 18:25 】 FC2ブログサイトの小技 | TB(-) | CM(0)

リンク画像のマウスオーバーで半透明化!

画像を配置し、その画像をクリックすることで別ページにリンクするような場合、
画像の上にマウスを合わせますが、その際にリンクがかかっていることを知らせるために
画像を半透明にする場合があります。その際の設定方法です。

いろいろ方法はあると思いますが、3つ紹介します。

 (1) CSS(スタイルタグ)、HTMLで定義する
 (2) HTMLタグだけで定義する
 (3) jQuery(Javascript)、HTMLで定義する



(1)CSS(スタイルタグ)でマウスホバー時の画像を半透明にする


スタイルタグとHTMLで定義し、リンク画像にマウスを乗せると、
画像を半透明にする。

  (サンプル:右画像にマウスを置いてみてください)

先ず、下記のスタイルタグをページのHEAD部分に設置する。(テンプレートの設定)
数値は好みで設定してください。

smp1.jpg

 

<style>
a img.mouselink{
background:none!important;
}

a:hover img.mouselink{
opacity:0.4;
filter:alpha(opacity=40);
-ms-filter: "alpha( opacity=40 )";
background:none!important;
}
</style>
</head>


※ opacity:0.4、opacity=40は透明度40%を意味します。必要に応じて変更してください。
※ 「mouselink」はクラス名です。


次に、表示したい画像の位置に下記のタグを挿入する。

<a href="#"><img src="画像絶対パス" class="mouselink" /></a>





(2)HTMLタグで、リンク画像にマウスを乗せると、画像を半透明にする。
 
HTMLだけで、定義します。 先ず、下の画像2種類、それぞれマウスを置いてみてください。

smp1.jpg  smp2.jpg
 

<a href="#"><img src="画像絶対パス1" width="200" 
onMouseOver="this.src='画像絶対パス2'" onMouseOut="this.src='画像絶対パス1'"></a>


※「画像絶対パス2」は「画像絶対パス1」の半透明画像を準備します。
※マウスを画像に合わせて、全く別の画像を表示する場合等に便利です。
 
 
 
(3)jQuery (javascript)とHTMLで定義し、リンク画像にマウスを乗せると、画像を半透明にする。
 
先ずは、下記のスクリプトを内に設置します(テンプレート設定)。数値は好みで設定してください。
ここでは、「一瞬で半透明にする」方法と「ゆっくり半透明にする」方法が設定可能です。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script><script type="text/javascript">
<!--
$(function() {
// Fade Slow ゆっくり半透明
var nav = $('.mouselink_s');
nav.hover(
function(){
$(this).fadeTo(500,0.5);
},
function () {
$(this).fadeTo(500,1);
}
);
// Fade First 瞬時に半透明
var nav = $('.mouselink_f');
nav.hover(
function(){
$(this).fadeTo(0,0.4);
},
function () {
$(this).fadeTo(0,1);
}
);
});
// -->
</script>
</head>


※ fadeTo(時間、透明度)  時間:「ミリ秒」1000=1秒  透明度:0(透明)~1(不透明)
※ 「mouselink_s」「mouselink_f」はクラス名です。

①ゆっくり画像を半透明にさせる場合は「class=”mouselink_s”」
smp3.jpg

<a href="#">
<img src="画像絶対パス" alt="画像代替テキスト" class="mouselink_s" /></a>




②一瞬で画像を透過させる場合は「class=”mouselink_f”」
smp1.jpg

<a href="#">
<img src="画像絶対パス" alt="画像代替テキスト" class="mouselink_f" /></a>




私の経験から半透明にする場合、(1)のスタイルタグを使用したもの場合が、一番反応が良いように思います。
また、メンテナンスのしやすさでは、(1)のスタイルタグ、(3)のjQueryを使用したものが良いのではないでしょうか。
 
以上、メモです。
 
 
【 2015/04/11 (土) 16:10 】 FC2ブログサイトの小技 | TB(-) | CM(0)

FC2ブログにLightboxを設置してみました。

FC2ブログの記事書いて、画像を1-2枚、サムネイルで入れているのですが、
どうも、画像の見栄えが良くない。(写真の質の問題もありますが・・・・・)


そこで、下手な写真でもカッコ良く表示すれば、多少は良く見えるのではと思い
「Lightbox」入れて見ることにしました。


私の別のサイトでは、使用しているのですがFC2では、標準でカッコいいのが
あるだろうと思って期待していましたが、見当たりませんでした。


みなさん、自分で工夫してるんですね。仕方なく面倒ですが、自分で作業する
ことにしました。(暇ですから・・・)

【設定手順】

1.Lightbox 公式サイトよりダウンロードする。

2.ダウンロードしたzipファイルを解凍する。 (version: 2.7.1)
  解凍すると、下記のようなフォルダ、ファイルが含まれています。

css
    lightbox.css ------->①必要
    screen.css
img
    close.png -------->②必要
    loading.gif -------->③必要
    next.png --------->④必要
    prev.png --------->⑤必要
    demopage
       DS_Store
       favicon.png
       image-1.jpg
         l
       image-6.jpg
       thumb-1.jpg
         l
       thumb-6.jpg
js
    DS_Store
    jquery-1.11.0.min.js -------->⑥必要
    jquery-1.11.0.min.map
    lightbox.js
    lightbox.min.js ------------->⑦必要
    lightbox.min.map
index.html
README.markdown



3.解凍したファイルの中で必要な7つのファイルのみ使用します。

4.先ず、②から⑤の4つの画像ファイルをFC2へアップロードする。
  【管理画面】->【ファイルアップロード】   (サムネイル設定は不要です)

  アップロードした後、保存された場所をメモする 
  (例:http://blog-imgs-71.fc2.com/r/k/7/rk707/close.png)
   ※各サイトで異なると思います。

5.①の「lightbox.css 」スクリプトを変更する。 
  『url(../img/』の部分を変更します。全部で8か所あります。
  (4.)でメモした保存場所に変更する。

    3行目 4か所
   82行目 1か所
  113行目 1か所
  131行目 1か所
  195行目 1か所

     変更例: 『 url(../img/close.png) 』
               ↓↓↓
           『 url(http://blog-imgs-71.fc2.com/r/k/7/rk707/close.png) 』

6.スクリプトファイル名の変更
  ⑥と⑦2つのファイルの名前を変更します。
  (FC2では、アップロードできるファイル名に制限があり "." は1つだけのようです)

  ⑥ jquery-1.11.0.min.js ===>jquery-min.js
  ⑦ lightbox.min.js  =====>lightbox-min.js
  
7.スクリプトファイルのアップロード
  名前を変更した⑥、⑦と①の3つのスクリプトをアップロードします。
  【管理画面】->【ファイルアップロード】   (サムネイル設定は不要です)

  ① lightbox.css
  ⑥ jquery-min.js
  ⑦ lightbox-min.js

  アップロードした後、保存された場所をメモする

8.使用しているテンプレート HTMLに追加変更。
  ・・・・内(の前あたり)に、以下を追加してください。

  "http://・・・・・・・・・” の部分は、(7)でメモした保存場所に変更してください。

<!-- [Lightbox] -->
<link href="http://blog-imgs-71.fc2.com/r/k/7/rk707/lightbox.css" rel="stylesheet" />
<script type="text/javascript"
src="http://blog-imgs-71.fc2.com/r/k/7/rk707/jquery-min.js"></script>
<script type="text/javascript"
src="http://blog-imgs-71.fc2.com/r/k/7/rk707/lightbox-min.js"></script>
<!-- /[Lightbox] -->



9.環境設定の変更
  【管理画面】ー>【ブログの設定】->【投稿設定】を開き、
  項目「画像のリンク」の「アルバムページにリンクさせて」を「元画像にリンクさせて」に変更します。

lightbox-1.jpg


以上で、導入・設定は終了です。 
後は、実際の記事を書く際の画像挿入で、タグを定義します。


以下は、記事を書く際に画像を「サムネイル」で投入し、タグの一部を変更します。


タグ 「a href=”・・・・"  」内の「target="_blank"」を
data-lightbox="group" data-title="マルタ 釣ったぞー"」へ変更する。

「data-lightbox="group"」のgroupはページ内の画像グループ名。 半角英数字で
定義する。ページ内の画像は同じ名前にする。
また、「data-title="画像のキャプション"」を定義すると画像表示と一緒にキャプションも
表示できる。 なくてもOK。


<a href="http://blog-imgs-71.fc2.com/r/k/7/rk707/65-w600.jpg" target="_blank">
<img src="http://blog-imgs-71.fc2.com/r/k/7/rk707/65-w600s.jpg"
alt="65-w600.jpg" border="0" width="300" height="225" /></a>
                   
                      ↓↓↓↓↓

<a href="http://blog-imgs-71.fc2.com/r/k/7/rk707/65-w600.jpg" data-lightbox="group"
data-title="マルタ 釣ったぞー">
<img src="http://blog-imgs-71.fc2.com/r/k/7/rk707/65-w600s.jpg"
alt="65-w600.jpg" border="0" width="300" height="225" /></a>



以上で導入・設定・記事内画像設定の手順終了です。 実例はこちら=>

※Lightboxが正常機能しない場合:
・(5)のlightbox.cssの変更は、間違いないか。
・(8)テンプレートに追加したリンク先のURLは間違いないか。また、位置は問題ないか。
・(9)で環境設定変更する前と、後では画像のリンク先が異なるので注意。
 (アルバムのリンク先と元画像のリンク先は異なるので注意)
・まれに、他のスクリプトと相性が悪い場合がある。


本日以降の、画像表示はLightboxを使用する予定です。
昨日までの過去記事内の画像表示は、FC2標準です。    

あしからず。


参考にさせていただきました、「アジア旅行とモバイルとネコのつぶやき」サイトさん、感謝します。

 
【 2015/04/05 (日) 10:53 】 FC2ブログサイトの小技 | TB(-) | CM(0)

FC2 tableタグで表作成


FC2 ブログの記事内でTABLEタグを使用して、以下のような表を掲載したい場合、通常の記述で
定義すると表の前に大きなスペースが発生する場合があります。これを回避する方法をメモして
おきます。


項目1 10,000円
項目22,000円
項目33,000円



(1)基本的なHTMLです。通常ホームページ作成等では、以下のようなタグ毎に分かりやすく
   行を変えて記述をすることが多いですが、この場合、FC2のブログ記事では、表の前に
   スペース(20行前後のブランク行)ができる場合があります。



<table border="1" width="400">
<tr>
<td>項目1 </td>
<td width="200">10,000円</td>
</tr>
<tr>
<td>項目2</td>
<td width="200">2,000円</td>
</tr>
<tr>
<td>項目3</td>
<td width="200">3,000円</td>
</tr>
</table>



(2)表の前に10行前後のブランクを消すには、タグとタグの隙間を空けない下のような記述にする。
   要するに、隙間を空白行として認識するようなので、隙間を空けず、詰めて記述すればOKのようです。


項目1 10,000円
項目22,000円
項目33,000円



以上、忘れっぽい私のためにメモしておきます。
 
 
 
  
【 2015/03/29 (日) 07:49 】 FC2ブログサイトの小技 | TB(-) | CM(0)


 
スポンサーリンク
検索フォーム
リンク
ブロとも申請フォーム
QRコード
QR
スポンサー