Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】画像詳細ページのカレンダーと画像を…

【Seesaaブログ新デザインシステム】画像詳細ページのカレンダーと画像を編集(リンクの背景色や画像部分の余白を編集)

Seesaaブログの画像詳細ページのカレンダーと画像を編集
■Seesaaブログの画像詳細ページ(アップロードのページ)を編集
■上部のカレンダーのリンク案内背景色、画像部分の余白を変更
■CSSの「upload-detail__date」「upload-detail__content 」関連を編集  

画像詳細ページを開くと上部に「年」と「月」が表示されます。
これをとりあえず「カレンダー」と呼ぶことにします。


アクティブな「月」の背景色は、デフォルトのテンプレートでは水色です。明るい水色だと私のブログには合わないので、紺色っぽい色に変更します。
画像表示については、画像のタイトルと画像との間が狭いので余白を増やします。


現時点のテンプレート
画像詳細ページのカレンダー部分




画像詳細ページ上部のカレンダーのリンク案内を編集する


画像詳細ページ(アップロードのページ)のカレンダー、つまり日付部分(年と月)の表示を変更するためにはCSSを編集します。
やりたいことは、アクティブの「月」の背景色を変更することです。
あと、「年」の下に表示される点線が薄い気がしますので、これも背景色と同じ紺色っぽい青に変更したいと思います。ついでに点線の種類も変更します。



管理画面の「スタイルシート編集」画面で「upload-detail__date」というclassを探します。
この「upload-detail__date」一連の記述を編集します。
(一連の記述を紹介しますが、実際に編集するのは2ヶ所のみです)



CSSの該当部分に下記「編集後」のコードをコピペするか直接記述して「保存」します。
今回は編集する箇所が限られていますので、直接記述した方がいいと思います。


<元コード>
.upload-detail__date {
margin-bottom: 40px;
}

.upload-detail__date .upload-year {
font-weight: bold;
border-bottom: 1px dashed #ccc;
font-size: 22px;
margin-bottom: 5px;
text-align: center;
}

.upload-detail__date .upload-month {
text-align: center;
}

.upload-detail__date .upload-month__item {
display: inline-block;
margin: 0 8px;
}

.upload-detail__date .upload-month__item.is-active {
background: #43bee0;
color: #fff;
padding: 2px 4px;
}

.upload-detail__date .upload-month__item.is-active a {
color: #fff;
}


<編集後>
.upload-detail__date {
margin-bottom: 40px;
}

.upload-detail__date .upload-year {
font-weight: bold;
border-bottom: 1px dotted #4E667D;
font-size: 22px;
margin-bottom: 5px;
text-align: center;
}

.upload-detail__date .upload-month {
text-align: center;
}

.upload-detail__date .upload-month__item {
display: inline-block;
margin: 0 8px;
}

.upload-detail__date .upload-month__item.is-active {
background: #4E667D;
color: #fff;
padding: 2px 4px;
}

.upload-detail__date .upload-month__item.is-active a {
color: #fff;
}


●「.upload-detail__date .upload-year」で「年」の下に表示される点線の色を変更しました。あと、点線のカタチを「dashed」から「dotted」に変更しました。
●「.upload-detail__date .upload-month__item.is-active」で背景色を変更しています。(background: #4E667D;)



コード編集後のCSS


編集後の画像詳細ページのスタイルシート



画像詳細ページの画像部分に余白を設定する


画像詳細ページの画像部分を編集するためにはCSSを編集します。
とりあえずどの部分を編集することになるのか、わかりやすいように画像を置いておきます。
この画像の赤枠で囲っている部分を編集します。


編集する範囲


画像のタイトル(「test.jpg」部分)と画像との間の余白がくっついています。
余白「0」なので、10pxほど取ろうと思います。
画像の下を見ると、リンク案内(「前の画像」「次の画像」ボタン)との余白も「0」ですね。画像下には15pxの余白を入れることにします。



管理画面の「スタイルシート編集」画面で「.upload-detail__content .content-heading」というclassを探します。
CSSの該当部分に下記「編集後」のコードをコピペするか直接記述して「保存」します。


<元コード>
.upload-detail__content .content-heading {
text-align: center;
}

.upload-detail__content .content-body {
text-align: center;
margin: 0px auto 5px;
height: 400px;
display: table;
table-layout: fixed;
width: 100%;
}


<編集後>
.upload-detail__content .content-heading { /* 画像タイトル */
text-align: center;
}

.upload-detail__content .content-body { /* 画像外枠 */
text-align: center;
margin: 10px auto 15px;
height: 400px;
display: table;
table-layout: fixed;
width: 100%;
}


●コメントアウトで見出し「/* 画像タイトル */」を入れましたが、画像タイトル部分はデフォルトの状態から何も編集していません。
タイトル部分を編集したい場合は、ここでコードを記述してください。(太字にする「font-weight:bold;」とか、文字の大きさを変更する「font-size:110%;」とか)


●見出し「/* 画像外枠 */」部分の記述で、画像タイトルとの余白(上余白)を10pxに、「前の画像・次の画像案内リンク」ボタンとの余白(下余白)を15pxに設定しました。
「margin: 10px auto 15px;」という記述は「余白:上10px、左右余白は自動で設定、下15px」という意味になります。



コード編集後のCSSと実際のページ


余白設定後のHTML

余白設定後の画像詳細ページ




次の記事の紹介

画像詳細ページ(アップロードページ)のカスタマイズをしていますが、このページの下部には「関連画像」が表示されます。「関連画像」かどうかは文字にリンクが貼ってある状態なので一応わかるんですが、ちょっと素っ気ないですね。


画像詳細ページ


次の記事では、このリンク部分をタイトルっぽく表示させたいと思います。


【Seesaaブログ新デザインシステム】画像詳細ページの「関連画像」(1)タイトルを作って上余白を設定する
「画像詳細ページ(アップロードのページ)」では、大きく表示された画像の下に、関連画像が表示されます。普通にリンク設定された文字「"○○"の記事の関連画像」が入っていますが、これだとちょっと‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。