Free AI web copilot to create summaries, insights and extended knowledge, download it at here
2651
Abstract
ure><div id="da2b"><pre>繼續閱讀｜回目錄</pre></div><h1 id="5122">⊙ 預設首字放大製作方式</h1><figure id="8d23"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*h9cYNjRM9yZG923fPQUVug.gif"><figcaption>製作方式</figcaption></figure><ol><li>段落的字首為「半形英數字」</li><li>反白文字，點選 Drop caps 選項</li></ol><div id="d54a"><pre>繼續閱讀｜回目錄</pre></div><h1 id="ebd6">⊙ 自訂首字放大圖案製作方式（完整版教學）</h1><p id="91c2">示範將「英數字」轉換為圖片。</p><figure id="6c8b"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*VG3WQ2ctYGzj7Y71KPM3tQ.png"><figcaption>自訂首字放大圖案</figcaption></figure><p id="0515">A字大寫可以將段首大字。原本的編輯功能不支援中文字，所以用了另一個方式，將第一個字替換為圖片。有許多首段大字的圖像，設計非常美，只是中文字不多，但我們可以自己設計，讓文章更有特色。</p><figure id="25b9"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*8J1fiJw35SltzDR-o0FItA.png"><figcaption>這張是圖片</figcaption></figure><div id="2f12"><pre>注意：此效果在 <span class="hljs-keyword">APP</span> 應用瀏覽時，不會顯示圖片；網頁版的畫面則可正常呈現</pre></div><h2 id="3a5e">1｜製作首字的圖像</h2><p id="656d">範例適用正方形的尺寸設計，我讓文字圖像緊貼上方，這樣它才能完全與內文靠上對齊。當然也能視情況改變圖像的位置。</p><figure id="843c"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*CItmk465m6hA_Yrv.png"><figcaption>Design by <a href="https://www.facebook.com/Jhane.Deerlight">Jhane Chou</a></figcaption></figure><h2 id="68b3">2｜將文字段落刪除字首，並隨意輸入一個半形英數字</h2><p id="bb88">例如範例將「首」換成「1」。</p><figure id="4451"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*BpPN1vm3YSN4ATWV8Bcq5g.png"><figcaption>Design by <a href="https://www.facebook.com/Jhane.Deerlight">Jhane Chou</a></figcaption></figure><h2 id="5690">3｜反白段落，點擊 Drop caps 功能，可看到首字變大</h2><figure id="b565"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*GGyYmeSNhGnwdo-WVUm5SA.png"><figcaption>Design by <a href="https://www.facebook.com/Jhane.Deerlight">Jhane Chou</a></figcaption></figure><h2 id="a5b1">4｜將第一步製作好的圖，放置在大字上～完成</h2><p id="08ef">點選你的大字，讓它呈現選中的狀態，可見到該文字的周圍有綠框，接著拖曳你的圖片至文字上。</p><figure id="3d46"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*zmrutiyAoj_oAP0f.gif"><figcaption>Design by <a href="https://www.facebook.com/Jhane.Deerlight">Jhane Chou</a></figcaption></figure><h1 id="7820">⊙ 注意事項</h1><p id="273d">Drop caps 原為英文使用較多，在某些情形可能會產生限制。</p><h2 id="85b6">🧇｜不同端的瀏覽呈現</h2><p id="f414">以《<a href="https://readmedium.com/staff-886f609f3383"><b>醫學符號－蛇與權杖</b></a>》這篇文章為例，文章中的某段，有使用 Drop caps 並自訂首字圖案。</p><div id="8dce" class="link-block">
<a href="https://readmedium.com/staff-886f609f3383">
<div>
<div>
<h2>醫學符號－蛇與權杖</h2>
<div><h3>關於醫學符號，你可以了解雙蛇杖與單蛇杖的由來與用途</h3></div>
<div><p>medium.com</p></div>
</div>
<d
Options
iv>
<div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*Mdir3ykARZBy3ZkEI5Ab-Q.png)"></div>
</div>
</div>
</a>
</div><blockquote id="4219"><p><b><i>在 Web 端瀏覽，可正常顯示</i></b></p></blockquote><figure id="b857"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*lf_8c_r8Yp8mUep74r8bVg.jpeg"><figcaption>Desktop 電腦版</figcaption></figure><figure id="312d"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*s3D7m-SbZ8jaIlvzeVljbw.jpeg"><figcaption>Mobile 行動版</figcaption></figure><blockquote id="171f"><p><b><i>在 APP 端瀏覽，會顯示文字的原本狀態</i></b></p></blockquote><p id="7454">可見到原本為圖案的區域，呈現為原本的樣子（紅圈處）。</p><figure id="1ea2"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*YcWh0t2ukiqLGd3El1PHnw.jpeg"><figcaption>APP 應用</figcaption></figure><div id="b6a0"><pre>繼續閱讀｜回目錄</pre></div><p id="3b02">感謝你的閱讀及支持，任何問題都歡迎來信交流｜<a href="mailto:[email protected]">[email protected]</a></p><div id="abec"><pre>相關文章：＃關於寫作＃MEDIUM</pre></div><p id="7c3e">透過下方的 Like 拍手（<a href="https://liker.land/civic?from=jhane_chou"><b>註冊 Liker 完全免費</b></a>）讓創作者獲得額外收入 :)</p>
<figure id="b6bf">
<div>
<div>
<img class="ratio" src="http://placehold.it/16x9">
<iframe class="" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fbutton.like.co%2Fin%2Fembed%2Fjhane_chou%2Fbutton&display_name=LikeCoin&url=https%3A%2F%2Fbutton.like.co%2Fjhane_chou&image=https%3A%2F%2Fstorage.googleapis.com%2Flikecoin-foundation.appspot.com%2Flikecoin_store_user_jhane_chou_main%3FGoogleAccessId%3Dfirebase-adminsdk-eyzut%2540likecoin-foundation.iam.gserviceaccount.com%26Expires%3D2430432000%26Signature%3DBJgEhGMTqQRCn2Wbz20NrlI%252BI6zlPSm6ywhOUXor6hCHIfQ16VUfEDunUjbOW8TBmNOJqqhtqnNQL7Be27VbnfL1%252BS6Z9xDT1vUpKzFATieASBx3C5fW%252FggCss1XX1gS6S%252FJeuHc479nw7WzqN%252BZo4%252F%252BchiTfz3F0vYyLtgF27Ykcw%252BjMYHSFAoJM8D%252Bg8S%252BS3mAXBsAJePqRzmM83hL4P2Q14cSN6%252BGGf9sEL1lHZre5p6DLkzxQKZg34QchM6mpw%252BvTp3jTLxCvz8cJH6RDlGd4K1PbpgJNHMPXaslB9HxbjTzWXC%252BqKnuM%252FEuaUbHGNRSjr3iNAWRt5YMXCCHFg%253D%253D&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=like" allowfullscreen="" frameborder="0" height="212" width="485">
</div>
</div>
</figure></iframe></div></div></figure><figure id="f101"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*9suhwlcl5MA3Ucn3lH6DUQ.png"><figcaption>Design by <a href="https://www.facebook.com/Jhane.Deerlight">Jhane Chou</a></figcaption></figure></article></body>
