顯示具有 blog技術 標籤的文章。 顯示所有文章
顯示具有 blog技術 標籤的文章。 顯示所有文章

2011/03/16

Zoundry Raven 的草稿

WindowsLiveWriter也有人提供或教人怎麼做免安裝版,但是WindowsLiveWriter的草稿固定儲存在系統「我的文件」中(\My Weblog Posts\Drafts),對於需要用行動碟帶來帶去的人非常不方便。這點Zoundry Raven就優多了,它直接將草稿存在程式資料夾裡,即使不是用行動碟,備份時只要複製程式資料夾,草稿也會一併備份起來,真是十分方便。

2011/03/10

改用 Zoundry Raven 寫 blog

才用Zoundry Raven的第2天,就有相見恨晚的感覺。

Zoundry Raven 比 WLW 好得太多了,最重要的是,和自然輸入完全相容,不像WLW老是卡住。

如此說來,也該是和YAHOO 奇摩輸入說再見的時候了,用YAHOO 奇摩輸入完全是為了WLW啊!

2011/03/08

Zoundry Raven Beta

現在才來試用「Zoundry Raven Think - Write - Publish」,的確是嫌太晚了,因為它早已經停止開發了。

好不好用不知道,就以本文權充測試。

首先,到「Zoundry Raven Think - Write - Publish」下載程式「zRaven-1.0.375」,打開後,發現可以設定為免安裝,很方便。

第一次執行,偵測到WLW,可以自動匯入WLW的設定,很方便。

管理界面的樣子,WLW的部落格全匯進來了。

第一步,選取一個部落格。

然後進行同步。

啊!忘了設定存取密碼。

趕快設定存取密碼。

正在同步中。

同步完成。

如果本文發布成功,就表示測試OK。

相關參考文件:

千言萬語 ●Zoundry Raven Beta 正體中文(繁體中文)化

[教學]Zoundry Raven 部落格離線撰寫工具 Save-CoCo 心得筆記

Zoundry Raven - Google 搜尋

2011/02/20

drop-shadows without images 圖文框陰影效果

[CSS drop-shadows without images – Nicolas Gallagher]一文教大家用很簡單的CSS樣式即可讓圖文框顯示陰影效果。

吳哥窟

全部的特效請看作者的範例:[Demo CSS drop-shadows without images – Nicolas Gallagher],瀏覽器的版本必須是[Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+]。

2011/02/13

閱讀優化-Readability-blog[友善閱讀]按紐

因為[Readability]讀取自己的blog不正常,研究發現,原來是文件裡的<div>段寫的亂七八糟,經過修改後,以後的新文件正常了,但以前的就不管了。

參考一些網頁「友善列印」的做法,我們可以用[Readability]為自己的blog也寫一個按紐,提供給網友使用。

■CSS按紐

CSS按紐的製作,可以到[CSS Button Designer]自製一個。

教學文件:CSS按鈕產生器(CSS Button Designer)

■插入[Readability]書籤內碼

❏先將[Readability Enjoy Reading. Support Writing.]的書籤內碼(鏈結)複製起來。

❏然後在[CSS Button Designer]取得的內碼中嵌入書籤內碼。例如:

2010/01/19

Windows Live Writer 用 Flickr4Writer 插入圖片

「Windows Live Writer 插入圖片 02 @ Good for Nothing Xuite日誌」 講如何在Windows Live Writer 插入flickr,是一般通用的方法,更方便的方法是用 Flickr4Writer ,可以讓我們同時插入多張照片。

Flickr4Writer的作者是Tim Heuer,我們雖然可以從「Windows Live Gallery」下載Flickr4Writer,但我建議最好直接到Tim Heuer的部落格,這樣我們才能夠下載最新的版本,他在部落格發表有關Flickr4Writer的文章在:「Flickr4Writer」。

下載Flickr4Writer最新版本,請到:「Flickr4Writer」,在頁面右上角的「Download Now」按一下(如下圖1),下載這個檔案:「Flickr4WriterSetup.msi」。

1

2009/11/30

在blog安裝Google 自動翻譯

這個小工具能夠將我們繁體中文版的blog變成外國人「看不太懂」的外文版。方法很簡單,首先,進入「工具 - Google 翻譯」(畫面如下),先選取blog的語言,例如我的blog是「中文(繁體)」;然後選擇要翻譯成的語言,原則上選擇「所有語言」;最後,將所產生的程式碼複製起來,備用。

