چرتک بلاگ

خوب این همه مقدمه چینی کردیم و از CSS حرف زدیم تا برسیم به این قسمت :) توی این قسمت هر چی که قبلا از وبلاگ زدایان خوندین به کمکتون میاد! امروز ما قراره قالب شماره 52 عرفان رو با کمک ابزار Inspector مرورگر کروم ویرایش کنیم (خودم بیشتر از فایرفاکس استفاده میکنم ولی گویی آمار استفاده از کروم بالا هستش. بخاطر همین از کروم استفاده میکنیم. دلیل انتخاب قالب عرفان هم استفاده زیاد و ساده بودنش هست). ما قراره متن هدر قالب رو کمی درشت تر کنیم، منو ها رو وسط چین کنیم، متن نوشته ها رو کمی بزرگتر کنیم و بک گراند قسمت های مختلف رو تغییر بدیم. خب بدون مقدمه بریم سر اصل مطلب!

ابتدا آدرس وبلاگتون رو در مرورگر بزنین و به وبلاگتون برین. بعد از اینکه وبلاگ کاملا لود شد از صفحه کلیدتون دکمه F12 رو بزنین تا Developer Tools مرورگرتون براتون ظاهر بشه. میتونین از دکمه های ترکیبی cntrl + shift + i و یا با رفتن به منو  more tools - developer tools هم این ابزار رو روی صفحه بیارین. نمای کلی ابزار به شکل زیر هستش(برای نمایش در ابعاد اصلی روی عکس کلیک کنین):

قسمت بنفش کل سند HTML شماست که مرورگر اون رو لود کرده، یعنی پایه و اساس وبلاگتون. اگر ماوستون رو روی دستورات html بگیرین توی سایتتون قسمت مرتبط رو هایلایت میکنه (که یعنی داداش کدی که اینجا نوشته همون اینجاست که بهت نشون میدم). ما فعلا با این قسمت زیاد کاری نداریم و هدفمون ویرایش ظاهر هستش. بنابراین این قسمت رو به بعد موکول میکنیم.

قسمت سبز دستورات ظاهری اعمال شده بر روی عنصری هست که از قسمت بنفش انتخاب کردین. مثلا اگر پاراگرافتون قرمز بود دستور ;color:red که یک دستور CSS هستش تو این قسمت میاد. میتونین از این قسمت دستورات جدیدی رو بزنین یا تیک کنار دستورات رو بردارین تا ببینین بدون اون کد ها ظاهر سایتتون چطوری میشه.

قسمت قرمز سلسه مراتب عنصری هست که از قسمت بنفش انتخاب کردین. مثلا تو عکس بالا تگ پاراگرافی که انتخاب کردیم (یا کردم!) توی یک جعبه با کلاس post-content هستش که اون جعبه هم توی یک جعبه دیگه با کلاس post هست و این روند تا html ادامه پیدا میکنه. میتونین روی هر نوشته کلیک کنین تا اون عنصر در قسمت بنفش انتخاب بشه.

قسمت نارنجی کوچولو برای این هست که بدونین سایت یا وبلاگ شما ریسپانسیو یا واکنش گرا هست یا خیر. اگر واکنش گرا بود باید ظاهر مناسبی داشته باشه و اسکرول بار افقی نمایش داده نشه! در پست دیگه ای در این مورد صحبت میکنیم :)

و اما قسمت آبی... دادگر روز های سخت طراحی... شما حتی اگر از کد های html سر در نیارین این دکمه میتونه کمک کنه چیزی که میخواین تغییر کنه رو پیدا کنین و در قسمت بنفش انتخاب بشه (و در نتیجه از قسمت سبز بتونین ظاهر اون قسمت رو تغییر بدین!) میگین چطوری؟ بریم ببینیم:

اول این دکمه آبی رو انتخاب میکنیم تا رنگش به آبی تغییر پیدا کنه. اگر رنگش آبی بود یعنی فعاله و فال گوش ایستاده تا شما عنصری که میخواین رو انتخاب کنین تا اون رو تو قسمت کدهای HTML براتون نمایش بده.

حالا ما نشانگرمون رو روی عنوان هدر سایت (عبارت برادر دوقلوی چرتک بلاگ) میبریم تا این پنجره کوچولو زیرش بیاد:

این پنجره کوچیک میگه یک تگ a (که مربوط به لینک هستش) رو با رنگ سفید و فونت 16 پیکسلی یکان میبینم. اگر کلیک کنین کد مربوط به این قسمت توی کد های html انتخاب میشه. درست مثل عکس زیر:

