چرتک بلاگ

میدونم میدونم... تو قسمت قبلی گفتم قراره در مورد css های تو در تو صحبت کنیم ولی خب، گفتم یکمی جو رو عوض کنیم و بیشتر مرد عمل باشیم. مستقیم میریم به ویرایش قالب! و چی بهتر از بک گراند وبلاگتون؟ تو این قسمت یاد می گیریم چطور بک گراند وبلاگ رو سفارشی کنیم و اصلا از کجا بک گراند پیدا کنیم و مشکل تکرار شدن عکس تو برخی وبلاگ ها رو حل کنیم. پس با ما همراه باشین...

اگر هیچی در مورد دستورات CSS نمیدونین توصیه میکنم این پست رو ببینید. صد در صد الزامی نیست ولی دیدتون رو باز میکنه (علی الخصوص مثال مشدی شلوار میخوام!)

خب میدونین که هر چیزی که به ظاهر وبلاگ مربوط باشه تو دستورات CSS هست. پس از مرکز مدیریت، به قسمت قالب - ویرایش CSS قالب فعلی میریم. بعدش از توی کد ها همین بالا ها یک چیز این شکلی پیدا میکنین:

body {
...
}

که توش چند تا دستور مثل font-family و font-size هستش (که مربوط به فونت هستن) قراره کدهای مربوط به بک گراند رو بین این دو آکولاد باز و بسته بنویسیم. اول از همه یک کپی از کل کد هاتون بگیرین و تو جایی ذخیره کنین که اگر به مشکلی برخوردین همه چیو به حالت اول برگردونین. تو قدم دوم هر خطی که اینطوری بود رو حذف کنین تا همه چیزو از نو شروع کنیم.

background: ... ;
background-color: ... ;
background-image: ... ;
background-attachment: ... ;
background-repeat: ... ;
background-position: ... ;

خب حالا ببینیم اصلا چیا رو میتونیم به عنوان بک گراند بزاریم!

1. رنگ ها

ساده ترین بک گراندی که میتونین بزارین رنگ هستش. مثلا برای اینکه بک گراندتون رو به مثل پایین کنین کافیه دستور زیر رو اینطوری در خط جدید قبل از آکولاد بسته مربوط به body بنویسین.

body {
... 
background-color:#689F38;
}

برای وارد کردن رنگ میتونین از همون ابزار صفحه "ویرایش CSS قالب فعلی" استفاده کنین. یا میتونین از رنگ های استانداردی مثل رنگ های متریال استفاده کنین(برای کسانی که نمیدونن رنگ های متریال همون رنگ های استفاده شده در طراحی اندروید 5 به بالا هستش). رنگ ها بحث مفصلی دارن برای خودشون :) اگر قسمت شد یک پست در موردش مینویسم!

2. عکس

میتونین یک عکسی رو به عنوان بک گراند تو وبلاگتون بزارین. برای اینکار:

body {
...
background-image:url("x");
}

که در کد ما x همون لینک عکسی هست که تو اینترنته. یعنی اگر اون لینک رو در مرورگرتون بزنین عکسه نمایش داده میشه. اگر قصد دارین بک گرانتون رو عکس طبیعت یا بازیگری چیزی بزارین عجله نکنین که قراره توضیح بدیم! :)

3. گرادیانت

(اگر نمیدونین) گرادیانت اینطوره که مثلا سمت راست رنگش زرده و هر چه قدر به سمت چپ میرین رنگش به آبی تغییر میکنه. مثل این:

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

توضیحات اینکه هر قسمت چیکار میکنه در توان و حوصله این پست نیست :) ولی میتونین از این سایت استفاده کنین تا گرادیانت های این چنینی بسازین! کد گرادیانت بالا هم اینه:

background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);

4. ترکیب عکس و رنگ

