Markdown記法を覚えよう

今まではブログを書くときもコード直打ちで書いていたのですが
時間もかかるので、いいかげんMarkdown記法を覚えることにしました。

Markdown

今更で説明不要ですが、文書作成に向いたマークアップ言語です。

Markdown: Syntax

対応状況

Markdown記法に対応しました – はてなブログ開発ブログ

Markdown 記法が使えるようになりました — ブログ — WordPress.com

使い方

MarkDownに対応したエディタを使います。
シンプルなものがよかったのでしばらくMarkDown#Editor使っていました。
今はSublime Textに移行しているところです。
Live EditorとかWeb上で確認できるサイトもあります。

Markdown Live Editor

MarkDown#Editor

表記方法

私がよく使っているものを中心にまとめました。
これくらいあれば、最低限のドキュメントファイルは制作できると思います。

タイトル

# h1
## h2
### h3

リスト

* リスト
* リスト

番号リスト

1.リスト
2.リスト
3.リスト

強調

**強調**

罫線

リンク

[リンクしたいタイトル](URL)

テーブル

|項目1|項目2|項目3|
|:–|:-:|–:|
|テキストテキスト|テキストテキスト|テキストテキスト|

まとめ

Markdown対応のものが増えてきましたね。
今後はブログでも標準搭載があたり前になっていくかも…
(2014.9.1追加)テーブルの項目を追加しました。

iphoneのイヤホンから音が出なくなってしまった!

少し前の出来事になるのですが、旅行から帰ってきたら
突然イヤホンから音が出なくなってしまいました。

歩きながら音楽を聞く習慣も特にないため、
旅行の間もイヤホンは挿していませんでしたし、なんで…?

たしかにイヤホンを挿すと聞こえるけど、
イヤホンを抜いてもイヤホン認識のまま。

ジャック部分に異物がはいると、イヤホンと誤認識されてしまう

そういえばイヤホン挿した時濡れてたわ… :(
今回は雨降った時の水滴だったので、翌日の乾いた段階で元に戻りました!

よくあるトラブルみたいですが、去年洗濯して壊したばかりだし、
また壊してしまったのかと焦りました…!

みなさんも雨の日はご注意!

Google Analyticsを導入するならフィルタ設定しておきましょう

本来なら最初に設定しておかないといけないようですが、
特に影響なかったので、そのままにしていたら…
ある日を境に『recruit.html』という作ってもいないページがAnalyticsに…

jQueryとかサンプルのhtmlデータも置いたりしているので、
丸コピペで他のサイトにトラッキング コードが埋め込まれているのかとも考えましたが、
どこのサイトか探すのも手間なので、フィルタをかけることにしました。
(残念ながら、アクセス界王拳はなりませんでした…)

Google Analytics フィルタ設定

アカウント選択中なら、そのままプロファイルにいくはずです。

右上の『アナリティクス設定』→(アカウントを選択)→『プロファイル』→プロファイル名を選択(私の場合はwww.25egg.com)
タブから『フィルタ』→『+新しいフィルタ』

プロファイルにフィルタを追加

下記のようにフィルタ情報を設定して、保存します。

  • フィルタ名:お好きなように!
  • フィルタの種類:カスタムフィルタ 一致
  • フィルタ フィールド:ホスト名
  • フィルタ パターン:私の場合は『25egg.com』にしました

フィルタパターンは正規表現で

そのままやったら上手くいかない…よくわからないので、ヘルプみました。

バックスラッシュ()とドット(.) – アナリティクス ヘルプ

フィルタ設定は1つミスるとおかしくなってしまいますので、設定した後は要チェック。
他にも自分のアクセスは除外する…とかいろいろ設定できます :)

google-code-prettifyでタグの見た目を変更する

