Change Font and Background

11 /11 2014

These are the 7 levels of font size.
xx-small | x-small | small | medium | large | x-large | xx-large

Depending on your browser settings and type, using the units pt and px may mean that users cannot change the font size. These units may remove the capability "Change font size as needed", so instead we suggest that you use relative units such as em or % to set the font size.

Font Colour

You can change font colour by adjusting the colour properties of the corresponding tag. There are several ways to designate font colour on the style sheet, but the colour codes used are [# and 6 characters] or [# and 3 characters]. If you would like to change the colour, please choose which colour code you would like to use.

As an example, we will show you how to change all font colour simultaneously and only specific parts.

To change all text on a page please make the appropriate changes to the top element of the HTML, html(body).

HTML Elements and Parent Relationship.

▼HTML（Parent）


<html>
  <head>
    <meta>
    <title></title>
  </head>
  <body>
    <h1></h1>
    <p></p>
    <address></address>
  </body>
</html>

▼Style settings go between the <body> tags.


body {
	background-color: #FFFFFF;
	color: #666666;   
}

You can change the whole sites font colour by changing color: #FFFFFF to color: #666666;.
（eg. ：「#000000」 will turn all font to black）

- So how do we change only the titles to red? This is where we use selectors.

Basic Selectors

Selectors designates what style will be applied to a HTML tag. Lets see how the following selectors work.

- Selector Sequence

*In this image orange indicates the Selector, the light blue indicates the Property and the dark blue indicates the Value.

The Property determines what style will be applied and the value is representation of what will be applied. In the case of the above example: [color] tag's [value] is determined for [h1]. You can designate multiple values using a comma (,).

Tag Name

h1 { ... }

Applies designated styles to elements belonging to the tag name.

* Asterisk

*.MyClass { ... }
*#MyID { ... }

Applies style to all elements.

Tag Name #Name

p#MyID { ... }

Applies styles to affiliate identifiers designated within that element.

Tag Name : Name

p.MyID { ... }

Applies styles to affiliate identifiers designated within that element.

Using these sequences, let's try to change the color of the font for an entry!

Changing an Entry's Font Colour

The independent tag for FC2 Blog for the entry is <%topentry_body></strong> <%topentry_body> *The yellow part in the following picture.

*Editing HTML

The parent element surrounding this tag is <div class="entry_body">

(The part in the red box)

The code in the red box as shown above is the tag that will be used to apply styles to the entry text.

*Before changing the style sheet

So let's now set the entry text to red. Enter the following under the [overflow:hidden] line.
color : #FF0000; /

*After changing the style sheet

We have now changed the entry text, you can limit conditions for application by using the appropriate selectors.

Change Link Colour

You can set the colour of a link using a pseudo class. When using the :hover pseudo class please be careful of the order (link > visited > hover > active). You will get the wrong display result if the order is incorrect.

Element name : Link
Style is applied to not yet viewed links (no-cache created).

Element Name : Visited
Style applied to viewed links (cache created).

Element Name : Hover
The style applied when moving the mouse cursor over the tab or when it is not in an active state.

Element Name : Active
The style applied when the tag has been activated by the user.

To change settings for all links on a page:

a:link {color : #f60; /* Non-viewed links become orange */}

a:visited {color : #00f; /* Viewed links become dark blue */}

a:hover {color : #f00; /* Link becomes red when the mouse cursor is moved over.*/}

a:active {color : #f00; /* Active link becomes red */}

When setting links with specified specific classes:

a.MyClass:link {color : #f60; /* Non-viewed link becomes orange. */}

a.MyClass:visited {color : #00f; /*Viewed link becomes dark blue. */}

a.MyClass:hover {color : #f00; /*Link turns red when mouse is moved over. */}

a.MyClass:active {color : #f00; /* Link colour is red when active. */}

When setting links that include specified specific classes:

MyClass a:link {color : #f60; /* Non-viewed link becomes orange */}

.MyClass a:visited {color : #00f; /*Viewed link becomes dark blue */}

.MyClass a:hover {color : #f00; /* Link becomes red when mouse is moved over. */}

.MyClass a:active {color : #f00; /* Link turns red when active. */}}

Background

Background Colour

You can change the background colour or background image by making adjustments to the style sheet. Please be sure to apply the "background" property for the corresponding elements.

The property for background colour is background-color.
The value in the red box in the image below is the designated colour.

*Editing the style sheet:

Changing the Background Image

Use the property "background-image" to set the background image. You can set the lining up and display position using the properties "background-repeat" and "background-position".


body {
background-image : url("Image URL”); /* Sets the background image */
background-repeat : repeat; /* Set images as tiles */
background-position : left top; /* Set the image position to the left of the screen */
background-attachment : fixed; /* Fixating the background image position */
}

Image Layout

Repeat

Set the background image as tiles.

Repeat-x

Background images repeatedly linked up sideways.

Repeat-y

Background images repeatedly vertically.

No-repeat

Only one image will be displayed as the background image.

Image Display Position

Numerical Value + Unit

You can set spaces with numerical values so that will be orderly displayed horizontally or vertical.
Units that can be used include px, em, ex, in, cm, mm, pt or pc.

Percentage Value
Set the percentage value so that images will display in order sideways or vertically in order blocks.

left | center | right
top | center | bottom
Set the beginning position for sideways or vertical images using one of these keywords.
The order does not have been to be specifically determined.

Fixing the Position of an Image
- fixed
Fixes the position of the background image.

- scroll
The background image will move the blog content when the page is scrolled up or down.

FC2 Blog Manual