每月彙整: 2010 年 5 月

CSS 自動縮圖 添加IE6相容

今天 網頁實習課 要做圖片編輯
在想哪裡有圖片素材 就想到前幾天發的 Angel Beats 的圖片 ~
所以很順手的開啟自己的網站
學校的電腦是 IE6 的瀏覽器
開啟那篇文章 發現 圖片竟然都沒有縮圖?!
害我驚嚇了一下
都忘記IE6的相容問題
所以趕快想想有沒有辦法可以相容 還好最後有想出辦法 XD

當然這也是在 CSS 內做手腳 ~
以下簡單介紹一下唷

先說一聲 以下方法 是使用 px 固定寬度
不能用 % 來比例
所以 各位 麻煩一下 自己改成 px 吧 ~

第1步:開起之前 的 CSS 並找到 IMG{}

如果不知道怎麼找請參考舊文章css簡單又完美 的 幫blog圖片自動縮圖

第2步:貼上程式碼

width:expression(this.width>573 ? 573:true)

第3步:IE6 正常囉~

輕鬆在自己網站上添加『光盒』

先來說一下光盒是什麼
光盒是就本站上面 那幾篇 宅圖文 中有用到的
點擊圖片 會顯是 大圖片

那這有什麼好的嗎?
還記得上一篇文章嗎?(css簡單又完美 的 幫blog圖片自動縮圖)
縮圖了 然後 想讓別人看大圖怎麼半?
總不可能用個簡單連結 連到原始圖的網址吧
這樣觀看人多不方便 所以 光盒 是最佳的選擇?

接下來教大家 怎麼弄好一個光盒 在自己的網站上
當然不是每張圖都會套用到 光盒上
因為我們不可能 每張圖 都要用到光盒吧
所以 把要用光盒圖片 加上一些語法 就可以囉

第1步:下載js 和 css 檔案

載點:highslide.rar
解壓縮密碼:skybox.pp.ru

第2步:上傳到自己網站內

第3步:打開 網站的 header.html

header.html 通常是 檔頭 的檔案
也就是 放在這裡面的原始碼 在網站上 每一頁都會出現這個原始碼

當然有些網站 沒有這個
但是 總有可以新增到每頁的選項 或 檔案
把他打開來吧

第4步:插入原始碼~


<script type="text/javascript" src="highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="highslide.css" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="highslide-ie6.css" /><![endif]-->
<script type="text/javascript">
hs.graphicsDir = 'http://skyboxs.net/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.wrapperClassName = 'dark borderless floating-caption';
hs.fadeInOut = true;
hs.dimmingOpacity = .75;
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .6,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>

第5步:對圖片連結做修改

一班的圖片連結為
<img src="圖片連結" border="0">
網戰繼上次的自動縮圖 所以圖片會自動縮小
光盒是用在 標籤a上面 中間會要新增編號 不要重複
所以在圖片標籤前後加上a標籤
前面加上

後面加上

會變成圖片所顯示的樣子

CSS簡單又完美 的 幫blog圖片自動縮圖

最近在忙著搞這個東西…
因為發動畫圖片 是為了讓大家收藏
如果我上傳的是我壓縮過的 這樣大家收藏 會覺得圖片變小
但是原始圖太大 直接貼上來
圖片會長到 右邊攔
但是我又懶 …. 不想要每張圖都去設定圖片大小
所以… 只好看看有沒有什麼偷懶的方法

前幾天用的是用 Js 的方式來達成自動縮圖的動做
但是 也是有點麻煩
每張圖 也都要放在一些程式碼才能正常縮圖
雖然我偷懶 用PHP 直接插入
還有一個缺點…
圖片載入中 看到的一樣是大尺寸
載入完畢 才會變成小尺寸
這樣 感覺上不怎麼完美~

今天 和 zkm 在想說怎麼把 自動縮圖用到 他的WP 上
雖然不完美 還是可以加減用
我先簡單弄個WP起來
來測試看看
意外發現 我那版的 WP 竟然有自動縮圖
我仔細研究發現…
原來是用CSS來達成
我在仔細去看
結果我無言了
他只要一句CSS 就能達成
我卻忙了著麼久
果然 CSS 還要在加強
不過最後 很滿意~

第1步:打開自己網站的CSS

這個用 記事本 就可以編輯了

第2步:找到 或 新增 img { }

像我的就有這段
沒有得的人 就自己新增
img {

}
進去

第3步:新增一句進去

