[網頁，部落格]部落格內容的樣式設定範例

-

  一個好的文章，會用網頁的<文章標籤>去做區分，算是網頁的一點小小基礎知識。

建議有在寫部落格的朋友都可以稍微了解後再寫部落格，會寫得更順心順手，寫出來的文章也更容易閱讀。
以下的範例，是部落格使用會用到常見範例。

有時候我想要做個表格，就會來這邊copy一下。

使用文章編輯器做HTML的樣式設定很重要嗎？

網頁HTML程式碼比較乾淨，SEO分數會比較高

而很多人每次寫文章時，標題內文每次都換不一樣的顏色、加粗、斜線、畫重點，讓自己的網站更豐富，但是每次一個一個去做設定很煩瑣、還會複製貼到別的地方的時候，別的地方顏色和文字大小也變了，文章內容變得大大小小、花花綠綠，寫得很累。
而且這樣寫出來的網頁，很髒。

建議用網頁<文章標籤>的方法來區分內文，
網頁會寫得比較漂亮、寫起來也比較輕鬆、SEO也會比較好。

要怎麼做設定

像是我們平常在寫網誌的地方，叫做編輯器（Editor）。
市面上的部落格幾乎都是樣版設定好了，只留編輯器（Editor）的部分去讓使用者做編輯。
blogger基本的編輯器（Editor）可以做出，如：
  • 各種標題<h2>~<h5>
  • 段落<p>
  • 粗體<b>
  • 引用<blockquot>
  • 點點清單<ul>
  • 數字清單<ol>
以上為不需具備HTML知識，只要會word就可以使用的功能。
如果要使用其他樣式的也可以，只要稍微了解程式碼的使用方法就可以寫上了，如：
  • 有順序的標題（後方參考h3寫法）
  • 文字畫螢光筆<strong>包住要畫螢光筆的文字</strong>
  • 補充說明<div class="pad">包住要做補充說明的文字</div>

像這樣使用這輸入文章內容的地方就叫做編輯器（Editor）

需要事先準備什麼？

因為做設定需要改到網站的CSS，會需要先準備好一套設定好的網頁樣式（CSS）。
需要會網頁語言，建議可以找會網頁的朋友們幫忙。
這設定只需要做一次，設定好第一次後，後面就不需要再修改，照著規則寫文章就可以了。
找不到朋友的，如果需要我幫忙的話，會另外報價唷(´ω｀)。
好的，那我們以下開始為範例樣式囉！

標題使用方法

  1. 「大標題H1」不使用，大標題就是H1，一篇文章只能出現一個，所以內文不使用
  2. 「標題H2」文章內標題從H2開始寫
  3. 「子標題H3」是有順序的，需要再想抓順序的段落最外層寫上「class="h3c"」
  4. 「小標題H4」任意使用
  5. class="pad"內的「小標題H4」樣式會長的不同，可以搭配使用

大標題h2

內文內文內，加粗，文內文內文內文，畫重點，內文內文內文內文。
內文內文內，加粗，文內文內文內文，畫重點，內文內文內文內文。
內文內文內，加粗，文內文內文內文，畫重點，內文內文內文內文。
內文內文內，加粗，文內文內文內文，畫重點，內文內文內文內文。

＊小標題h4

內文：內文內文內文內文
網址：超連結、超連結

如何使用可以自動排序的子標題？

子標題H3，要寫出順序的話要加上區塊「class="h3c"」把區域包起來(h3 count簡稱h3c)

中標題h3

內文內文

中標題h3

內文內文內文內文內文內文

中標題h3

內文內文內文內文內文內文

如何使用點點清單？

直接使用blogger內建的編輯器內功能，選取所需部分，點擊「項目符號清單」。
  • 清單1
  • 清單2
  • 清單3
  • 清單4
  • 清單5

如何使用數字清單？

直接使用blogger內建的編輯器內功能，選取所需部分，點擊「編號清單」。
  1. 數字清單
  2. 數字清單
  3. 數字清單
  4. 數字清單
  5. 數字清單

如何使用補充說明？

在使用補充說明的時候，需要自行在所需範圍上「手動」加上一些標記，才會出現樣式。
不過要特別小心的是，很容易因為<div></div>的結尾沒關好，所以補充說明變成超級大範圍。
使用時要特別小心，建議是在文章排版完成後，最後再修改上補充說明樣式。

用<div class="pad"></div>包住所需使用補充說明的範圍。
分隔線

補充說明

class="pad"引用標籤內的標題使用「h4小標題」，會自動跳另一種樣式
class="pad"引用標籤內的標題使用「h4小標題」，會自動跳另一種樣式
class="pad"引用標籤內的標題使用「h4小標題」，會自動跳另一種樣式
分隔線
第二種補充說明樣式。
分隔線

小標題

第二種補充說明樣式。

兩張圖並列排法

左右放置圖片，手機版本查看時，50%縮放。
是使用表格去寫的，建議直接換圖，小心不要動到表格的程式碼。

如何寫表格？

下方表格可以直接複製使用，但如果像要自訂欄列數目時，需要自行寫好表格後，另外加上「class="tline"屬性」。

自己寫表格的方法：


自己加上class樣式標記的方法如：

<table border="0" style="width: 100%;">
改成
<table border="0" class="tline" style="width: 100%;">

/表格標題表格標題
表格標題表格內容表格內容

如何寫按鈕？

需要在<a>標籤寫上樣式標記，如： <a class="btn">查看現價按鈕<a>
/品名價格
按鈕造型
嘟嘟嚕嘟嘟		查看現價按鈕
按鈕造型
嘟嘟嚕嘟嘟		查看現價按鈕

如何使用「引用文字」？

直接使用blogger內建的編輯器內功能，點擊「引用文字」。
特殊文字、程式碼、名言例句

如何使用作者介紹區塊？

以下是作者介紹，看要自行複製整段貼上，或是寫在網頁程式碼裡面，讓全部網頁接套用該介紹。
但是不易自行修改，需要注意。


蝦米子 這邊是作者介紹，看看是否需要寫一下。
蝦蝦的米子，立志做一隻蝦蝦的米子

留言

張貼留言