テストベンチ CSS Seesaa/Postpet

site_view-8028654 　　2022.04.20

◎ 秒が隠れてしまいましたが、多分、私のコードの間違いと思います。 コメント記入欄を開くと「投稿データ」の状態が変わるので、このへんで間違った気がします。

「投稿データ」の部分のコードを改めました。 今回の方が無理のないコードで、例えばユーザー名の文字数が変わっても、影響を受けなくなっています。

◎ Seesaa絵文字補正、上に戻るボタン のCSSを追加している現在のコードと、置き換え可能にしています。 このまま、520行以降と差換えてください。

❶ CSSコード で、520行より後の部分を、全て削除してください。

517：　/* twitter quote */

520: 　p {
           margin-block-start: 0;
           margin-block-end: 0; }

❷ 削除したところに、以下のコードをペーストしてください。

❶ CSSコード で、520行より後の部分を、全て削除してください。

517：　/* twitter quote */

520: 　p {
           margin-block-start: 0;
           margin-block-end: 0; }

❷ 削除したところに、以下のコードをペーストしてください。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

❸ スキンCSSを保存してブログを再表示させ、デザインを確認してください。

　site_view-8028654 　　2022.04.20

/* site_view-8028654 ********** 2022.04.20 */
p {
margin-block-start: 0;
margin-block-end: 0; }

/* body **********************/
body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px; }

/* container */
#container {
    width: 925px;
    min-height: 100vh;
    overflow: hidden;
    margin: 20px auto 40px;
    background: radial-gradient(circle, #b3e5fc 0%, white 20%, white 0%, transparent), radial-gradient(circle, transparent 0%, white 20%, white 100%, transparent) 20px 20px;
    background-color: #b3e5fc;
    background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    box-shadow: 10px 10px 20px 0 #1976d250; }

#banner {
    padding: 0 20px 20px 60px;
    border: none; }

/* content *******************/
#content {
    width: 657px;
    margin: 0 0 0 20px; }

/* pager */
.navi {
    font-size: 14px;
    margin-bottom: 20px;
    padding: 5px 0px;
    background: radial-gradient(#ffffff, transparent); }

.navi a {
    text-decoration: none; }

.navi + .navi {
    margin-top: -15px; }

/* blog */
.blog {
    background: #ddffff;
    border: thin solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px; }

/* date */
.date {
    font-size: 13px;
    padding: 2px 25px 2px 0;
    background-color: #f2ffff; }

/* blogbody */
.blogbody {
    background: none; }

/* listCategoryArticle */
.listCategoryArticle {
    display: none; }

/* title */
h3.title {
    font-size: 15px;
    margin: 15px 20px 10px;
    background-repeat: repeat-x; }

/* text */
.text {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.5; }

/* post data */
.posted {
    position: relative;
    font-size: 13px;
    margin: 15px auto;
    padding: 0;
    text-align: center;
    background: none; }

.posted a {
    color: #000080;
    text-decoration: none; }

.posted a:before {
    content: ""; }

.posted a:nth-child(2) {
    display: none; }

.posted a:nth-child(3) {
    margin-left: -10px;
    background: #ddffff; }

.posted a:nth-child(4) {
    display: none; }

.posted img {
    vertical-align: -2px; }

/* comments *****************/
#comments {
    padding: 15px 30px;
    margin-top: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #ffffff; }

.comments-head {
    font-size: 14px; 
    color: #444; }

.comments-body .text {
    font-size: 14px;
    padding: 0 40px; }

.comments-post {
    font-size: 13px;
    padding: 10px 60px; }

#comments a:last-child {
    margin-left: 40px;
    font-size: 13px;
    text-shadow: 0.5px 0 #2196f3; }

/* comments form */
#comments form {
    padding: 0 0 0 40px; }

#comments .comments-body {
    font-size: 12px; }

#comments input:focus,
#comments textarea:focus {
    outline: 1px solid #2196f3;
    outline-offset: -1px; }

#comments input {
    font-size: 14px;
    font-family: inherit;
    max-width: 240px;
    padding: 5px 10px 4px;
    margin-bottom: 8px;
    border: 1px solid #aaa;
    border-radius: 3px; }

#comments textarea {
    font-size: 14px;
    font-family: inherit;
    width: 505px !important;
    height: 140px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border: 1px solid #aaa;
    border-radius: 3px; }