max-width: 573px;
把這具插入進去
後面 可以改成 100% 就會完全符合整個欄位大小
當然 要自己字定大小也是可以
記得後面要加上 px 唷^^

Angel Beats 天使 宅圖~

先來聽個小故事 在網下看吧 ^^
再打文章 打到一半 手機響了 !
接起來 一個稍有大陸口音人打過來
((口因蠻淡的 不過還是 有幾個字 會捲舌 = =
他說他是 金石堂 網路書店的
然後說我簽單子時 簽錯
這個... 我很想直接掛電話
學校萊爾富簽收 店員是我認識的學長 = =
根本不可能簽錯...
然後聽他說了一大堆
然後 我問他一句話 他竟然結疤 講話會delay 超好笑的
我只問他:『你是詐騙集團嗎?
然後 他就掛電話 XD
這不是第一通了
我定這麼多次書 偏偏 就是 3月26號 的一直打來問
這個月定的 卻都沒有問 可見他消息不靈通唷 ^^
最新資料沒有買到嗎~?

昨天晚上 zkm 傳來了一個 超棒的檔案 XD
裡面是有 170 張的 天使圖
果然是好友 連我的最愛都知道 哈哈~
今天 Angel Beats 09 出來了 XD
看了一下 一半都是再說 音無 的過去
廢話不要多說了 來介紹圖片

Angel Beats 09 片段圖 ~

接收了大量意識的天使 陷入昏睡中…

焦點不是人 是字幕 五十嵐 咧 不知他賣的果汁好不好喝 XD (不知有沒有人知到笑點)

天使醒來了 XD~
這個角度 感覺上 音無 要親天使咧~

載捕兩張


接下來的圖片是 zkm 給予的 ~
我挑了幾張不錯的 ^^

這張 讓我想到 零之使魔

天使的個表情

接下來是Q圖 ^^ 可愛唷 ~

好吃到流淚 ~

天使應該不會這樣哭 他不爽 直接刺人心臟 XD

沒人陪你吃麻婆豆腐 想哭
我來陪你吃 XD 哈

SSS團 別再欺負天使了

睡覺都再想 = =
可見 拿麻婆豆腐去誘惑 是有效的 ^^


最後 這張 根本是犯規 超可愛的

修改 Imagevue 首頁的官方字樣

今天剛好沒準備好要發什麼文章...
剛好zkm有這個問題 我也解決完畢
我就順便發出來囉 ^^

Imagevue是套相簿的網頁套件
zkm就是用這套架設的
全部都是 Flash 感覺蠻炫 瞞不錯的

架設完成後 會發現首頁有串字 很討厭

接下來就來教大家 怎麼修改這串字…
當然 如果我直接告訴大家 這個檔案在哪裡
這樣大家永遠不會自己找…
所以 我會教大家 如何找到是哪個檔案

相關檔案下載:【Imagevue 2.1.7 原始碼 主程式 – 來源Google
解壓縮密碼:skybox.pp.ru

第1步:架設完成後 開啟首頁

看到那串很想改 但事後台 卻沒可以改 的文字

第2步:先開啟 Notepad++

如果沒有程式 點選 【這裡

第3步:在 Notepad++ 內開啟 相簿 首頁的原始碼

首頁的檔案是 index.php

第4步:發現 裡面沒有我們要的東西

當然 我不會叫大家 一個檔案一個檔案 慢慢看的 ^^

第5步:搜尋 → 尋找

第6步:切換到 搜尋目錄

第7步:輸入要搜尋的關鍵字

首先呢 在尋找目標的欄位輸入『This is your gallery』
也就是你要替換的字
然後 資料夾 輸入你 原始碼所放在的資料夾
然後 按下全找

第8步:尋找中…

第9步:找到了 一筆資料

很剛好 就只有一筆 這就是我們要的

第10步:點擊 那筆資料

會自動打開那筆資料
然後 我們蒐尋的地方 會被反白起來
也就是 只要改那串字就好

第11步:存檔

第12步:改好囉 ^^

第13步:下面那行字

那行也在剛剛那個檔案裡面
稍微往上看就看得到囉 ^^

我的波浪散熱墊!

還記得這篇文章嗎:【台灣人的新創意~ 輕鬆幫筆電消暑
今天看到實物了
圖片看起來應該是個軟綿綿的東西...
拿到手 沒想到是 硬硬的 哈哈~ 和想像相差180度 XD
不過 還是很高興唷 ^^

第1步:東西大集合

我用我可憐的 山寨機 拍的 = ="

第2步:實品 …

第3步:有很明顯的弧度

第4步:包裹上面的註明…

小心易碎 = ="

天空出版~ Google Chrome 免安裝版


相信大家應該都也有用過Google 出的 Chrome 瀏覽器吧,沒用過也有聽過吧 !~
我弄了一整晚 才弄出來的唷 ^^
我有放了一些我常用的的外掛進去
我的最愛當然也放了一些進去了 ^^
這是免安裝版 所以 重灌後 不用擔心 裡面的紀錄會不見
只要檔案沒被刪除 都還在唷 ^^

AdBlock - 版本: 1.4.29
阻檔廣告工具

AdSweep - 版本: 2.1.6
這也是阻檔廣告的

Chrome Flags - 版本: 1.4
查詢網站主機在哪個國家

Google Mail Checker Plus - 版本: 1.1.7
Gmail 信箱檢察 有新的信 就會通知

Mouse Stroke - 版本: 1.9.4.5
滑鼠手

第1步:下載 4.1.249.1064 unknown (45376)

檔案有 70MB 挖~ 好大~
所以我放在免空 Google空 傳不了這麼大的檔案

載點一:【UL 免費空間
載點二:【KS免費空間
解壓縮密碼:skybox.pp.ru

第2步:開啟畫面~

第3步:以安裝的擴充功能

Angel Beats 8 片段圖~ 1080p

上次說好要補圖的 XD
我卻一直忘記 哈哈~
周一的時候就已經拿到 1920 * 1080 的了 XD
其實是有想到要發
但是因為1080p太大張了 所以在享有什麼辦法 可以把它縮小 然後 點下會放大
zkm推薦 光盒 但是 當初要弄 弄不成功
最近把 blogad 的廣告移除 結果就可以了 XD

分身的天使 紅眼 咧~

 width=573

本尊 和 分身 PK

 width=573

被K.O.的天使也好可愛 ^^

 width=573

這就是 傳說中的 Angel Player
Zkm你還沒生給我咧

 width=573

這咧... 無言..

 width=573

天使大絕~ 俗稱的 天使的咆嘯 XD

 width=573

超可愛的 XD 好想抱下去 哈哈~

 width=573

 width=573

手動 清除 Win7 的Icon快取

相信大家應該有部分人開始用 Win7 了吧~
寫程式 通常會先 生產出來 然後 確認程式正常
最後才會放上 icon …
但是 win7 為了增加讀取速度 所以他會把icon弄成快取
這樣會造成 我們換圖示 常常看不到換出來的成果
所以要想辦法清除那個快取
讓他重新取得快取

我昨天做佈景
就遇到了 我的icon 換上去 竟然一樣 沒有變 XD
搞了好久 才搞定

第1步:打開資料夾

資料夾路徑為:%UserProfile%\Appdata\Local

第2步:找到 IconCache.db 把他刪除

第3步:看不到那個檔案?!


第4步:快速刪除

如果有人常常有這個問題 要手動刪除 太累了
寫個 bat 檔來刪除

del %UserProfile%\Appdata\Local\IconCache.db /s/q/f/a
explorer %UserProfile%\Appdata\Local

第5步:重新開機~

刪除完畢 不是馬上好 所以 重新開機吧 ~

里香 – 佈景主題 v2


先來讓我抱怨一下:
寫佈景主題時
我在那邊 想破頭 配色 改圖 ...
沒注意到有廣播
全部人都把喇叭關閉
等我發現有廣播時 廣播已經要講完了
趕快關閉喇叭
就看到有人開始瞪我
沒事來廣播幹嘛 = =
寫到入迷 還要被瞪 有沒有天理 = =

昨天晚上拿到了 5 和 6 集的 仰望半月
今天 就把之前的仰望半月的佈景改了一下~
原本要放游標的
但是… 想不到游標上得圖按要放什麼 = =
我原本還有要把 icon 去背景
但是發現 去背景後 沒有比較好看 ~
所以 沒有去背景

我有更改的
icon 有一張被我換掉了 XD
我把裕一給撤下來 XD
換上 裕一 加 里香 的 XD
還換了桌布~
這次桌布 一樣是 寬螢幕用的 XD

第1步:下載

載點:【Akiba Rika_v2.rar 天空盒子官方載點(須登入)
載點:【Akiba Rika_v2.rar UL免費空間
解壓縮密碼:skybox.pp.ru

第2步:桌布

第3步:Win7 下

第4步:XP 下