読者です 読者をやめる 読者になる 読者になる

cBlog

Tips for you.

Webデザイン

ul、ol要素をネスト(入れ子)にするとき、やってはいけない書き方

今まで間違って書いていたんですが… このようなネストされたリストを作るとき、 1つ目 2つ目 2つ目(あ) 2つ目(い) 3つ目 こう書いたら間違いなんですね。 <ul> <li>1つ目</li> <li>2つ目</li> <ul> <li>2つ目(あ)</li> <li>2つ目(い)</li> </ul> <li>3つ目</li> </ul> (これでもなぜか通用してしまう。) 1つ目 2つ目 2つ目…

CSSのmarginやpaddingを指定する順番の覚え方

Webデザイナーや本で勉強した方は常識かもしれませんが、最近( ゚д゚)ハッとしたことがあるんです。 CSSのmarginやpaddingを4つまとめて指定する際の表記する順番です。 全部同じなら当たり前です。 margin: [上下左右]; 2つの場合も、ふーんソウナンダって感じです…

はてなブログのAMP配信でAdSenseを埋め込む方法の発見にみる集合知

Accelerated Mobile Pages (AMP)って知ってますか? 私はよく知りません。 ざっくり言うといろんなカスタマイズを排除してテキストベースのコンテンツとしてWebページを配信する方式です。難点として、通常のアドセンスも表示されません。 そのAMPを使っては…

「詳細度」CSSの優先順位は書かれた順番だけではない

次のHTMLとCSSについて、CSSを適用した場合にliのmarginはどうなるでしょう。 HTML <div class="itunes-embed"> <div class="itunes-embed-info"> <ul> <li class="itunes-embed-preview">...</li> </ul> </div> </div> CSS .itunes-embed .itunes-embed-preview { margin: .5em 0; } .itunes-embed .itunes-embed-info .itunes-embed-preview { margin…

はてなブログのidとclassのツリーと図解を作ってみた

カスタマイズやテーマ作成が捗るよう、はてなブログのid、classをツリーと図に表してみました。自分用ですが、せっかくなので公開します。 取り上げるid、classや画面上への表示は、サンプルテーマ「Boilerplate」を利用しています。 help.hatenablog.com ツ…

サイドバーのAdSenseは規約違反? 404時はjQueryで非表示に

貼りやすいこともあり、サイドバーにGoogle AdSenseの広告を掲載している方は多いと思います。 しかし、サイドバーにAdSenseを貼るとポリシー違反となる可能性が大です。 support.google.com コンテンツを含まないページ(手続き完了ページ、離脱ページ、ロ…

ゆきひー氏作Milliard 2列化カスタマイズの画像の縦横比が気になる人へ

( ´ー`)y-~~「直せますよ」 また便乗カスタマイズのカスタマイズ記事です。 ゆきひー氏によるMilliard関連記事プラグイン2列化カスタマイズ、すばらしいです。Awesomeです。 www.yukihy.com ただ、cruller、気になります! 画像の縦横サイズを固定 とのこと…

やっぱり日本語Webフォントを使うのは時代が10年早いと思った

デザインテーマを作ってみてわかったことがある。 [宣伝] Monolithic - テーマ ストア 以下の原因だ。 yaritakunai.hatenablog.com ページのレイアウトだけ読み込まれてタイトルや本文が表示されるのに時間がかかる現象である。 考えてみれば当たり前で、そ…

デザインテーマ「Monolithic」(For はてなブログ)、出来ました。

Monolithic Download now! Monolithic - テーマ ストア 2人は決して離れません。 一体となったメインカラムとサイドバーは、まるでブラウザ上に浮かんだ一枚岩。それらは、いかなるウインドウサイズでも離れることはありません。浮かぶ石板のような表現は、…

シロマティ氏製シェアボタンにGoogle+&Pocketのシェア数を表示させる

ヒャッハー! ブログカスタマイズなっしーヾ(。゜▽゜)ノ 当ブログでも使用させていただいているシロマティさんのシェアボタン。唯一の欠点は、Google+とPocketのシェア数が表示されないこと(デザインテーマ「Brooklyn」もかな?)。 コードの参考元を参照し…

はてなブログのテーマ「DUDE」をレスポンシブデザインに対応させる

はてなブログのおしゃれなデザインテーマ「DUDE」。 tsukuruiroiro.hatenablog.com ご覧のように当ブログでも使用させていただいております。 唯一の残念な点は、レスポンシブデザインに非対応なこと。ちょっといじってみたところ、レスポンシブ対応にできた…

【衝撃の事実】はてなブログのプロフィール欄に隠された機能

みんなー、やってるなしか? ブログのカスタマイズ。cruっしーなんか、いじり出すと止まらなくなるなっしー。既存のCSSのスパゲッティさに頭をこねくり回して、やっぱやめたって保存しないで寝ることも多いなしよ。って、そんなことどうでもいいなしな。今日…

サイドバーのプロフィールにFeedlyボタンを設置

年末年始1日目の午後。 そういや、Feedlyの購読ボタン設置しようとしていたなしな。 Feedlyについて きっかけ&設置方法 mob-channel.hateblo.jp 効果 はてなユーザー以外にも読者になってもらえる。 Feed URL http://〜/feedとhttp://〜/rssがあるなっしー…

CSSだけで背景色を2色にする方法

このブログを購読していただいている方は既にお気づきと思いますが、ブログタイトルのデザインを変えたなしよ。正直ダサいと思うなっしー。それでも採用した理由、それはFCバルセロナのクラブカラーが「えんじと青」なように、この2色はまさにcruっしーのス…

番号付きリストがはみ出ていたので直した

はてなブログの人気テーマ「Written」。私も気に入って使わせてもらっています。 このあいだ、番号付きリストが2桁になると、番号が記事左の余白にはみ出していることに気づきました。特に、レスポンシブデザインONにしていてスマホビューで見ると、画像のよ…

【解決】El Capitanにしたらはてなブログのテーマ「Written」でタイトルの文字が太くなった

Written - テーマ ストア - はてなブログ 以前言及していた問題が解決しました。 yaritakunai.hatenablog.com 当ブログをOS X 10.11 El Capitanで見ても、Yosemite以前の表示に戻っているはずです。MacやEl Capitanじゃない方は何のことかわからないですね、…

広告