CSSのセレクタまとめ

#### 基本形 まずは基本形、セレクタ1つです。例として `p` 要素の文字を赤にしたい場合を考えます。 p {color:red} // <p> すべてに適用 p.menu {color:red} // <p class="menu"> に適用 p#ss0 {color:red} // <p id="ss0"> に適用 さて、このセレクタをスペースかカンマで区切って、2つ以上指定した場合はどうなるかを見てみます。 結論から言うと、 - スペース区切り：HTMLの階層 - カンマ区切り：複数指定 となります。それぞれ例を示します。 #### スペース区切り：HTMLの階層 スペースで区切ると、HTML階層の下(内側)にある要素を示します。たとえば、 <div class="subj"> <p>驚愕の真実</p> </div> <p>コメント</p> 上記のHTMLで `驚愕の真実`の部分だけ文字色を赤にするには、`p` 要素の前にスペースで区切ってクラスを置き、 .subj p {color:red} // クラスが subj の親要素の内側にある p 要素に適用 とします。`コメント`の部分の `p` 要素の文字は黒のままです。 親要素の `id` で指定する場合は同様に `id` を前に置きます。 #ss2 p {color:red} // id が ss2 の親要素の内側にある p 要素に適用 すべての `div` 要素の内側にある `p` を指定したいなら、下記のようにします。 div p {color:red} // div の内側にあるすべての p 要素に適用 要するに、クラスでも id でも要素名でもなんでも可です。 #### カンマ区切り：複数指定 カンマで区切ると、列挙したセレクタすべてに適用します。たとえば、 <p id="ss0">驚愕の真実</p> <p id="ss1">関連URL</p> <p>コメント</p> 上記のHTMLで `驚愕の真実`と`関連URL`の文字色を赤にするには、セレクタをカンマで区切り、 #ss0,#ss1 {color:red} // id が ss0 もしくは ss1 であるすべての要素に適用 or p#ss0,p#ss1 {color:red} // id が ss0 もしくは ss1 の p 要素に適用 とします。

BloggerにGistを貼り付けると、前後に空行が入ってしまう