/* side bar *******************/
#links {
    float: right;
    margin: 0 20px 0 -20px; }

.sidetitle {
    font-size: 14px;
    padding: 5px 0px 3px 15px; }

#links .side {
    font-size: 13px;
    padding: 0px 0 15px 10px; }

/* search */
.side input[name="keyword"] {
    font-size: 13px;
    font-family: inherit;
    width: 144px !important;
    height: 20px;
    padding: 3px 4px 1px;
    border: 1px solid #ccc;
    border-radius: 3px; }

.side input[name="keyword"]:focus {
    outline: 1px solid #2196f3;
    outline-offset: -1px; }

.side .input-submit {
    font-size: 13px;
    margin-right: -8px;
    padding: 3px 3px 1px;
    border: 1px solid #ccc;
    border-radius: 3px; }

/* calender */
#calendar table {
    padding: 0 6px 10px; }

.calendarhead {
    font-size: 13px;
    padding: 5px 0px 5px 30px; }

.calendarday {
    font-size: 13px; }

/* side links */
#links .side br {
    display: none; }

#links .side:nth-child(5) {
    display: flex;
    flex-direction: column;
    font-size: 12px; }

#links .side:nth-child(5) a {
    font-size: 13px;
    margin: -2px 0 2px; }

#links .side:nth-child(7) {
    display: flex;
    flex-direction: column;
    font-size: 12px; }

#links .side:nth-child(7) a {
    font-size: 13px;
    margin: 2px 0 -2px; }

/* profile img */
#links .side:nth-child(9) img {
    margin-top: 10px;
    width: 150px; }

/* footer **********************/
#footer {
    background: none; }

/* elements ******************/
/* image */
.blogbody img[src*="up.seesaa.net"] {
    max-width: 100%;
    height: auto;
    margin-bottom: 6px; }

/* YouTube */
.blogbody iframe[src*="youtube.com"] {
    max-width: 100%;
    margin-bottom: 6px; }

/* peta */
.blogbody a[href*="peta.ameba.jp"] img {
    display: none; }

/* Ameba emoji ***************/
img[src*="emoji.ameba.jp"],
img[src*="char2"] {
    vertical-align: -2px !important; }

img[src*="char3"],
img[src*="char4"] {
    vertical-align: -3px !important;
    margin-top: -7px !important; }

/* Seesaa emoji ***************/
img[src*="seesaa.jp/images_g"] {
    vertical-align: -2px;
    width: 16px;
    height: auto; }

/* Pageup button */
html { scroll-behavior: smooth; }
#pageup { position: fixed; bottom: 12px; right: 20px; z-index: 1000; }
#pageup a { opacity: 0.6; }
#pageup a:hover { opacity: 1; }

 ポストペット版

以下のコードを、スキンCSSの最後に追記してください。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

　Postpet

/* Postpet *********************** 2022.04 */
/* body **********************/
body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    background: radial-gradient(circle, #b3e5fc 0%, white 20%, white 0%, transparent), radial-gradient(circle, transparent 0%, white 20%, white 100%, transparent) 20px 20px !important;
    background-color: #b3e5fc !important;
    background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px !important; }

#container {
    width: 900px;
    padding: 0 15px;
    background-color: #f4f8fea3; }

/* blog header */
#banner {
    background-size: contain;
    background-clip: content-box;
    padding: 5px;
    margin: 0 -4px 25px;
    height: 294px;
    outline: 1px solid #ccc;
    outline-offset: -5px;
    border-radius: 12px; }

/* blog name */
#banner h1 {
    padding: 170px 80px 30px; }

#banner h1 a {
    font-size: 30px;
    font-weight: normal;
    text-shadow: 1px 1px 1px #00000050; }

#banner .description {
    margin-left: 100px;
    font-size: 14px; }

