ปรับแต่งCSS&HTMLบนเวิร์ดเพลสที่เขียนยาวๆให้น่าอ่าน -012

ผมคิดว่าถ้าจะปรับแต่ง theme ของ wordpress ให้เป็นแบบเดียวกันหมด เวลาเขียนจะรู้สึกจืดชืดมาก อ่านก็ไม่สนุก ไอ้ครั้นจะฝืนทำให้มันมีลูกเล่นเยอะๆมันก็แก้html แล้ว แก้อีก css ก็เหมือนกันแก้แล้วแก้อีก ใช้เวลามากกว่าการเขียนบล็อกเรื่อยๆเพลนๆน่าเบื่อๆราวๆ2-3เท่า พอบันทึกแล้วก็เข้าไปดูแล้วก็ต้องปรับแต่งอีกไปมาบางทีเสียเวลาหลายวันกับการปรับแต่งhtml และ css บนเวิร์ดเพลส

ฉะนั้นแล้วผมจึงรวบรวม HTML CSS สำหรับ theme ของ ผมเท่านั้น มาแสดงและทำให้ง่ายขึ้น เวลาจะใช้ก็ตัดแปะ ฉะนั้นแล้วถ้าคุณอ่านแล้วไม่เข้าใจแล้วไม่ได้สนใจที่ตกแต่งมากมายก็ข้ามไปเลยครับ


arrow_width_600px_h50px

1 ด้านกว้างสำหรับเขียน Html ได้พอดี มีความกว้าง 600 px

คำสั่งเลื่อนรูปที่เป็นลูกศรด้านบนใช้
<div style="margin-left: -20px;"><img /></div>หรือจะใสที่่
<img style="margin-left: -20px;"/> เลยก็ได้

 


arrow_width_560px_h50px

2 ถัดมาเป็นหัวข้อ มีความกว้าง 560 px

ขอบหนา4px ขอบมนรัศมี4px ชนิดดอท สี #F19F55 ปรกติลูกเล่นนี้เราจะไปแก้ใน CSS ของ theme ถ้าเอามาใช้divก็ได้

<div style="border-radius: 4px; border:4px dotted #F19F55;"></div>

แก้ในไฟล์ style.css อยู่ใน /wp-content/themes/crafty-cart/style.css
div.post-title{
border-radius:10px;
border:4px dotted #F19F55;}

 


ถัดมาคือพื้นที่ที่เราเล่นหรือ3.พื้นที่พิมพ์ได้จริงเริ่มต้นส่วนใหญ่จะใช้ tag html ประเภท<p>ก็มีความกว้าง 560 px เช่นกัน ที่เขียนๆอยู่ก็คือแท็กP ล่ะครับ แต่ไม่สามารถเริ่มต้นตัวอักษรได้จนสุดความกว้างจออย่างที่ลูกศรเห็น

arrow_green_width_560px_h40px

<p>
ผมจะยกตัวอย่างแบบมี boarder จะได้เห็นขอบชัด
<p style="border-radius: 1px; border: 1px dotted #666666;"></p>
ทีเราไม่สามารถเริ่มต้นตัวอักษรได้จนสุดความกว้างของจอหรือพื้นที่ให้เราเล่นก็เนื่องมาจากการกำหนดระยะขอบ หรือ padding ใน css ให้มีช่องว่างด้านซ้ายก่อนเริ่มเขียน= 10px อันนี้ต้องแก้ในไฟล์ style.css
#content .post-content p {
padding-left:10px;
padding-right: 5px;
padding-bottom: 15px;
line-height: 150%;}
หรือจะเอาลูกเล่นดังกล่าวไปแก้ทับใน p-tag ได้เลย กฎของcss เขาบอกว่า css style ในแท็กจะถูกนำไปใช้แทนไฟล์ style.css ก่อนเสมอ
<p style="padding-left: 0px; padding-bottom: 25px;"></p> อย่างนี้ก็ทำได้เลย

<img style="margin-left: -10px; margin-bottom: -15px;"/>ภาพก็เลื่อนได้    ข้างล่างเป็นช่องไฟเมื่อใช้<p> ต้องมีpaddingดังรูปจากพื้นที่ให้เล่น 560px ตัวอักษรที่พิมพ์ได้ก็จะเหลือเพียง 545px
post-content_padding_ex

 


