見出しをCSSで吹き出し風にしてみました。
どうも、牛丼デザイナーのぽてこです。
今日はCSSで吹き出しを作る方法についてご紹介します。
最近ブログがひとりごとばっかだなぁ。
なんかモチベーションあがんねぇなぁ。
もともと、仕事中に調べて勉強になったことをまとめるブログだったので
ネタは山ほどあるはずなの!に!
なのにですよ!
モチベーションがこない
これは大問題。
モチベーション上がらないのは、ブログデザインを弄ってる途中だからだ!
半端だからだ!
かわいくしよう!
ということで、記事の子見出しを吹き出し風にしてみました。
今回はその方法と軽い解説になります。
CSSで吹き出しを作る
牛丼ブログに使用した吹き出しCSSをまずはご覧くださいまし。(ふきだしーえすえす。。。!)
【CSS】
.fukidashi{ margin-bottom: 50px; padding: 20px; border: 3px solid #283f5e; position: relative; width: auto; min-width: 115px; height: auto; line-height: 34px; color: #283f5e; background: #F5F5F5; text-align: center; z-index: 0; } .fukidashi:before { margin-left: -9px; border-style: solid; border-width: 9px 9px 0 9px; border-color: #F5F5F5 transparent transparent transparent; content: ""; position: absolute; bottom: -8px; left: 50%; width: 0px; height: 0px; z-index: 0; } .fukidashi:after { margin-left: -10px; border-style: solid; border-width: 10px 10px 0 10px; border-color: #283f5e transparent transparent transparent; content: ""; position: absolute; bottom: -12px; left: 50%; width: 0px; height: 0px; z-index: -1; }
ちなみに、はてブロの見出しに吹き出しをつけたい場合は、
「.fukidashi」を「.entry-content h◯」にすればいいだけ。のはず。
簡単適当な解説
ぱっと見、たくさんのプロパティが書かれているし、なんでCSSで三角形が作れるのか謎い。
YES小並感。
だけども、仕組みは意外と簡単みたいです。
borderを使って三角形を作って、
その三角形をpositionで任意の場所に持ってくるだけの簡単なお仕事。
わかりにくい場合は、
ファイアーバグなどで要素の検証をして
borderの色を変えてみると良いかもしれません。
色を実際に変えたのがこちら。
参考画像:この間投稿した記事の見出しタグ。
CSSで三角形を作る
では、なんでborderだけで三角形が作れるのでしょーか。じっとりねっとり調べてみました。
結論からいうと、
いらない部分を見えなくして三角形を作っているだけです。
(ズバーン)
width、height、共にサイズ無しのdivの中にborderをひくと、
線の太さが反映された四角い箱ができます。
この四角いborderの箱をいじいじしていきましょう。
borderの上下左右の色を変更しよう
まず、borderの色は上下左右別々に指定することができるのでそれぞれ違う色を指定して確認してみましょう。
【CSSはこう書くよ】
.border { width: 0; height: 0; border−top: solid 10px #ff00ff; border−right: solid 10px #ffff00; border−bottom: solid 10px #0000ff; border−left; solid 10px #ff0000; }
そうすると、こんな感じの四角ができるはずです。
画像では洒落こいた色にしておりますが、
もっと、#ff00ffとかわかり易い色がいいと思います。
(管理人トラップではありません。)
いらない部分を消しちゃおう
色を付けることで必要な部分とそうでない部分がはっきりしました。いらない部分の色をtransparentで透明にしてやると、形が変わるという仕組みです。
今回の下向き三角の場合は、top意外が不要なので以下のようなCSSになります。
【CSS】
.border { width: 0; height: 0; border−top: solid 10px #ff00ff; border−right: solid 10px transparent; border−bottom: solid 10px transparent; border−left; solid 10px transparent; }
簡潔に書いてみよう
もっと簡潔に書くと、以下のようになります。【CSS】
.sankaku{ border-color:transparent; border−top: solid 10px #ff00ff; }
このくらいのコードで全然いい感じの三角形ができちゃいます。
吹き出しのコードにもこっちを使っていいくらいだと思うんだ。
コーディングするときはできるだけ簡潔なコードにしたいですもんね。
三角形のCSSで台形も作れるってさ。
そういえば。三角形いじれば台形も作れるんじゃね?
……って思っていじいじしていたのですが。
台形の場合は少しやり方が違うみたいです。
やり方は、三角形を作ってwidth指定して幅を広げるだけ。
おお。簡単。ぱねぇっす。
応用もきく便利なCSSなので原理を覚えておくと役にたつかもしれません。
こばなし。という名の編集後記
おお、久しぶりにおえかきしました。あの絵柄はコンビニ飯ブログ以来です…w
でもあの絵柄って、やっぱり、楽しいなぁ自分らしいなぁと思うのです。
すごく簡単に描けちゃうので(w)今度から積極的にらくがきしてこーと思いましたん。
今日のひとりごと。ブログタイトル変更するとSEOってどうなんの
ブログタイトルかえます
ブログタイトルを変更すると、SEO効果は下がるの?
検索エンジンはキーワードでWEBサイトを見てる
テーマに沿ったブログタイトルがベスト!
ひとりごと
どうも、牛丼のぽてこです。
今日は全然まとまっていない文章の投稿です。
いらっしゃいませ、おかえりなさい、いってらっしゃい、また明日ね
以前ぽつぽつ投稿していたブログでこちらのブログを紹介したところ、昔の読者さんたちがたくさん遊びにきてくれたようで……!
うれしい限りですね。
そこで改めて思ったのですが、
はてなブログでお友達たくさん出来たらなんか楽しそう!
うんうん、友達増えるのはいいことだよ!
というわけで、このブログでもはてなブロググループとか積極的に参加してみようかなーと思いますん。
まだ何も参加していないのだよね。
わたしの好きなブログ
唐突ですが、わたしは人間味のあるブログが好き。読者登録しているブログとかよく見るブログは人間味のあるブログばっかり。
なんか最近、人間味のないブログがよく目につくのです。
前職で情報メディアを作ったりしていたのでSEOも大好きだしPVの増やし方的なものも一通りは理解しているつもり。
だけど一点にばかり目を向けていると硬い文章になっちゃうんじゃないかなっと思うんだ。
もちろん、否定はしないし、なんだかんだ必要な時には見てるますよ!笑
僕だって、いろいろな人に見てほしいからSEOにも気をつけてたりするし硬い文章にもなる。
でもほどほどになるように。ほどほどに硬く、ほどほどに柔らかい。
暖かい文章でブログを綴っていけたらいいなぁと思う。願望。
というわけで、小言でした。
イラスト投稿しようかなと思ったのだけど、最近おえかきする時間がなくてだねorz
Macのメモ帳にペーストすると属性が反映されてしまうトラップの対処法
どうも、牛丼デザイナーです。
macを使って4ヶ月くらい経ちました。
今までWin派だったので慣れないことも多く、わーわーする毎日です。
特に最初のころなんかは、マウスパッドの挙動から何からちょっとしたことでメゲテました。。。
仕事で使ってるのに、こんなあたふたしてどうすんねん!って思いつつもなんだかんだ慣れちゃうものですな。
そんなmacのちょっとした機能について、
ちょっとした小ネタを書いてみます。
macのメモ帳、使っていますか?
みなさん、macに標準インストールされているメモ帳は使っていますか?ぽてこは毎日といっていいほど使っています。
なんだかんだ便利なんですよね。
今回は、便利すぎて不便な点の対処方法についてお伝えします。
コピー&ペーストで文字情報の属性まで貼り付けられる
メモ帳を使っているときに一番困るのがこれです、これ。エディターを使ってコーディングする機会が山ほどあるのですが。
そのコードをメモ帳に貼り付けたら……黒背景に緑文字。愕然。呆然。
それは今ではない!よ!
文字情報以外もコピーしちゃうんですね。
ああ、便利なんだけど駄菓子菓子。
属性をペーストしない裏技!
この文字に付属する属性をペーストしたくない。そんなときに使えるショートカットがこれ
Shift + Command + Option
周りの文字のスタイルに合わせてペーストしてくれるショートカットです。
これで簡単に周りの文字と見た目を合わせることができます。
こばなし
便利すぎて不便な点…というなんともコメントしにくい機能について書いてしまいましたが、いいところもたくさんあるんだよ!この子いい子なんだよ!
メモ帳の便利な活用方法についても後々晒しちゃおうかな(๑╹ᆺ╹)
選択時(ドラッグ)に背景色とか文字色とか、しゃれおつに変更してみよう
どうも、牛丼デザイナーのぽてこです。
今日もコーディング記事を書いたのですが、
ついに「デザインブログ」のゲシュタルトが崩壊してきました。
どうも、牛丼デザイナーの牛丼ブログです。
選択時の背景色を変更する
WEBサイトを見ていると、文字などを選択したときに出てくる色がとってもカラフルで…キレイダナーと思っています。(小並感
この選択時の背景色なのですが
意外と簡単なコードで実装できちゃいます。
わかりやすい場所に以下のCSSを付け足すだけで、あら不思議の海のナディア。
ぽてこはいつもCSSの上の方に記述しています。
【CSS】
::selection { background: #000; /* Safari用 */ } ::-moz-selection { background: #000; /* Firefox用 */ }
ちなみに。
管理人の粋な計らいにより、コピペすると真っ黒になるのでお好きな色に変更してみてくださいね。
選択時に文字色だけを変更する。しゃれおつコード。
しゃれおつソースって言うと、なんか美味しそう……。ということはさておき。
選択時の背景色を変えるための擬似要素ですが、
背景色を変えるだけじゃないんすよ。実はね。ふふふ。
そう、なんと!文字色の変更もできてしまうのです。
方法は先程と、ほぼ一緒だったりします。
【CSS】
::selection { color: #00ffff; /* Safari用の選択時の文字色 */ } ::-moz-selection { color: #00ffff; /* Firefox用の選択時の文字色 */ }
こちらも、ぽてこトラップにより懐かしい色合いが再現できます。
要素ごとに設定することも可能。
擬似要素なので、直前にclass名などを追加することも可能です。【こうして、こうして、こうじゃ!】
p::selection { background: #000; } p::-moz-selection { background: #000; }
ただし、注意しなければいけないことも。
この::selectionですが、注意しなければいけないことが2点あります。まぁ、簡単なことなのでちょっと気をつければOKです。
適用されるプロパティが限られてくる
まぁタイトル通りなのですが、::selectionは、以下の4つのプロパティにしか適用されません。
- color
- background
- background-color
- text-shadow
ちゃんと適用されないーー!と思っても焦ってはいけませんね。
ちょっとふわふわ。CSSの仕様書にない擬似要素
この::selectionはCSS3の草案に記載されていた擬似要素です。ですが、入れ子要素での動作の定義がふわふわしていた為に、
勧告候補にあがる前に候補から落とされてしまったようです……。残念。
でも、この擬似要素の機能を実装するブラウザがたくさんあることも事実です。
そんな簡単には無くならないものだと、ぽてこは信じています。よ。
そんな感じなので、便利な擬似要素なのですが、ちょっと不安な部分もあるかなーという感じでしたー。
推薦されていなかったり、ふわふわしてたり、そういったCSSも結構あるので注意していきたいですね。
まぁ、個人的に使うなら全然問題ないんじゃないかなーと思うのです。
ちょっと思った。
「::selection」って、わりとよく使う擬似要素だったのですが、はじめて知ったことも多かったです。ブログ書いていると勉強になることが多いなぁ……なんて思う今日この頃ですよ。
んで、W3Cってあるじゃないですか。
今まで毛嫌いして読まなかったのですがしっかり読んでみると案外面白いのかもとか思ったり。
(いまだに読んでないっす。これがぽてこクオリティ。案外なんとかなるもんだけど非推奨。)
ちなみに。一瞬だけW3C見てみました。めげました。早いね、ぽてこさん!
そんな今日のぽてこでした。
ちゃんちゃん。