mikotohodo-三言ほど-

くだらない雑談と小さな情報を日常に

まあちょっと落ち着こうな(バックアップmst


このブログが勝手に知らないランキングサイトに登録されている話はさておき。

僕はこのUnderShirtに非常に心奪われているのですよ。現在使ってるここのテンプレートはSentenceなんだけど。

両者ひじょ~~~にすばらしい。シンプルこそがエレガンス 的な?

 

カード式なんてふざけるな!こんなもん見にくいっ!くらい毛嫌いしてからの~「あーもうカード式にしたいカードカードcard」と昨日の夜お布団に入りながら考えていたわけですよ。

じゃあ変えよっか、と。Sentenceには大変お世話になり、感謝してもしきれない!ありがとう!Sentence!本当はSentenceの製作者さんに「こういうカスタマイズしたいんだけどお金払うんで作ってもらえます?」みたいな馴れ馴れしい会話もしてみたかった!

しかし、それはまた縁があっての話であって、僕には全くご縁が無かった!!!

 

UnderShirt、僕を待ってるんだな。そうか、待ってるのか。

よし、まずバックアップだな。

 

バックアップだな。

念のために記入できる全ての所をメモ帳にコピーペーストコピーペーストしてくわけですよ。ええ、もうそれはもう、ええ…

僕は、自分と言う存在を、改めて、きちんと、考察したい。

 なぜ僕という存在は、念のためにという保身をしておきながら、なぜそのバックアップ用のコピーとペーストした後の上書き保存が正しいのか確認しないのか。

なぜCSS用のバックアップにフッタのバックアップを上書きしてしまうのか。

何故なのか。
 

 ぼくは、Sentenceが大好きだ。やっぱり戻ってきた。いや、戻るもなにも他所に行ききってないのだからギリセーフだ。

というわけで、バックアップがミスった時用のこぴぺをここに置く。こぴぺサイトによく見る前置きなげーよを展開してきた訳ですが、ご了承くださいませ。

 

トップページにはてなスターがあるとモバイル表示の時にひじょ~にもたつく。スターを付けてくれる方は3個くらいまでにしてくださいませ。

/* トップページはてなスター消し */
 .page-index .hatena-star-add-button {
  display: none;
  }
 .page-index .hatena-star-user {
 display: none;
 }
 .page-index .hatena-star-star {
 display: none;
 }
 .page-index .hatena-star-inner-count {
 display: none;
 }
 .page-index .hatena-star-star-container {
 display: none;
 }


記事>関連記事>記事下記事>記事下>関連記事に変更

/* 記事下関連記事の上下位置 */ 
.customized-footer{
 display:-webkit-flex;
 display:flex;
 -webkit-flex-direction: column-reverse;
 flex-direction: column-reverse;
 }


引用周り。一部のどこかが適応されなかったかもしれない。

/* 引用ボックスデザイン */
.entry-content blockquote {
 background: #fcf8fa;
 border: solid 1px #b87295;
 }

【引用テスト】一部のどこかが適応されなかったかもしれない。


見出し関連。

/* 見出しのリセット */
.entry-content h2,
.entry-content h2::before,
.entry-content h2::after {
 background: none;
 border: none;
 border-radius: 0;
 }
/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
 background: none;
 border: none;
 border-radius: 0;
 }
/* 見出しのリセット */
.entry-content h4,
.entry-content h4::before,
.entry-content h4::after {
 background: none;
 border: none;
 border-radius: 0;
 content: none;
 }
/* h4変更 */
.entry-content h4 {
  position: relative;
  color: #3D3F44;
  border-bottom: 4px solid #f3f3f3;
  padding: 3px 10px;
  margin:30px 0 10px 0;
}
  
.entry-content h4::before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 20%;
  height: 4px;
  background:#3f3f3f;
  z-index: 2;
  content: '';
}
/* h3変更 */
.entry-content h3 {
 padding: 0.5em 1em;
 margin: 2em 0;
 color: #232323;
 background: #dcdcdc;
 border-left: solid 10px #5d627b;
 }
 .entry-content h3 p {
 margin: 0; 
 padding: 0;
 }