الان همون طور که میبینین میتونین رنگ متن رو از قسمت CSS های اعمال شده تغییر بدین. برای اینکار کافیه اون مربع سفید رنگ که بعد از color نوشته رو بزنین تا پنجره ای براتون نمایش داده بشه و بتونین رنگ های مختلف رو امتحان کنین (اگر قسمت های قبل وبلاگ زدایان رو دیدین #header a یعنی هر چی لینک که درون عنصری با آیدی header هست مورد هدف قرار بده. در حقیقت رنگ متن هدرمون که در حقیقت یک لینک هستش، بخاطر این دستوره.)

و در همین زمان که رنگ رو تغییر میدین میبینین که رنگ عنوان هم به صورت زنده تغییر میکنه! ویژگی جالب و خوبی هست. حالا میخوایم فونت عنوان رو کمی بزرگتر کنیم (مثلا 30 پیکسل کنیم) چیکار باید بکنیم؟

میتونین دستور font-size:30px رو مستقیم زیر همین color بنویسین اگر یکبار روی آکولاد بسته کلیک کنین جعبه ورودی براتون نمایش داده میشه. با شروع نوشتن مرورگر خودش دستوراتی رو پیشنهاد میده و شما کافیه اون رو انتخاب کنین یا اینتر رو بزنین تا بره به جعبه ای که توش باید اندازه رو بنویسین. (خودتون انجام بدین متوجه میشین)

و یا روش بهتر اینه که تو قسمت استایل های CSS به پایین بریم تا ببینیم اندازه فونت از عنصری به ارث رسیده؟ و اگر بله امکان تغییرش هست یا نه. مثلا من تو کد این رو پیدا کردم (میتونین از جعبه که توش filter نوشته استفاده کنین تا سریعتر پیداش کنین)

و میبینیم بعله :) لینک ما ویژگی اندازه متن رو از پدرش که h1 هست به ارث برده. (اگر به سلسله مراتب توجه کنین میبینین تگ h1 قبل از a هست یعنی اینکه تگ a ما درون h1 هست و بخاطر همین میتونه ویژگی هاش رو به ارث ببره و اگر روی h1 کلیک کنین تو کد های CSS اینو میبینین. اگر چیزی از وراثت نمیدونین قسمت قبل وبلاگ زدایان رو ببینین.) پس ما میتونیم مقدار 16px رو با یکبار کلیک روش و تایپ 30px تغییر بدیم!

در نهایت هدر ما اینطوری میشه: 

که خب هنوز کار داره یکمی... چون تضاد رنگ رعایت نشده (فریب گفته ابزار رو نخورین!) ولی اون رو بعدا حلش میکنیم. حالا اگر صفحه رو ریفرش کنین میبینین که همه چیز به حالت اول برگشته :) چون فقط داریم روی کامپیوتر خودمون به صورت موقتی تغییرش میدیم! اگر بخوایم این ویرایش ها رو تو قالب اعمال کنیم چیکار باید بکنیم؟ دو روش دارین:

1. روش سخت تر که من قبلا انجام میدادم این هست که از پنل وبلاگتون به قالب - ویرایش CSS قالب فعلی برین و سلکتور

رو جست و جو کنین تا به کدی که باعث تغییر رنگ میشه برسین.

2. روش راحتت تر: اگر تو این عکس به گوشه نگاه کنین میبینین نوشته:

style.css:69
اون عدد همون شماره خطی هست که اون دستور اونجا قرار داره :) (عبارت اول هم اسم فایل CSS هست چون ممکنه بیشتر از یک فایل CSS لود کرده باشن) یعنی به فرض مثال من اگر به ویرایش CSS قالبم برم و با کمک دکمه "jump to line" به خط 69 برم این رو میبینم:

*تعجبات فراوان*

و میتونین به این صورت تغییراتتون رو اعمال کنین! کار خیلی لذت بخشی هست :) البته باید با دستورات CSS یک خورده آشنا باشین که اونم زیاد سخت نیست اگر قسمت های قبلی رو دیده باشین حتما آشنا هستین.

الان کلیات کار رو میدونین ولی خب چند تا مثال دیگه بزنم.

تغییر بک گراند قسمت های مختلف

میخوایم بک گراند هدرمون یکمی تیره تر باشه (چون وجودمون تیره هست) تا تضاد رنگ تا حدودی رعایت بشه :)

طبق برنامه اول اون علامت ماوس رو میزنیم (با کلید های cntrl + shift + c هم میشه) و اینبار طوری کلیک میکنیم که کل اون قسمت های سیاه هایلایت بشن. (اگر نشد هم مشکلی نیست میتونین همیشه از قسمت سلسله مراتب div مورد نظرتون رو انتخاب کنین.) حالا به دستورات توجه کنین:

کاربرد همه دستورات بالا به جز مورد اول رو میدونیم. به دستور background توجه کنین. چون در مورد رنگ ها اصلا حرفی نزدم فقط اینو یادتون باشه که هر زمان دیدین rgba نوشته مقدار های درون پارانتز به ترتیب رنگ قرمز، رنگ سبز، رنگ آبی و میزان کدر بودن هستش. باز مثل قبل میتونین روی اون مربع کوچولو کلیک کنین تا بتونین رنگ دلخواهتون رو انتخاب کنین. من تو این مورد فقط مقدار 0.3 رو به 0.8 تغییر میدم تا شفافیتش کم بشه. اگر هم بخوام از قالب ویرایشش کنم کافیه به خط 60 کد های CSS برم و از اونجا تغییرش بدم.

