注意事項や画像の説明文のデザインをCSSでいじれるようにしました。

2017/04/28
ブログ / WordPress

AlartStyle

ちゃんとしたCSSの勉強はしたことがない、@jinnaitakumiです!

CSSの勉強はもっぱら他人様のブログを見て、ソースを覗きこんで自分でいろいろ試してごちゃごちゃやって覚えてます。

そんなやり方ですが、記事を読みやすくするべく、注意事項や画像の説明文を読みやすくタグで括って、CSSでデザインをいじれるようにしました。

画像やエントリの説明文

なんとか画像の説明文を分かりやすくできないか

アプリ紹介やTips系の記事を書くときに、説明文が読みにくいんだよな〜、ということをずっと思ってました。

これを読みやすくできないかな、と。

ただ、いまの「▼画像の説明」というフォーマットはテキストとしては分かりやすいと思うし、ヘタにコメントと画像を枠で囲ったりしても見やすくはならないだろうし、といまいち思い悩んでいたのです。

フォントを大きくして、色を変えた

何にせよデザインを編集しよう、でも直接スタイルを指定すると、あとからデザインを変更するとき面倒くさいから、タグで括ってCSSでデザイン作ろう、となりました。

あくまで素人が見よう見まねで作ってるだけです。アドバイスがあったらぜひツイッターでもコメントでもお願いします!
▼こんな感じで括る
<div class="imgCommentStyle">▼画像の説明</div>
▼CSSはとりあえずこうしました
/* 画像のコメント文のスタイル */
.imgCommentStyle{
    font-size:120.0%;
    color:#454545;
}
.imgCommentStyle a{
}
.imgCommentStyle a:hover{
}
▼こんな感じになる
スクリーンショット 2012 12 19 16 17 09

いまのところ単純にサイズ大きくして、色をグレーにしただけですが、iPhoneでもけっこうけっこう読みやすくなったな〜、と思ってます。

注意事項や参考事項にも作った

飛ばし読みでも分かる記事を作る

「ここに注意して!」
という部分を普通に書いてると分かりにくいかな、と。

優れたエントリは飛ばし読みで内容が分かるエントリだと思うので、飛ばし読んでいても大事なところが目に入るようにしたい。

ということで、注意事項などについてもデザインをいじりたい。タグで括ってCSSでデザインをいじろう、となったわけです。

枠で囲って、色つけた

とりあえず枠で括ったほうがいいだろうと。
でもただ枠で括っただけだと、ごちゃごちゃしたエントリのとき、目に入りにくいかもしれない。色を付けよう。

ということで作ってみました。

▼タグはこんな感じ
<div class="alartStyle">
<div class="alartTitleStyle">注意事項</div>
<div class="alartTextStyle">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
▼CSSはこんな感じ
/* 注意事項のスタイル */
.alartStyle{
    border:1px solid #cccccc;
    border-radius:5px;
    margin:10px 5px;
}
.alartStyle a{
    display:block;
    background-color:#ff3333;
}
.alartStyle a:hover{
}

.alartTitleStyle{
    border-radius:5px;
    padding:5px 10px 5px 20px;
/*    border-color:#cccccc;
    border-width:0 0 1px 0px;
    border-style:solid; */
    font-size:110.5%;
    font-weight:bold; 
    color:#ff0000;
    background-color:#ffeded;
}
.alartTitleStyle a{
}
.alartTitleStyle a:hover{
}

.alartTextStyle{
    border-radius:5px;
    color:#454545;
/*    background-color:#ffff98; */
    padding:10px 10px 10px 20px;
}
.alartTextStyle a{
}
.alartTextStyle a:hover{
}
▼そしてこんな感じになる

参考事項も同じように作ってみました。

▼タグ
<div class="memoStyle">
<div class="memoTitleStyle">メモ書き</div>
<div class="memoTextStyle">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
▼CSS
/* メモのスタイル */
.memoStyle{
    border:1px solid #cccccc;
    border-radius:5px;
    margin:10px 5px;
}
.memoStyle a{
}
.memoStyle a:hover{
}

.memoTitleStyle{
    border-radius:5px;
    padding:5px 10px 5px 20px;
/*    border-color:#cccccc;
    border-width:0 0 1px 0px;
    border-style:solid; */
    font-size:110.5%;
/*    font-weight:bold; */
    color:#ffffff;
    background-color:#8b4513;
}
.memoTitleStyle a{
}
.memoTitleStyle a:hover{
}

.memoTextStyle{
    border-radius:5px;
    color:#454545;
    background-color:#ffff98;
    padding:10px 10px 10px 20px;
}
.memoTextStyle a{
}
.memoTextStyle a:hover{
}

使いたい人がいたら、持っていってもらってぜんぜん構わないのでw

まとめ

ということで、今回のポイントをまとめると

  • 注意事項や画像の説明文をCSSでデザインをいじれるようにした
  • 飛ばし読みでも分かるようにしたい
  • アドバイス頂戴w

の3つです!

読みやすくなるかな?
今後もちょくちょくデザインはいじっていこうと思ってます。
そのためにCSSでデザインいじれるようにしたので。

CSSとかHTMLとか詳しいひといたらアドバイスくださいw

実はMacでTextExpanderを買ったのは、このタグで括るのをカンタンにしたかったからです。