Search

㊗ 新的一年,祝福讀者們 2020 新年新希望!! ◆ Welcome to Laird Studio! 歡迎蒞臨萊爾德工作室! ◎ Android Studio 基礎教學籌備中,敬請期待! ☏ 對網站有任何問題或建議,都非常歡迎使用留言板或至 Facebook 粉絲團發訊息,讓我們知道您的想法 (੭ु´ ᐜ `)੭ु

2016年6月24日 星期五

[ 教學 ] [ 巴哈姆特 ] 如何在巴哈姆特小屋文章中加入 GIF 動圖


這篇教學是記錄我把 GIF 動圖放到巴哈姆特小屋的過程,如果你也有這方面的困擾,敬請參考這篇文章~


首先,要讓 GIF 動圖完整呈現,必須要將圖檔存放在支援 GIF 格式的圖床,這樣嵌入到文章時才不會發生圖動不起來的尷尬情況。


在這邊萊德是以 Giphy.com 這個圖床做為示範, GIF 呈現的是台灣獨立開發團隊 Caliburn Studio 的最新 RPG 遊戲泡泡星球的娜塔莉的主角娜塔莉的角色行走圖。


起初開發日誌是 PO 在 Blogger 系統,所以可以直接使用以下 HTML 語法嵌入:

<a href="http://gph.is/1ZeVD0Z"><img src="http://i.giphy.com/3o72F7mwmU0CHDYkJq.gif" /></a>







但是當我 Copy 文章,轉載到我的小屋並發佈之後, GIF 動圖卻一直出不來(文章內圖片的位置只有顯示嵌入語法),這代表 HTML 嵌入圖片的語法,無法直接轉換成巴哈姆特小屋所使用的語法,必須自己手動修改小屋文章的原始碼。

經過一番研究,我找出巴哈小屋文章要如何嵌入 GIF 動圖的語法了,如下圖所示:

[div align=圖片位置][size=圖片大小][url=你的 GIF 圖檔網址][img=你的 GIF 圖檔網址 height=圖檔高度 width=圖檔寬度][/url][/size][/div]




複製以上語法並稍作修改並貼上小屋 " 原始碼 " 區塊後,在切換到 " 所見所得 " ,就能看到圖片囉 !




再把文章儲存或發佈,就能夠看到 GIF 在動了~ 歡迎讀者前往我的小屋觀看 GIF 的嵌入效果~

http://home.gamer.com.tw/creationDetail.php?sn=3210952



開發日誌原文在此:

[ 開發日誌 ] WK01 《泡泡星球的娜塔莉》 開發紀錄 Round 2
http://www.caliburn.tw/2016/06/wk01-round-2.html





如何在巴哈姆特小屋文章中加入 GIF 動圖的教學就到這邊~

希望對你有幫助~

我們下次見~