1-2 幫Blogger所有的連結圖片導圓角

更新 發佈閱讀 1 分鐘

在上一篇文章1-1 利用免費Blogger版型創建寫作部落格,可以知道我使用的版型是2018年的,那時的圖片還不興導圓角,可是在今年新出的樣版,都將圖片加上圓角,實在有些羨慕,那該怎麼辦呢?

其實是非常容易的,只要按滑鼠右鍵,之後就是剪下、貼上的事。

不過首先,你得知道圓角的CSS語法為border-radius,利用它來決定四個角的圓弧程度,如下。

border-radius: 8px (可自行調整px數)

以使用Google瀏覽器與No End's Writing為例。到自己的首頁,任意滑鼠右鍵點選一張縮圖,出現指令列,點選檢查,就會出現如上圖的畫面。查看元素名稱,直接框選後複製。

接著到Blogger後台/主題/自訂/編輯HTML,進到裡面後:

  1. 點進html內文,用Ctrl+F叫出搜尋列;
  2. 貼上剛剛複製下的元素名稱;
  3. Eneter後找到CSS位置所在,原本的指令只有max-width:100%;
  4. 加上;號,再將border-radius: 8px貼於其後;
  5. 儲存後即可看到所有圖片都成圓角。

之後別忘了進到貼文內,因為裡面的圖片元素是不一樣的,照著上面的方式再操作一遍。

這樣就完成Blogger導圓角的作業,是不是比想像中的還要容易。而且幾乎所有的Blogger修改,都能夠透過這個方式完成。有哪裡不喜歡,就修改掉吧!

是不是對創建自己的Blogger更有信心了呢?趕快試試吧!

