サラリーマンの週末弾丸旅行術

土日+有給1日で弾丸旅行を!

はてなブログで吹き出しを作る方法

吹き出し

はてなブログカスタマイズ 第一弾

ブログを見やすくしてカスタマイズをして、中身がないのをせめてカバーする第一弾。

吹き出しを作ってみた。

普段、営業やってて正直技術的なことはわからないので、
他に方法があるかもしれませんが、そこはご容赦を。

やったこと

1.デザインテンプレートを公式テーマ「Report」に変更
2.デザインカスタマイズで、CSSをコピー
3.ちょっとだけCSSを修正

1.デザインテンプレートを公式テーマ「Report」に変更

恐らくこれは技術に詳しい人は要らないと思うけど、なぜか前に使っていたテーマだと
どんなにデザインカスタマイズをしても、テーマ独自のCSSが反映してしまってて
どうしようもなかったので、シンプルなテーマに変更。

2.デザインカスタマイズで、CSSをコピー

画像いらず!CSS3で作るおしゃれな見出しデザイン
スタイル様のサイトを参照して、吹き出しをまるまるコピー
コピーしたら、はてなブログの管理画面→デザイン→カスタマイズタブを選択→
デザインCSSをクリックして、ペースト

.heading03 {
font-weight:bold;
position: relative;
background: #b8b8b8;
padding: 10px;
}
.heading03:after {
content: "";
position: absolute;
top: 100%;
left: 25px;
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 10px solid #b8b8b8;
}

3.ちょっとだけCSSを修正

先ほどのCSSの中で、「heading03」を「entry-content h4」に変更。
自分で変更しておきながら、なぜ H4だけかはわかりません。
ただ、これで出来るんで、今の自分の技術力では結果がOKならOKとしておきます。

修正後

.entry-content h4{
position:relative;
margin-bottom:20px;
padding:10px 10px 10px 20px;
background-color:#ECECEC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
}

.entry-content h4:before{
content:"";
position:absolute;
width:0px;
height:0px;
top:100%;
left:30px;
border-style:solid;
border-width:20px 20px 0px 3px;
border-color:#ECECEC rgba(192,192,192,0);
}

まとめ

全くCSSのことがなんなのかわかりませんが、まずはできてればOKというスタンスで
少しでも見やすくなればなぁと。
アクセスが少ない今なら工事中でも何にもいわれませんしね。

まだまだこれからも直していきます。

Related Posts Plugin for WordPress, Blogger...