/* pager */
.navi {
    font-size: 15px;
    margin-bottom: 20px;
    padding: 5px 0px;
    background: radial-gradient(#ffffff, transparent); }

.navi a {
    text-decoration: none; }

.navi + .navi {
    margin-top: -15px; }

/* content ********************/
#content {
    width: 647px;
    margin-right: 15px; }

/* blog */
.blog {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 30px; }

.text {
    line-height: 1.5;
    padding: 10px 20px 20px;
    border: none; }

/* date */
h2.date {
    font-size: 14px;
    padding: 0 30px;
    margin-bottom: -15px;
    color: #777;
    border: none; }

/* title */
h3.title {
    background-position: 25px -2px;
    background-size: contain;
    padding: 15px 10px 15px 75px;
    margin: 0;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #a2d6ee; }

a.title {
    font-size: 20px;
    font-weight: normal;
    text-shadow: 1px 0 1px #00000052; }

/* listCategory */
.listCategoryArticle {
    padding: 5px 20px; }

.listCategoryArticle ul {
    margin: 0; }

/* post data */
.posted {
    font-size: 14px;
    padding: 5px 5px 15px 120px;
    background: #fff; }

.listCategoryArticle ul li {
    font-size: 14px;
    padding-left: 15px; }

/* comments *****************/
#comments {
    padding: 15px 30px;
    border: 1px solid #ccc;
    border-radius: 8px; }

.comments-head {
    color: #444; }

.comments-body .text {
    font-size: 14px;
    padding: 0 40px; }

.comments-post {
    font-size: 14px;
    padding: 10px 60px; }

#comments a:last-child {
    margin-left: 40px;
    font-size: 14px;
    text-shadow: 0.5px 0 #2196f3; }

/* comments form */
#comments form {
    padding: 0 0 0 40px; }

#comments .comments-body {
    font-size: 12px; }

#comments input:focus,
#comments textarea:focus {
    outline: 1px solid #2196f3;
    outline-offset: -1px; }

#comments input {
    font-size: 14px;
    font-family: inherit;
    max-width: 240px;
    padding: 5px 10px 4px;
    margin-bottom: 8px;
    border: 1px solid #aaa;
    border-radius: 3px; }

#comments textarea {
    font-size: 14px;
    font-family: inherit;
    width: 505px !important;
    height: 140px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border: 1px solid #aaa;
    border-radius: 3px; }

/* side bar *******************/
#links {
    float: right;
    width: 222px;
    margin-left: -20px;
    padding: 0 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff; }

.sidetitle {
    margin-top: 20px; }

/* search */
.side input[name="keyword"] {
    font-size: 14px;
    font-family: inherit;
    width: 148px !important;
    height: 23px;
    padding: 2px 4px 0;
    border: 1px solid #ccc;
    border-radius: 3px; }

.side input[name="keyword"]:focus {
    outline: 1px solid #2196f3;
    outline-offset: -1px; }

.side .input-submit {
    margin: 0;
    vertical-align: 2px; }

/* calender */
#calendar table {
    width: 200px; }

.calendarday a {
    background: #f2f9fe;
    border-radius: 50%; }

/* side links */
.side a {
    font-size: 14px;
    text-decoration: none; }

.side br {
    display: none; }

.side:nth-child(5) {
    display: flex;
    flex-direction: column;
    font-size: 11px; }

.side:nth-child(5) a {
    margin: -4px 0 5px; }

.side:nth-child(7) {
    display: flex;
    flex-direction: column;
    font-size: 11px; }

.side:nth-child(7) a {
    margin: 3px 0 -2px; }

/* profile img */
.side:nth-child(9) img {
    width: 150px; }

/* elements ******************/
/* image */
.blogbody img[src*="up.seesaa.net"] {
    max-width: 100%;
    height: auto;
    margin-bottom: 6px; }

/* YouTube */
.blogbody iframe[src*="youtube.com"] {
    max-width: 100%;
    margin-bottom: 6px; }

/* peta */
.blogbody a[href*="peta.ameba.jp"] img {
    display: none; }

/* Ameba emoji ***************/
img[src*="emoji.ameba.jp"],
img[src*="char2"] {
    vertical-align: -2px !important; }

