බ්ලොගර්ලා විසින් ළඟදී කල වෙනස් කම් නිසා, ඇතැම් බ්ලොග් වල කමෙන්ට් වල අකුරු ප්රමාණය අඩු වීම සිදු වී තිබෙනවා. මේ පිළිබඳව වඩාත්ම දුක් වූ කෙනෙක් වුනේ අපේ
ඔබා මාමා. ඔබා මාමා මේ ගැන කොපමණ දුක් වුනාද කියන එක හොඳින්ම පැහැදිලි වෙන්නේ සුපුරුදු පරිදි කමෙන්ට් වලට පිළිතුරු බැදීමට ඔහුට හිත හදා ගන්නට නොහැකි වුනු නිසා.
මගේ බ්ලොග් අඩවිය බ්ලොග්ස්පොට් හි පිහිටවූ එකක් නොවන බැවින්, ඉහත ගැටළුව පරීක්ෂා කර බැලීමට හා විසඳුම් අත් හදා බැලීමට මම ඔබා මාමාගෙන් අවස්ථාවක් ඉල්ලු අතර ඔහු නොපැකිලව ඊට සහයෝගය ලබා දුන්නා. දෝෂයට හේතුව මුලින්ම හඳුනා ගත්තත්, එය පිහිටි ස්ථානය අපැහැදිලියි. හේතුව බ්ලොගර් විසින් සාමාජිකයින්ට විවෘත නොවන ස්ථානයක සිතා මතා 
හෝ අත් වැරදීමකින් කමෙන්ට් වල අකුරු ප්රමාණය ස්ථීරව සටහන් කිරීම. පිහිටි ස්ථානයේ ප්රභලතාව මත සාමාජිකයින් විසින් සිදු කරන හෝ, ටෙම්ප්ලේට වල සටහන් වී ඇති අකුරු ප්රමාණ අබිබවා බ්ලොගර්ගේ අකුරු ප්රමාණය ආදේශ වීමක් සිදු වන බව මම අනුමාන කරනවා. ඒ අනුමාන කිරීමට හේතුව මේ ලිපියේ පසුව දැක්වෙනවා.
මෙහි රෝග පරීක්ෂාවට හා ප්රතිකාර කිරීමට, CSS හා ගුගල් ක්රෝම් බ්රව්සරයේ විශේෂ භාවිතයක් දැන ගැනීමට අවශ්යයි වගේම ඉදිරි අවශ්යතා සඳහා වුනත් ඒවා දැන ගැනීම වැදගත් වේවි. එබැවින් මේ ලිපිය වෙන් වන්නේ ඒවා හැඬුවා දීමට වන අතර, රෝග ප්රතිකාර ක්රමය ඊ ළඟ ලිපියෙන් බලාපොරොත්තු වන්න.
CSS හැඳින්වීම
අත්හදා බැලීම් කිහිපයකට පස්සේ අපේ ප්රශ්නයට සාර්ථක විසඳුමක් ලැබුනා. ඒ බ්ලොග් ටෙම්ප්ලේට කේතයට (Code) විශේෂිත CSS කේත කොටසක් එක් කිරීම මගින්. (CSS ගැන අවබෝධයක් තිබීම ඔබේ බ්ලොග් ටෙම්ප්ලේටය අවශ්ය පරිදි වෙනස්කම් කර ගැනීමට උපකාරී වෙන්න පුළුවන්.http://www.w3schools.com/css/css_intro.asp හිදී ඔබට CSS පිලිබඳ මුලික අවබෝධයක් ලබා ගත හැකියි. . නමුත් ඊට HTML ගැනත් තරමක් දුරට වැටහීමක් තිබීම අවශයි.මුලික HTML ඉගෙන ගැනීමට අවශ්යනම්, http://www.w3schools.com/html/default.asp ඔබට ඒ සඳහා භාවිතා කල හැකියි. HTMLවලින් තොරව CSS වලට පැවැත්මක් නැත්තේ CSS යොදා ගන්නේ වෙබ් පිටු වල අඩංගු කරන HTML කොටස් හැඩ ගැන්වීම (formatting) වෙනුවෙන් නිසා.
CSS අපිට තනි HTML කොටස් වලට යොදා ගන්නට පුළුවන්. පහත උදාහරණය බලමු.
මිනිහ ඉතින් පුරුදු කාරයනෙ, අලුත් මනමාලිට වැඩිය රිද්දන්නෙ එහෙම නැතුව, ඒ වුනාට බොහොම දක්ෂ විදියට, අලුත් මනමාලිවත් සන්තෝස කරල, තමනුත් සන්තෝස වෙන විදියට වැඩ කටයුතු කොරගෙන, ඔක්කොම ඉවර වුනාට පස්සෙ කෙල්ලගෙ නළලත් ඉඹල, කාමරේ දොරත් වහගෙන, තමන්ගෙ කාමරේට ගියා නිදාගන්න.
මනමාලිටත් පුදුමය්, ඒත් සන්තෝෂයි. ඔක්කොම සැප සම්පත් ලැබුනත්, නොලැබෙයි කියල හිතා ගෙන හිටපු සැප සම්පතකුත්, මේ මනුස්සය එක්ක ඉන්ඩ සිද්ද වෙන ටික කාලෙට වුනත් ලැබෙනවනෙ කියල.
මනමාලිට මහන්සියටත් එක්ක නින්ද යාගෙන එනකොට, ආයෙමත් දොරට හෙමින් සැරේ තට්ටු කරනව ඇහුන.
අපි මේ ඡේද දෙක HTML අනුසාරයෙන් ලියමු.
<p>මිනිහ ඉතින් පුරුදු කාරයනෙ, අලුත් මනමාලිට වැඩිය රිද්දන්නෙ එහෙම නැතුව, ඒ වුනාට බොහොම දක්ෂ විදියට, අලුත් මනමාලිවත් සන්තෝස කරල, තමනුත් සන්තෝස වෙන විදියට වැඩ කටයුතු කොරගෙන, ඔක්කොම ඉවර වුනාට පස්සෙ කෙල්ලගෙ නළලත් ඉඹල, කාමරේ දොරත් වහගෙන, තමන්ගෙ කාමරේට ගියා නිදාගන්න.</p><p>මනමාලිටත් පුදුමය්, ඒත් සන්තෝෂයි. ඔක්කොම සැප සම්පත් ලැබුනත්, නොලැබෙයි කියල හිතා ගෙන හිටපු සැප සම්පතකුත්, මේ මනුස්සය එක්ක ඉන්ඩ සිද්ද වෙන ටික කාලෙට වුනත් ලැබෙනවනෙ කියල</p.><p>මනමාලිට මහන්සියටත් එක්ක නින්ද යාගෙන එනකොට, ආයෙමත් දොරට හෙමින් සැරේ තට්ටු කරනව ඇහුන.</p.>
HTML භාෂාවෙන් <p> යනු ඡේදයක ආරම්භය.</p.> යනු ඡේදයක අවසානයයි. දැන් අපට පළමු ඡේදයේ අකුරු ප්රමාණය 18 , පසුබිම් වර්ණය කළු හා අකුරු වර්ණය සුදු ලෙස වෙනස් කර ගැනීමට අවශ්යනම් පහත පරිදි CSS යොදා ගන්නට පුළුවන්.
<p style="font-size:18px;color:white;background-color:black;">මිනිහ ඉතින් පුරුදු කාරයනෙ, අලුත් මනමාලිට වැඩිය රිද්දන්නෙ එහෙම නැතුව, ඒ වුනාට බොහොම දක්ෂ විදියට, අලුත් මනමාලිවත් සන්තෝස කරල, තමනුත් සන්තෝස වෙන විදියට වැඩ කටයුතු කොරගෙන, ඔක්කොම ඉවර වුනාට පස්සෙ කෙල්ලගෙ නළලත් ඉඹල, කාමරේ දොරත් වහගෙන, තමන්ගෙ කාමරේට ගියා නිදාගන්න.</p><p>මනමාලිටත් පුදුමය්, ඒත් සන්තෝෂයි. ඔක්කොම සැප සම්පත් ලැබුනත්, නොලැබෙයි කියල හිතා ගෙන හිටපු සැප සම්පතකුත්, මේ මනුස්සය එක්ක ඉන්ඩ සිද්ද වෙන ටික කාලෙට වුනත් ලැබෙනවනෙ කියල</p.><p>මනමාලිට මහන්සියටත් එක්ක නින්ද යාගෙන එනකොට, ආයෙමත් දොරට හෙමින් සැරේ තට්ටු කරනව ඇහුන.</p.>
ප්රතිඵලය පහත පරිදි,
මිනිහ ඉතින් පුරුදු කාරයනෙ, අලුත් මනමාලිට වැඩිය රිද්දන්නෙ එහෙම නැතුව, ඒ වුනාට බොහොම දක්ෂ විදියට, අලුත් මනමාලිවත් සන්තෝස කරල, තමනුත් සන්තෝස වෙන විදියට වැඩ කටයුතු කොරගෙන, ඔක්කොම ඉවර වුනාට පස්සෙ කෙල්ලගෙ නළලත් ඉඹල, කාමරේ දොරත් වහගෙන, තමන්ගෙ කාමරේට ගියා නිදාගන්න.
මනමාලිටත් පුදුමය්, ඒත් සන්තෝෂයි. ඔක්කොම සැප සම්පත් ලැබුනත්, නොලැබෙයි කියල හිතා ගෙන හිටපු සැප සම්පතකුත්, මේ මනුස්සය එක්ක ඉන්ඩ සිද්ද වෙන ටික කාලෙට වුනත් ලැබෙනවනෙ කියල
මනමාලිට මහන්සියටත් එක්ක නින්ද යාගෙන එනකොට, ආයෙමත් දොරට හෙමින් සැරේ තට්ටු කරනව ඇහුන.
දැන් අපි හිතමු අපට මේ වෙනසම තෙවන ඡේදය ඇතුලත් වුනොත් පළමු ඡේදයේ ක්රමයම අනුගමනය කරන්න පුළුවන්. ඒත් නැවත නැවතත් එම වෙනසම ඊ ළඟ ඡේද වලටත් කල යුතු නම්, පළමු ක්රමය වදයක් වෙනවා. ඊට විසඳුම CSS Claases යොදා ගැනීම.එකම වර්ගයේ හෝ වෙනස් වර්ගයේ හෝ ඕනෑම HTML කොටස් සමුහයකට එකවර පොදු CSS දීමකට Classes භාවිතා කරන්නට පුලවන්. මෙහිදී අපේ උදාහරණයට ගැනෙන්නේ එකම වර්ගයේ එනම් <p> කොටස් දෙකක් (පළමු හා තෙවන ඡේදය).
CSS class එකක් ඇතුලත් කල යුත්තේ <style> නම් විශේෂිත HTML කොටසක් තුල. ඒ වගේම CSS Class එකට නමක් අවශ්යයි, <style> කොටස ඇතුලේ නම සඳහන් කරන අතර, පසුව අදාළ HTML කොටස් වලද එම නම සටහන් කරනවා. පහත උදාහරණය බලන්න.
<style>
p.blackNwhite{
font-size:18px;
color:white;
background-color:black;
}
</style>
<p class="blackNwhite" >මිනිහ ඉතින් පුරුදු කාරයනෙ, අලුත් මනමාලිට වැඩිය රිද්දන්නෙ එහෙම නැතුව, ඒ වුනාට බොහොම දක්ෂ විදියට, අලුත් මනමාලිවත් සන්තෝස කරල, තමනුත් සන්තෝස වෙන විදියට වැඩ කටයුතු කොරගෙන, ඔක්කොම ඉවර වුනාට පස්සෙ කෙල්ලගෙ නළලත් ඉඹල, කාමරේ දොරත් වහගෙන, තමන්ගෙ කාමරේට ගියා නිදාගන්න.</p><p>මනමාලිටත් පුදුමය්, ඒත් සන්තෝෂයි. ඔක්කොම සැප සම්පත් ලැබුනත්, නොලැබෙයි කියල හිතා ගෙන හිටපු සැප සම්පතකුත්, මේ මනුස්සය එක්ක ඉන්ඩ සිද්ද වෙන ටික කාලෙට වුනත් ලැබෙනවනෙ කියල</p.><p class=”blackNwhite” >මනමාලිට මහන්සියටත් එක්ක නින්ද යාගෙන එනකොට, ආයෙමත් දොරට හෙමින් සැරේ තට්ටු කරනව ඇහුන.</p.>
ප්රතිපලය ,
මිනිහ ඉතින් පුරුදු කාරයනෙ, අලුත් මනමාලිට වැඩිය රිද්දන්නෙ එහෙම නැතුව, ඒ වුනාට බොහොම දක්ෂ විදියට, අලුත් මනමාලිවත් සන්තෝස කරල, තමනුත් සන්තෝස වෙන විදියට වැඩ කටයුතු කොරගෙන, ඔක්කොම ඉවර වුනාට පස්සෙ කෙල්ලගෙ නළලත් ඉඹල, කාමරේ දොරත් වහගෙන, තමන්ගෙ කාමරේට ගියා නිදාගන්න.
මනමාලිටත් පුදුමය්, ඒත් සන්තෝෂයි. ඔක්කොම සැප සම්පත් ලැබුනත්, නොලැබෙයි කියල හිතා ගෙන හිටපු සැප සම්පතකුත්, මේ මනුස්සය එක්ක ඉන්ඩ සිද්ද වෙන ටික කාලෙට වුනත් ලැබෙනවනෙ කියල
මනමාලිට මහන්සියටත් එක්ක නින්ද යාගෙන එනකොට, ආයෙමත් දොරට හෙමින් සැරේ තට්ටු කරනව ඇහුන.
බ්ලොගර් කමෙන්ට් ගත්තොත් (පරීක්ෂා කල බ්ලොග් අඩවි වල), කමෙන්ටු අන්තර්ගත වන්නේ HTML </blockquote> කොටස් තුල. </blockquote>< යොදා ගන්නේ යම් දීර්ඝ උදෘතයක් යෙදීමට අවශ්ය විට.බ්ලොගේර් කමෙන්ටු වල අකුරු අඩංගු </blockquote>< හි CSS class එක වන්නේ “comment-content”. එම class එකෙහි අකුරු ප්රමාණය බ්ලොගර් විසින් 13ට සීමා කර තිබෙනවා.
.comments .comments-content {
font-size: 13px;
}
සාමාන්ය විසඳුම
බ්ලොගර් ඇඩ්මින් හිදී ටෙම්ප්ලේට් HTML එඩිට් කර ගත හැකි ස්ථානයට (මතු දැක්වෙන) ගොස් ඉහත font-size අගය තමන්ට අවශ්ය ප්රමාණයට වෙනස් කර සේවු කිරීම. නමුත් එතැන මේ CSS කේතය හමු වුනේ නැහැ. ඒ කියන්නේ මෙය බලපෑම් කරන්නේ ටෙම්ප්ලේටයට පිටතින්.
පිළිගත් සම්මුතීන් අනුව, මෙවැනි අවස්තාවකදී අපට අළුතින් CSS කේතයක් එකතු කල හැකියි, නමුත් එකම දෙය වෙනුවෙන් එකම CSS යෙදුම වෙනස් අයුරින් (font-size:13px; හා font-size:18px;)යොදා ඇතිනම්, ඒ යෙදු ස්ථානය හා යොදා ඇති අනුපිලිවෙල මත බ්රවුසරය විසින් ඉන් එකක් තෝරාගෙන ඉතිරිවා නිශේධනය කෙරෙනවා.
මෙතනදී අපි අළුතින් කොපමණ CSS යෙදුම් ඇතුලත් කලත්, ඒවා බ්රවුසර මගින් නිශේදනය වී බ්ලොගර්ගේ font-size:13px ආදේශ කිරීම සිදුවන නිසා අපට අවශ්ය වෙනස සිදුවන්නේ නැහැ.
රෝග පරීක්ෂාව
කලින් කියු පරිදි මේ සඳහා යොදා ගත්තේ ගුගල් ක්රෝම් බ්රවුසරය.එහි තියෙන “Inspect Element” පහසුකම හරහා අපට ඕනෑම වෙබ් පිටුවක, ඕනෑම HTML කොටසක CSS පරීක්ෂා කිරීමට හා අත් හදා බැලීමට පුළුවන්.
1. අදාළ වෙබ් පිටු කොටස, මෙතනදී කමෙන්ටුව මත රයිට් ක්ලික් කර, ලැබෙන මෙනුවෙන් “Inspect Element” යන්න තෝරන්න.
2. එවිට බ්රවුසර වින්ඩෝවේ පහලින්, අමතර පැනලයක් දිස් වෙන අතර, එහි ඔබට කෙලින්ම දිස් වන්නේ, “Elements” පැනලය. අපට මෙතනදී අදාළ වෙන්නෙත් එය.Elements පැනලයේ උප කොටස් දෙකක් තිබෙනවා. පහත ඔබ දකින පින්තුරයේ A යනුවෙන් නම් කල කොටසේ මුලික වශයෙන් අදාළ වෙබ් පිටුවේ HTML සමස්තය පරීක්ෂා කරන්නට පුළුවන්.එහි එක් වරකට ඔබට එක් HTML කොටසක් තේරිය හැක. ඔබ මුලින් රයිට් ක්ලික් කල HTML කොටස ඉබේම A හි තේරී පවතිනු ඇත.
B කොටසේ දිස්වන්නේ A කොටසේ ඒ වන විට තෝරා ඇති HTML කොටසේ CSS යෙදුම් ලයිස්තුවයි.
Elements පැනලයේ උප කොටස් දෙක වෙන් වෙන්ව පහත දැක්වෙනවා.
ඉහත රුපයේ දැක්වෙන පරිදි තේරී ඇති (selected) </blockquote>< කොටසේ CSS class eka, “comment-content” බව පැහැදිලියි.
3. A, B කොටස් දෙක හරහාම අපට අවශ්ය පරීක්ෂා / පරීක්ෂණ කිරීම් සිදුකරන්න පුළුවන්. නමුත් මෙහිදී දැනට A කොටසට අත නොතබන්න..
4. B කොටසේ ස්ක්රෝල් බාර් එකද ආධාර කරගෙන එහි දිස් වෙන CSS Style යෙදුම් එකින් එක බලන්න, “comment-content” වෙනුවෙන් ඇති font-size යෙදුම හමු වන තුරු.
5. ඉහත රුපයේ ද දිස්වෙන පරිදි ඔබට “comment-content” වෙනුවෙන් ඇති font-size යෙදුමට අමතරව දකුණු පසට වන්නට චෙක් බොක්ස් (මනාප කොටුවක්) 
දිස් වේවි (ඒ සඳහා ආසන්නයට මවුස් පොයින්ටරය රැගෙන යන්න.)
6. කලින් කී මනාප කොටුව මත ක්ලික් කර, එහි ඇති තේරීම ඉවත් කරන්න (Uncheck / Deselect). එයින් ඔබට අදාළ CSS යෙදුම නොමැති විට, වෙබ් පිටුව දිස් වන ආකාරය බලා ගන්නට පුළුවන්. මෙහිදී ඔබට පැහැදිලි වේවි, font-size: 13px; ඉවත් කල විට කමෙන්ට් අකුරු සාමාන්ය තත්වයට පත් වන බව. එනම් දෝෂය ඇත්තේ එතැනයි.
7. font-size: 13px; හි 13px මත ඩබල් ක්ලික් කර, අකුරු ප්රමාණය ඔබට අඩු වැඩි වශයෙන් එතැන සටහන් කර බලන්න.px (වෙනත් ඒකකද අත) යන්න සංඛ්යාවට පසුව තිබිය යුතු බව මතක තබා ගන්න.
ඉහත 6 හෝ 7න් ඔබගේ බ්ලොග් ටෙම්ප්ලේටයට කිසිඳු වෙනසක් සිදු නොවන අතර සිදු වන්නේ තාවකාලික ඔබගේ වෙබ් බ්රවුසරය මගින් ඔබට දර්ශනය වන දේ වෙනස් කිරීම පමණයි.
ලිපිය දිග වැඩි වන නිසා මෙතනින් නවතින්නම්. ඊ ළඟ කොටස ප්රතිකාර ක්රමය ගැනයි.