4.หัวข้อหลักที่ต้องการเน้น ก็จะใช้พระเอกหลายตัวคือ html tag หลายชนิด ในที่มีผมนิยมเพิ่มในstyle <span></span> โดยปรกติการปรับขนาดฟอนท์ สีฟ้อนท์ สีพื้นปรับได้เลยมีปุ่มกดจะทำให้เพิ่มtag span ให้อัตโนมัติ โดยปรกติ span จะต้องตัดจบเป็นคำหรือบรรทัดๆเท่านั้นและพิมพ์ตัวอักษรยาวเท่าไหร่ก็มีขนาดเท่านั้นไม่สามารถพิมพ์หลายบรรทัด ส่วนใหญ่ผมจะเพิ่ม สีพื้น ขอบ ระยะเว้นจากขอบ ก็ปรับได้ตามอัธยาศัยเลยครับ

<strong><span style="font-size: 120%; background-color: #fab6e9; border: 2px solid #F56FD4; border-radius: 10px; padding: 3px 2px 3px 2px;">หัวข้อหลักที่ต้องการจะเน้น</span></strong>

หัวข้อหลักที่ต้องการจะเน้น

หัวข้อหลักที่ต้องการจะเน้น เปลี่ยนสีพื้น#f7cfab และขอบ#d8965a;ขอบหนา3px

<span style="font-size: 120%; background-color: #f7cfab; border: 3px solid #f0a765; border-radius: 10px; padding: 3px 2px 3px 2px;"><strong>****หัวข้อหลักที่ต้องการจะเน้น*****</strong></span>

หัวข้อหลักสีเขียว

<span style="font-size: 120%; background-color: #b4eeb4; border: 3px solid #32CD32; border-radius: 10px; padding: 3px 2px 3px 2px;"><strong>หัวข้อหลักสีเขียว</strong></span>


5. เรื่องของย่อหน้า

5.1 ย่อหน้าทั้งกระบิ มันจะเลื่อน padding-left ของ tag <P>ปุ่มเพิ่มลดย่อหน้าp-tag
ฉะนั้นถ้าต้องการเลื่อนย่อหน้าทั้งกระบิสามารถทำได้ทันทีเลยโดยการกดปุ่มดังกล่าวมันจะเพิ่ม styleใน <p> ให้ทันทีสะดวกมาก
<p style="padding-left: 30px;"></p> 

5.2 ย่อหน้าแบบมีการเว้นวรรคช่องแค่บรรท้ดแรก 

ในประเทศไทยหลายคนเคยชินกับการเริ่ม5.2 ย่อหน้าแบบมีการเว้นวรรคช่องแค่บรรท้ดแรกซึ่งแลดูสวยงาม แต่เมืองนอกกลับไม่ชอบจึงไม่มีปุ่มให้ใช้ ในที่นี้ขอแนะนำ ผู้ช่วยคือ style=”text-indent: 50px; ใส่ลงใน tag P ได้เลยครับ

<p class="none" style="text-indent: 50px;">ในประเทศไทย.........</p>


 

6. เรื่องblockquote

<blockquote> มาถึงพระเอกของเรื่องในการตกแต่งเว็บของผม เนื่องจากอยากให้มันดูเป็นสัดเป็นส่วน เป็นสี เป็นช่องคนละช่องหรือเปลี่ยนเรื่องใหม่ โดยปรกติ tag blockquote สามารถแก้ css พื้นฐานได้จากไฟล์ style-common.css และ กำหนดค่าเพิ่มเติมได้โดยอาศัย ID ที่แยกออกจากกัน มาดูตัวอย่างกันเลยครับ

ดีครับ อันนี้คือ <blockquote> พื้นฐาน ผมได้กำหนดค่าต่างๆบน css พื้นฐานดังนี้
blockquote {
margin: 0 20px 20px 20px;   padding: 6px 12px 6px 45px;
background-color: #fff;   border: 2px dotted #EAEAEA;
border-radius:10px;  border-left-width: 3px;
background: #fff url(‘images/icon-quote.png’) no-repeat top left;
}
i20-i–45px—i …….i20-i คือ ขนาดmarginซ้าย ของ ทุก <blockquote> ส่วน45px คือ paddingซ้าย
10i—— ช่องว่างใน <P > เหลือให้เล่นได้เพียง 444px——>5px padding 

 

b-quote1

อันนี้เป็น blockquote ซ้อนอยู่ใน blockquote  อีกทีจะทำได้ต้องทำในหน้า text edditor หาปุ่มที่ชื่อ b-quote สามารถทำได้ ในที่นี้ผมกำหนด ใน style.css เพิ่มเติมดังนี้คือ
blockquote blockquote {
background-image: none;
padding-left: 12px;
margin: 6px 0;
background-color: #fff;
}

คือไม่มีรูปแบ็กกราวด์ สีก็ขาวเพลน padding ซ้าย=12px ฉะนั้น แล้ว ถ้าเป็น <P> จะเหลือพื้นที่ให้เล่นเท่ากับ<–416 px–>