2009/11/28

自製blog網站圖示(favicon)

所謂「網站圖示(favicon)」,維基定義為:「Favicon是favorites icon的縮寫,亦被稱為website icon(網頁圖標)、page icon(頁面圖標)或urlicon(URL圖標)。Favicon是與某個網站或網頁相關聯的圖標。網站設計者可以多種方式建立這種圖標,而目前也有很多網頁瀏覽器支持此功能。瀏覽器可以將favicon顯示於瀏覽器的地址欄中,也可置於書籤列表的網站名前,還可以放在標籤式瀏覽界面中的頁標題前。」(Favicon - 維基百科,自由的百科全書)一如我們在瀏覽器的標籤頁、網址列所常見各式各樣的圖示:

我們在瀏覽器、網路書籤所作的書籤,也會顯示網站圖示。最近,Google Reader(閱讀器)也增加在訂閱項目前顯示網站圖示的功能。總之,網站圖示最大的好處,一是作為個別網站獨特的識別符號,二是讓使用者能夠依圖像視覺,很快的找到所要開啟的網站。下圖為Google Reader加了網站圖示的訂閱項目,使用者檢視的焦點立即改變為以圖示為主:

2009/09/16

blogger 「繼續閱讀」是真正的繼續閱讀

[blogger [繼續閱讀]更正 ]安裝好後,我開始在新文件中使用這個功能(舊文件就不管了,而且首頁以外的舊文件,本來就設定為只顯示標題),相當方便,只要在任何想要「跳轉」的地方插入<!-- more -->即可--當然是在HTML原始碼的地方。這個任意性比起其他 blog 自動產生繼續閱讀要好的地方是,<!-- more -->只是讓文件「中斷」,所以摘出部分原有的格式不會丟失,比較 Xuite 和 blogger 就明白我說的意思了。

gabriel zone 

Good for Nothing Xuite日誌

2009/09/13

blogger [繼續閱讀]更正

上一篇 〈blogger [繼續閱讀]〉提到:

  • 經過不完全測試,我發現 [ METAMUSE ] Blogger Beta 中 Read More 與 Archive 只顯示標題 作法,也支援<!-- more -->,也就是說這個hack的
    <span class="fullpost">...</span>,也可以用<!-- more -->來取代,這樣在撰寫上的確比較簡便,不知道這兩個hack是否有暗通款曲之處?所以,我也將本blogger改成這個語法了。

結果出現問題,不管文件是否插入<!-- more -->,都會顯示「繼續閱讀」。失敗。

2009/08/11

Windows Live Writer 螢幕截圖 小撇步 [補充]

[前情提要]Mac Book 沒有這顆 Print Scrn,跑 XP 時,可以用組合鍵-Fn+Shift+F11 來替代。

XP 螢幕截圖(螢幕拷貝)有兩種:

其一,Print Scrn:全螢幕截圖(Mac Book 以Boot Camp跑 XP 時組合鍵為:Fn+Shift+F11)。

其二,Alt+Print Scrn:視窗截圖(Mac Book 以Boot Camp跑 XP 時組合鍵為:Fn+Shift+Alt+F11)。視窗截圖比全螢幕截圖更常用到,前文未提及,特別作補充。截圖範例如下:

至於Mac OS 內建的螢幕截圖(擷取畫面),可比XP精彩多了,XP要做到如下圖去背加陰影的效果,就必須靠其他截圖程式來幫忙了。(本文主要說明在 Windows Live Writer 如何簡易處理螢幕截圖,對其他截圖程式有興趣者,請自行 Google。)

2009/08/10

Windows Live Writer 螢幕截圖 小撇步

寫 blog 偶而臨時需要放螢幕截圖的時候,有一個最簡單的方法,那就是 Print Scrn (螢幕拷貝)!這個鍵的位置在桌機鍵盤的最右上角,三個鍵一組-一般人這輩子不知道也不會怎樣-的最左邊的一個。Mac Book 沒有這顆 Print Scrn,跑 XP 時,可以用組合鍵-Fn+Shift+F11 來替代。

將螢幕「布置」好後,即可按下 Print Scrn 進行截圖,然後在Windows Live Writer 按 Ctrl+V 貼上,一開始是一整個螢幕的縮圖。

將螢幕「布置」好後,即可按下 Print Scrn 進行截圖,然後在Windows Live Writer 按 Ctrl+V 貼上,一開始是一整個螢幕的縮圖。

