Atrasi-2079-Vox

フリーランスウェブデザイナーArata-Atrasi-Takamiのブログ。服・靴・育児ときどき開発。

Category Archives: CSS

Coda2のクリップ機能が便利っす

  • 投稿日:2013/03/09
By: Collin Allen

たまには開発ネタを。以前にエディタをDreamweaverからCoda2に変えたという記事を書きました。

もう散々他のデベロッパーズブログで書かれたネタなんですが、そのCoda2の機能の一つに「クリップ」というものがあります。いわゆる、よく使うコード等を予め登録しておいて簡単に挿入できる「コードスニペット」ってやつなんですが、これをある程度入れておくと結構便利です。

 

 

クリップを作成してみる

まずはエディタ画面を立ちあげます。するとサイドバーに色々と表示されていると思いますので、その中からクリップを選びます。

もしサイドバーを表示されていない場合は「表示」メニューの中から「サイドバー」→「クリップ」で表示することができます。

2
新規クリップを作成する場合は、サイドバーの上で右クリックし「クリップを追加」を押すか、サイドバー下の「+」ボタンをクリックすることで作成出来ます。


クリップを作成すると下記のような画面が出現しますので、よく使うコードをここに書き込みます。

4
上記画像ではCSSを打ち込んでいますが、コードの内容はHTMLでもJavaScriptでもjQueryでもPHPでも何でもOKです。

名前も好きなものをつけることができます。
名前をつけたら右下の「保存」をクリックして終了です。

 

 

任意で「TABトリガー」というものを設定できます。下記のように「TABトリガー」欄に任意の文字列を打ち込みます。すると、その文字列を入力した直後にキーボードのTABキーを押すと、登録したコードが打ち込まれます。

6

設定したTABトリガーは登録クリップの右上に下記の画像のように出ます。また登録クリップをダブルクリックすることでも打ち込むことができます。


また、アンカータグの用に挿入ポイントが有る場合は、左下のプレースホルダーメニューから「挿入ポイント」を加えてあげれば、クリップを打ち込んだ際に挿入ポイントの箇所が空欄で打ち込まれ、マウスカーソルが挿入ポイントに自動的に移動されます(挿入ポイントが複数ある場合は最初の挿入ポイントに移動)。

8

10

他にもキーを設定することも出来るようです(使ってないけど)。

 

 

クリップを整理

作成したクリップは必ずしもHTMLだけ・CSSだけ…というわけではありませんので、グループ分けして整理することもできます。サイドバー上で右クリックし「グループを追加」でグループを作成します。
作成したグループにクリップをドラッグ・アンド・ドロップすることで追加したり整理できます。


一度作成したクリップは、同じく右クリックで削除したり編集し内容を変更することもできますし、書きだして外部ファイルにバックアップしたり、同じCoda2ユーザ間で受け渡すこともできます。

 

 

クリップを同期

Coda2はiCloudに対応しています。iCloudを経由することで、自宅のマシン・職場のマシンなど、複数のマシン間で作成したクリップや設定を同期することができます。
私はなるべく制作環境を同じ環境にしておきたい派なので、こういった機能は結構助かります。

まずiCloud側の設定です。
「システム環境設定」→「iCloud」で「書類とデータ」の項目のチェックをONにします。

11
iCloudの設定ができたら、次はCoda2の環境設定で「一般」を開き、iCloudの「サイト設定とクリップを同期する」にチェックを入れます。同期したい同じiCloudアカウントを設定した各マシンで、同様の設定を行えば自動的にクリップの設定が同期されます。

12

 

使い慣れてくると、作業効率を向上できる良いツールになり得ますね。

 


WordPress記事タイトルの英文が大文字になっちゃう

  • 投稿日:2013/02/09

このブログを時折見て下さっていた方はお気付きだったかと思いますが、このブログの記事タイトルの英文の箇所が全部大文字でした。実を言いますと意図的に大文字化してたわけでは無かったのですね。

「別にいいや」とずーっと放置してきたのですが、いい加減に原因究明&解決した方が何かと良いなと思いまして、ついに解決するに至りました。オチを言いますと、とってもとっても下らないと言いますか、何か肩透かしを食らったような気分です。はい。

それは事の顛末を…

 

 

1.何故か英文が大文字になっちゃう

いつから…という訳でもないのですが、WordPressの勉強とかのためにこのブログを作ってから割と初期段階でその症状は出ていました。WordPressインストール直後のデフォルト状態では何とも無かったのに、何故かタイトルの英文の箇所が大文字化。謎だ。

 