dd    <blockquote>dd</blockquote> <P–444 px–>

dd    <blockquote id=”icon64″>dd</blockquote> จะพบว่า id icon64 หรือ icon128 icon256 ผมไปเพิ่มใน style-common.css

<id=”icon64″—–P–425 px–>

<id=”icon128″—–P–361 px–>

<id="icon256"-----P--233 px-->

blockquote#icon64 {
margin: 0 20px 20px 20px;  padding: 6px 12px 6px 64px;
background-color: #fff;  border: 2px dotted #EAEAEA;
border-radius:10px;  border-left-width: 3px;
}

ส่วน icon128 ก็แก้ padding ตัวหลังสุดให้เป็น 64px>>128px>>256px  การกำหนด padding: บน ขวา ล่าง ซ้าย  กฎการใช้งาน margin ก็เหมือนกัน

ทำเพื่ออะไรครับก็ใส่รูปแบ็กกราวด์เข้าไปไงครับ

จริงๆไม่ต้องสับสนอะไร มันก็มี css คือ margin ,padding คือช่องไฟ สีพื้น ขนาดสีและลักษณะขอบ จากนั้นยังมี รูปแบ็กกราวด์และสีแบ็กกราวด์ด้วยก็แค่นี้เอง
ซึ่งส่วนใหญ่จะสามารถกำหนดทับลงใน text edittor ได้เลย ถ้าเรียกไอดีที่เราสร้างขึ้นเราก็เปลี่ยนลักษณะนิดหน่อยเช่นรูปแบ็กกราวด์ ตำแหน่งรูปแบ็กกราวด์ และสีแบ็กกราว

id ที่ชื่อว่า icon128 รูปสีแบ็กกราวด์ และ ช่องไฟซ้ายตามใจฉัน

<–P—-389px–>**

<<รูปแบ็กกราวด์กว้างแค่100px

<blockquote id="icon128" style="background: #cbf3e9 url('http://www.pui108diy.com/wp/wp-content/themes/crafty-cart/images/dore_maru_chi/4417_key.png') no-repeat top left; padding-left: 100px;">id ที่ชื่อว่า icon128 รูปสีแบ็กกราวด์ และ ช่องไฟซ้ายตามใจฉัน</blockquote>

id ที่ชื่อว่า red

<blockquote id=red>id ที่ชื่อว่า red</blockquote>
ที่แตกต่างกับชาวบ้านก็มี padding ซ้าย=45px สีพื้น และเครื่องหมายคำพูดสีแดง        <–P—-444px–>

id ที่ชื่อว่า green   <–P—-444px–>

<blockquote id=green>id ที่ชื่อว่า green</blockquote>

blockquote ธรรมดาซ้อน blockquote <–P—-416px–>

blockquote ธรรมดาซ้อน blockquote สีใส
<blockquote style="background-color: transparent;border:3px dotted #F19F55">

blockquote id red ซ้อน blockquote<–P—-343px–>

blockquote id128 *ทับช่องไฟซ้าย100px แทน 128px* ซ้อนใน blockquote

<–P—-288px เฉพาะตัวอักษร–>

<blockquote id="icon128" style="background: #f2f3cb url('http://www.pui108diy.com/wp/wp-content/themes/crafty-cart/images/dore_maru_chi/4429_key.png') no-repeat top left;padding-left: 100px;">blockquote id128 ซ้อนใน blockquote</blockquote>
</blockquote>

id=yellow #fefee6

id=yellowdark #f2f3cb

id=yellowdarkdot

id=reddot

id=greendot

id=green

id=greenbright #BCED91

id=greendark #C0D9AF

id=pink0 #fbd9f6

id=pink1 #f9c7f2

id=blue0 #deeffa

id=blue1 #bcdef5

id=bluedark #bedbeb

id=bluedark style=”background-image: none;”#bedbeb

icon256 รูปและสีแบ็กกราวด์ตามใจฉัน

<–P—-233px–>

<blockquote id="icon256" style="background: #f9c7f2 url('http://www.pui108diy.com/wp/wp-content/themes/crafty-cart/images/kuan/8124.png') no-repeat top left;">icon256 รูปและสีแบ็กกราวด์ตามใจฉัน</blockquote>

แบบไม่มีไอดี กำหนดตามใจกู

<–P—-481px max–>

<–P–หลบรูป 246px–>
<blockquote style="background: #deeffa url('http://www.pui108diy.com/wp/wp-content/themes/crafty-cart/images/drag_cob/11327.png') no-repeat top right; padding: 15px 10px 15px 10px;"> <p style="padding-right: 240px;"> แบบไม่มีไอดี กำหนดตามใจกู
</p></blockquote>

 <–P—-481px max–>