/* h2変更 */
.entry-content h2 {
    font-size: 160%;
    padding-bottom: .2em;
    border-bottom: 1px solid #dfe5e7;
}
 .entry-content h2 p {
 margin: 0; 
 padding: 0;
 }
/* 見出し風追加 */
.waku1{
 padding: 0.5em 1em;
 margin: 2em 0;
 color: #5d627b;
 background: white;
 border-top: solid 5px #5d627b;
 box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
 }
.waku1 p {
 margin: 0; 
 padding: 0;
 }
.waku2{
 padding: 0.5em 1em;
 margin: 1em 0;
 background: #f4f4f4;
 border-left: solid 6px #5bb7ae;
 box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
 }
.waku2 p {
 margin: 0; 
 padding: 0;
 }
.waku3{
 padding: 0.5em 1em;
 background: -moz-linear-gradient(#ffb03c, #ff708d);
 background: -webkit-linear-gradient(#ffb03c, #ff708d);
 background: linear-gradient(to right, #ffb03c, #ff708d);
 color: #FFF;
 }
.waku3 p {
 margin: 0; 
 padding: 0;
 }

見出しh2

見出しh3

見出しh4

waku1
waku2
waku3
ここら辺はサルワカさんの所でコピーしてきたような気がする。


微調整の類

/* P size周り */
.entry-content p {
 margin:0.3
 }
.entry-content {
 font-size:16px
 }
/* サイドバー下余白 */
.hatena-module {
 margin-bottom:40px;
 }
 /* サイドメニューボーダー */
.hatena-module-title {
 border-left: 5px solid #286da8; /* 左のボーダー */
 padding: 2px 10px; /* 余白 */
 }
/* main外観周り */
#main {
 background-color: #f7f8f9;
 }
/*フッター下消し*/
#container {
 margin-bottom: 0;
 }


サイドバーカテゴリーモジュール

/* サイドバーカテゴリーモジュール */
div.hatena-module-category div.hatena-module-body ul li a {
 color : #ffffff;    /* 文字色 */
 }
div.hatena-module-category div.hatena-module-body ul li {
 display: inline-block; /* 横並びに変更 */
 border-radius: 6px;
 line-height: 10px;
 transition: none;
 background-color: #c17672;
 margin: 5px 1px 1px 1px;
 padding: 10px;
 font-size: 20px;
 }
div.hatena-module-category div.hatena-module-body ul li:hover {
 background-color: #9fc9b8; 
 }


html,css記事内表示用

<!-- タグ背景関連 -->
<script>
 var codeBlocks = document.getElementsByClassName('code');
 [].forEach.call(codeBlocks, function(e) {
 if (!/lang/.test(e.className)) {
 return;
 }
 var lines = e.innerHTML.split(/\n/);
 var codeBlock = "";
 lines.forEach(function(line){
 if(line != ""){
 codeBlock += '<div class="code-line">' + line + '</div>'      
 }
 })
 e.innerHTML = codeBlock;
 });
</script>
/*code-lineクラスの数でカウント*/
.code-line {
 counter-increment: linenumber;
 }
/*偶数行のみ背景色を適用*/
.code-line:nth-child(even) {
 background-color: #022950;
 }
/*行番号を擬似要素として表示*/
.code-line::before {
 content: counter(linenumber);
 display:inline-block;
 color: #ffffff;
 text-align: right;
 width: 35px;
 padding: 0 15px 0 0;
 }
.entry-content pre {
 background-color: #00274e; 
 color: white;
 }
/*コードブロックに言語名を表示*/
pre.code:before {
 content: attr(data-lang);
 display: inline-block;
 background: #022950;
 color: #ffffff;
 padding: 3px;
 position: absolute;
 margin-left: -10px;
 margin-top: -30px;
 }
pre.code {
 padding-top: 30px !important;
 }


記事下関連記事のカスタマイズ

/*記事一覧形式下線*/
.page-archive .archive-entries .archive-entry {
 margin-bottom: 30px;
 padding-bottom: 20px;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #c5c1c1;
 }

/*1つ1つの関連記事ボックス*/
li.urllist-item.related-entries-item {
 margin: 15px 0;
 padding: 10px;
 background: #eeeeee;
 border-bottom: none;
 }

/*関連記事の画像まわり余白調整*/
.urllist-with-thumbnails li .urllist-image {
 margin: 0 10px 0 0;
 }

/*関連記事のタイトル*/
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title {
 text-decoration: none;
 color: #525252;
 font-weight: bold;
 }

/*関連記事のタイトルホバー*/
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover {
 color: silver;
 }

/*関連記事の説明*/
.urllist-entry-body.related-entries-entry-body {
 color: #8f8f8f;
 font-size: 13px;
 margin-top: 3px;
 }

/*関連記事の日付*/
.hatena-urllist .urllist-date-link a {
 display: inline-block;
 background: #93c4cf;
 color: #fff;
 line-height: 1;
 padding: 4px 9px;
 margin-bottom: 3px;
 border-radius: 4px;
 font-size: 11px;
 letter-spacing: 1px;
 font-style: normal;
 text-decoration: none;
 }


LINE風のCSSも結構書き込むんですねえ~

/* LINE風吹き出し */
.entry-content .me-line,
.entry-content .you-line {
    position: relative;
    width: 80%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 12px;
    border-radius: 16px;
    z-index: 1;
}
.entry-content .me-line {
    background-color: #abf18c;
    margin: 20px 20% 40px 0;
}
.entry-content .you-line {
    border: 2px solid #999;
    background-color: #fff;
    margin: 20px 0 40px 19%;
}
.entry-content .me-line::before,
.entry-content .you-line::before {
    position: absolute;
    content: "";
    top: 16px;
    width: 10px;
    height: 10px;
    z-index: 2;
}
.entry-content .me-line::before {
    border-right: 2px solid #abf18c;
    border-bottom: 2px solid #abf18c;
    background-color: #abf18c;
    right: -7px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.entry-content .you-line::before {
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    background-color: #fff;
    left: -7px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.entry-content .me-line::after,
.entry-content .you-line::after {
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    top: -10px;
    border-radius: 40px;
    border: 3px solid #fff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.entry-content .me-line::after {
    right: -110px;
}
.entry-content .you-line::after {
    left: -110px;
}
@media screen and (max-width: 620px) {
    .entry-content .me-line,
    .entry-content .you-line {
        width: 70%
    }
    .entry-content .me-line {
        margin-right: 30%;
    }
    .entry-content .you-line {
        margin-left: 30%;
    }
}
@media screen and (max-width: 478px) {
    .entry-content .me-line::after,
    .entry-content .you-line::after {
        width: 60px;
        height: 60px;
        border-radius: 30px;
    }
    .entry-content .me-line::after {
        right: -84px;
    }
    .entry-content .you-line::after {
        left: -84px;
    }
}
.me::after {background-image:url(画像URL);}
.you::after {background-image:url(画像URL);}

テストです

テストかいな


フッターは大事。なかなか多機能で扱いやすいテンプレートに出会えない。

<!-- フッタ -->
<footer id="footer">
<div id="footer-menu">
<div id="bblog-title-content">
タイトル
</div>
<nav>
<div class="footer-links">
<ul>
<li>
<i class="fas fa-address-card"></i> <a href="#">ABOUT</a>  
</li>  
<li>
<i class="fas fa-envelope"></i> <a href="#">お問い合わせ</a>
</li>
<li>
<i class="fas fa-info-circle"></i> <a href="#">プライバシーポリシー</a>
</li>
</ul>
</div>
</nav>
<p class="copyright">&copy; 2019  <a href="#">###</a></p>
</div>
</footer>
/* フッター */	#bottom-editarea {
  width: 100%;
  margin: 0 auto;
  background: #000000;
  padding: 0;
  color: #fff;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

#footer {
  text-align: center;
  color: #111;
  background: #fff;
  width: 100%;
  margin: 0;
  padding: 2em 20px 1em 20px;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
  text-align: center;
  font-size: 80%;
}
#bblog-title-content {
  font-size: 12px;
  font-weight: 100;
  color: #111111;
}	

.footer-links ul {
  list-style: none;
  padding: 0;
}
.footer-links ul li {
  display: inline-block;
  padding: 0 6px;
  font-size: 14.5px;
  box-sizing: border-box;
}	

.copyright {
  font-size: 12px;
  }