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
留言分享你的想法!
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
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
Ae 小技巧:CC Bend It 彎曲 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:CC Bend It 彎曲 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每週五會固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每週五會固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微調是我社群的一個系列內容,這篇則是提供給訂閱會員的詳細解說版,會說明為何調整的原因跟我的看法,以及原本設計可能有的問題,如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每週五會固定分享,歡迎訂閱會員。
Thumbnail
排版微調是我社群的一個系列內容,這篇則是提供給訂閱會員的詳細解說版,會說明為何調整的原因跟我的看法,以及原本設計可能有的問題,如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每週五會固定分享,歡迎訂閱會員。
Thumbnail
有一種字體類型叫做「圓體字」,它的字體特色是邊角與筆畫末端皆是圓角,是一副圓潤潤的外貌。 在之前的黑體字文章中有提到,黑體字的造型相對中性、幹練、專業簡潔,和圓體字放在一起做對照,就可以明確感覺到兩種字體的視覺觀感不同。 字體知識|黑體字的專業感與簡潔感 走在路上可以多觀察一下
Thumbnail
有一種字體類型叫做「圓體字」,它的字體特色是邊角與筆畫末端皆是圓角,是一副圓潤潤的外貌。 在之前的黑體字文章中有提到,黑體字的造型相對中性、幹練、專業簡潔,和圓體字放在一起做對照,就可以明確感覺到兩種字體的視覺觀感不同。 字體知識|黑體字的專業感與簡潔感 走在路上可以多觀察一下
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
STEP1. 繪製35x340與35x210px矩型,對齊置中二物件。選取外側大長方形執行『效果 > 風格化 >圓角』設定圓角半徑:15px。 STEP2. 分別填入適當的漸層顏色完成魔術棒並組成群組,移動略微旋轉魔術棒角度,使用漸層工具調整背景漸層的中央位置。 STEP3. 繪製一圓形並填入
Thumbnail
STEP1. 繪製35x340與35x210px矩型,對齊置中二物件。選取外側大長方形執行『效果 > 風格化 >圓角』設定圓角半徑:15px。 STEP2. 分別填入適當的漸層顏色完成魔術棒並組成群組,移動略微旋轉魔術棒角度,使用漸層工具調整背景漸層的中央位置。 STEP3. 繪製一圓形並填入
Thumbnail
STEP1. 開啟範例練習檔,分別繪製所需的二圓角矩型(735,545,30 / 700,500,30)與一垂直直線(500,90)於檔案範圍內。 選取到二圓角矩型與直線,在對齊控制版上設定對齊至:『對齊工作區域』,完成置中於檔案範圍內對齊,並填上二圓角矩型的填色。 STEP2. 點取中央直線
Thumbnail
STEP1. 開啟範例練習檔,分別繪製所需的二圓角矩型(735,545,30 / 700,500,30)與一垂直直線(500,90)於檔案範圍內。 選取到二圓角矩型與直線,在對齊控制版上設定對齊至:『對齊工作區域』,完成置中於檔案範圍內對齊,並填上二圓角矩型的填色。 STEP2. 點取中央直線
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News