2.投稿時から大文字というわけではない

当たり前ですが「勝手に大文字化しちゃう」と言ってるんですから、当然私本人は投稿時に大文字では入力してません。

入力欄

ちゃんと大文字小文字と分けて入力している事がわかるかと思います。

 

投稿一覧のとこだって


ちゃーんと大文字小文字が区別されています。なんでだべ。

 

 

3.そういやSEOプラグイン入れてたな

そういえばSEO用に「All in One SEO」なるプラグインを入れてたな、と気づきました。確かその設定項目にタイトルを大文字にするとか何とかってのがあった気がします。

ありました

きっとこいつのせい。多分そう。こいつのチェックを外してみました。これで記事タイトルが直るはず。

 

 

………。

 

あれ?

 

直らない…。

 

 

4.All in One SEOのバグ?

一番クサイと思われてた「All in One SEO」プラグインの設定項目で直らなかったので不思議に思ったのですが、WordPressのプラグインにバグなんてつきもの、きっと同じ用にAll in One SEOプラグインで困っている人がいるに違いない!!と、All in One SEOプラグインについて調べ始めたのです。

「All in One SEO 大文字」と…。

そこで辿り着いたこの記事。

murak.net / WordPressプラグイン All in One SEO Pack の効果的な設定

きたよきたよ〜!きっとこれで解決だぁ〜!

>「カテゴリーの<title>の先頭を大文字にするオプションです」 

え…?せ…先頭…?英文を大文字にするんじゃないの…?あ…っていうか、よく考えたらカテゴリータイトルって記事タイトルじゃねーよな…。あら…あららららら……?

どうやら完全に勘違いしていたようです。どうもAll in One SEOプラグインはシロと言わざるを得ない様です。
という事は何が原因なのか…。WordPressのデフォルトの投稿設定にも「記事タイトルを大文字にする」なんて無かったはずなのに…。

 

 

5.もっとシンプルに調べてみよう

その後他のプラグインを色々と調べましたが、記事タイトルを置き換える様な動作をするプラグインは無さそうでした。迷宮入りしそうな気がしてきましたが、こういう時こそシンプルに考えましょう。

「WordPress 大文字」

これで検索してみました。もうWordPress自体の何かかも知れんぞと。そして辿り着いたこの記事。

>「ひょっとしたらスタイルシートで設定されてるのか?」

なにいいいいいいいいいいいい!!!!!??

 

なるほどCSSでしたかそうですか。そういや英語の大文字小文字の表示を指定できる「text-transform」なんてものありましたね。普段使わないもんだから完全に忘れてましたよ。

↓特に指定なし
text-transform:none;

↓先頭の文字だけ大文字にする
text-transform:capitalize;

↓全部小文字にする
text-transform:lowercase;

↓全部大文字にする
text-transform:uppercase;

ああ…ああ…これくさいね、うん…。

そういえばAll in One SEOプラグインと同時期に導入し現在使用しているWordPressテーマ「Origin」っつーのがありました。なるほど、このテーマのCSSっぽいですね。完全にプラグインのせいだとばかり思ってました…反省。

というわけでテーマファイルのCSSをのぞいてみたところ…

キタコレ

記事タイトルのとこのclass「.entry-title」にバッチリ「text-transform:uppercase;」が指定されてました。
こいつを以下のように直します。

 

 

さて表示確認を…

 

おっしゃあああああああああああああああ!!!!!

 

 

というわけで、何とも単純なお話。ただのCSSの指定でした。Originテーマ自体は海外製テーマですので、こういう日本語圏ではあまり馴染みのないCSSが使われていたりすることがあるんですね。勉強になりました。

ちなみに、テーマファイル内部のCSSを上記のように直せば表示は直りますが、テーマのアップデートの際に再度上書きされてしまう可能性もありますので、Originテーマのテーマ設定からCustom CSSの欄に

.hentry .entry-title{text-transform: none;}

という感じで追記しておくと良いかも知れません。

 

 

結論:ちゃんとインスペクタとか使って検証しようね

 

 


制作環境を変えてみた〜Coda2編〜

  • 投稿日:2012/11/24
By: Collin Allen

私は普段Web制作の仕事をしている訳ですが、その制作作業の中に「コーディング」というHTMLだったりCSSだったりを書く作業があります。タグという英文みたいのをひたすら打ち込んでいく作業だと言えば、Web制作をよく知らない方にも何となくイメージしやすいでしょうか。