いつのころからか、ブログに Gist を貼り付けると、前後に5行ほど空行が入ってしまうようになりました。 といいますか、行番号の対応がずれてしまうのか、とにかく見栄えがよくありません。  対策としては、[ココ](http://flatv.fdempa.com/2013/02/12/gist-css/) によると、CSS を追加してやれば良さそうです。 以下は Blogger での手順です。 ---- 1.Blogger にログイン 2.テンプレート > カスタマイズ > 上級者向け > CSS を追加 とたどり、下記を入力 /* for Gist */ .line-numbers, .line-pre > .line { font-size: 12px; line-height: 1.4; } 3.「ブログに適用」ボタンを押す。 ---- 以上です。これで、下のようになりました。  フォントも小さくなって、いい感じです。 なお、CSS のクラス名はときどき変わるようなので、もしまた崩れたら見直す必要がありそうです。 参考にさせてもらったサイト - [Gistを貼付けたときの行番号の表示ズレを直すCSS](http://flatv.fdempa.com/2013/02/12/gist-css/)

コード片を Markdown 向けに

コードスニペットを Markdown にしてブログに貼り付けることが多いので、こんなのを使っています。 (defun markdown-code-region (beg end) (interactive "r") (save-excursion (save-restriction (untabify beg end) (narrow-to-region beg end) (goto-char (point-min)) (while (search-forward-regexp "\\(^.*\\)" nil t) (replace-match (concat " " (match-string 1))))))) リージョンを選択して M-x markdown-code-region すると、それぞれの行頭にスペースを4つづつ入れます。

ブログに関連する記事を Outbrain で表示してみる

ブログに関連する記事を表示するブログパーツ [LinkWithin](http://www.linkwithin.com/learn) を使っていたのですが、ブログを引越しするとなぜか表示されなくなったので、[Outbrain](https://my.outbrain.com/getwidget) を試しています。 LinkWithinとは違い、Outbrain は ユーザー登録しないと使えませんが、細かい設定ができたりアクセス履歴を見れたりします。 ただ、肝心の「関連する記事をピックアップする機能」が LinkWithinよりも下手な気がします。日本語向けの最適化が甘いのかもしれませんが、もう少し様子を見てみたいと思います。

Bloggerの各記事に1つずつ「+1ボタン」を置く

こういうやつです → <g:plusone expr:href='data:post.url'/> これを記事ごとに置きたくて、[ココ](http://toshite.blogspot.jp/2011/06/google1blogger2.html )の2つめの方法を全面的に参考にさせてもらいました。 スクリーンショットやメニュー等が若干今のものと違っていたところがあったので、今のやり方を下記に書いておきます。 1. Blogger にログイン 1. 左ペインの「テンプレート」をクリック 1. 「HTMLの編集」ボタンをクリック 1. 「ウィジェットのテンプレートを展開」をチェック あとは[ココ](http://toshite.blogspot.jp/2011/06/google1blogger2.html ) のとおりです。 大きさは下記の`size=`で指定する。 <g:plusone expr:href='data:post.url' size='small'/> - `size='tall'` <g:plusone expr:href='data:post.url' size='tall'/> - `size='small'` <g:plusone expr:href='data:post.url' size='small'/> - `size='medium'` <g:plusone expr:href='data:post.url' size='medium'/> - `指定なし` <g:plusone expr:href='data:post.url'/> `tall`, `small`, `medium` がある。`tall`は幅広でフキダシが上に出る。 `size=`を指定しないと最大になる模様。 ####参考にさせてもらったサイト - [Googleの「+1」ボタンをBloggerの各記事に設置する方法2つ](http://toshite.blogspot.jp/2011/06/google1blogger2.html ) - [+1 Button](https://developers.google.com/+/plugins/+1button/)

Blogger 投稿用 Markdown テンプレ

Markdown の書き方 はこちら→[Markdown 書き方の例](http://lost-n-found-x.blogspot.jp/2013/02/test-markdown-post.html ) 以下は、[BloggerでMarkdown](http://lost-n-found-x.blogspot.jp/2013/02/blog-post.html) で Blogger に投稿するときのテンプレです。 <textarea class="markdown" disabled> ;; ここにMarkdownを書く </textarea> ####Bloggerに投稿するときの補足 - Chrome上では [TextDown](https://chrome.google.com/webstore/detail/textdown/efalomlklhakojjbdfehfkgoicablooc ) というMarkdownエディタのエクステが何気に便利。 - なぜか表(テーブル)は書けない。よくわからんです。 - gistは`textarea`タグの外に貼らないとダメっぽい。 gist貼り付けの例

BloggerでMarkdown

Markdownで書けると知ったので、これからはBloggerでブログを書いていこうと思います。 導入にあたっては下記を参考にさせてもらいました。 - [Tips - MarkdownをHTMLにembedする](http://blog.livedoor.jp/dankogai/archives/51818456.html ) - [やったーBloggerにmarkdownで記事を投稿できたよー＼(^o^)／](http://yslibr4ry.blogspot.jp/2013/01/bloggermarkdowno.html) - [Markdownで投稿した記事のソースコードの見た目をいい感じにする](http://yslibr4ry.blogspot.jp/2013/02/markdown.html ) 安住の地を求めて彷徨う旅もここで終わりです。 思えば、長い旅でした。 はてなダイアリー > FC2ブログ > SeeSaa > livedoorブログ > Blogger > Octopress > Wordpress > Blogger(←今ココ) 通りすぎてますやん (´・ω・｀)

Markdown 書き方の例

とりあえず、よく使うものだけでも。 ####リンク [表示文字列](URL) 例：いつも[ドラクエ](http://ja.wikipedia.org/wiki/ドラゴンクエスト)やってた。 いつも[ドラクエ](http://ja.wikipedia.org/wiki/ドラゴンクエスト)やってた。 ####画像  例： 簡単に言うと、リンクの前に '!' (ビックリ)をつけると画像になる。 画像はあらかじめアップロードしておき、href=""のリンク先をコピぺする。  ####見出し #見出し1 ##見出し2 ###見出し3 ####見出し4 ####罫線(hr) ハイフン3つ以上 例：--- 上下に1行づつ空行が必要 ####斜体 *で囲む 例：そなたに　*ふっかつ*の　じゅもんを　おしえよう！ そなたに　*ふっかつ*の　じゅもんを　おしえよう！ ####強調 **で囲む 例：ローラ**ひめ**のことを　ごぞんじか？ ローラ**ひめ**のことを　ごぞんじか？ ####引用 先頭に > をつける 例：>うれしゅうございます。ぽっ >うれしゅうございます。ぽっ ####番号なしリスト(ul) - こんぼう - ぬののふく - やくそう ハイフンの後ろに空白が必要 ブロックの上下に1行づつ空行が必要 - こんぼう - ぬののふく - やくそう ####番号付きリスト(ol) 1. ラダトームの町 1. ロトの洞窟 1. ガライの町 数字はすべて 1 のままにしておくと、自動的に 1. 2. 3. ...とやってくれる ドットの後ろに空白が必要 ブロックの上下に1行づつ空行が必要 1. ラダトームの町 1. ロトの洞窟 1. ガライの町 ####コードブロック 先頭に空白を4つ以上入れる(タブ文字でも可) ブロックの上下に1行づつ空行が必要 例： def damaged(self, enemy): self.hp -= (enemy.strength + enemy.weapon - self.armor) / self.luck if self.hp <= 0: self.dead = True ####インラインコード バッククォート(`)でかこむ。シングルクォート(')ではないので注意。 日本語キーボードの場合は、バッククォートは SHIFT + @ で入力できる、らしい。 例：メソッド `damaged` は敵から攻撃された時に、キャラクターのステータスを変化させます。 メソッド `damaged` は、敵から攻撃を受けた時にキャラクターのステータスを変化させます。

Blogger 投稿後の「google+で共有」を表示されないようにする

投稿したり記事を変更したりするたびに「google+で共有」というダイアログが表示される。

非常にうっとうしい。毎回、意味が分からないままESCキーを押して消していた。

これを無効化するには、Bloggerの設定ページ > Google+ とたどり、「投稿後に共有のメッセージを表示する」のチェックを外せばいい。

はてなダイアリーからBloggerに移行する

はてなダイアリーの無料プランの広告がいい感じにうっとおしくなってきたので、Bloggerに引っ越してみました。

http://d.hatena.ne.jp/hhh/20100509/1273392585

いったんMTにしてインポートするみたい。
でも作成日時がインポート日時になる記事が10件ほどありました。
改行も多めに入るし、脚注とかもおかしい。ちょっと難はあるけどまあそのうち直そう。