留言
avatar-img
NoEnd│莫盡
7會員
44內容數
分享個人創作。
NoEnd│莫盡的其他內容
2023/12/17
如果你已經決定,以後就都自出版電子書,那麼建議進行編輯前,可以先安裝/加入外掛,簡化作業流程,因為自己僅出版文字書/小說,所以僅就此部分說明(因為其他的還沒用過)。 題外話:外掛超好用,但不知為什麼用的人很少,可能翻的名字不好,一般都會是翻插件。一開始會想到安裝外掛,也實在是因,明明工具列那麼
Thumbnail
2023/12/17
如果你已經決定,以後就都自出版電子書,那麼建議進行編輯前,可以先安裝/加入外掛,簡化作業流程,因為自己僅出版文字書/小說,所以僅就此部分說明(因為其他的還沒用過)。 題外話:外掛超好用,但不知為什麼用的人很少,可能翻的名字不好,一般都會是翻插件。一開始會想到安裝外掛,也實在是因,明明工具列那麼
Thumbnail
2023/12/17
個人不是使用Word寫作,而且原本就習慣一章一章寫,不過看到Sigil的,從標記【<hr class="sigil_split_marker" />】分割的功能,很好奇是怎樣的,結果發現它超好用的,能夠幫你自動分章節成HTML檔。 要做到這點,非常的簡單,你只要使用儲存搜尋和Automation
Thumbnail
2023/12/17
個人不是使用Word寫作,而且原本就習慣一章一章寫,不過看到Sigil的,從標記【<hr class="sigil_split_marker" />】分割的功能,很好奇是怎樣的,結果發現它超好用的,能夠幫你自動分章節成HTML檔。 要做到這點,非常的簡單,你只要使用儲存搜尋和Automation
Thumbnail
2023/12/14
為了自出版電子書,搜尋相關資料,大體看過一遍,然後,得到的結論是,不該做的別做!(EPUB│Reflow文字書│橫排的情況)雖然自覺只是進行了『非常低度』的編輯,但還是多了。 已順利上傳的是Pubu,只花不到5分鐘,有點嚇到我!其他的則還在等候審查,等有結果後再一次分享。此篇先談談遇到的問題吧!
Thumbnail
2023/12/14
為了自出版電子書,搜尋相關資料,大體看過一遍,然後,得到的結論是,不該做的別做!(EPUB│Reflow文字書│橫排的情況)雖然自覺只是進行了『非常低度』的編輯,但還是多了。 已順利上傳的是Pubu,只花不到5分鐘,有點嚇到我!其他的則還在等候審查,等有結果後再一次分享。此篇先談談遇到的問題吧!
Thumbnail
看更多
你可能也想看
Thumbnail
Ae 小技巧:CC Bend It 彎曲 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:CC Bend It 彎曲 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
STEP1. 首先繪製中央黃色刻度,請選取黃色長方形,使用旋轉工具,按住『Alt』移動旋轉中心至參考線中心上,於跳出的選轉設定面版上設定旋轉角度:-12.5,按下『拷貝』,再繼續按下『Ctrl』+『D』旋轉複製出所有刻度線。 STEP2. 選取左側白色長方形,使用旋轉工具 ,按住『Alt』移動旋
Thumbnail
STEP1. 首先繪製中央黃色刻度,請選取黃色長方形,使用旋轉工具,按住『Alt』移動旋轉中心至參考線中心上,於跳出的選轉設定面版上設定旋轉角度:-12.5,按下『拷貝』,再繼續按下『Ctrl』+『D』旋轉複製出所有刻度線。 STEP2. 選取左側白色長方形,使用旋轉工具 ,按住『Alt』移動旋
Thumbnail
1. 細條紋 STEP1. 開新檔案,設定尺寸為3X3像素、背景內容透明之透明背景新檔。放大檢視至最大狀態,使用鉛筆工具,選擇1像素之筆刷樣式、設定不透明:100%,前景色為黑色。 STEP2. 使用鉛筆直接繪製要成為圖樣的內容,繪製後並執行『編輯 > 定義成圖樣』,定義細長斜條圖樣。 S
Thumbnail
1. 細條紋 STEP1. 開新檔案,設定尺寸為3X3像素、背景內容透明之透明背景新檔。放大檢視至最大狀態,使用鉛筆工具,選擇1像素之筆刷樣式、設定不透明:100%,前景色為黑色。 STEP2. 使用鉛筆直接繪製要成為圖樣的內容,繪製後並執行『編輯 > 定義成圖樣』,定義細長斜條圖樣。 S
Thumbnail
STEP1. 繪製35x340與35x210px矩型,對齊置中二物件。選取外側大長方形執行『效果 > 風格化 >圓角』設定圓角半徑:15px。 STEP2. 分別填入適當的漸層顏色完成魔術棒並組成群組,移動略微旋轉魔術棒角度,使用漸層工具調整背景漸層的中央位置。 STEP3. 繪製一圓形並填入
Thumbnail
STEP1. 繪製35x340與35x210px矩型,對齊置中二物件。選取外側大長方形執行『效果 > 風格化 >圓角』設定圓角半徑:15px。 STEP2. 分別填入適當的漸層顏色完成魔術棒並組成群組,移動略微旋轉魔術棒角度,使用漸層工具調整背景漸層的中央位置。 STEP3. 繪製一圓形並填入
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
STEP1. 開啟範例練習檔,分別繪製所需的二圓角矩型(735,545,30 / 700,500,30)與一垂直直線(500,90)於檔案範圍內。 選取到二圓角矩型與直線,在對齊控制版上設定對齊至:『對齊工作區域』,完成置中於檔案範圍內對齊,並填上二圓角矩型的填色。 STEP2. 點取中央直線
Thumbnail
STEP1. 開啟範例練習檔,分別繪製所需的二圓角矩型(735,545,30 / 700,500,30)與一垂直直線(500,90)於檔案範圍內。 選取到二圓角矩型與直線,在對齊控制版上設定對齊至:『對齊工作區域』,完成置中於檔案範圍內對齊,並填上二圓角矩型的填色。 STEP2. 點取中央直線
Thumbnail
切版有許多眉角需要注意,來探討那些經常導致切版結果與設計稿產生落差的原因。 一、文字的高度本體是 line-height:🔍 文字所佔據的高度不是由font-size決定,而是line-hight。一開始練習切版時,都想著設定好字的尺寸和字重就 ok 了吧?殊不知這是造成切出來的網頁與設計
Thumbnail
切版有許多眉角需要注意,來探討那些經常導致切版結果與設計稿產生落差的原因。 一、文字的高度本體是 line-height:🔍 文字所佔據的高度不是由font-size決定,而是line-hight。一開始練習切版時,都想著設定好字的尺寸和字重就 ok 了吧?殊不知這是造成切出來的網頁與設計
Thumbnail
在初學網頁排版的時候,文字、段落、列表的排版可以說是比較好上手的,只要稍微透過margin、padding、border及文字顏色上調整,就可以輕易獲得一段美美的文字。 然而要去調整圖片的大小及其他相關效果,就不是那麼容易的一件事了,往往在開發時,都會出現圖片效果不如自己預期的狀況。
Thumbnail
在初學網頁排版的時候,文字、段落、列表的排版可以說是比較好上手的,只要稍微透過margin、padding、border及文字顏色上調整,就可以輕易獲得一段美美的文字。 然而要去調整圖片的大小及其他相關效果,就不是那麼容易的一件事了,往往在開發時,都會出現圖片效果不如自己預期的狀況。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
有一種字體類型叫做「圓體字」,它的字體特色是邊角與筆畫末端皆是圓角,是一副圓潤潤的外貌。 在之前的黑體字文章中有提到,黑體字的造型相對中性、幹練、專業簡潔,和圓體字放在一起做對照,就可以明確感覺到兩種字體的視覺觀感不同。 字體知識|黑體字的專業感與簡潔感 走在路上可以多觀察一下
Thumbnail
有一種字體類型叫做「圓體字」,它的字體特色是邊角與筆畫末端皆是圓角,是一副圓潤潤的外貌。 在之前的黑體字文章中有提到,黑體字的造型相對中性、幹練、專業簡潔,和圓體字放在一起做對照,就可以明確感覺到兩種字體的視覺觀感不同。 字體知識|黑體字的專業感與簡潔感 走在路上可以多觀察一下
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News