ブログ運営

記事を書いてると欲しくなる「参考マーク」「ポイント」「吹き出し」の作り方

ブログを運営していると、「ここでこんな表現したい!」と思うことありませんか?
この記事では、わたしが運営している中で、使いたいと思う頻度の高かった、
「参考マーク」「ポイント」「吹き出し」を作るためのCSSを紹介いたします。

文中リンクにアクセントをつける、参考マーク

リンクの前に参考アイコンをつける方法

記事内でリンクを貼るときに、class=”ref”とつけると、参考マーク付きのリンクになります。
参考サイトへリンクしています

HTML

CSS

文字色を変えたいときは、color:#fff;を、背景色を変えたいときは、background:#666;を変更してみてくださいね。

もっと目立たせたいときは、参考ボックス!

お使いのテーマによっては、参考アイコンでは力不足なことがあります。
あまり囲みすぎるとガヤガヤしてしまいますが、ボックスで囲むと目をひきます。

HTML

CSS

背景色を変えたい場合は、background:#efefef;を変えてみてくださいね。
角丸を変えたい場合は、border-radiusの数値を変えてみてください。

また、ボックスに影をつけたい場合は、
box-shadow: 5px 5px 5px 10px rgba(0,0,0,0.4);
というCSSプロパティを付け足してみてください。
box-shadow-CSS3リファレンス

記事の中で目立たせたい部分に使いたい「ポイント」

記事の中で際立たせたいポイントがあるときに使うと便利なポイント枠です。
参考書の下にある、「まとめ」みたいな役割で使うと記事が読みやすくなるかもしれません。

ポイントはこちら〜〜〜はひふへほ〜〜〜〜

HTML

CSS

罫線の色を変えたい場合は、borderの#から始まる値を変えてみてくださいね。
文字の色を変えたい場合は、colorの値を。
角丸を変えたい場合は、border-radiusの数値を変えてみてください。
POINT!の文字を変えたい場合は、content:”POINT!”;を変えてみてください。

吹き出し

文中で吹き出しを使ってみたいときってありませんか?

手っ取り早くジェネレーターを使う

そんなとき、手軽に吹き出しのスタイルを作れるジェネレーターがあります。

設定すると、ソースが出てきますので、style.cssにコピペしてみてくださいね。
使うときは、divタグに、class=”arrow_box”をつければOK。

CSS ARROW PLEASE!

HTML

cssarrowplease
CSS ARROW PLEASE!

アイコン付きの吹き出しを作りたい

対談記事や実際にインタビューしてみた記事だと、アイコン付きの吹き出しが、大活躍します。
そこで、dlタグを使ったシンプルな吹き出しをご紹介。
アイコン付きの吹き出しのイメージ

HTML

CSS

色を変えたいときは、
background: #FFF3DB;
border-right-color: #FFF3DB;
の色を変えてくださいね。

おわりに:色を指定するための6桁のカラーコードを作るには……

上記のCSSの色を変えたいばあいは、こちらのHTMLカラーコードが便利です。
お好きな色を作って、#からはじまる6ケタのカラーコードを書き換えてみてくださいね。
html-color-picker
HTMLカラーコード

style.cssってどこから編集するの?

wordpressのダッシュボード→外観→テーマの編集→style.css
から編集できます。
wordpressをほじくり回してくださいねー。

それでは楽しいブログライフを!

Category : ブログ運営
スポンサーリンク

この記事がお気に召したら、いいね!お願いします♪

最新情報をお届けします

想いをカタチにするデザイナー / Web & Graphic Designer 丸山るこ

「自分らしく働く女性」を応援したい想いから、お客様のサービス、お人柄を理解し「一貫してデザインを任せられるパートナー」として活動しています。 当ブログでは、ホームページやブログ、名刺などのツールについてお伝えしています。 5歳の女の子の母。趣味は文房具選びと娘の写真を撮ること。