接著,選取這張截圖,Windows Live Writer右側會出現「圖片工作窗格」,如果沒有出現,按 F9 就會出現。然後切換到「進階」,點選「裁切」(crop)工具。

接著,選取這張截圖,Windows Live Writer右側會出現「圖片工作窗格」,如果沒有出現,按 F9 就會出現。然後切換到「進階」,點選「裁切」(crop)工具。

在「裁切」視窗,調整縮圖的選取範圍,以決定裁切的範圍。如果覺得縮圖太小,可以拖曳「裁切視窗」的邊框,視窗變大,縮圖也會隨之變大。選取好後,即可按「確定」。

在「裁切」視窗,調整縮圖的選取範圍,以決定裁切的範圍。如果覺得縮圖太小,可以拖曳「裁切視窗」的邊框,視窗變大,縮圖也會隨之變大。選取好後,即可按「確定」。

接著,依一般圖片處理的方式即可。其間,仍然隨時可以重新調整截圖的大小,這個 Windows Live Writer 的特點是其他截圖程式做不到的地方。

接著,依一般圖片處理的方式即可。其間,仍然隨時可以重新調整截圖的大小,這個 Windows Live Writer 的特點是其他截圖程式做不到的地方。

2009/08/09

Windows Live Writer與 中文輸入法 相衝 解決方案

Windows Live Writer 自問世以來,一直都有與中文輸入法相衝的問題。只要一離開編輯模式,中文輸入法就會失效,哪怕是執行一個簡單的圖形設定,更不必說頻繁修改原始碼,簡直要抓狂!

我的解決方法是,先按輸入法組合鍵,讓消失的輸入法工具圖示出現,然後再按 Shift + Space 兩次,通常中文輸入法即可恢復正常。

什麼是「輸入法組合鍵」?在「控制台」/「地區與語言選項」/「語言」/「詳細資料」裡可以設定輸入法的「組合鍵」,我從倚天時代就習慣設定輸入法組合鍵,快速的切換不同的輸入法,非常方便。

我安裝的輸入法中,連微軟自家的新倉頡也不能倖免,一直到最近試用了「奇摩輸入法」,經過反覆測試,終於證實它與Windows Live Writer完全相容,不再發生輸入法失效的問題了!!(長久以來,我最常用的是「自然輸入法」,目前的版本是8,最新的好像是 9 ,如果9也與Windows Live Writer相容,請告訴我。)

與我有相同困擾者,推薦 [Yahoo!奇摩輸入法]作為寫作Windows Live Writer 時的中文輸入法,它有注音、倉頡、簡易三種輸入法。傳說它是香草的同門師弟,我慣用倉頡,就倉頡而言,我覺得奇摩比香草好用,我順便也將 mac OS 換裝奇摩了。

  • 「Yahoo!奇摩輸入法」是基於「香草輸入法」所開發的輸入法,所以用過香草輸入法的朋友對於 Yahoo!奇摩輸入法的介面應該有似曾相似的感覺,但相較於香草輸入法,Yahoo!奇摩輸入法不僅更加好用,而且還加入了許多附加的網路服務功能,並且在選字的正確率、中文全型標點的輸入等各方面比目前最新的微軟新注音 2007 還好用,而且它可以許多人的習慣設定使用空白鍵選字,所以如果您還沒用過「Yahoo!奇摩輸入法」的話,不妨安裝試用看看,相信您不會對它失望的。

    Jackbin 的懶人筆記: 好用、強大的免費輸入法 - Yahoo!奇摩輸入法

2009/08/05

[Blog This] Firefox 附加元件 復活

Blog This 是 Windows Live Writer 的外掛程式(plug-in),可以從 Firefox 及 IE 直接將選取的網頁資訊複製到Windows Live Writer 中,並加上文件來源超連結,對經常蒐集、剪貼網頁資料者,Windows Live Writer 搭配 Blog This 即可收事半功倍的效果。

  • The Blog This for Firefox adds a button to Firefox which starts a new Windows Live Writer blog post prepopulated with content and title from the current web page. Blog the whole page, or just selected snippets. Interacts with other registered plugins to parse and structure web content where appropriate. Blog quickly when you find something of interest on the web.

    Windows Live Gallery

    下載點:Blog This for Firefox

這個附加元件似乎從未更新,至少在2008年2月我安裝以後。曾幾何時,在某次Firefox 重大升級後,Blog This 就失效了,久而久之,我也就忘了有這個附加元件。

