【Seesaaブログ新デザインシステム】画像詳細ページのカレンダーと画像を編集(リンクの背景色や画像部分の余白を編集)|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。画像詳細ページを開くと上部に「年」と「月」が表示されます。これをとりあえず「カレンダー」と呼ぶことにします。アクティブな「月」の背景色は、デフォルトのテンプレートでは水色です。明るい水色だと私のブログには合わないので、紺色っぽい色に変更します。画像表示については、画像のタイトルと画像との間が狭いので余白を増やします。現時点のテンプレート画像詳細ページ上部のカレンダーのリンク案内を編集する画像詳細ページ(アップロードのページ)のカレンダー、つまり日付部分(年と月)の表示を変更するためにはCSSを編集します。やりたいことは、アクティブの「月」の背景色を変更することです。あと、「年」の下に表示される点線が薄い気がしますので、これも背景色と同じ紺色っぽい青に変更したいと思います。ついでに点線の種類も変更します。管理画面の「スタイルシート編集」画面で「upload-detail__date」というclassを探します。この「upload-detail__date」一連の記述を編集します。(一連の記述を紹介しますが、実際に編集するのは2ヶ所のみです)CSSの該当部分に下記「編集後」のコードをコピペするか直接記述して「保存」します。今回は編集する箇所が限られていますので、直接記述した方がいいと思います。.upload-year」で「年」の下に表示される点線の色を変更しました。あと、点線のカタチを「dashed」から「dotted」に変更しました。.upload-month__item.is-active」で背景色を変更しています。#4E667D;)コード編集後のCSS画像詳細ページの画像部分に余白を設定する画像詳細ページの画像部分を編集するためにはCSSを編集します。どの部分を編集することになるのか、わかりやすいように画像を置いておきます。この画像の赤枠で囲っている部分を編集します。画像のタイトル(「test.jpg」部分)と画像との間の余白がくっついています。余白「0」なので、10pxほど取ろうと思います。画像の下を見ると、リンク案内(「前の画像」「次の画像」ボタン)との余白も「0」ですね。画像下には15pxの余白を入れることにします。.content-heading」というclassを探します。CSSの該当部分に下記「編集後」のコードをコピペするか直接記述して「保存」します。*/」を入れましたが、画像タイトル部分はデフォルトの状態から何も編集していません。タイトル部分を編集したい場合は、ここでコードを記述してください。*/」部分の記述で、画像タイトルとの余白(上余白)を10pxに、「前の画像・次の画像案内リンク」ボタンとの余白(下余白)を15pxに設定しました。15px;」という記述は「余白:上10px、左右余白は自動で設定、下15px」という意味になります。画像詳細ページ(アップロードページ)のカスタマイズをしていますが、このページの下部には「関連画像」が表示されます。「関連画像」かどうかは文字にリンクが貼ってある状態なので一応わかるんですが、ちょっと素っ気ないですね。次の記事では、このリンク部分をタイトルっぽく表示させたいと思います。■【Seesaaブログ新デザインシステム】画像詳細ページの「関連画像」(1)タイトルを作って上余白を設定する「画像詳細ページ(アップロードのページ)」では、大きく表示された画像の下に、関連画像が表示されます。[必須入力]※画像の中の文字を半角で入力してください。