読みやすい記事にするために私がカスタマイズしたこと【はてなブログのカスタマイズ】

読みやすい記事にするために私がカスタマイズしたこと【はてなブログのカスタマイズ】

ブログを書いていて、自分の文章に面白みが感じられないないと思ったことはありませんか？私自身、自分の書いた文章を「なんて面白味のない文章なんだ」と思うことがあり、書いては消してを繰り返して全く文章が進まなかったという経験があります。しかしながら、こういった文章の味気無さというのは、文章の装飾を増やすことで簡単に改善が可能です。

読みやすい記事にするために私がカスタマイズしたこと【はてなブログのカスタマイズ】

記事の「太字」と「斜体」をカスタマイズする

はてなブログでは、記事を書くときの装飾として、「太字・斜体」などが用意されています。「太字・斜体」は、実用的でとても使いやすい機能ではありますが、デフォルトのデザインでは装飾として物足りないので、CSSでカスタマイズして、より目立つ装飾にしていきます。

    /* 太字を緑マーカーに */
    .content strong { 
   
    background: linear-gradient(transparent 70%, #7bc890 0%);
     
    }
   
    /* 斜体を大文字に */
    .entry-content em {
   
    font-style: normal;
    font-weight: bold;
    font-size: 24px;

    }

このように、文章を太字にすれば、緑色のアンダーバーが表示されるようになりました。

記事に吹き出しを入れる

吹き出しのCSS

まず最初に、下のCSSコードをはてなブログデザイン欄にコピー&ペーストしてください。一番下のがぞうURLに画像を指定することで、文章で会話しているかのように表現することができます。

/* 吹き出しのCSS */
.entry-content .fukidashi-hidari,
.entry-content .fukidashi-migi {
  position: relative;
  width: calc(100% - 82px);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 20px;
  border-radius: 6px;
  border: 2px solid #ddd;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
  background-color: #fff;
  z-index: 1;
  box-sizing: border-box;
}
.entry-content .fukidashi-hidari {
  margin: 20px auto 36px 0;
}
.entry-content .fukidashi-migi {
  margin: 20px 0 36px auto;
}
.entry-content .fukidashi-hidari::before,
.entry-content .fukidashi-migi::before {
  position: absolute;
  content: "";
  top: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
  z-index: 2;
}
.entry-content .fukidashi-hidari::before {
  right: -7px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.entry-content .fukidashi-migi::before {
  left: -7px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.entry-content .fukidashi-hidari::after,
.entry-content .fukidashi-migi::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  top: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 5px #aaa;
  box-sizing: border-box;
}
.entry-content .fukidashi-hidari::after {
  right: -82px;
}
.entry-content .fukidashi-migi::after {
  left: -82px;
}
@media screen and (min-width: 478px) {
  .entry-content .fukidashi-hidari::after,
  .entry-content .fukidashi-migi::after {
    width: 80px;
    height: 80px;
  }
  .entry-content .fukidashi-hidari,
  .entry-content .fukidashi-migi {
    width: calc(100% - 106px);
  }
  .entry-content .fukidashi-hidari::after {
    right: -106px;
  }
  .entry-content .fukidashi-migi::after {
    left: -106px;
  }
}
.fukidashi1::after {background-image:url(画像のURL);}
.fukidashi2::after {background-image:url(画像のURL);}
.fukidashi3::after {background-image:url(画像のURL);}

吹き出しのHTML

<p class="fukidashi-migi fukidashi1">吹き出しの中のコメント右側</p>
<p class="fukidashi-hidari fukidashi1">吹き出しの中のコメント左側</p>

記事を書く時に、上のHTMLコードを定型文貼り付けに登録しておけば、吹き出しを挿入したい時にとても便利です。

このような感じで、文章の中で会話しているかのような表現をすることが可能になります。

記事に注意ボックスを入れる

吹き出しのCSS

/* 吹き出しのCSS */ 

.kakomi {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 3px #FF0000;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #FF0000;/*文字色*/
}
.kakomi .kakomi_title{
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
    font-size: 1.3em;/*タイトル文字サイズ*/
    background: #ffffff;/*タイトル文字背景色*/
    color: #FF0000;/*タイトル文字色*/
    font-weight: bold;
}
.kakomi p {
    margin: 0; 
    padding: 0;
}

吹き出しのHTML

<div class="kakomi">
<span class="kakomi_title">CHECK!</span>
<p>記事本文</p>
</div>

上のHTMLコードを記事の中のHTML編集に貼り付ければ、下のように表示されます。

CHECK!

記事本文

この記事を書いた人

@JpnKiwi

リゾートバイト歴は5年で、これまでに4つの職場を経験しました。海沿いにある旅館や、スキー場の中にあるホテルなど、宿泊施設をメインにリゾートバイトをしています。現在は長野県のホテルでリゾートバイトをしています。