Freely Customize Your Design! How to Customize Tumblr

Today, SNS (social networking services) are used all around the world.
Recently, more and more companies have been using social media platforms for promotion and marketing purposes.
Our company also uses Tumblr to promote our own content and share updates about events happening in the office to convey our workplace atmosphere.
There are many major social media platforms, including Twitter, Facebook, Google+, Pinterest, and Tumblr.
Among them, did you know that “Tumblr” allows you to customize your site design much more freely compared to other social networks, making it possible to create a site that perfectly matches your own style and image?

Tumblr allows users not only to post text and images like a typical blogging platform, but also to share quotations from other websites, as well as audio and video content.
One of its key features is how easily information can spread through functions such as “Reblog,” which lets you display another user’s post on your own blog, and “Like,” which allows you to show appreciation for another blog while also displaying that activity on your own page.
Tumblr also includes built-in sharing features for Twitter and Facebook, making it easy to connect with other social media platforms.
In addition, you can customize your URL in the format “http://◯◯◯.tumblr.com” to one of your choice.
It is also possible to integrate Google Analytics, allowing you to easily track site data such as page views and visitor access statistics.

Whether you want to “showcase photos beautifully” or “create your own portfolio site,” Tumblr offers flexible customization options that allow you to use it in a way that best fits your personal style and goals.

Tumblr offers design templates called “Themes,” which make it easy to customize and change the appearance of your site.
Popular free Tumblr themes:
schema.org

This time, we’ll customize the site using the “Elise” layout, which makes it easy to distinguish article content visually by displaying both images and text in a clear and balanced way.

First, go to your Tumblr site.
Open the editing screen by selecting “Edit Theme.”

Select “Browse Themes” to search for a theme.

If the theme you searched for does not appear, click “Browse more themes” at the bottom left of the screen to open the theme page in a new tab.

After moving to the page, enter the theme name using the search icon on the right side.
Once the theme you were looking for appears, apply the settings.
Click “Install” in the upper right corner, and the theme will be reflected on your Tumblr site.

This time, we will change the background color, font, and text size, which are the basic elements of the overall site design.

You can make these changes from the list in the theme editing menu.

Change the Background Color
Scroll down from the top of the editing screen to around the middle, then click the circular area to the right of “Blog Background Color.”
A color palette and an area for entering color codes will appear, allowing you to specify a color.

Once you finish editing, the changes will be reflected in real time.
When you are done, click “Save” in the upper-right corner of the theme editing menu.
Be sure to save your work frequently.

Change the Title Font
There is an item called “Title Font” on the editing screen.
Change this setting and click “Save.”
However, the part where you wanted the font to change may not actually update.

Changing the Font Size
There is also an item around the middle of the editing screen that appears to allow font size changes.
Specify the font size in pixels using “Header Title font size.”
However, even if you set it to 10px or 500px, nothing changes.

In this section, the only thing we were able to change was the background color.
Does this mean that “Elise” only allows background color customization?

We’ll solve this issue in the next section: “Editing HTML.”

Tumblr allows you to edit HTML directly.

From “Edit Theme,” you can find “Edit HTML” under “Custom Theme.”
Clicking there lets you view and edit the entire HTML source code of the site.

Many blogging services allow partial code customization within articles, but Tumblr’s ability to edit the entire HTML from scratch is one of its unique features.
In addition, the editor highlights syntax with colors, making the code easier to read.

Changing the Font Size
To modify the title font, you need to know the CSS class name.
Let’s use the browser’s developer tools to inspect the element.
Google Chrome and Firefox both include these developer tools by default, so using either browser is recommended.
(In Chrome: “Inspect” / In Firefox: “Inspect Element”)
First, open your blog page, place the mouse cursor over the title area, right-click, and select “Inspect” (or “Inspect Element”).
A developer window will open, displaying the source code responsible for the title.

Use the browser tools to identify the class name, then directly write the CSS as shown below.
Click “Save,” preview the site, and you will see that the changes have been applied.

.header-text > .wrap > a, .tittle-text{font-size:56px;font-family:'Garamond';}
.typography p{font-size:18px;}