وسط چین کردن منو ها

باز همون ماجرا و انتخاب اون نوار بزرگ منو و ... فقط توجه کنین معمولا کد های مربوط به اندازه و align و margin اکثرا به div ها اعمال میشن و نه به ul. (در مورد تگ ul توضیحی ندادم. به صورت خلاصه با این تگ میتونین یک لیست بسازین. بیشترین کاربردش تو همین منو ها هست.) من الان متوجه شدم خاصیتی که دنبالش هستیم اینجاست:

text-align تعیین میکنه که عنصر فرزندش (همون لیسته) چپ چین باشه یا وسط چین و یا راست چین. ما مقدارش رو ویرایش میکنیم و مینویسیم center و اینطوری میشه:

قشنگ شد؟ :| نمیدونم... ولی متن هدر یکمی بیش از حد بزرگ شد! حالا اینا صرفا برای آموزشه... زیاد گیر ندین به این چیزا :))

تغییر اندازه فونت و خود فونت کل نوشته ها

اینو از حفظ هم میشه گفت :) هر چیزی که مربوط به کل صفحه هست تو تگ body هستش. باور نمیکنین؟ با همون inspect element یک پاراگراف رو انتخاب کنین و تو فیلتر بنویسین font-szie. احتمال 60 درصد تو تگ body هستش!

نگفتم؟ :) حالا میتونین مثلا 14px بنویسین و ببینین چی میشه. هان راستی حالا که اینجا هستیم اینو هم بگم اگر مطمئن هستین در قالبتون از فونتی مثل فونت yekan استفاده شده میتونین تو font-family مقدار 'yekan' رو بنویسین تا کل نوشته هاتون به فونت یکان باشن. 

گرد کردن گوشه عکس

تو قالب میتونین عکس مربوط به توضیحات وبلاگ رو با دستورات css کمی گرد کنین.

عکس نداریم؟ (آهای ممد، ممد، قربون دستت یادم رفت عکس اضافه کنم بی زحمت اضافه کن. مرسی اح) خوب عکس اضافه شد و گویی تو این قالب به صورت پیش فرض گرده :| مشکلی نیست خودمون مشکل رو ایجاد میکنیم تا مشکل رو حل کنیم و الکی خوشحال بشیم... یک دقیقه صبر کنین، آهان حل شد! :) خوب الان گوشه های تصویر کاملا تیزه. میخوایم گرد کنیم پس باز همون ابزار inspect element رو انتخاب میکنیم و روی عکس کلیک میکنیم. تو قالب من این میاد: (که خود خودش هست چون میگه هر تگ img توی کلاس about-me رو انتخاب کن. در مورد کلاس ها قبلا گفتیم... با این روش میشه اسم کلاس ها رو هم پیدا کرد!)

کافیه یکبار روی آکولاد بسته کلیک کنین تا همون جعبه جدید برای نوشتن مقادیر جدید بیاد و border-radius رو تایپ کنین و اینتر رو بزنین. بعدش هم میتونین مقدار گردی گوشه رو بر حسب px بنویسین مثل 15px. اگر تصویر گرد شد یعنی کارتون درسته و کافیه به خط 494 فایل CSS (تو این مثال) برین و این خط کد رو اضافه کنین. اگر گرد نشد یعنی چیز اشتباهی رو انتخاب کردین و مجددا باید انتخابش کنین. کلا میتونین با آزمون و خطا اجزای قالبتون رو بررسی کنین و همین طوری ویرایشش کنین! فکر کنم بچه شش ساله هم اینو به راحتی آب خوردن یاد بگیره (وبلاگ نویس 6 ساله داریم اینجا؟)

سخن پایانی

خب همین :) این ابزار خیلی استفاده دیگه هم داره که میتونین برای نمونه از سایت سون لرن یاد بگیرین. کلا دنیایی هست برای خودش و تو طراحی خیلی کمکتون میکنه. هر چه قدر بیشتر با دستورات CSS آشنا بشین همون قدر بیشتر میتونین قالبتون رو شخصی سازی کنین. البته این هم محدودیت داره و مثلا اگر div مد نظرتون که میخواین تغییر بدین اصلا کلاس نداشت دیگه این روش کارساز نیست و اول باید با html کلاس مورد نظر رو اضافه کنین و بعدش تو دستورات CSS ظاهر مربوط به اون کلاس رو کد نویسی کنین.

وبلاگ زدایان بعدی قراره در مورد ویرایش html قالبتون باشه :) البته بخشی از اون... خلاصه امیدوارم از این سری تا الان خوشتون اومده باشه و به دردتون بخوره. تا دیدار بعدی همگی در پناه خدا باشین.