このコーディング作業に使用するソフトを「エディタ」と呼んだりします。私たちWebデザイナーの場合は、そのエディタの中でもHTML・CSS・JavaScriptなどのWeb制作によく使われる言語に特化したものが一般的によく使われます。恐らく一番一般的なのはAdobe社製のDreamweaverというソフトではないでしょうか。

 

 

私自身、Web制作の仕事を始めてからずっとDreamweaverを使っていました。まぁ特に不満が無かったんですね。英文ばかりのコードがわかりやすくなるカラーリング機能だったり、便利なサジェスト機能(携帯の予測変換みたいなもの)だったり、Web制作におけるコーディングでは非常に使いやすいエディタだと思います。

 

しかし、最近になって「Coda2」というMac用エディタソフトに乗り換えたのです。

Panic, Inc.

Panic, Inc.
Coda 2
★★★★☆
94件の評価
App Store
powered by アプリスコア.com

 

乗り換えた理由は下記の通り

  • 多くの開発者ブログで高評価されている
  • インターフェイスデザインがかっこいい
  • 階層構造などの視認性が高い
  • Dreamweaverでできることは大体できる

という感じです。2番目の理由の「かっこいい」ってのは個人的に結構大事なことで、音楽制作ソフトやギターなんかにも言えるんですが、やっぱり見た目的に「かっこいい」と思えないと気分的に盛り上がらないのです(笑)

Dreamweaverでできる事ができるならば、見やすかったり使いやすい物のほうが良いですね。コーディングの際にHTML・CSSを並べて表示することが出来たり、色々とカスタマイズできるところも気に入りました。

実際のところDreamweaverの全機能を使いこなしていたとは言えないのですが、Coda2に乗り換えてみて非常に操作しやすい印象を受けました。 ちょっとAdobeに難癖つけるみたいですが、Dreamweaverの画面をぱっと見た時にCoda2ほど何ができるのかが把握しにくい様な気がしま す。

 

 

多くの開発者ブログの方も紹介しているのですが、下記の点は特に便利ですね。

ウィンドウを並べながらの編集

横幅の大きなサイトだと逆に不便かも知れませんが、スマートフォン向けサイトの様な長細いサイトの場合ですと、上記の画像のように左からHTML・CSS・プレビューといった感じで並べて編集できるのが便利です。Dreamweaverもプレビュー機能はあるんですけど、CSSも一緒に並べてっていうのはいいですよね。

 

階層の分かりやすさ

HTML編集画面です。左側の青っぽい部分に注目して下さい。

HTMLを書いたことがある方は分かると思うのですが、HTML文書は階層構造といって色んな要素が入れ子状態になっているんですね。HTMLがフクザツになってこの階層構造が深くなってくると、行の先頭にあるインデント(字下げの空白のこと)だけでは分かりにくくなってきます。なんたって英文ですから、階層構造を確認してると目がチカチカしてきたりします(笑)

この左側の青っぽい部分は階層が深い行ほど色が濃く、浅いところほど色が薄くなります。これでどの行がどれくらいの階層にあるのかが直感的に把握しやすくなります。

 

それと、私はまだ使ってみてはいないのですが、iPadと連携してiPad上でプレビューを見ることが出来るようになるDiet CodaというiPadアプリも有るようです。Kindle・Nexus7・iPad miniとタブレットも普及し始めて、これからタブレットを視野に入れたウェブサイト構築を行う機会も増えてくるでしょうし、こういう周辺環境面でも面白い試みが伺えます。

Panic, Inc.

Panic, Inc.
Diet Coda
★★★★☆
32件の評価
App Store
powered by アプリスコア.com

 

その他iCloudとの連携サービスなどもあるようで(←まだちゃんと検証してないw)、Mac使いのWEB制作者には結構うれしい機能が沢山あると思います。なんたってDreamweaverが4万円以上するのに対して6500円(2012年11月現在)というのは、個人でWeb制作をしている方にとっても有難い価格なんじゃないかと思います。

 

もちろん不満な点も全くないわけでは無いんですが、今のところ最も使いやすいと感じています。

Dreamweaverから引っ越してきた人としては、DreamweaverのEndキーで行末に移動する機能を多用していたので(本来これはWindowsの挙動でMacの場合はcommand+→だったりします)、できればその辺のキーボード操作の挙動もカスタマイズできると嬉しいですね。

パニックincさんどうですかねー?

(/ω・\)チラッ