Como personalizar tu blog de Ameba: Parte 2

 En el tutorial anterior, vimos como personalizar nuestro blog usando una plantilla pre-diseñada de Ameba.

Esta vez, vamos a ver como modificar el CSS de nuestro blog de Ameblo para poder tener un blog completamente personalizado a nuestro gusto.

•El primer paso, es elegir una plantilla pre-diseñada como vimos en el tutorial anterior, pero debemos elegir una en particular que es la siguiente:

•Vamos a la parte inferior donde tenemos la lista de categorías de plantillas como les mostré en el tutorial anterior y seleccionamos el botón que marco en rojo:

•Deben seleccionar la plantilla en blanco que les marco en la siguiente imagen:

•Terminan el proseso de selección de plantilla de la misma manera que mostré en el tutorial anterior.
•Al finalizar, en vez de aparecer un solo botón, aparecerán dos, como ven acá:

•Ese botón los llevará a la ventana donde podrán modificar su CSS.

•Para los que no tienen conocimientos del mismo, les daré las bases para poder modificarlo. Recomiendo copiar siempre el original por si cometen algún error.

•El primer paso para modificarlo es la parte superior donde pueden cargar un banner para el blog. Seleccionen una imagen de su pc que quieran usar de banner y den click en el botón que les marco.

•Ahora, la plantilla CSS de ameba es bastante sencilla. Está separada en 4 categorías que a su vez tienen sub-categorías. Las mismas son las siguientes:

(1)Estilo de letras.

(1-1)Letra general.
(1-2)Letra del título del blog.
(1-3)Estilo de letra de los posts.
(1-4)Estilo de letra de la barra lateral.

(2)Estilo de botones.

(3)Estilos de áreas.

(3-1)Body.
(3-2)Header del blog.
(3-3)Área de contenido.
(3-4)Área principal.
(3-5)Pizarra de mensajes.
(3-6)Post.
(3-7)Área de barra lateral.
(3-8)Menú de barra lateral.
(3-9)Borde de lista de fotos de barra lateral.
(3-10)Columna de comentarios, lista de posts

(4)Otros.


•Ahora mostraré los cambios principales que se pueden hacer para personalizar el blog.

•En la categoría (1) y sus sub-categorías, simplemente jugar con los colores y tamaño de texto cambiando los "#000000" por otros códigos de colores.
•En (1-2) van a ver el siguiente código:
 "/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:2.11em;
}


/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;
}"

Pueden querer cambiarle el color para que convine con su blog, pero en caso de querer eliminar el título y descripción para que no entorpezca su banner, simplemente lo cambian por el siguiente:
"/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:0em;
}


/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;
font-size:0em;
}"

•La categoría (2) sugiero dejarla como está, pero en caso de querer cambiar los botones, mi recomendación es copiar los códigos de imágenes que aparecen, pegarlas en el explorador en una nueva pestaña y ver como son y de ahí jugar a crear botones con tamaños y formar similares pero otros colores en algún programa de diseño gráfico, subir la imagen a un host como imageshack o photobucket y cambiar el código de la imagen existente por el de nuestra imagen.

•(3-1) acá es donde podemos agregar una imagen o color de fondo. El código que nos aparece es el siguiente:
"/* skinBody ボディ */
.skinBody{}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}"

si lo que queremos es un solo color de fondo, debemos cambiarlo y poner (Siempre sin las comillas que pongo al principio y al final):

"/* skinBody ボディ */
.skinBody{
background:#000000;
}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}

(El "#000000" cambiarlo por el código del color deseado)

En caso de querer una imagen de fondo el código es:
"/* skinBody ボディ */
.skinBody{
background:#000000 url(poner acá url de la imagen que queremos de fondo);
}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}"

•En (3-2) lo primero que van a ver es el siguiente código:

"/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */"

Este código lo vamos a cambiar un poco para hacer que el header se vea completo y quede centrado:

"/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{width: 950px;
padding: 50px 0px 30px 20px;
background: url(Acá el url de la imagen de su header) no-repeat left bottom;
background-position: center;
color: #fff;
height: 410px;
margin-bottom: 0px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */"

★Aclaro que en "{width: 950px;
padding: 50px 0px 30px 20px;" y en "height: 410px;" puse los tamaños que iban bien con mi header, ustedes pueden tener que cambiar los suyos. Prueben como queda y vayan viendo.
★El url que deben poner entre paréntesis en este caso es el que aparece en el pequeño cuadrito abajo del preview de su banner cuando lo subieron al principio:

•Estos son los cambios principales. Pueden probar cambiando los códigos de los colores en las diferentes áreas para que convinen con su blog.
•En caso de querer poner imagenes de fondo en las diferentes áreas como en (3-6) o (3-8), pueden hacerlo agregando url(Poner url de la imagen que quieren de fondo) en las zonas que dicen " en las zonas que dicen background:#000000" o cualquier otro código de color. Deben ponerlo justo después del código de color dejando un espacio.

Ejemplo: "background:#ffffff url (url de la imagen de fondo que quiero)"

Espero que les haya servido y haber sido suficientemente clara. Si tienen alguna duda, como siempre, me dejan un comentario.

Si hacen su propio diseño en su blog de Ameblo, me gustaría verlo! Denme peta en http://ameblo.jp/tutoespanol/ así podré ver sus creaciones y devolver el peta!!