[Google Analytics]レポート設定の共有が便利すぎる!

こんにちは、@cappeeです。

Google Analytics の「マイレポート」で自分なりのレポートをカスタマイズして作成できると思いますが、その設定を他の人と共有できるのをご存知ですか?

そのレポート設定を惜しげも無く共有してくれているブログがあり、とても便利に使わせていただいてますので、今日はそのご紹介です。

1クリックで以下のような便利なレポートの設定が「マイレポート」に追加されます。

共有しているレポート設定

全体レポート(オーソドックスな標準のレポート)

general report 300x201 [Google Analytics]レポート設定の共有が便利すぎる!

  1. 新規訪問数と訪問数
  2. 訪問時の平均滞在時間と直帰率
  3. リピート回数
  4. トラフィックの種類別の訪問数
  5. 平均ページビュー
  6. 時間別の訪問数
  7. 閲覧開始ページ別の訪問数と直帰率
  8. キーワード別の訪問数と直帰率
  9. 参照元別の訪問数と新規訪問数
  10. ソーシャル ネットワーク 別の 訪問数と新規訪問の割合

ソーシャルメディアレポート

socialmedia myreport1 1024x653 300x191 [Google Analytics]レポート設定の共有が便利すぎる!

  1. 全体トラフィック、ソーシャルメディアからの流入比率
  2. サイト内でのアクション
  3. 外部のアクション
  4. 外部でのアクション数とトラフィック
  5. 流入元上位のソーシャルメディア
  6. よくシェアされているコンテンツ
  7. 携帯でのソーシャル経由の流入数

閲覧環境レポート

condition report 1024x649 300x190 [Google Analytics]レポート設定の共有が便利すぎる!

  1. モバイル(タブレット含む)の比率
  2. 携帯端末別の訪問数・ブラウザ別の訪問数
  3. OSのバージョン別の訪問数
  4. 国内地域別の訪問数
  5. 国別の訪問数

マイレポートに追加する

下記で共有されていますので、リンクから設定を行なってください。

 [Google Analytics]レポート設定の共有が便利すぎる!

1クリックで完了するブログ運営のためのGoogleアナリティクスのマイレポート設定3つ

(今回レポートの画像もお借りいたしました。)

いやはや、ありがたいですね。

Pocket
article clipper [Google Analytics]レポート設定の共有が便利すぎる!

[Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

こんばんみ、@cappeeです。

今回はFireworksの超便利機能、「9スライス」をご紹介したいと思います。

「9 スライス」機能とは

ef334fcdf01cd7f0ffeffcd8644b78f7 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

角丸の矩形や矩形の中にテキストが入っている場合など、その重要な要素はそのままで、幅や高さを自由に変形できる機能です。

言葉だけだと伝わりにくいかと思うので、「9 スライス」機能を使う2つの方法をご説明します。

9 スライスの拡大・縮小ツール

faad99340de6020c98711453db90b5e6 300x140 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

矩形を選択し、画面左のツールにある「拡大・縮小ツール」の中から「9 スライスの拡大・縮小ツール」を選びます。

f0ef09d874cee86417c9172ea33e667d [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

矩形に4本の破線が表示されるので、もし角丸が破線の内側に入ってしまっている場合は、外側になるように破線をドラッグして調整してください。

b7348c619ea4c8594bd3b746b474f7b7 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

そして周りの黒い点をドラッグして矩形を拡大・縮小したとしても角丸はキレイなまま保たれます。とても便利ですね。

シンボルの9 スライス

023e2e6d22763b9a8028dc6488808036 300x103 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

矩形をシンボルに変換する際に表示されるオプションで「9スライスの拡大・縮小のガイドを有効にする」にチェックをいれます。

矩形の中にテキストなど他の要素も一緒にシンボル化してしまって大丈夫です。

ef334fcdf01cd7f0ffeffcd8644b78f7 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

シンボルをダブルクリックすると破線が表示されますので、角丸に合わせて調整してください。

調整後もう一度ダブルクリックしてもとの画面に戻ったら、“普通の”拡大・縮小ツールで変形してください。

ef334fcdf01cd7f0ffeffcd8644b78f71 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

9スライスのシンボルを使わないと上のように潰れてしまいますが、9スライスのシンボルを使えば図の下のように角丸とテキストはキレイに保たれます。

もし角丸やテキストが崩れたら…「変形を解除」で解決

4919b637981077d6e95cd44f7f8a4b8f 300x162 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

9スライスを使うのを忘れてしまって角丸の矩形を変形してしまった場合、崩れた角丸やテキストは右クリックの[変形]か、画面上ツールバーの[変更]→[変形]から[変更を解除]を選択します。

矩形の場合、拡大・縮小後のサイズのまま角丸が調整されるのではなく、キレイな角丸が適用されていたサイズに戻ってしまうので注意が必要です。

4919b637981077d6e95cd44f7f8a4b8f1 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

上にある潰れた矩形とテキストを選択して「変更を解除」すると、こんな感じで矩形を引き伸ばす前に戻ります。

9スライスの機能がついてからデザインするスピードがかなり早くなったのは間違いないです。

Fireworksにこんなありがたい機能が今後も追加されることを期待してます。

[参考サイト]Fireworks / 9 スライスの拡大・縮小

Pocket
article clipper [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

ちは、@cappeeです。

スマホサイトのコーディングは軽量化が命です。PC版の見出しやメニューなどで使っているアイコンを、スマホ版でもそのまま画像で使ってしまうと重くなってしまいます。

だからと言ってアイコンを使わないのも。。

という悩みはアイコンフォントで解決です!画像のアイコンをWebフォントに変換して使います。

配布されているWebアイコンは商用利用可でない場合もありますので、なら手持ちの画像を自分でWebフォントに変換してしまいましょう。

[2013.5.8追記]Unicodeを使ったWebフォントの場合、一部のAndroid端末でデフォルトで指定されているだろう絵文字が表示されてしまうことを確認しました。文字コードの調整で解決できそうですが、Android対応サイトの場合は十分ご注意ください。そして解決策あれば教えてください!

アイコンフォントを使うメリット

  • スマホサイトなどより軽量化が求められる場合に有効
  • Retina Displayに対応する倍のサイズの画像を用意する必要がない
  • HTTPリクエストがないため高速化につながる
  • gzipで圧縮も可能
  • フォントなので色、サイズの変更が容易
  • CSS3を使ってスタイルの設定ができる

Fireworksで画像をSVGにする

アイコン画像を用意

055515c9c2f03e5283f15203555a16e0 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

まずはWebフォントにしたいアイコン画像を用意します。アイコンの画像は下記の3点に注意してください。(私は2と3でつまづきました)

  1. 画像はパス化する
  2. カンバスを画像に合わせる(Ctrl+Alt+F)
  3. 背景色は透明にする

Fireworksの拡張機能「Export」をインストール

Fireworksの拡張機能に画像をSVGにしてくれる「Export」をインストールします。
Export.mxp をダウンロードして、ダブルクリックするとExtension Managerが立ち上がってインストールできます。

SVGファイルに変換

Export 300x229 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

[コマンド]→[書き出し]→[Export SVG]で画像をSVGに変換します。

複数の画像を一括でSVGにする

画像をページ毎に用意

ddcc9ca44410a85f9ccb32b074e22671 300x108 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

複数の画像を一括でSVGに変換したい場合は、画像をページ毎に準備します。(Fireworksのページ機能のことです)

ページのタイトルを指定すると、SVGのファイル名となって書き出されます。

SVGへ一括書き出し

5dbd9b921b436afc75579310e0fbd707 300x132 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

上記と同じように[コマンド]→[書き出し]→[Export SVG]を選択すると、「全ページ書き出しますか?」というアラートがでるので「はい」を押して書き出すフォルダを選択すれば、ページ毎のアイコンがSVGファイルとなります。

SVGをWebフォントに変換する

「IcoMoon」にSVGをインポート

 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

IcoMoon」というアイコンフォントの配布サイトで変換します。

IcoMoon は、自作のアイコンフォントだけでなく、3種類のフォントセットの中から好きなものを選択してパッケージ化してダウンロードすることができるという素敵なサイトです。
[参考サイト]IcoMoon : 好きなアイコンをピックアップしてWebフォントにできるサービス

74cded622693d6b17fc4959ca816ba0f スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

SVGをWebフォントに変換するには、左上の[Import Icons]という赤いボタンをクリックして、SVGファイルを選択(複数可)し、インポートします。

アイコンをWebフォント化

772ba39bd3a62bbe4c23b5d6e8e38c591 300x98 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

もしアイコンが選択されていない状態だったら矢印の[Select]ボタンをクリックし、Webフォントに変換したいアイコンを選びます。(選択されているとオレンジ色の枠がつきます)

次に画面下に表示されている[Font]ボタンをクリックし、アイコンをWebフォント化します。

Webフォントをダウンロード

4c165b83dabbd719bcb2a296c39d80e0 300x129 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

画面下の[Download]ボタンよりアイコンフォントをダウンロードします。

ファイルにはttfデータも含まれていますので、PCにインストールして利用する場合はアイコンの上の方に英数字を入力してキーボードと関連付けをします。

Webフォントを確認

6750a486d9c8382e51841b9f44dcc5fe 300x222 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

zipファイルを解凍すると、表示や記載例が書かれたHTMLファイルがあるのでブラウザで開いて確認してください。

アイコンフォントを使用する

ダウンロードしたHTMLファイルの通りに記載すれば大丈夫です。
必要な部分だけを抜粋してご紹介します。

HTML

<!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->
<span aria-hidden="true" class="icon-home"></span>
<span aria-hidden="true" class="icon-balloon"></span>

書き出されたCSS

@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-home, .icon-balloon {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-home:before {
content: "\68";
}
.icon-balloon:before {
content: "\62";
}

特にスマホサイトへの利用はメリットが大きいですので、アイコンフォントをうまく活用していきたいですね。

[参考サイト]
パス画像をFontに変換!「icoMoon」を使ってみた。
Fireworks で戦国武将の家紋を作って SVG な Web Font に変換してみる

Pocket
article clipper スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

[Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

どうも、@cappeeです。

私はWebデザインをする時にFireworksを使っています。

グラデーションやフォームなどよく使うデザインのパターンってありますよね。

これ毎回つくっていると、たとえつくるのに1分だとしても、10回つくったら10分、100回つくったら100分、、、とトータルで考えると非効率ですし時間がもったいない。

よく使うデザインは蓄積しておくこと!

それが素早くデザインするコツだと私は思っています。

ということで、Fireworksにある便利な機能な使わないと損です。

スタイル

style [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

例えば、HTMLのテキスト、グラデーション、写真の枠などよく使うデザインやベースになるものは「スタイル」に登録しておきます。

デフォルトで登録されているものは使わないデザインも多いので、スタイルウィンドウの右上にあるメニューから自分だけの「スタイルライブラリを保存」しておくと便利です。

スタイルウィンドウが表示されていない場合は、ツールバーの[ウィンドウ]→[スタイル]で表示できます。

16857944f6e21bec667b3a69a3f9a805 300x143 [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

デザインを保存するには、保存したいパーツを選択してスタイルウィンドウの右上か下にある「新規スタイル」を選びます。

塗り、フィルター、ストローク、テキストなどどのプロパティを保存するか細かく選べるのでとても便利ですよ。

スタイルを活用すれば作業が1.5倍は早くなるんではないでしょうか。

共有ライブラリ

67644ee90467df423d5a4a0366200979 [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

input や select などフォーム系のパーツやボタンなどは「共有ライブラリ」に登録しておきます。

デフォルトで用意されているライブラリを使ってもいいですし、新しくフォルダをつくって自分でつくったパーツを登録しておくこともできます。

パーツを共有ライブラリに登録する場合は、まずパーツをシンボル化(F8)してその時に表示されるウィンドウの「共有ライブラリに保存」にチェックします。

72be56defad0a82dde289720295ed4eb 300x158 [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

共有ライブラリを使えばフォームのデザインが1.7倍は早くなるんではないでしょうか。

リッチシンボル

b3be6f0a1704dab9be403afebe34e064 [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

共有ライブラリをさらに便利に使えるのが「リッチシンボル」です。

例えばテキストありのプルダウンを共有ライブラリに登録したとします。

リッチシンボルの特徴は、中のテキストを「シンボルプロパティ」から変更することができてしまうのです。

登録はちと面倒ですが最初だけですし地味に便利な機能と言えます。

リッチシンボルの登録方法はこちらに詳しく書かれてありますのでご覧ください。
【Fireworks 】地味に便利なリッチシンボルと共有ライブラリ

リッチシンボルを使えばフォームのデザインが1.1倍は早くなるんではないでしょうか。

せっかくFireworksにある機能ですので、たまには立ち止まって一度機能をおさらいするのもいいかもですね。

デザインもよく使うパターンは蓄積して、効率化した分早く家にかえりましょう。

Pocket
article clipper [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

[意外と知らないCSS]テキストが領域をこえた場合に「…」を表示するtext-overflow:ellipsis

本当は炭酸が好きな、@cappeeです。

いつまで続くかわからない、意外と知らないCSSシリーズの第2弾です。

テキストが領域をこえた場合に「…」を表示するtext-overflow:ellipsis

表示する文字が多かった場合に省略したことを表す「…」はCSSだけでも表示できます。

システムだと文字数を指定して表示しますが、CSSでは幅を指定してその領域よりもはみでた場合に省略記号「…」を表示することができます。

text-overflow の説明

text-overflow:  ellipsis;
テキストが表示領域をこえた場合に省略記号「…」を表示します。

text-overflow:  clip;
デフォルトの値で省略記号は表示しません。

text-overflow:ellipsis の記述例

p {
white-space: nowrap;
width: 100%;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}

Opera 9-10への対応はベンダープレフィックスが必要です。
text-overflowはIE6から独自仕様として実装されたものなのでIE6にも対応しています。
逆にFirefoxがやっと7から対応になったので今はほとんどのブラウザで問題なく使えるということですね。

text-overflow:ellipsis を使った表示

text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。

注意点

改行をしない white-space: nowrap; を記述しないといけないため、表示できるのは1行目のみとなり、1行目の最後に省略記号「…」がつきます。
複数行で使用したい場合はjavascriptを使うなど工夫がいるようです。
text-overflowはFirefox7から使える/複数行の時はJavaScriptで対応

IEでのバグ[2013.9.20追記]

table要素の中で text-overflow: ellipsis を使うとIEでは正常に表示されないというバグがあるみたいです。
現時点で一番新しいバージョンIE10でも確認しました。
検索しても同じことを書いてある記事を探せなかったのでレアケースかもしれませんが一応メモ。

Pocket
article clipper [意外と知らないCSS]テキストが領域をこえた場合に「…」を表示するtext overflow:ellipsis

[意外と知らないCSS]テーブルの列幅を均等にするtable-layout:fixed

去年花粉症デビューした、@cappeeです。

いつまで続くかわからない意外と知らないCSSシリーズ第1弾です。

テーブルの列幅を均等にするtable-layout:fixed

デフォルトだと自動レイアウトになっているため、セル内の文字数などによって自動的に列幅が調整されてしまいますが、table-layout:fixed を指定すると列幅を固定して均等にすることができます。

table-layout の説明

table-layout:fixed;
テーブルの列幅を固定レイアウトにして均等にします。

table-layout:  auto;
デフォルトの値です。自動レイアウトでセルの内容によって列幅が調整されます。

table-layout:fixed の記述例

table {
width: 100%;
table-layout: fixed;
}

tableセレクタには横幅の指定が必要です。

table-layout:fixed の表示

見出しあ 見出しい 見出しう
あああ いいいいい
あああああああ いいい うう

table-layout:fixed を指定すればセル内の文章量に差があっても列幅を均等に表示してくれますので、列ごとに横幅を指定する手間が省けます。デザインに合わせて活用したいですね。

 

Pocket
article clipper [意外と知らないCSS]テーブルの列幅を均等にするtable layout:fixed

効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

こんにちは、@cappeeです。

HTMLでコーディングしたclassやidを毎回コピペしてCSSに貼り付けるのって面倒ですよね?

なんと!HTMLからCSSセレクタを自動生成してくれるサービスがあるんですよ。

かなり爆速でコーディングができるようになると思ったんですが結構サービスによって記述方法に差があり、最近やっと自分の書き方に合うサービスがリリースされたので、これを機にサービスのまとめと比較をしてみたいと思います。

みなさんの記述方法に適したサービスが見つかれば嬉しいです:)

すべてのサービスこちらのHTMLからCSSセレクタを自動生成しました。

<div id="contents">
<div id="main">
<p class="txt"></p>
</div>
<div id="side">
<ul>
<li class="lists"></li>
</ul>
</div>
</div>

CSS Selector Generator

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

私が一番最初にCSSセレクタ自動生成のサービスを知ったのが「CSS Selector Generator」です。

Web業界の方なら一度は見たことがあるだろうバシャログ。を運営しているシーブレインさんがつくったサービスです。

特徴

394a2eed4073422f4a12fc740df43414 300x195 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

特徴としては下記になります。

  • 文字コードの指定ができる
  • 最初から入れておきたいセレクタを指定できる
  • 除外する要素を指定できる
  • id、class セレクタからHTMLの要素タイプ名を省略できる
  • id セレクタを複数記述しないかを選べる

一番シンプルなCSSセレクタ

「id、class セレクタからHTMLの要素タイプ名を省略」と「id セレクタを複数記述しない」にチェックして出力された一番シンプルなコードはこちらです。
個人的には基本classやid名のみで記述したかったので、こちらのサービスは残念ながら使ってませんでした;;

d38b89dfdcf8c28d8160c8a7f1db819a 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

子孫要素を記述するCSSセレクタ

何も省略せずにデフォルトの状態で出力すると下記のようにHTMLタグとclassやid名をすべて記述した形になります。
一番上にコメントで階層を表示してくれるのは嬉しいですね。
文字コードと最初から入れておきたいセレクタも記述されているので、HTMLをほぼコーディングした状態でがつっとセレクタ出力するにはよさげです。

a9e107460f492e0360eeb5d90b2dc6c0 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

OneClickCSS

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

2013年にリリースされたばかりの「OneClickCSS」です。

特徴

OneClickCSS 300x122 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

  • LESS/SCSS/SASS に対応
  • 子孫要素を記述するか選択できる(要素を半角スペースで区切る)
  • 子要素を記述するか選択できる(要素を「>」で区切る)
  • タグ要素を記述するか選択できる

一番シンプルなCSSセレクタ

「Simple CSS」ボタンでセレクタを生成すると「タグ要素無し」にチェックをしなくても省略された状態で出力されます。
私はこの記述方法なので今後はこちらの「OneClickCSS」サービスを愛用することでしょう!
コメントを入れてくれるのも嬉しいですね:)

OneClickCSS2 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

子孫要素を記述するCSSセレクタ

子孫要素まで記述する場合は「Childrens CSS」ボタンから生成できます。(>の子要素を記述する場合は「Child CSS」ボタンで)

OneClickCSS3 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

LESS/SCSS/SASSで記述するCSSセレクタ

これがすごいですね!なんとLESS/SCSS/SASS に対応しています。
下記は「LESS/SCSS」ボタンで生成した場合のセレクタです。

OneClickCSS4 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

Primer

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

Primer」は海外のサービスで、出力方法などは選択できません。
HTMLタグ+class,id名 という形になります。

CSSセレクタ

Primer 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

CSS Frame Generator

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

こちらの「CSS Frame Generator」も海外のサービスで、出力方法などは選択できません。
セレクタは一行になっていて、class名にはHTMLタグがつくようです。

CSSセレクタ

Your CSS Frame XHTML to CSS Converter 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

bear css

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

bear css」は他のサービスとは違い、HTMLファイルをアップすることでCSSセレクタが記述されたCSSファイルをダウンロードすることができます。
一気にHTMLを書いてCSSを出力したいという方にはいいかもしれませんね。

CSSセレクタ

bare css 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

それぞれ特徴があるので自分にぴったりのCSSセレクタ自動生成サービスを見つけてくださいね。

 

Pocket
article clipper 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い

東京でも桜が開花しましたね、@cappeeです。

色々と検証した結果、私も「Normalize.css」を本格導入することにしました。

勘違いしがちなのは、「Normalize.css と リセットCSS どっちがいいの?」ということではなく、この2つはまったく別物なので比較しようがないのです。

Normalize.css を実際使ってみての注意点や、リセットCSSのデメリットなどメモしておきたいと思います。

デフォルトスタイルシート

まず、Normalize.css と リセットCSSを説明する前に知っておきたいのが、ブラウザごとに定義されている「デフォルトスタイルシート」です。

CSSを指定しなくても、hタグやpタグでマークアップすると、タグの意味に合ったデフォルトスタイルシートが効いてmarginだったりテキストが太字になったりします。

だたしデフォルトスタイルシートはブラウザによって差がある(特にIE6, IE7)ため、自分の思ったデザインを適用するのに逆に弊害となったりもします。

リセットCSS とは

デフォルトスタイルシートのブラウザ間の差をなくして、スタイルがゼロの状態からデザインしましょうという考え方でつくられたのが「リセットCSS」です。

私がWeb業界に入った頃は全称セレクター(*)でリセットするのが主流でした。

全称セレクター(*)でのリセット

* {
margin:0;
padding:0;
border:none;
}

その後、Eric Mayer氏が考案したリセットCSSYahoo! CSS Reset (YUI 3)で書かれた要素セレクタごとにリセットする記述が流行りだしました。

要素セレクタでのリセット

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,input,textarea,button,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ul,ol{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
input,select{vertical-align:middle}

リセットCSSによりデザインの実装は楽になりましたが、必要なデフォルトスタイルシートまでリセットしてしまうことと、フォーム関連で一部表示がおかしくなったりと問題もありました。

例えばulやolタグのスタイルもリセットされてしまうので、矢印のアイコンなどで表現するリストの場合は効率的なのですが、いざ利用規約などで・(中黒)や数字などデフォルトのスタイルも使いたいと言う時にそれ用のcssを結局つくったりなど本末転倒な感じでした。

また、フォーム関連の不具合だと、私がでくわしたのは画像をアップロードする <input name=”" type=”file”> での表示です。このファイルタイプは細かなCSS適用ができないため、リセットCSSにあった input を input[type="text"],input[type="password"] に差し替えて対応しました。

resetcss Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い

このような問題点はあったものの、リセットCSSは5年以上に渡って使われてきたわけですね。

Normalize.css とは

リセットCSSの問題を根っこから改善しようと考えられたのが「Normalize.css」です。

Normalize.css は、ブラウザ間の誤差をなくして補正(ノーマライズ)してくれるだけですので、デフォルトスタイルシートはそのまま適用されます。

Normalize.css が多く使われるようになってきた理由として、スマートフォン用のブラウザも対象であり、HTML5のエレメントなども補正してくれるというのが今の時代にあっているというのがあると思います。

また、css内にはわかりやすくコメントが記載されており、ドキュメントも用意されているので編集が容易であるのも魅力のひとつです。

Normalize.css の読み込み

Normalize.css の公式サイトで最新バージョンをダウンロードして、cssフォルダなどに格納しアップロードします。

<head>タグ内に下記のように記述して Normalize.css を読み込んでください。

<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="all">

サイト毎のスタイルを優先した方がよいので、サイト用のCSSは Normalize.css より下に記述します。

<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="all">
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">

圧縮版がないかも探してみましたが、現時点での最新バージョン2.1.0は約2ヶ月前に更新されたばかりで少し前の2.0.1バージョンならai11さんが圧縮してくれたものがGithubにありました。
ただしこちらは完全に補正してくれる保証はないので使用は自己責任になりますが、一応紹介。
ai11 / normalize.min.css v2.0.1 MIT License

また、便利なCDNもないかなーと思い探してみましたが、googleのは2011年更新とバージョンが古く残念。アップデート希望。
normalize-css - Google Project Hosting

Normalize.css を使ったコーディングの注意点

Normalize.css を使ってコーディングをしてみて思ったことは、やはりサイトデザインに応じたリセット用のCSSも必要だということ。都度最適な記述方法をする必要があります。

各classやidに直接指定してもいいですし、デフォルトスタイルシートを使わないという場合は必要な要素にリセット用のCSSを記述するのでもいいと思います。

classやidに指定するのが一番コードがシンプルですが、コーディングする場合の注意点もあるので下記のサンプルをご覧ください。

HTML

<h1 class="headline">見出しだよ</h1>

h1の一般的なデフォルトスタイルシート

h1 {
display: block;
margin: 0.67em 0;
font-size: 2em;
font-weight: bold;
page-break-after: avoid;
}

※その他の要素のデフォルトスタイルシートは一番下の[参考サイト]をご覧ください。

classやidに下マージンを指定する場合

.headline {
font-size:116%
margin:0 0 10px;
}

デフォルトスタイルシートがmarginプロパティで指定しているため、margin-bottomで記述すると上マージンはデフォルトのスタイルが適用されてしまいます。
classやidに直接指定する場合は、ある程度デフォルトスタイルシートを頭にいれておかないといけません。スタイルが効かないと勘違いしてしまう可能性があるので注意です。

必要なタグをリセットして下マージンを指定する場合

h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li{margin:0;padding:0;}
.headline {
font-size:116%
margin-bottom:10px;
}

こちらはh1タグを一度リセットしているのでmargin-bottomで記述することができます。
コードは長くなりますが、デフォルトスタイルシートを考慮した記述をする必要がないというのは大きなメリットです。

いずれにしても今主流になりつつある「Normalize.css」ですから、特徴をきちんと理解して今後うまく活用していく必要がありますね。

まとめ

  • Normalize.css と リセットCSS は別物である。
  • デフォルトスタイルシートをゼロの状態にしてデザインしましょうというのが「リセットCSS」。
  • デフォルトスタイルシートをいかしてブラウザ間の誤差だけ補正しようというのが「Normalize.css」。
  • Normalize.css を読み込んでコーディングする場合は、デフォルトスタイルシートの記述も頭に入れておかなければいけない。

[参考サイト]
[CSS]CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
デフォルトスタイルシートから考える、リセットCSSの留意点

Pocket
article clipper Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い

[WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

こんにちは、@cappeeです。

最近コミュニティ系のサイト制作を依頼されることが多くなってきました。プラスSNSにあるような友達機能も今では必須ですよね。

そんなわがままをWordpressで簡単に叶えてくれるのが「BuddyPress」というプラグインです。とにかく使える機能がすごいです。

今「BuddyPress」を使ってコミュニティサイトを構築中なのですが、インストールの手順や使い方を探していると結構情報が古くなっていて色んな記事を横断したり自分で四苦八苦したので、「BuddyPress」の使い方をメモしておきたいと思います。

WordPressのインストールに関してはこちらを参考にしてください。
【初心者向け】WordPressを使ってゼロから1時間でブログを公開する方法

BuddyPressとは

BuddyPressとは、SNS(ソーシャルネットワーキングサービス)やコミュニティサイトを簡単につくることのできるWordpressのプラグインです。こちらがBuddyPressの公式サイト(英語)になります。

設定画面から機能を拝借すると、下記のようなことが可能で、ユーザーをフォローしたり、メッセージのやり取りをしたり、グループを作成してトピックをたてられたりとプラグインとは思えないほどの便利機能を盛り込んでいます。

一見は百聞に如かず、デモサイトもつくったので手っ取り早く確認したい方はこちらをご覧ください。ご自由に書き込んで使ってみてください。(※適さない発言があった場合は削除する可能性があります)

 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

Cappee BuddyPress デモサイト

拡張プロフィール
ユーザーが自己紹介できる編集可能なプロフィール欄を使って、コミュニティをカスタマイズしましょう。

アカウント設定
ユーザーがプロフィールから直接アカウントや通知設定を編集できるようにします。

友達関係
ユーザーがお互い友だちになり、気になっている人の活動を集中してフォローできるようにします。

プライベートメッセージ
ユーザー同士が直接、非公開で話すことができるようになります。一対一の話し合いだけではなく、メッセージは複数メンバー間でも送信できます。

活動動向
完全な RSS フィードとメール通知に対応した、スレッド形式コメント付きの全体・個人・グループアクティビティストリーム、直接投稿、お気に入り機能、@ 返信。

ユーザーグループ
グループを使うことで、アクティビティストリームやメンバー一覧とは別の、メンバー同士が話し合える公開または非公開の場を設定できます。

ディスカッションフォーラム
サイト全体およびグループで bbPress ベースのフォーラムを使うと、集中的な掲示板スタイルの会話が可能になります。

サイトトラッキング
サイトの新しい記事とコメントを記録します。

BuddyPressのインストール

47a91ca1e7865977c856078b448bd2d9 1024x196 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法
Wordpressの管理画面を開き、[プラグイン]→[新規追加]から「BuddyPress」を検索して、「いますぐインストール」後、「プラグインを有効化」してください。

有効化するとプラグインページが開くと思いますが、BuddyPress の Settings を押すと「このページにアクセスするための十分なアクセス権がありません。」と表示されてしまいます。すごい焦ってパーミッションとか確認もしたんですがこの画面は初期設定をまずしないと表示されないようです。非常に紛らわしい文章ですね。。

ちなみに今回インストールしたバージョンは1.6.4です。

BuddyPressの初期設定

初期設定の画面はなんと「ダッシュボード」に隠れています。(こりゃ見つけられないですよね。。)
「BuddyPress Setup」画面を開いてください。

1. Components

eec480eb15802f6cacaa3014e23be348 1024x602 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

どの機能を導入するかを選択できます。設定はあとで変更できるのでとりあえず「Save & Next」を押して次に進みます。

2. Pages

dc705df52a9c34540e2c8dbf72c02b1a [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

メンバーページやグループページを決められたURLで自動生成する場合(一番楽です)は「Automatically create a page at: http://xxx/xxx/」にチェックを入れます。

URLを変えたい場合は「固定ページ」でページを作成して「スラッグ」にURLで表示する名前を入れてから、また初期設定を行なってください。

※下でご紹介する「BuddyPressの日本語化」を初期設定の前に対応してしまってもいいのですが、2. Pages でURLも日本語化されてしまうため、あとで固定ページからスラッグを変更する必要があります。

3. Permalinks

c8d02badc19c0037d7454ba0d5baece4 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

パーマリンク(記事を投稿した場合のURL)の設定を行います。カスタムにしたい場合はあとで[設定]→[パーマリンク設定]から変更できます。

4. Theme

41b7a9d8da9052c4a31f907fdcfafa7e [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

サイトのテーマを選択します。デフォルトのデザインを使うか、デフォルトのデザインからCSSでカスタマイズする場合は「Yes, please!」にチェックしてください。

既存のテーマをBuddyPressに対応させたい場合は、「Install BuddyPress Template Pack」をクリックして別途プラグインをインストールします。
既存のテーマを使う場合、後ほど説明するテンプレート用の設定を行うと、デフォルトのテーマファイルが既存テーマのフォルダにコピーされるため、新しく追加されたファイルの調整が必要になります。
HTMLとCSSの知識がないと難しいかと思いますのでご注意ください。

5. Finish

「Finish & Activate」をクリックして初期設定は完了です!
完了するとダッシュボードからリンクがなくなり、今後は設定画面から行うことになります。(完了するとその設定画面が開きます)

現時点でのユーザー画面を確認してみましょう。

003677877b8335801727600cff1ac47f 1024x646 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

無事に表示されましたか?次からは細かい設定に移ります:)

BuddyPressの日本語化

現状だと管理画面がすべて英語表記なのでBuddyPressの日本語化を行います。

61a275bb269bb8fc671f81f6abf9a270 1024x836 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

GlotPressのBuddyPressページから「Active」と表示されている数字でかかれた最新バージョンをクリックし、次に言語の一覧から「Japanese」を選択すると上記のような画面が表示されます。
(ちなみに現時点での日本語対応率は97%でした)

画面一番下のプルダウンから「.mo」を選択し、「Export」をクリックして日本語化ファイルをダウンロードします。
ファイル名を「buddypress-ja.mo」に変更し、下記の場所へアップロードしてください。

/wp-content/languages

BuddyPressの設定画面をリロードして日本語で表示されたら成功です!

ちなみに上記 languages フォルダには同じファイル名で「.po」ファイルと「.mo」ファイルがあると思います。
2つの違いは下記になり、用意されたファイルを使って日本語化するだけなら「.mo」のみアップすれば問題ないはずです。

  • 「.po」ファイル … 人が編集できる言語のファイル
  • 「.mo」ファイル … プログラム側で読み込める言語のファイル(.poから.moファイルに変換して使用します)

BuddyPressの詳細設定

日本語化が完了したら改めて管理画面の[設定]→[BuddyPress]よりBuddyPressの設定画面を開きます。

コンポーネント

2bb5e6f412cd021602e44ea60db97adf 1024x494 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

コンポーネントタブではBuddyPressで使える機能一覧が表示されているので、必要のない機能はチェックをはずしてください。

固定ページ

bf41050a0d19eba4383eed22a38f48eb [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

固定ページタブでは、初期設定の「2. Pages」で自動生成または設定したページが表示されていると思います。

e0981cea35924d0c695b710a74839a32 1024x481 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

このままだとメニューの名前が英語表記のままなので、管理画面左メニューの[固定ページ]→各ページの[クイック編集]でページタイトルを修正しておきましょう。

設定

5474be2920f3d0a138b10589c6bc7c9a [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

設定タブではコンポーネントで有効にした機能の詳細設定ができますので、必要なものにチェックを入れます。

フォーラム

03f55fbd1d48d31e279b6a09b9fe86ee 1024x425 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

フォーラムを設置すると掲示板のようにトピックをたてることが可能になり、グルーム毎にフォーラムを使えるようにするか、サイト全体でフォーラムを使うかを選ぶことができます。

「グループとサイト全体のフォーラムの両方を有効化できますが、メンバーには使いづらくなってしまうこともあるかもしれません。」という注意書きもあるのでどちらかを選んだほうがよさそうです。
デモで両方インストールしてみたんですがグループを選択しないと投稿できなかったりして改善できませんでした。どなたか教えてくださいm(_ _)m

グループフォーラムをインストール

グループフォーラムを作成する場合は「グループフォーラムをインストール」ボタンを押し、次画面の「インストール完了」ボタンをクリックすればOKです。

フォーラムの機能は掲示板がつくれるプラグイン「bbPress」を使っており、すでにプラグインをインストールしている場合は「既存のインストールを使用」ボタンを押してください。
WordPressのフォーラムサイトも「bbPress」プラグインを使ってつくられているそうですよ。)

29668c78111c9cd0e129437aa4601898 1024x384 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

ユーザー画面より「フォーラム」というメニューが追加されているのを確認してください。

サイト全体のフォーラム

グループに依存しないサイト全体のフォーラムを作成する場合は「サイト全体フォーラムの導入」をクリックし、次画面にでる「The bbPress Community」プラグインをインストールして有効化してください。

「Welcome to bbPress」というページが表示されるので、一番下の「Go to Forum Settings」をクリック。フォーラムの細かい設定ができます。

4e540e10da78a25f67b2de371c212eed 194x300 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

日本語化する場合は上記と同じくGlotPressから.moファイルをダウンロードすることが可能です。(現時点での翻訳率は68%)

設置する場所は異なるので注意してください。下記のプラグインフォルダに置きアップロードします。

/wp-content/plugins/bbpress/languages

グループの作成

現段階で「トピックの作成」をしようとしてもグループがまだないためトピックをつくることができませんので、まずグループを作成してみたいと思います。

ユーザー画面のグループページを開き、「グループ作成」ボタンをクリックします。

1.説明

cb21329c0ed8499668fb859ef6ba37df [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

グループ名と説明を入力し、「グループを作成して続行」ボタンを押して次に進みます。

2.設定

b1bf99f96d62a8a7aaf41e3ef8c08f7d [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

公開設定と招待設定をし、ここでグループのフォーラム作成を有効化するか選択します。

3.アバター

8d0179fff078db5bc214c10edb28c221 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

何のグループか一目でわかるような画像を設定します。「ファイルを選択」から画像を選択し、「画像をアップロード」ボタンをクリックします。

ed38796f7b5fc77e48ec59fd591a567c [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

ここが嬉しい機能。画像を自分で正方形にトリミングすることができますので、ドラックして位置を調整したら「画像切り抜き」ボタンで次に進みます。

4.招待

c644f2ceab5406adeb821021e811b40e [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

友達がいれば、グループに招待することもできます。

最後に「完了」ボタンを押してグループの作成は終了です。

トピックの作成

ab1497cc1eb8136f1f663804e3ce679e 300x226 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

フォーラムのトピックを作成するには、[グループ]→該当のグループ名を選択→[トピックの作成]か、[フォーラム]→[トピックの作成]から可能です。

サイドバーのウィジェット

95848c5bea5d05f4c8432111224e3c8c 300x200 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

サイドバーにグループ一覧やフォーラムを表示できるウィジェットが追加されていますので必要なものを右にドラッグしてください。

活動の管理

d533d42b2dc0aa9a87ea35de04a8b114 300x151 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

ユーザーの新規登録や友達申請、またはグループやフォーラムで投稿された内容などの活動状況は管理画面左にある[活動]メニューから管理出来ます。

既存のテーマを利用する

既存のテーマをBP化(BuddyPressに最適化)して利用する場合、上記初期設定の「4. Theme」で記述した「BuddyPress Template Pack」プラグインが必要になります。

デフォルトのテーマにあるファイル(/wp-content/plugins/buddypress/bp-themes/bp-default)が既存テーマのフォルダにコピーされるため、新しく追加されたファイルの調整が必要になるのでHTMLとCSSの知識がないと難しくなりますのでご注意ください。

プラグインをインストールしたらまずは[外観]→[テーマ]から使用したいテーマを有効化してください。

そのあと[外観]→[BP Compatibility]を開いて一番下に表示されているボタンをクリックして進むとBP用のテーマファイルが作成されます。

一番最後の画面に表示される「Disable BP Template Pack CSS」と「Disable BP Template Pack JS / AJAX」はチェックしなくても大丈夫です。

be3783098668f7ca6255c1a03ff6ab54 300x197 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

「Twenty Twelve」のテーマでBP化した場合は上記のようになり、この作業はテーマを変更する度に設定する必要があります。

ホームの表示を変更

デモサイトの用にグループやアクティビティなど上記で作成したページをホームに設定したい場合は、[設定]→[表示設定]→[フロントページの表示]から可能です。

607647c0cfb72efdb7a30fac01482a4b 300x95 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

「固定ページ」にチェックし、「フロントページ」から表示したいページタイトルを選択してください。

BuddyPress デモサイト

ぜひこちらのデモサイトで使い勝手など確認してみてください。ご自由に使っていただいて大丈夫です。(※適さない発言があった場合は削除する可能性があります)

 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

Cappee BuddyPress デモサイト

「BuddyPress」プラグインに関する基本的な設定方法は以上です。間違っている箇所があったらお気軽にコメントくださいm(_ _)m

タイトルに「簡単」と入れたましたが、1から実装することを考えれば簡単便利なプラグインと言えますが、機能が充実している分設定は複雑になっていますね。

これからさらにカスタマイズしていく予定ですので、デザインのカスタマイズやBuddyPressの拡張プラグインについても今後ご紹介していこうと思います。

Pocket
article clipper [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

こんにちは、@cappeeです。

やってしまいました。Wordpressのテーマがアップデートしていて、うっかり更新してしまったんですよね。

そしたら編集したはずのcssやらphpファイルが全部上書きされてしまいました。当たり前ですが。。

前のファイルはローカルに保存されているのでバックアップをとってから新しいファイルをダウンロードしたけれど、新しいファイルと古いファイルのソースコードの差分を目で探すのは一苦労;;

今回のためだけに差分がわかるDiffソフトをインストールするのもイヤですし、Webでソースコードをコピペしてさくっと比較できるサービスがないかなと思って探してみたら、、ありました。

色々と比較してみた中で一番オススメのDiffサービスをご紹介します。

Diffとは

ちなみにソースコードやテキストなど2つのファイルを比較して差分を出力することをDiff(ディフ)といいます。

Difference(ディファレンス)の略だそうですよ。

オススメのDiffサービス「Mergely」

 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

Mergely

差分を確認する

使い方はとても簡単で、まず比較したいソースコードやテキストをコピーして左右に貼り付けます。

Mergely 1024x516 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

すると色別でハイライトして差分を教えてくれるのでとてもわかりやすいです。

Mergely2 300x282 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

右上の設定ボタンを押せば、色の変更もできます。

ここがすごい!マージ機能

Mergely3 300x26 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

検索ボックスのところにアイコンが並んでますが、地味にすごい「→」アイコンのマージ機能

マージとは簡単に言うと左右のソースコードをガッチャンコしてくれる機能です。とても便利ですが自動なのでかならず元ファイルは残しておいてくださいね。

あとは、左右のコードを入れ替えたり、クリアしたり、ダウンロード、アップロードすることができます。(今の時点でダウンロードとアップロードが動いてないような?)

ここがすごい!共有機能

Mergely4 300x56 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

一番上の「Save」ボタンを押して「Save for Sharing」をクリックすると、比較したファイルをURLで共有することもできます。

とても便利なDiffサービスですので、いざ!という時は思い出して使ってみてください。

Mergely

 

【13.03.27追加】
「子テーマ」をつくればWordpressのテーマをアップロードしても編集したファイルを子テーマとして残しておくことで上書きされないようにできました!
コメントいただいたDaisuke Takahashiさんありがとうございます!もっと勉強しないとですねっ

さっそく子テーマについて調べてみました。CSSだけの場合は便利ですが、注意が必要なのはfunction.phpファイルの場合は親テーマにある関数を子テーマで使用できないということ。新しく関数をつくるか、親テーマの方で関数を使わなくするなどが必要になります。その他のテンプレート用phpファイルも子テーマで使うことができますが、CSSと違ってphpファイルがまるごと上書きされてしまいますので、テーマのアップロードをした場合でもせっかく改善された箇所が反映されない可能性もあります。テンプレート用phpファイルを子テーマに入れてアップロードした場合は今回ご紹介する「Mergely」を使って念のため差分を確認しておいた方がよさそうです。
【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-

 

Pocket
article clipper 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」