در عکس های png میشه قسمتی از عکس رو شفاف کرد کرد که باعث میشه اگر در وبلاگتون بزارین رنگ پس زمینه در اون قسمت های شفاف دیده بشه. فایدش چیه؟ مثلا میتونین بک گراند هایی داشته باشین که به شکل چرم هستن ولی رنگ چرم رو شما تعیین میکنین (چرم بنفش از گاو های بنفش) یا مثلا بک گراند به شکل پارچه و رنگ دلخواهتون داشته باشین (فرض کنین میرین خیاطی میگین از این طرح رنگ قرمزشو به من بده!) که نمونه ای از این موارد قالب چرمینه ، بک گراند وبلاگ من یا بک گراند وبلاگ دوست عزیزمون آقا محمد هستش.

البته خودم مدت های زیاد از این موضوع خبر نداشتم تا اینکه با سایت Transparent Texture آشنا شدم. میتونین به این سایت برین رنگتون و طرحی که دوست دارین رو انتخاب کنین،  پیش نمایشی ازش داشته باشین و اگر دوست داشتید طرح رو دانلود کنید و روی فضای اختصاصی آپلود کنین و تو کدی که این سایت بهتون میده لینک عکس توی کد رو با لینک عکسی که تو بلاگ بیان آپلود کردین عوض کنین.

چرا؟؟

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

نمونه این مورد (که عینا بک گراند وبلاگمه با رنگ متفاوت):

کد مروبطه:

background:url("http://bayanbox.ir/view/4324132963078768254/dark-stripes-light.png") #113d31;

و هزاران هزار روش و خلاقیت دیگه! چیزی که تموم نمیشه خلاقیت طراح ها هستش. بگذریم...

مشکل تکرار شدن عکس

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

background-repeat:no-repeat;

کافیه این کد رو بعد قبل از آکولاد بسته بلوک body بنویسین تا عکستون تکرار نشه. ولی الان میبینیم عکس فقط یک قسمت رو پر میکنه و با اسکرول کردن به پایین، عکس هم اون بالا میمونه و بک گراندمون خالی میمونه. برای اینکه عکس تو یک جای ثابت باشه و با رفتن به پایین صفحه محو نشه باید این کد رو هم اضافه کنیم:

background-attachment:fixed;

کد بالا به زبان ساده به بک گراندمون میگه همون جا که هستی بشین و از جات جم نخور! ولی باز میبینین عکستون تمام صفحه رو پر نکرده و میخواین تو دلتون به کسی که css رو درآورد ناسزا بگین ولی تمنا میکنم باز هم صبر کنین :) کافیه کد زیر رو هم برای حل این مشکل اضافه کنین:

background-size:cover;

و در نهایت چیزی که میخواستین رو به دست میارین! اگر خواستین عکستون به وسط بیوفته هم میتونین بنویسین:

background-position: center;

که البته زیاد لازم نیست کل کد هاتون باید اینطوری بشه:

background-color: x;
background-image:url("y");
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
background-position: center;

که در اون x رنگ دلخواهتون و y لینک عکستون تو فضای اختصاصی هستش. شاید بپرسین چرا تو خط اول رنگ رو هم اضافه کردیم؟ این به این خاطر هست اگر یک زمانی عکستون لود نشد وبلاگ از قیافه نیوفته. همین :) میتونین به جای همه کد های بالا تو یک خط همشون رو خلاصه بنویسین:

background: x url("y") center / cover no-repeat fixed ; 

یعنی اگر به جای x رنگ و به جای y لینک رو بزارین کدتون آمادس!

اگر از center خوشتون نیومد میتونین مقادیر زیر رو امتحان کنین:

left top | left center | left bottom | right top | right center | right bottom | center top | center bottom

حرف آخر

من همه چیزو توضیح ندادم :) ولی میتونین یک نگاهی به این صفحه بندازین و یاد بگیرین. این صفحه هم تمامی دستورات مربوط به background رو شامل میشه. امیدوارم این پست نیازتون رو برطرف کرده باشه! اگر کمکی احتیاج بود همین پایین تو نظر بپرسین :) و خوشحال میشم اگر لینک زیر رو به افرادی که مشکل تکرار عکس رو دارن بدین. تا دیدار بعدی، خوش و خرم باشین!