Jimdoブログカスタマイズ

ここではJimdoに搭載されているブログ関連のカスタマイズをご紹介していきます。

ブログに関する基本設定をマスターする

ブログを始める

まずは管理画面の右に出てくる管理バーの上から3番目、拡張器のアイコンを押してブログを開始して見ましょう。

 

コメント

この記事にコメントを許可するかどうかを選択します。

 

ブログをタイトルを決める

最初はタイトルを記入。好きなブログの記事タイトルを入れましょう。

 

分類を記入する

タイトルの隣にある分類ですが、これはカテゴリーのようなものです。好きな名前の分類を作り、まとめて行きましょう。一度分類を作ると次からはタイトルの下に作成済みの分類が出てきますので、次からの投稿はその分類をクリックするだけで分類をつけることができます。

 

ブログを公開する

はじめは草稿(下書き)になっているのでステータスを一般公開にすることでブログが公開されます。これにより一般ユーザに閲覧できるようになります。

 

ブログの内容を書く

タイトルの下に新項目を追加で文章や写真をどんどん追加してみましょう。

 


Jimdoブログのh1/h2/h3の背景を変える(メインコンテンツとは別にする)

ブログのh1とコンテンツの見出しh1は異なるCSSで制御できます。

今回はブログのカスタマイズなので、ブログのh1/h2/h3のみに背景をつけたり、

リンクの文字カラーを変えたりする個別カスタマイズを行いましょう。

 

CSS:下記ソースを追加しましょう。

今回はCSSのみでブログタイトルの背景を装飾しました。

このブログと同じです。

 

.post,.blogselection h1 { 

font:bold 22px/140%margin:0 0 10px 0;

padding:4px 15px;

border-width:0 0 0 5px;

border-color: #80CEDD;

border-style:solid;

background:#029EBC;

color:#EBF7FA;

}

.post,.blogselection h1 a {color:#FFFFFF !important;}

.post,.blogselection h1 a:hover {color:#FFFFFF !important;}

.post,.blogselection h1 a:visited {color:#FFFFFF !important;}

 

上記はh1の個別CSSカスタマイズです。

上記と同じようにh2/h3もCSSを作ってカスタマイズしてみましょう。

 

ブログの投稿日時のデザインをカスタムする

Jimdoブログの投稿日時のスタイルを変更してみましょう。また、通常非表示になっている年と曜日も表示してみました。

 

早速、簡単に設定する方法を書いていきます。

 


 

CSS:下記のソースを追加します。

 

.post div.datetime,.blogselection div.datetime{

background:none #000000;

padding:0px 5px 0px 10px;

width:100px;

height: 20px;

float:none;

margin:0 0 5px 0;}

.post p.day-word,.post p.day,.post p.mon,.post p.yr,.blogselection p.day-word,.blogselection p.day,.blogselection p.mon,.blogselection p.yr{

font-weight:bold;

padding:0;

display:block;

font-size: 11px;

line-height: 20px;

color: white;

float:right;

margin:0 5px 0 0;

}

 

上記を追加するだけでデフォルトのスタイルからデザインを変更することができます。

簡単ですので是非やってみてください!

 

続きを読むのリンクをボタンっぽくする

現在執筆中

コメント数表示をかっこ良くデザインする

現在執筆中