最近安裝Windows Live Writer最新版本後,在一個極偶然的場合,忽然之間,發現 Blog This 復活了。

我不確定 Blog This 復活是否與安裝 Windows Live Writer最新版有關,因為我之前也安裝了 Nightly Tester Tools Firefox 附加元件 ,但並未測試 Blog This ,所以,不知道與哪個有關?建議先安裝最新版的 Windows Live Writer ,Blog This 如果還是無效,那應該就是Nightly Tester Tools Firefox 附加元件 了。

  • 「Nightly Tester Tools」是個相當多網友愛用的小工具,他的主要功能是讓舊版擴充套件可以安裝在最新版的Firefox瀏覽器裡面,算是一種協助強制安裝套件的工具。當然,這個作法僅僅只是「測試」用途,有些套件透過強制安裝的手段可以正常運作,但有些版本太舊或問題太多的外掛或佈景主題可能在我們強制安裝之後,反而會讓Firefox運作不穩定。

    如果你常常喜歡下載最新版的Firefox瀏覽器來測試、嘗鮮的話,可以搭配使用Nightly Tester Tools來強制安裝其他慣用但還沒推出對應版本的擴充套件或佈景主題,如果測試之後可以正常在新版Firefox運作,那就可以繼續用下去,不用再改變自己原本的習慣或苦等新版程式。

    Nightly Tester Tools 「強制安裝」未支援新版Firefox的擴充套件、佈景主題

2009/08/02

Windows Live Writer 插入圖片 02

現在大家都將相片放在網路相簿裡,有些網路相簿貼心的準備不同尺寸的相片縮圖,在寫 blog 時隨時可以取用(外連),實在很方便。現在介紹Flickr、Picasa、Xuite這幾個有提供「外連」相片的實際做法:

Flickr

在 Flickr 單張相片的頁面上,按「放大鏡」,開啟「全部尺寸」頁面。

Flickr 提供5種外連尺寸,選擇其中適合自己 blog 版面的相片,然後複製Flickr 提供的原始碼,最後,在 Windows Live Writer 「程式碼模式」中貼上。

  

完成:下圖是中等(500)的相片外連。

加拉達橋

Picasa

Picasa 提供4種「公開的」外連尺寸,如果只需外連單張相片,可勾選「Hide album link」,然後複製Picasa 提供的原始碼,最後,在 Windows Live Writer 「程式碼模式」中貼上。

  完成:下圖是(512)的相片外連,是一種「非公開」的尺寸。

Xuite

Xuite 有兩個取用外連的途徑:

其一,Xuite相簿 > 管理後台 > 管理相片 >編輯相片,如下:

在 Xuite 單張相片的頁面上,按「分享」,開啟「分享照片」視窗。

Xuite 提供4種外連尺寸,選擇其中適合自己 blog 版面的相片,然後複製Xuite 提供的原始碼,最後,在 Windows Live Writer 「程式碼模式」中貼上。

完成:下圖是中(500)的相片外連。

Visit http://photo.xuite.net/

其二,Xuite 相簿 > (個人)的相簿 > (相簿)相片列表,如下:

在Xuite 單張相片的頁面上,按「放大鏡」,開啟「放大檢視」頁面。

與第一個途徑相同,這裡提供4種外連尺寸,選擇其中適合自己 blog 版面的相片,然後複製Xuite 提供的原始碼,最後,在 Windows Live Writer 「程式碼模式」中貼上。

2009/08/01

Windows Live Writer 插入圖片 01

拖進來

在 Windows Live Writer 插入圖片(照片;相片),最簡單的方法是從檔案總管直接將圖片「拖」進來。

在 Windows Live Writer 插入圖片(照片;相片),最簡單的方法是從檔案總管直接將圖片「拖」進來。

剛拖進來的圖片,無論原來的大小如何,Windows Live Writer 一律都會將它變成小張的縮圖。

剛拖進來的圖片,無論原來的大小如何,Windows Live Writer 一律都會將它變成縮圖。

圖片工作窗格

在圖片上按一下滑鼠左鍵,讓圖片呈現被選取狀態,Windows Live Writer右側會出現「圖片工作窗格」,如果沒有出現,按 F9 就會出現。

圖片工作窗格裡面有三個標籤頁,依序是「圖片」、「進階」、「效果」。

框線

