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

作者：Laird 萊德│2016-06-24 14:46:30│巴幣：12│人氣：1310

★此篇文章同步刊載於 Laird Studio 網站，經授權後轉載。

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

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

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

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

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

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

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

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

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

開發日誌原文在此：

[ 開發日誌 ] WK01 《泡泡星球的娜塔莉》開發紀錄 Round 2

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

希望對你有幫助~

我們下次見~

引用網址：http://www.jamesdambrosio.com/TrackBack.php?sn=3232226
All rights reserved. 版權所有，保留一切權利

留言共 1 篇留言

姆姆：
謝謝相當有用

09-22 22:58

我要留言提醒：您尚未登入，請先登入再留言

6 喜歡★lairdtw 可決定是否刪除您的留言，請勿發表違反站規文字。

hyzgdivina 給喜歡虹咲的LLer：
我的小屋裡有很多Hoenn繪師又香又甜的虹咲漫畫翻譯喔！歡迎大家來我的小屋坐坐～看更多 3小時前

ETH官方钱包