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

CSS素材

ブログを運営していると、「ここでこんな表現したい!」と思うことありませんか?
この記事では、わたしが運営している中で、使いたいと思う頻度の高かった、
「参考マーク」「ポイント」「吹き出し」を作るための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をほじくり回してくださいねー。

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

スポンサーリンク

メルマガはじめました

WordPressでのブログ運営に興味のあるあなたへ♡

プチマガでは、井戸端会議のおばさん風味の軽〜いノリで、
「今週のblanc note.(WordPress無料テーマblanc noteのアップデート情報)」
「\これであなたも耳年増/ブログよもやまばなし」
「メルマガっておいしいの?」
など、ゆる〜〜く発信しています。

メンバー特典 blanc note.のテンプレートも鋭意開発中。 ほぼ週1配信です〜。

ご登録はこちらから

ご登録はお名前(ハンドルネームOK)とメールアドレスのみ。
フォームへ入力後、仮登録のメールが届きます。
メール内の「リンク」をクリックすると登録完了です。
フリーランスママデザイナー るこ

コンピューターは道具だよ。息を吸うみたいに、手足のように、使っちゃおう!
幼少期から自分自身が目立つことが苦手で「写真を撮られると魂が抜ける〜!」と、逃げ回ってました。
そんなこんなで、ただいま、顔を出さずにどこまで信頼度を得られるか、実験中です!
あっ、作品が目立つのは大歓迎!(笑)

CSS素材

この記事がお気に召したら……

最新情報をお届けします