Hatena Blog Theme Creation Guide
You can use your own CSS to create original theme designs on Hatena Blog. Post your designs to the Theme Store to share your creations with other Hatena Blog users. The information here is intended for web designers who wish to learn how to create original theme designs for Hatena Blog.
Prior knowledge of CSS is recommended if you want to create original themes for Hatena Blog.
Preparing to create a theme
Before you start creating a theme, make sure you have the proper system environment in place to facilitate viewing your design.
Create a blog for checking your theme
We recommend that you create an entirely new blog for the purpose of checking your theme. Set the privacy setting for your blog to "Private" so it can be viewed by only you, unless you are creating a theme together with someone else who needs to access the blog.
You can make up to 3 blogs with your Hatena account. (Get started with Hatena Blog
Copy the sample entry
We have prepared a Sample Entry which contains all of the necessary items to check your design.
Copy the content from the sample entry, and paste it into the edit window for the blog you are using to check your design. Next, post this as a new blog entry. As you edit the CSS for your theme, you can use this entry to check your work.
Sample Theme
Please see the sample theme "Boilerplate" created by Hatena, and use it as a reference for creating your customized CSS design.If it is difficult for you to create your now CSS theme from scratch, you can build upon the CSS in the sample theme to get started quickly.
How to use the Boilerplate theme
The Boilerplate theme source code (CSS and LESS file) can be obtained on GitHub.
View the source code for the Boilerplate theme on GitHub
This Boilerplate CSS and LESS file is distributed under the MIT License, and permission is granted to copy and redistribute this sample theme and works based upon it.
Feel fee to copy the entry text style, comment box style, etc. and use them as necessary.
Hatena Blog page structure
Hatena Blog uses the following types of pages and structure. Your design needs to display properly on all of these page types.
Top page ┣ Permalink ┣ About page ┣ Archive page ┣ Archive/Category page ┗ Category page
Various page examples
Let's take a look at the Hatena Blog Developer's Blog and use it as an example to see how the pages above look, along with their corresponding URLs.
| Page type | URL Example |
|---|---|
| Top page | http://staff-en.hatenablog.com/ |
| Permalink | http://staff-en.hatenablog.com/entry/2013/05/28/144704 |
| About page | http://staff-en.hatenablog.com/about |
| Archive page | http://staff-en.hatenablog.com/archive |
| Archive (Yearly) | http://staff-en.hatenablog.com/archive/2013 |
| Archive (Monthly) | http://staff-en.hatenablog.com/archive/2013/06 |
| Archive (Daily) | http://staff-en.hatenablog.com/archive/2013/06/14 |
| Category page | http://staff.hatenablog.com/category/%E6%96%B0%E6%A9%9F%E8%83%BD |
| Archive/Category page | http://staff.hatenablog.com/archive/category/%E6%96%B0%E6%A9%9F%E8%83%BD |
CSS checklist
When creating an original theme, you will need to at least write CSS for the following places. Make sure that you have written code for all of the places on this checklist.
- Blog title
- Blog description
- Entry
- Date
- Category
- "Edit" link
- Keyword link
- Advertisement below the blog entry
- Comments field
- Sidebar module
- Profile, Recent Entries and various other modules
- Pager (page changer)
- Footer
- About page
- Archive page
- Category page
- Category breadcrumb list
Important points about design and coding
Before you post your theme to the Theme Store, please make sure that you have followed the guidelines below:
- Make sure that your theme displays properly on IE8 and above, Google Chrome, Safari, Firefox and Opera web browsers.
- Do not move or hide the header.
- Make sure that all of the functions of Hatena Blog work properly with your design.
- If your theme has any bugs, or certain Hatena Blog functions cannot be used with it or are disabled, please be sure to let users know about this in the theme description you provide when posting to the Theme Store.
- We recommend that you host the images that you use in your themes on Hatena Fotolife, which is a free image hosting service provided by Hatena.
How to apply custom page designs
Use the "Customize" tab in Design settings to customize designs.
Background images
- Users can choose from provided images, or upload their own.
- When the user specifies a background image, a style like the one below is used in the "Design CSS" field.
/* <system section="background" selected="bg1"> */
body{ background-color:#3e2d1b; background-image:url('/images/theme/backgrounds/theme1.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:center top; background-size:cover; }
/* </system> */
Title Image
- The user can upload their own image.
- The default header height is 200 pixels and the maximum width is 1,000 pixels.
- When you specify a title image, you can specify the following inline styles with div#blog-title-inner:
<div id="blog-title-inner" style="background-image: url('http://example.com/20121206113746.jpg'); background-position: center [user specified number] px;">
<h1 id="title"><a href="/">Hatena Blog Developers Validation Checker Blog</a></h1>
<h2 id="blog-description">Blog description</h2>
</div>
Title image class
- When you specify a title image, the following classes will be assigned to the body tag:
- This is basically adjusted in advance. Minor modifications are made for each theme.
| Ways to display title images | class assigned to body |
|---|---|
| No title image | - |
| Show images and text | header-image-enable |
| Show only images | header-image-only |
Places where HTML can be freely added
- Users can freely add HTML under the title, under the entry, and in the footer.
- No style is required in these places, and it can be left blank.
| Places where HTML can be added | Description |
|---|---|
| Under the title | div#top-editarea can contain any type of HTML. |
| Under the blog entry | div.entry-footer-html can contain any type of HTML. You can use this to add features such as "zenback" |
| Footer | div#bottom-editarea can contain any type of HTML. |
Useful tip
Change the header background color and text color
- The header is the area above the blog, which is a bar that contains the Hatena Blog logo and the menu for user operations.
- The header contains an iframe, and you can use the CSS below to change the color inside of the iframe. The logo color will change along with the text color.
#globalheader-container {
color: #333;
background: #fff;
}
