はてなブログカスタマイズ 第一弾
ブログを見やすくしてカスタマイズをして、中身がないのをせめてカバーする第一弾。
吹き出しを作ってみた。
普段、営業やってて正直技術的なことはわからないので、
他に方法があるかもしれませんが、そこはご容赦を。
やったこと
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というスタンスで
少しでも見やすくなればなぁと。
アクセスが少ない今なら工事中でも何にもいわれませんしね。
まだまだこれからも直していきます。