∀∀∀∀∀∀∀∀∀

∅∅∅∅ ∅∅∅∅∅ ∂∂∂∂∂∂ ∂∂∂∂ ∃∃∃∃ ∃∃∃∃∃∃∃∃∃∃ ∃∃∃∃∃∃∃∃∃ ∃∃∃∃∃∃ ∃∃∃∃∃∃∃∃∃

®®®®®®®®®® ®®®®® ®®® ®®®®®®®® ®®®®®® ®®®® ®®®®®®®®®®®®® ®®®®®® ®®®®®®®®®®®® ®®® ®®®® ®®®®®®®®®® ®®®®®®®®®®®®®®® ®®®®®®®®®®® ®®®®®® ®®®®®®®® ®®®®®®®® ®®®®®®®® ®®®®® ®®®®® ©©©©©© ©©©

<< บังคับช่องว่างซ้าย < p style="padding-left: 170px;">

©©©©©©©© ©©©©©©©© ©©©©©©

€€€€€ €€€   ♥♥♥♥♥♥♥ ♥♥♥♥♥ ♥♥♥♥95 = ♣♣♣♣ ♣♣♣=♠♠♠♠♠♠ =♦♦♦♦♦ ♦♦ = ลดลง10-15%

…..

กำหนดตามใจกูอีกแบบนึง

<–P—-481 px max–>

<blockquote style="background: #e6f6e7 url('http://www.pui108diy.com/wp/wp-content/themes/crafty-cart/images/drag_cob/9000.png') no-repeat top left; padding: 15px 10px 15px 10px;">กำหนดตามใจกูอีกแบบนึง..</blockquote>

 

วีดีโอข้างล่างเป็นความจริงของกระเพาะของพวกนักกินจุซึ่งมีกระเพาะใหญ่กว่าคนปรกติถึง 10 เท่า และขยายตัวตามแนวดิ่งของร่างกาย กินเยอะแต่ออกพุงน้อย กระเพาะขยายตามยาว น่าตกใจมากๆเลยจ้า

ปล. แต่เดิมใช้ปลั๊กอินที่ชื่อว่า youtube บัดนี้ข้าพเจ้าจะค่อยถอดออกจากเว็บแต่ต้องมาตามแก้ทุกบรรทัด มันใข้ยากกว่า embed ที่ใช้ <iframe> เนื่องจากการปรับขนาดค่อนข้างลำบากถึงลำบากมากแก้ก็ยาก แต่เดิมมันแก้ง่ายกว่านี้ ดูอัพเดทแต่ละที่ก็สับสน ไม่สามารถใส่เครื่องหมาย& ใน embedyt เลยรำคาญจะปิดก็ไม่ได้ สรุปจะเอาออกไม่ใช้แล้วปลั๊กอิน youtube แล้วก็ไปตามแก้ให้embed flash เป็น html5 vdo ให้หมดเลยเล่นเอาเหนื่อยแน่

 

<p style="text-align: center;"><iframe src="//www.youtube.com/embed/b65C-JDi6oQ" width="480" height="270" frameborder="0" allowfullscreen="allowfullscreen"></iframe><p>

 


<p style="margin-left: -30px;"><iframe src="//www.youtube.com/embed/b65C-JDi6oQ" width="600" height="338" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p> 

<p style="text-align:center;"><iframe src="//www.youtube.com/embed/b65C-JDi6oQ" width="383" height="216" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

 <p style="text-align: center;"><iframe src="//www.youtube.com/embed/b65C-JDi6oQ" width="249" height="140" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>


<p style="margin-left: -100px;"><iframe src="//www.youtube.com/embed/b65C-JDi6oQ" width="249" height="140" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p> 

sticker>>Harmonia Pastelsticker>>Doraemon maruko shinchansticker>>dragonquest-ball kitaro cobbrasticker>>girl kidsticker>>girl thingsticker>>ugly charactor
html >> ขึ้นบรรทัดใหม่ <br>   >> ช่องไฟ  &nbsp;

อ่าครับ ที่ผมบอกพื้นที่ให้เล่นนี่เล่นอะไรได้บ้าง ก็ใส่ภาพ แล้วก็ใส่ วีดีโอไงครับ ยังไงก็ตามบทความนี้เป็นบันทึกใช้ด่วนของผม ถ้ามีบางคนอ่านไม่รู้เรื่องก็บอกนะครับ ไว้จะค่อยๆเขียนแบบยาวๆทีละสเต็บๆ

3,527 total views, 9 views today

Comments

comments