旨い飯には福きたる

管理人かずーきおすすめの居酒屋やレストランをご紹介するグルメブログです。

【はてなブログ】コピペだけできるデザインCSSカスタマイズ③


どうもかずーきです!(@kazuuuuuuuukin)

前回、前々回の記事にて今まで行ってきたCSSのカスタマイズを紹介致しました。

www.kazuki-iroiro.com
www.kazuki-iroiro.com

本記事では目次や見出し、また枠線などを紹介したいと思います。


目次デザインCSS

早速ですが、シンプルな水色の目次です。

デザインCSSにコードを入れます

f:id:kazuki-iroiro:20200113231747j:plain

↑デザイン設定一番下のデザインCSSです。

/*目次のデザイン変更*/
.entry-content .table-of-contents {
    position:relative;
    margin-left: 0;
    padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
    font-size: 100%; /* 文字の大きさ */
    font-weight:bold;
    list-style-type:decimal; /*数字以外が良ければ変更 */
    background:#fff;
    border-top:40px solid #90caf3; /* 「この記事の目次」周りの色 */
    border-left:2px solid #90caf3; /* 線の太さ */
    border-right:2px solid #90caf3;
    border-bottom:2px solid #90caf3;
    line-height: 200%; /* 行間 */
    border-radius: 3px; /* 角丸にしない場合は不要 */
    color:#444; /* 数字(マーク色変更) */
}
/*「この記事の目次」の周囲変更*/
.entry-content .table-of-contents::before {
    font-family: 'blogicon';
    content: "\f039  この記事の目次";
    display: block;
    font-size: 130%;
    font-weight: bold;
    position: absolute;
    top: -40px;/*上からの位置調整*/
    left: 0px; /*左からの位置調整*/
    color: #fff !important;
}
/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
    color:#444; /* 目次リスト部分のテキスト色 */
    text-decoration:none; /* リンクの下線をつけたくない場合 */
}
/*目次のデザイン変更*/

見出し

大見出し

この記事の青色塗りつぶし白抜きの大見出しです。

こちらもデザインCSSへコピペでOKです。

/*大見出し*/
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
  background: none;
  border: none;
  border-radius: 0;
}
.entry-content h3 {
  padding: 4px 8px;
  color: #f5f5f5;
  line-height: 1.5;
  background-color: #000080;
}

中見出し

この記事のお洒落なボックスの中見出しです。

こちらもデザインCSSへコピペでOKです。

/*中見出し*/
.entry-content h4,
.entry-content h4::before,
.entry-content h4::after {
  background: none;
  border: none;
  border-radius: 0;
}
.entry-content h4 {
  position: relative;
  padding: 6px 0 6px 34px;
  border-bottom: 2px solid #ce0d55;
  color: #333;
  line-height: 1.5;
}
.entry-content h4::before,
.entry-content h4::after {
  content: '';
  position: absolute;
  background-color: #ce0d55;
}
.entry-content h4::before{
  top: 0;
  left: 14px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
}
.entry-content h4::after{
  top: 18px;
  left: 8px;
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}


文字の大きさ変更

こちらもデザインCSSへコピペです。

『15』を変更して調節してください。

この記事のフォントサイズが15です。

/* 文字の大きさ */
.entry-content {
font-size:15px;
line-height:1.8em;
}

字体変更

こちらもデザインCSSへコピペです。

この記事は『メイリオ』にしております!

/* フォント */
body {
font-family: "メイリオ", Meiryo;
}

記事の写真を中央にする

こちらもデザインCSSへコピペです。

この記事は『メイリオ』にしております!

/*写真を中央に表示*/

.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}

囲い枠シリーズ

題名ありの囲い枠(黄色)


⇩これです⇩

この記事のポイント・簡単・初心者向け
・コピペOK
・おしゃれなデザイン

①デザインCSSを貼り付ける

/*黄色囲み枠*/
.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #FFC107;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #FFC107;
    color: #ffffff;
    font-weight: bold;
}

    padding: 0;
}
/*黄色囲み枠*/

②記事を書くときにコードを入れる。

<b><div class="box28"><span class="box-title">この記事のポイント</span>・簡単・初心者向け
・コピペOK
・おしゃれなデザイン</div></b>

囲い枠(左側に太いライン)

⇩これです⇩

【管理人コメント】
簡単にできちゃいます。
おすすめです。

①デザインCSSを貼り付ける

/*黄色囲み枠左に太線*/
.box8 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
}
.box8 p {
    margin: 0; 
    padding: 0;
}
/*黄色囲み枠左に太線*/

②記事を書くときにコードを入れる。

<div class="box8"><b>【管理人コメント】</b>
簡単にできちゃいます。
おすすめです。</div>


以上、淡々とコピペしました。笑

前回、前々回の記事と合わせればこのブログとほぼ同じのデザインになると思います。

私自身もっと勉強していきたいと思います・・・。

皆様の役に立てれば幸いです!

最後までお読み頂き、ありがとうございました!!