Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】トップページの記事を線で囲んで境目…

【Seesaaブログ新デザインシステム】トップページの記事を線で囲んで境目をわかりやすくする

Seesaaブログのトップページの記事を線で囲む
■Seesaaブログのトップページの記事コンテンツを線で囲む
■CSSの「entry」を編集  

Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」のトップページは、メインとサイドの境目がよくわかりません。
というか、シンプルすぎてどこにも境目がありません。


Seesaaブログの全体像


もう少し記事部分を見やすい感じにしたいなぁ‥‥と思った私が選択したのは、「記事1つ1つを点線で囲む」という方法でした。


「記事コンテンツを線で囲む」というのはどういうものなのか、このブログでも同じことをしているのでわかりやすいと思います。
(このブログは「Seesaaブログ」ではなく「さくらのブログ」ですし、囲んでいる線も点線ではなく実線ですが、同じような設定をしていますのでイメージできるかと思います)



やり方は非常に簡単です。
ただし、この設定をしてしまうと、他の箇所(例えば過去ログページとか記事ページなど)も点線で囲まなければならなくなります。整合性ってヤツです。
もしもやってみたいと思われる方がいたとしても、覚悟はしておいてください。あっちこっち点線で囲まないといけなくなりますよ、マジで。





トップページの記事コンテンツを線で囲む(「entry」を編集)


トップページのコンテンツを設定します。(メイン部分です)
記事を点線で囲むようにして、コンテンツとコンテンツをハッキリさせたいと思います。
点線で囲うことによってメインとサイドの区別も付きやすくなります。



CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「entry」というclassを探します。
テンプレートがデフォルトのままだと463行目ぐらいにあります。



CSSの該当部分に以下の「編集後」のコードをコピーして貼り付けてから「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


<元コード>
スタイルシートのentry部分のコード


<編集後>
/*** トップページ(entry)
*****************************************************/

.entry {
margin-bottom: 40px; /* コンテンツとコンテンツの間 */
padding: 10px 10px 15px 10px;
border:1px dotted #4E667D; /* コンテンツを点線で囲む */
line-height:1.5em; /* トップページの行間 */
}


●コメントアウトで見出し「/******* トップページ(entry) *******/」を付けました。

●見出し「コンテンツとコンテンツの間」というのは記事と記事の間、という意味です。「margin-bottom」でコンテンツの下余白を設定しています。元は20pxでしたが、少し狭い気がしますので40pxに広げました。

●記事コンテンツを青色の点線で囲むことにしたので「border」を追加しました。

●文章の行間を狭くするために「line-height:1.5em;」を追加しました。
(これは、最初に設定した「body」で行間が1.8emに設定されているためにやった処理です。「body」で1.5emに変更しておけば、この処理をする必要はないと思います)



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


編集後のスタイルシートのentry部分

実際のページ




次の記事の紹介

上記の「実際のページ」画像では、サムネイル画像のサイズが小さくなっています
デフォルトの状態ではこのような画像サイズではありません。もちろん、小さく表示するようにカスタマイズしたわけです。
次の記事では、Seesaaブログのサムネイル画像サイズを変更する方法を説明します。


【Seesaaブログ新デザインシステム】サムネイル画像サイズの説明と変更
Seesaaブログは「管理画面>設定」の「ブログ設定」で「サムネイルサイズ」を設定できますが、これはあくまでも画像をアップロードした時のサイズであって、トップページに表示される画像サイズではありません。‥‥






posted by mameemon | Comment ( 4 ) | Category ( Seesaaブログ )
この記事へのコメント
すみません、失礼します。

この通りにやったのですが、反映されなかったです。
考えられる原因とかって分かりますか・・・??
Posted by hoto at 2018年02月09日 15:48
hoto様へ


当ブログの管理人です。
コメントありがとうございます。

当方でも新しくテンプレートを追加して確認してみましたが、点線で囲むことはできました。
反映されなかったとのことですが、具体的にどのような感じなのでしょうか。「編集後」のコードを「entry」以下のコードとそっくり置き換えてもらえれば大丈夫だと思うのですが‥‥。
コード最後の「}」(閉じカッコ)まで入れて頂いていますか?
プレビュー画面でも無理でしょうか?
反映されない原因が当方ではよくわからないので、もう少し状況を教えていただければと思います。

お手数ですがよろしくお願いいたします。
Posted by mameemon at 2018年02月09日 21:18
すみません、解決しました。
CSS書く上で初歩的なミスでした。
(貼り付けた後確認せず、前後の書き方を真似てスペースを全角でやってました;)

ご丁寧に返信していただいたのに、申し訳ございません。
又機会がありましたら、しっかり確認した上で質問させていただきますm(_ _)m
Posted by hoto at 2018年02月10日 00:18
hoto様へ


当ブログの管理人です。
ご返信ありがとうございます。

無事に解決したとのこと、ホッとしました(笑)
良かったです。
わかりにくい内容を書いていて申し訳ないです。
また機会がありましたらよろしくお願いします。
Posted by mameemon at 2018年02月10日 01:36
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

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