CSS で「吹き出し」をつくってみる | バシャログ。
こんにちは。mackyです！ 最近、何かと吹き出しを目にすることが多かったので自分でもサンプルを作成してみることにしました。 よかったら読んでみてください。 では、早速。 HTML HTMLはこの一行。 <div class="baloon">お久しぶりです。まっきーです。ここに好きなテキストをいれてね。</div> CSS：スタンダードな角丸長方形 使える環境であれば使いたい :before 。CSSもシンプルにできてしまいます。 .baloon { width: 400px; padding: 10px; background: #FF3399; position: relative; color: #fff; border-radius: 5px; text-align: center; } .baloon:before { content: ""; position: absolu
WordPress 4.1から title 要素の作り方が変わるという話 | バシャログ。
映画『インターステラー』を主に TARS 目当てに観てきた kagata です。『キカイダーREBOOT』といい『her／世界でひとつの彼女』といい、今年はロボットや人工知能の出てくる映画が印象に残っています。年末公開の『ベイマックス』も期待。 さて、WordPress の次期バージョン4.1が今月リリースを目指して準備されています。そのバージョン4.1から、title 要素の自動生成という新しい機能が盛り込まれる予定です。バシャログ読者に多いであろうフロントエンド畑の方々や、WordPress テーマカスタマイズの初心者のみなさまにもかかわりがありそうということで、ちょっと調べてみました。 おさらい：これまでの WordPress での title 要素 これまで、WordPress での title 要素はテーマの header.php にテンプレート関数 wp_title() を使っ
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
【Photoshop】使える！ブラシを集めました。 | バシャログ。
DJ NOBU 「 Dream into Dream 」がヘビロテのokadaです。 どうぞよろしくお願いします。 今回は、使える！Photoshopブラシを集めました。 よろしくお願いいたします。 追加方法 ダウンロードした.abrファイルをダブルクリックをして追加するか ブラシツールをクリックして、1から3をクリックし、ブラシファイルの読み込みで追加します。 ライティング系 光を表現したい時に使いたいブラシです。 Quantum Brushes Life Brushes Hyper Brushes Abstract 04 Light Beams + Rays Brushes グランジ系 グランジ＝汚れた感じを表現したい時に使いたいブラシです。 Grunge Ady's Splatter Brushes 3 Grunge Brushes Free Grunge Textured Phot
セキュリティ対策まとめ（2013年秋）
JOJOのアニメ第三部が正式に決まったそうですね！ 楽しみ～な、にわかファン Latin です。 最近のWordPress界隈ではAmazon Web Serviceが俄然盛り上がっておりますが、大好きなWordPressを守るため、セキュリティ対策をまとめてみました。 初期セットアップ・設定系の対策 データベースのプレフィクス（接頭辞）を変更する wp-config.php 内の「wp_」の接頭辞を任意のものへ変更します。 その場合、追加で以下の作業が発生します。 phpMyAdmin などを使い、データベースのテーブルネームを変更したカスタムプレフィクスに変更する。 options や usermeta テーブルなどの他のフィールドでも「wp_」プレフィクスが使われている可能性がある為、以下のクエリーを走らせてプレフィックスを変更する。 SELECT * FROM `myprefix_
[WordPress]カスタムメニューをよりフレキシブルに。 | バシャログ。
先週末、会社のソフトボール大会に参加してきました。 こんにちは、戦犯の Latin です。 さて今回は、前回の「[WordPress]オリジナルのカスタムメニューを作成する」の応用編という事で、register_nav_menus関数を使った応用編をまとめてみようと思います。 前回は wp_nav_menu 関数で menu に直接パラメータを渡す事で作成したテンプレートファイル側で直接、カスタムメニューと紐付けてあげる、といった方法でした。 小規模であればこれでもいいのですが、カスタムメニューの数が増えた場合やメニューの内容を差し替えたい場合に、一々テンプレートファイルを書き換えなければならず、 メニューの数が増えれば増えるほど管理も運用も大変になる、といった問題を抱えていたりもします。 そこで register_nav_menus 関数を用いる事で、「管理画面上からサクッとメニューを切
[WordPress]3大カスタム要素、カスタム投稿タイプ・タクソノミー・フィールドを使いこなす | バシャログ。
こんにちは Latin です。 コンフェデレーションズカップはじまりましたね！夏のフットボール観戦はやっぱり燃えます。 さて今回は、WordPressの「3大カスタム要素」と題しまして、「カスタム投稿タイプ」、「カスタムタクソノミー」、「カスタムフィールド」についてまとめていこうと思います。 目次 カスタム投稿タイプ カスタムタクソノミー カスタムフィールド 3大カスタム要素を使ったサイトの運用例 追加されたカスタム要素の表示サンプル どういったケースで使うの？ 例題として今回は、「コーポレートサイト」の場合を想定してみます。 カスタム投稿タイプ 通常の投稿記事と「切り分けたい場合」や「体裁の違うコンテンツを投稿したい場合」によく用いられます。 例えばコーポレートサイトの場合、通常の「投稿」は「お知らせ」などの記事で運用しているケースが多く、 そこに「本の紹介」などの「体裁の違う記事」を投
[CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。
こんにちはLatinです。 今年も残す所、あと11ヶ月となってしまいましたが、やり残しのないよう頑張ろうと思っております。 今回はCSS3のグラデーションにまつわるエントリーです。 ハッキリ言って面倒くさい！ さてCSS3のグラデーション「linear-gradient」なんですが、はっきり言って面倒です･･･。 今はCSS3のジェネレータもたくさんあるので、それらを使うのもいいのですが、足りない分のベンダープレフィックスを探したり、filter やら毎回ググるのが非常に面倒！ 且つ、ボタンなどに、gradient と border-radius を併記した場合、IE9 での表示が若干おかしくなってしまいます。 詳細は下記に記載しますが、今後サクッと使えるように備忘録がてら、簡単にまとめておこうと思います。 CSS スニペット（修正前） .btn { border-radius: 4px;
[Fireworks]これは便利！Adobe Fireworks CSS3 Mobile Pack | バシャログ。
ここ最近はピンク・フロイドを BGM に就寝している sakai です。どんどん陰気になってきている気がします。 11/12（土）に開催される「CSS Nite in MIYAZAKI Vol.3」に出演させていただくことになりました。 近隣の方、ご都合の合う方いらっしゃいましたら是非。Fireworks や Dreamweaver を使って効率よく Web 制作をするノウハウをご紹介する予定です！（詳細は近日公開します） さて、今回は先日リリースされた「Adobe Fireworks CSS3 Mobile Pack」のご紹介です。これはなかなかイイモノですよ！ インストール 拡張機能のダウンロードはこちらから。 Adobe Fireworks CSS3 Mobile Pack Download のリンクをクリックすると、Adobe Extension Manager が立ち上がって、自
![[Fireworks]これは便利！Adobe Fireworks CSS3 Mobile Pack | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c06e5dc16e1d75594b70da83a3dfbacbdc01b4e/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_fireworks.png)
[使える CSS テクニック] 実案件でも使える！フッターをブラウザ下部に固定する方法 | バシャログ。
暑い夏がやってきそうなので、久しぶりにツーブロック的な刈り上げにしてみましたishidaです。 今回は最近作業した案件で、これまであまり実践的に使わなかったCSSレイアウトを2サイト連続で使ってみたので、ご紹介。自分も忘れないようにメモ的エントリーです。 ページ下部に固定されるフッターを実現するためのCSSレイアウトです。 positionで実現する方法もありますが、コンテンツ量によっては表示が崩れるので今回は直球勝負です。 XHTML ソースはこんな感じになります。 <div id="container"> <div id="header"> ヘッダー <!-- /#header --></div> <div id="content"> <h1>フッターをブラウザ下部に固定するサンプル</h1> <p>本文が入ります。本文が入ります。本文が入ります。</p> <!-- /#content
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