img[src*="char3"],
img[src*="char4"] {
    vertical-align: -3px !important;
    margin-top: -7px !important; }

 Seesaa絵文字補正 

以下のコードを、一番最後に追加すると、Seesaaの絵文字「20px」サイズを「16px」サイズに変換できるので、行が高くなることなく利用が出来ます。

/* Seesaa emoji ***************/
img[src*="seesaa.jp/images_g"] {
    vertical-align: -2px;
    width: 16px;
    height: auto; }

Pageup Button  の追加

ブログのHTML編集は、間違った書き込みでページが表示されなくなったり、壊れたりします。 普通は、間違った変更にも対応しているとは思いますが、丁寧に編集を行う事をお勧めします。

▪全角空白などを間違って書き込むと、何故上手く行かないか悩む事になります。

▪ カンマ、ドットの1個が意味を持ちます。

▪CSSもそうですが、半角空白の有無で意味が変わる事があります。 変わらない事もあります。

▪改行すると駄目になるコードがあります。 しても良いものと駄目なものに注意。

通常のHTMLコードの追加方法 

ブログのHTML編集で、ボタンのコードを HTMLの「<body>」のタグ内の末尾に追加します。

style="color:#FFF;">Seesaa</a><a href="<% site_info.blog_url %>" style="color:#FFF;">ブログ</a></div></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

SeesaaのブログHTMLの末尾は、上の様な構造です。

これにボタンのHTMLコードを追加すると、下の様な形になります。

太字は元のコードで、それらは全く手を付けずに、「</body>」の手前に挿入する形で、コードを追加します。

● 説明のための空白行を入れていますが、実際は削除してください。

● 下のコード中で「■■■」の部分は、ユーザーが登録したボタンの画像の「src」を登録します。 「src」は実質的に画像を置いた「href」で「https://～～～.gif」などの記述内容になります。 その画像がボタンの絵に使われます。

● ボタン画像は、教授自身が Seesaaに登録した物を使わないと、読込みが遅くなったり、なにかの理由で表示されなくなったりします。

style="color:#FFF;">Seesaa</a><a href="<% site_info.blog_url %>" style="color:#FFF;">ブログ</a></div></td>
</tr>
</table>
</div>
</div>
</div>

<div id="pageup">
<a href="javascript:(function(){window.scrollTo(0, 0);})();">
<img src="■■■">
</a>
</div>

</body>
</html>

上記のコードは、JavaScript を使用しているので、書き込んだらエラーが出て「駄目」と言われ、HTML編集の保存が出来ないかも知れません。 保存が出来たら使えます。 許可されない場合は別のコードを使います。

ボタンのためのCSSコード 

一方、このボタンのデザインと、スクロールをスムーズにさせる CSSの指定を、スキンのCSSに追加するのが普通です。

スキンの末尾に以下のCSSを追記します。

/* Pageup button */
html { scroll-behavior: smooth; }
#pageup { position: fixed; bottom: 12px; right: 20px; z-index: 1000; }
#pageup a { opacity: 0.6; }
#pageup a:hover { opacity: 1; }

●「html { scroll-behavior: smooth; }」の指定は、スルスルと移動するデザインですが、アメブロの様にぱっと移動させたい時は、この行を削ります。

● 次行はボタンの配置位置です。 これは、普通に開いたウインドウでだいたい妥当な位置ですが、ボタン絵の大きさなどで「bottom」「right」の調整が必要かも知れません。 「z-index」は、他の要素の下に潜って見えなくならない様にする指定です。 これは「0」でも「1」でも良い場合もあり、アメブロの様にサイドバーにADが入ると負けない値の指定が必要になるので「1000」にしています。

● 最後の2行は、ボタンを普通は少しボカシておいて、マウスを乗せるとはっきりする様にしたデザインです。 このボタンのコードは、ページを下方にスクロールしたらボタンが出るといった凝ったコードにせず、通常は少し邪魔にならない様に「0.6」の値を指定しています。（半分透過にしている）

● 常にはっきりとしたボタン表示にするには、最後の2行を削除します。