こないだのソースコード不備修正で気づきましたが、こういう時に行番号ないと困りますね。
今回はコードも短いのでよかったですが、そのうち○行目ってわからなくなりそう… :(

SyntaxHighlighterと迷いましたが、
Google先生が提供してくれている『google-code-prettify』を使うことにしました。

ダウンロードしたファイルをアップロード

google-code-prettify

上記のサイトからダウンロードします。
README.htmlをみると『lang-○○.js』言語拡張したい場合は…
ということみたいなので、最低限いれるのは『src』フォルダ内のこの3つでよさそうです。

  • prettify.css
  • prettify.js
  • run_prettify.js

ファイルの読み込みと実行

アップロードしたrun_prettify.jsを読み込みます。
prettify.cssとprettify.jsの読み込み、ついでにonload・skinの選択をしています。

 <script src="../run_prettify.js?autoload=true&amp;skin=default"></script> 

<pre>にclassを追加

google-code-prettifyを適用させるにはclassの追加が必要になります。
全データ変更していくのが面倒なので、<pre>タグ全てにclassを追加するようにjQuery追加しました。
『run_prettify.js』より先に実行させておきます。

jQuery(function($){
	$('pre').addClass('prettyprint linenums');
});

<pre>にcss追加

YUIのreset.cssと競合してしまって行番号が表示されていなかったです。
少しcssごにょっとしました。

//折り返し表示
pre{
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow:auto;
}

//行番号のリスト表示
pre ol li{
	width:95%;
	list-style:decimal outside;
	margin:0 0 0 5%;
}

行番号の表示とソースのハイライト

デフォルトからカスタマイズもしていないので、行番号は5行ごとに表示されます。

pre_after

WordPressには?

サンプルデータ(25egg.com/sample/)のみ反映していますので、ブログの本文は未着手…
WordPressにもいれるなら、少しテーマもカスタマイズしたいので、検証してからにします。

jQueryでクリックすると背景画像を変更させるサンプル

素材サイトでよく見かけるクリックすると背景画像を変更するサンプルです。
css変更しているだけのシンプル設計。

HTML

<ul class="bgicon">
	<li><img src="bg/bg01.gif"></li>
</ul>

jQuery

この記述の前にjQueryの読み込みが必要です。

$('.bgicon li img').css('cursor','pointer');
$('.bgicon li img').click(function(){
	$('body')
	.css('background-image','url('+$(this).attr('src')+')');
});

Facebookで設定できる画像のサイズ一覧をまとめてみました

個人的にもFacebookのグループ・イベント使うようになってきたので、
Facebook内で設定できる各画像のサイズをまとめておきます。
カバー画像は微妙にサイズ違うんですね。

もしかすると今後仕様変わってしまう可能性が99%くらいありますが、
変更あれば更新するようにしていきます。

プロフィールページ

アイコン画像:180px × 180px(表示は160px × 160px)
カバー画像:851px × 315px

Facebookページ

アイコン画像:180px × 180px(表示は160px × 160px)
カバー画像:851px × 315px
タブアイコン:111px × 74px

カバー画像に関してはガイドラインもありますので、作成時には注意が必要です。
アイコン画像がかぶってくるので注意。
参考:Facebook広告ガイドライン

投稿画像

通常:404px × 404px
ハイライト表示:843px × 403px

グループ

設定していないと、メンバーのアイコン画像が並びます。
カバー画像:800px × 250px(400px以上の画像でないと設定できない)

イベント

左メニューのイベント画像から変更になった…?
カバー画像だけ変更できるようなので、こちらのサイズを記載してます。
カバー画像:714px × 264px(イベントリストの表示は中央正方形でトリミング)

コピペでつかえるcss3ボタンサンプル

使い回しがきくのにソースメモしてないから、毎回効率悪いわ…
ということで、個人的にもよく使うデザイン3つでメモしておこうかと思います。

※ただし、IEは除く

IEは除外しました。
ちゃんと調べてないけど、IE対応がややこしい気がするので(6,7,8,9,10バージョン毎に違うんやろか…)

それ以外のブラウザも今回は最新バージョンで確認していますので、
古いバージョンも対応するなら、ベンダープレフィックス追加した方がいいと思います。

参考:http://fmbip.com/litmus/

グラデーションの設定(linear-gradient)

グラデーションは特にがっつり設定してると野暮ったくなるので、
あんまり変わらないかな…?というくらいにしてます。

角丸(border-radius)

これもやりすぎると野暮ったくなるので控えめで。
少し丸みをつける程度(5px位まで)か完全に丸形にしてしまう。(50%)

難しいものはジェネレーターで生成

私はグラデーションの記述がなかなか覚えられないので、
ジェネレーターで生成してから、カスタマイズしてます。

参考:http://css3button.net/

jQueryでタブメニューの切り替え表示をつくる

最近使う機会が多かったタブの切替表示になります。
cssもそれっぽくつけてみました。

追記:2013.4.30

デモページのJQuery記述内に不備がありましたので、修正してます。
正しくは$(‘#tabcontent > div’).hide().filter(this.hash).fadeIn(); になります。
ソース内のjs表記はあっていたので、サンプルは動作していたようです…

JavaScriptで要素の数を数える

16D更新の自動化第2弾!
掲載しているアイコンの数を自動で算出できるようにしています。

<script type="text/javascript">
	var total = $('#icon img').size();
	document.write(total);
</script>