blog_h11

ホームページ制作

Jimdoでトップページのブログ表示をデザインする

2016/08/03

Jimdoの「ブログ表示」はとても便利な機能ですが、ホームページ内で使用する場合は、ブログよりも新着情報などのトピック的に活用する機会が多いと思います。ブログ機能から記事を投稿し、トップページにブログ表示させれば新着情報として利用できますが、そのままブログ表示させるとタイトルなどが想定外に大きく表示されてしまい困った経験があります。

blog_img1

ブログのタイトルは見出しh2なのでページ全体の見出しの設定が適用されてしまいます。
これを解決するにはトップページのブログ表示に対して以下のcssを設定します。
※.cc-indexpageのクラス指定することでトップページのみにcssを適用しています。

タイトルのサイズや色、タイトルにカーソルが重なった時の動きなど、ブログの文字指定

.cc-indexpage #content .blogselection h2  {
background-image : none;
text-decoration:none;
color: #444444;
font-size: 12px !important;
line-height: 23px !important;
padding:0 0 0 10px;
font-weight:normal;
}

.cc-indexpage #content .blogselection h2 a {
background-image : none;
text-decoration:none;
color: #444444;
font-size: 12px !important;
line-height: 23px !important;
padding:0 0 0 10px;
font-weight:normal;
}

.cc-indexpage #content .blogselection h2 a:hover {
font-weight: bold !important;
}

ブログエリアのサイズや背景色、文字とのスペースなどの指定

.cc-indexpage #content .blogselection {
float:left;
width: 535px;
padding:0px 10px 5px 10px;
-moz-border-radius: 7px;    /* Firefox */
-webkit-border-radius: 7px; /* Safari,Chrome */
border-radius: 7px;         /* CSS3 */
border: 2px #8c7a2e solid;     /* 枠線の装飾 */
background-color:transparent;   /* 背景色 */
}
/* ブログの日時指定 */
.cc-indexpage #content .datetime  { float: left; }

ブログ表示の「続きを読む」と「コメント」を非表示にする指定

.cc-indexpage #content .blogreadmore,.comment { display: none; }

結果このようになります。後はお好みで文字のサイズやカラーなど自由に設定してホームページにあったデザインに変更してください。

blog_img2

-ホームページ制作
-,

pick up

blog_h8 1
Jimdoの旧レイアウトでボタン機能のデザイン変更

いつの間にかJimdoにボタン機能が追加されていました。とても便利な機能ですが、 ...

blog_h11 2
Jimdoでトップページのブログ表示をデザインする

Jimdoの「ブログ表示」はとても便利な機能ですが、ホームページ内で使用する場合 ...

blog_h9 3
Jimdoのホームページ制作でページごとにデザインを変える場合

Jimdoではひとつのホームページにはひとつのテンプレートしか設定できません。独 ...