「圖片」/「框線」裡面有8種選擇,預設值是「陰影」,我最常用的是「相紙效果」。

 「圖片」/「框線」裡面有8種選擇,預設值是「陰影」,我最常用的「相紙效果」。

大小

「進階」/「大小」裡面有小、中、大、原稿四種選擇,這個時候,「編輯使用主題」(Ctrl+F11)就發揮作用了,圖片應該多大多小,是否適合blog的版面,在「編輯使用主題」模式下即可一目瞭然。最好也進一步在「預覽」模式下檢視發布後的版面。Windows Live Writer 對圖片大小的設定非常實用,使用者可以自訂圖片大小,並且可以修改小、中、大的圖片大小預設值。

 「進階」/「大小」裡面有小、中、大、原稿四種選擇,這個時候,「編輯使用主題」(Ctrl+F11)就發揮作用了,圖片應該多大多小,是否適合blog的版面,在「編輯使用主題」模式下即可一目瞭然。

浮水印

最後,開啟「進階」/「動作」/「浮水印」,為圖片加上簽名。

最後,開啟「進階」/「動作」/「浮水印」,為圖片加上簽名。 

大功告成 

大功告成

2009/07/29

Windows Live Writer 文字、段落的格式

寫部落格要對「文字」及「段落」作進階的格式設定,用「樣式表」(CSS)是最普遍的方法,可是 CSS 並非人人會用,而且即使有 CSS ,也常有臨時需要用到不同格式的情形,所以,寫部落格的人至少懂一點關於文字及段落 HTML 原始碼的寫法,在 blog 版面的編排上,可以有更彈性的設計空間,也能夠展現個人的風格,都是很有趣的事情。

基本的段落格式

Windows Live Writer 有三種檢視模式 :編輯、預視、原始碼,一般寫作時在「編輯模式」下進行,修改HTML 原始碼時,則在「原始碼模式」下進行。

先看下面這兩段文字:

一部作品可以同時被選為推理小說及SF(科幻)小說佳作的並不多見,但對於擅長創作科幻推理的西澤保彥來說,那是最為理所當然的事情了。

西澤保彥的作品多以超乎現實的構思為主題,但無可否認它們仍然稱得上是正宗的推理小說,因為它們完全合乎本格推理的定義。故事中所有非常理可以解釋的現像,從事件發生之前便已經向讀者作出了詳細的描述,而全部的謎團也是遵守同一組的規則,因此對讀者來說整個解謎過程也是絕對公平和合乎邏輯性的。

這兩段文字在「原始碼模式」下,HTML 的原始碼是:

  • <p style="line-height: 130%; margin-bottom: 30px; margin-left: 0px; margin-right: 0px; font-size: 17px" text-align="left">一部作品可以同時被選為推理小說及SF(科幻)小說佳作的並不多見,但對於擅長創作科幻推理的西澤保彥來說,那是最為理所當然的事情了。</p>

    <p style="line-height: 130%; margin-bottom: 30px; margin-left: 0px; margin-right: 0px; font-size: 17px" text-align="left">西澤保彥的作品多以超乎現實的構思為主題,但無可否認它們仍然稱得上是正宗的推理小說,因為它們完全合乎本格推理的定義。故事中所有非常理可以解釋的現像,從事件發生之前便已經向讀者作出了詳細的描述,而全部的謎團也是遵守同一組的規則,因此對讀者來說整個解謎過程也是絕對公平和合乎邏輯性的。</p>

「<p style="line-height: 130%; margin-bottom: 30px; margin-left: 0px; margin-right: 0px; font-size: 17px" text-align="left">(文字)</p>」就是最基本的段落格式設定,同時,也將基本的文字格式-「文字大小」直接寫在段落格式裡。

以下簡單的說明各部分的含意:

<p>(文字)</p> 代表一個段落的開始與結束。

style="(參數)" 代表段落的格式設定。其中:

line-height: 130%;代表行距

margin-bottom: 30px;代表與下一個段落的距離

margin-left: 0px; 代表段落左邊縮排的距離

margin-right: 0px; 代表段落右邊縮排的距離

font-size: 17px 代表段落裡文字的大小

最後,text-align="left" 代表段落裡文字的走向,一般是「靠左」。視需要可以設定為「靠右」(right),以及「置中」(center)。可以使用Windows Live Writer image 工具列進行設定。最後一個是「左右對齊」,一個段落裡如果都是中文字,段落的左右兩邊會很整齊,但如果夾雜英文或半形符號,則還是會出現參差不齊的情形。