<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
   <title>ブログ | アットスタイル</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/" />
   <link rel="self" type="application/atom+xml" href="http://atstyle.biz/blog/atom.xml" />
   <id>tag:atstyle.biz,2012:/blog//1</id>
   <updated>2012-02-02T07:45:17Z</updated>
   <subtitle>アットスタイルのWebmasterがHTML・CSS・アクセシビリティ・Movable Type 等、気になる事について色々と・・・</subtitle>
   <generator uri="http://www.sixapart.com/movabletype/">Movable Type 4.292</generator>


<entry>
   <title>google-code-prettifyを使ってみた</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2012/01/24/0026/" />
   <id>tag:atstyle.biz,2012:/blog//1.1213</id>
   
   <published>2012-01-23T15:26:09Z</published>
   <updated>2012-02-02T07:45:17Z</updated>
   
   <summary>簡単にシンタックスハイライトが導入できるgoogle-code-prettifyを使ってみた。 ダウンロードはGoogleからでもよいが、以下のページの解説がわかりやすいかもしれない。 Quick Tip: How to Add Synta...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="400@Style Web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="28" label="CSS" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="105" label="JavaScript" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="24" label="Product" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<p>簡単にシンタックスハイライトが導入できる<a href="http://code.google.com/p/google-code-prettify/" title="google-code-prettify">google-code-prettify</a>を使ってみた。</p>

<p>ダウンロードはGoogleからでもよいが、以下のページの解説がわかりやすいかもしれない。</p>

<p><a href="http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project/" title="Quick Tip: How to Add Syntax Highlighting to Any Project">Quick Tip: How to Add Syntax Highlighting to Any Project</a></p>

<p>ダウンロードしたファイルの中からprettify.cssとprettify.jsだけを使う。</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="利用するファイルは2つだけ" src="http://atstyle.biz/blog/img/prettyprint.png" width="500" height="364" class="mt-image-none" style="" /></span></p>

<p>prettify.jsをサーバーへアップロード、prettify.cssは内容を既存のCSSに追加した。</p>

<p>HTMLファイルに以下を記述する</p>

<pre class="prettyprint"><code>&lt;script&nbsp;src=&quot;/js/prettify.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;prettyPrint();&lt;/script&gt;</code></pre>

<p><code>pre</code>でマークアップ</p>

<pre class="prettyprint"><code>&lt;pre&nbsp;class=&quot;prettyprint&quot;&gt;&lt;code&gt;ここにコードを記述する&lt;/code&gt;&lt;/pre&gt;</code></pre>]]>
      
   </content>
</entry>

<entry>
   <title>zenback BIZにアップグレードしました</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2012/01/03/0105/" />
   <id>tag:atstyle.biz,2012:/blog//1.1212</id>
   
   <published>2012-01-02T16:05:41Z</published>
   <updated>2012-01-02T16:06:47Z</updated>
   
   <summary>12月22日、個人向け無償版のzenbackからzenback BIZにアップグレードいたしました。 zenback BIZでは「関連リンク」やクラシファイドも非表示に出来るため他サイトへの流出を心配しなくてよくなります。またGoogle ...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="400@Style Web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="16" label="Blog" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="24" label="Product" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="114" label="zenback" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<p>12月22日、個人向け無償版のzenbackから<a href="http://www.sixapart.jp/zenback/biz/" title="zenback BIZ">zenback BIZ</a>にアップグレードいたしました。</p>

<p>zenback BIZでは「関連リンク」やクラシファイドも非表示に出来るため他サイトへの流出を心配しなくてよくなります。またGoogle アナリティクスも設定可能ですので企業・法人でのご利用におすすめです。</p>

<p>＊個人向け無償版のzenbackからzenback BIZへのアップグレードの際には、必ず個人向け無償版で利用した以外のメールアドレスを用意して新たにアカウントを作成する必要があります。ヘルプをよく読んで設定してください。（間違えて無料アカウントにライセンスコードを設定してしまいましたとさ...）</p>]]>
      
   </content>
</entry>

<entry>
   <title>新年おめでとうございます 2012 </title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2012/01/01/0314/" />
   <id>tag:atstyle.biz,2012:/blog//1.1211</id>
   
   <published>2011-12-31T18:14:02Z</published>
   <updated>2012-02-02T03:19:35Z</updated>
   
   <summary> 東北地方太平洋沖地震の被害に遭われた方におかれましては、心よりお見舞い申し上げると共に、一日も早い復興をお祈り申し上げます。 今年もアットスタイルをどうぞご利用下さいますようお願い申し上げます。 平成二十四年元旦 アットスタイル　柳 泰久...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="400@Style Web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="63" label="Personal" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="24" label="Product" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<figure><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="Happy New Year!" src="http://atstyle.biz/blog/img/happynewyear.png" width="500" height="300" class="mt-image-none" style="" /></span></figure>

<p>東北地方太平洋沖地震の被害に遭われた方におかれましては、心よりお見舞い申し上げると共に、一日も早い復興をお祈り申し上げます。</p>

<p>今年もアットスタイルをどうぞご利用下さいますようお願い申し上げます。</p>

<p>平成二十四年元旦</p>

<p>アットスタイル　柳 泰久</p>]]>
      
   </content>
</entry>

<entry>
   <title>Internet Explorer 7への対応も終了いたします</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2011/12/22/1736/" />
   <id>tag:atstyle.biz,2011:/blog//1.1210</id>
   
   <published>2011-12-22T08:36:33Z</published>
   <updated>2012-01-23T07:35:45Z</updated>
   
   <summary>先日「当ウェブサイトでのInternet Explorer 6 対応終了」をご案内した後にInternet Explorer 6からのアップデートを促すようie6alert-jsを組み込みましたが、IE6で閲覧した場合にはグローバルナビゲー...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="400@Style Web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="16" label="Blog" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="46" label="IE" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="24" label="Product" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<p>先日「<a href="http://atstyle.biz/blog/archives/2011/11/14/0057/">当ウェブサイトでのInternet Explorer 6 対応終了</a>」をご案内した後にInternet Explorer 6からのアップデートを促すよう<a href="http://code.google.com/p/ie6alert-js/">ie6alert-js</a>を組み込みましたが、IE6で閲覧した場合にはグローバルナビゲーションにアラートが重なり使いにくくなっておりました。</p>


<p>現状CSSにはIE6とIE7用のclearfixも記述しておりますが、対応しない方向なのでIE7にもアラートを表示させるようにいたしました。</p>


<p>スクリプトは<a href="http://www.webcreatorbox.com/tech/jquery-tips20/">少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス</a>の中の「9. IE6以下ユーザーにメッセージを表示」を使用させて頂きました。</p>


<pre class="prettyprint"><code>&lt;script&gt;
$(function&nbsp;()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(&nbsp;$.browser.msie&nbsp;&amp;&amp;&nbsp;$.browser.version&nbsp;&lt;=&nbsp;7&nbsp;)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('body').prepend('&lt;div&nbsp;class=&quot;error&quot;&gt;このウェブサイトは&lt;span&gt;Internet&nbsp;Explorer&nbsp;6&lt;\/span&gt;や&lt;span&gt;Internet&nbsp;Explorer&nbsp;7&lt;\/span&gt;では&lt;span&gt;正常に表示されない&lt;\/span&gt;可能性があります。ご了承ください。&lt;\/div&gt;');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
});
&lt;/script&gt;</code></pre>

<pre class="prettyprint"><code>.error {
    background:#84b8c7;
    text-align:center;
    font-size: 87.5%;
    color: #fff;
    padding: 8px 10px;
}
.error span {
    font-weight: bold;
}
</code></pre>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="IE6と7へのアラート" src="http://atstyle.biz/blog/img/ie6_7.png" width="500" height="111" class="mt-image-none" style="" /></span></p>

<p>なお、販売および配布のテーマ（テンプレート）につきましては、引き続きInternet Explorer 6及び7で大幅にレイアウトが崩れていないことを確認後に公開いたします。</p>]]>
      
   </content>
</entry>

<entry>
   <title>Adobe Fireworks CSS3 Mobile Packがすごい！</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2011/12/06/1545/" />
   <id>tag:atstyle.biz,2011:/blog//1.1209</id>
   
   <published>2011-12-06T06:45:55Z</published>
   <updated>2012-01-23T07:42:49Z</updated>
   
   <summary>先日の「CSS Nite redux, Vol.5 powered by デジタルハリウッド福岡校」で鷹野さんに教えていただいたAdobe Fireworks CSS3 Mobile Packを使ってみた。 fireworks_css3mo...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="300CSS" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="28" label="CSS" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="109" label="CSS Nite" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<p>先日の「<a href="http://atstyle.biz/blog/archives/2011/10/26/2319/">CSS Nite redux, Vol.5 powered by デジタルハリウッド福岡校</a>」で鷹野さんに教えていただいた<a href="http://labs.adobe.com/technologies/fireworks_css3mobile/">Adobe Fireworks CSS3 Mobile Pack</a>を使ってみた。</p>

<p>fireworks_css3mobile_p1_100311.zxpをクリックしてExtension Managerにインストールする。</p>

<p>Fireworksで簡単なボタンを作ってみる</p>

<p>こんな感じ。とりあえず角丸とグラデーション</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="角丸とグラデーションのボタン" src="http://atstyle.biz/blog/img/fireworks_button.png" width="165" height="125" class="mt-image-none" style="" /></span></p>

<p>プロパティ</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="プロパティパネル" src="http://atstyle.biz/blog/img/fireworks_properties.png" width="500" height="112" class="mt-image-none" style="" /></span></p>

<p>ウィンドウ&gt;エクステンション&gt;CSS propertiesを選択してCSS propertiesパネルを表示する。</p>

<p>ボタンを選択した状態で更新ボタンをクリック。</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="CSS Propertiesパネル" src="http://atstyle.biz/blog/img/fireworks_css_properties.png" width="280" height="437" class="mt-image-none" style="" /></span></p>

<p>出力されたコード。</p>

<pre class="prettyprint"><code>background-color:#3ab7f5;

/*&nbsp;Firefox&nbsp;v3.6+&nbsp;*/
background-image:
-moz-linear-gradient(20%&nbsp;0%&nbsp;-90deg,
rgb(58,183,245)&nbsp;0%,
rgb(51,153,204)&nbsp;100%);&nbsp;

/*&nbsp;safari&nbsp;v4.0+&nbsp;and&nbsp;by&nbsp;Chrome&nbsp;v3.0+&nbsp;*/
background-image:
-webkit-gradient(linear,
20%&nbsp;0%,
20%&nbsp;75%,
color-stop(0,&nbsp;rgb(58,183,245)),
color-stop(1,&nbsp;rgb(51,153,204)));

/*&nbsp;Chrome&nbsp;v10.0+&nbsp;and&nbsp;by&nbsp;safari&nbsp;nightly&nbsp;build*/
background-image:
-webkit-linear-gradient(-90deg,
rgb(58,183,245)&nbsp;0%,
rgb(51,153,204)&nbsp;100%);

/*&nbsp;Opera&nbsp;v11.10+&nbsp;*/
background-image:
-o-linear-gradient(-90deg,
rgb(58,183,245)&nbsp;0%,
rgb(51,153,204)&nbsp;100%);

background-image:
linear-gradient(-90deg,
rgb(58,183,245)&nbsp;0%,
rgb(51,153,204)&nbsp;100%);

width:120px;

height:60px;

/*&nbsp;Firefox&nbsp;v1.0+&nbsp;*/
-moz-border-radius:5px;
/*&nbsp;Safari&nbsp;v3.0+&nbsp;and&nbsp;by&nbsp;Chrome&nbsp;v0.2+&nbsp;*/
-webkit-border-radius:5px;
/*&nbsp;Firefox&nbsp;v4.0+&nbsp;,&nbsp;Safari&nbsp;v5.0+&nbsp;,&nbsp;Chrome&nbsp;v4.0+&nbsp;,&nbsp;Opera&nbsp;v10.5+&nbsp;&nbsp;and&nbsp;by&nbsp;IE&nbsp;v9.0+&nbsp;*/
border-radius:5px;

filter:
	progid:DXImageTransform.Microsoft.gradient(startColorstr&nbsp;=&nbsp;#ff3ab7f5,endColorstr&nbsp;=&nbsp;#ff3399cc,GradientType&nbsp;=&nbsp;0);

-ms-filter:&quot;progid:DXImageTransform.Microsoft.gradient(startColorstr&nbsp;=&nbsp;#ff3ab7f5,endColorstr&nbsp;=&nbsp;#ff3399cc,GradientType&nbsp;=&nbsp;0)&quot;;</code></pre>

<p>あとはクラスなんかを付けてブラウザで確認。CSS3のボタンが出来上がり！</p>

<p>参考にした記事：<a href="http://www.adobe.com/jp/joc/devnet/fireworks/articles/css3_mobile_pack.html">Fireworks CSS3 Mobile Packを使ってみよう</a></p>]]>
      
   </content>
</entry>

<entry>
   <title>スマートフォンオプションのブログをドメイン直下に移動</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2011/11/19/0234/" />
   <id>tag:atstyle.biz,2011:/blog//1.1208</id>
   
   <published>2011-11-18T17:34:08Z</published>
   <updated>2011-11-18T17:35:45Z</updated>
   
   <summary>先日インストールしたスマートフォンオプション。 17日のセミナーで「ドメイン直下でスマートフォンオプションのブログが作れないか」をシックス・アパートの金子さんに聞いてみた。 「.htaccessがあるので面倒ですが、今までの通りの方法でOK...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="100MovableType" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="97" label="MT5" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="6" label="MovableType" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<p><a href="http://atstyle.biz/blog/archives/2011/11/17/0120/" title="スマートフォンオプション for Movable Typeがリリースされました">先日インストールしたスマートフォンオプション。</a></p>

<p><a href="http://atstyle.biz/blog/archives/2011/09/27/1146/" title="【福岡開催】Movable Type で地方から攻めるWeb制作ビジネス戦略とスマートフォン対応サイト制作ノウハウ伝授セミナー">17日のセミナー</a>で「ドメイン直下でスマートフォンオプションのブログが作れないか」をシックス・アパートの金子さんに聞いてみた。</p>

<p>「.htaccessがあるので面倒ですが、今までの通りの方法でOK」ということだったので、ちょこっといじってみた。ところが公開パス（ブログURLとブログパス）を書き換えた途端に500エラー。</p>

<p>FTPで.htaccessと.mtview.phpを削除。保存しておいた元々の.htaccessをアップロードしてとりあえずは管理画面にアクセスできた。DynamicMTML .htaccessテンプレートに元々の.htaccessの内容を追加記述し再構築。各ファイルのパーミッションを確認・変更。</p>

<p>できました！</p>

<p><a href="http://atstyle.org/"><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="ドメイン直下のブログ" src="http://atstyle.biz/blog/img/smart_iphone_2.jpg" width="500" height="362" class="mt-image-none" style="" /></span></a></p>]]>
      
   </content>
</entry>

<entry>
   <title>スマートフォンオプション for Movable Typeがリリースされました</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2011/11/17/0120/" />
   <id>tag:atstyle.biz,2011:/blog//1.1207</id>
   
   <published>2011-11-16T16:20:16Z</published>
   <updated>2011-11-18T17:45:15Z</updated>
   
   <summary>Movable Typeをスマートフォンで利用したい方向けの、ビジネス支援セット「スマートフォンオプション for Movable Type」を本日より発売開始します。 「スマートフォンオプション for Movable Type」を本日提...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="100MovableType" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="97" label="MT5" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="6" label="MovableType" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<blockquote><p>Movable Typeをスマートフォンで利用したい方向けの、ビジネス支援セット「スマートフォンオプション for Movable Type」を本日より発売開始します。</p></blockquote>

<p class="origin"><cite><a href="http://www.sixapart.jp/movabletype/news/2011/11/16-1300.html" title="「スマートフォンオプション for Movable Type」を本日提供開始 : Movable Type News - Six Apart">「スマートフォンオプション for Movable Type」を本日提供開始 : Movable Type News - Six Apart</a></cite></p>

<p>早速インストールしてみた。今回は個人ブログ用のドメイン：atstyle.orgにインストール。</p>

<p>ウェブサイト配下のブログにスマートフォンテーマを適用することになっている。</p>

<p>PC向け</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="PC向け表示" src="http://atstyle.biz/blog/img/smart_pc.jpg" width="500" height="364" class="mt-image-none" style="" /></span></p>

<p>iPhoneでの表示</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="iPhoneでの表示" src="http://atstyle.biz/blog/img/smart_iphone.jpg" width="320" height="480" class="mt-image-none" style="" /></span></p>

<p>ウェブサイトを作成せずにドメイン直下で使いたいんだけど。</p>

<p>今日「<a href="http://atstyle.biz/blog/archives/2011/09/27/1146/">【福岡開催】Movable Type で地方から攻めるWeb制作ビジネス戦略とスマートフォン対応サイト制作ノウハウ伝授セミナー</a>」で聞いてみよう。</p>]]>
      
   </content>
</entry>

<entry>
   <title>当ウェブサイトでのInternet Explorer 6 対応終了のお知らせ</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2011/11/14/0057/" />
   <id>tag:atstyle.biz,2011:/blog//1.1206</id>
   
   <published>2011-11-13T15:57:29Z</published>
   <updated>2011-11-13T16:04:27Z</updated>
   
   <summary>当ウェブサイトおよびブログにてInternet Explorer 6への対応を終了させて頂きます。 最新のブラウザにアップデートしてご覧ください。Internet Explorer 6を利用して閲覧される場合には意図しない動作・デザインで表...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="400@Style Web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="16" label="Blog" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="46" label="IE" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="24" label="Product" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<p>当ウェブサイトおよびブログにてInternet Explorer 6への対応を終了させて頂きます。</p>

<p>最新のブラウザにアップデートしてご覧ください。Internet Explorer 6を利用して閲覧される場合には意図しない動作・デザインで表示されることがございますことをご了承ください。</p>

<p>なお、販売および配布のテーマ（テンプレート）につきましては、<strong>引き続きInternet Explorer 6で大幅にレイアウトが崩れていないことを確認後</strong>に公開いたします。</p>

<p>よろしくお願いします。</p>]]>
      
   </content>
</entry>

<entry>
   <title>フォーム周りのCSSをいじってみた</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2011/11/12/0055/" />
   <id>tag:atstyle.biz,2011:/blog//1.1205</id>
   
   <published>2011-11-11T15:55:22Z</published>
   <updated>2012-01-23T07:43:48Z</updated>
   
   <summary>7月にお問い合わせフォームを編集したが、今回はブログのコメントも一緒にいじってみた。 シンプルな印象を崩さないようにグレーのボーダー ボタンも同様に極めてシンプル。CSSはこんな感じ。 .submit-button {     paddin...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="400@Style Web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="16" label="Blog" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="28" label="CSS" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<p>7月に<a href="http://atstyle.biz/blog/archives/2011/07/24/0256/">お問い合わせフォームを編集</a>したが、今回はブログのコメントも一緒にいじってみた。</p>

<p>シンプルな印象を崩さないようにグレーのボーダー</p>

<p>ボタンも同様に極めてシンプル。CSSはこんな感じ。</p>

<pre class="prettyprint"><code>.submit-button {
    padding: 3px 10px;
    border: solid 3px #d5d5d5;
    background-color: #f3f3f3;
    color: #000;
    text-shadow: 1px 1px 0 #fff;
    margin-right: 20px;
}
.submit-button:hover {
    border-color: #999;
    background-color: #e6e6e6;
    color: #000;
}
.submit-button:active {
    border-color: #333;
    background-color: #e6e6e6;
    color: #000;
}</code></pre>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="コメントフォーム" src="http://atstyle.biz/blog/img/comment_form_2011.png" width="500" height="494" class="mt-image-none" style="" /></span></p>]]>
      
   </content>
</entry>

<entry>
   <title>Safariリーダーが良い感じ</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2011/11/11/0119/" />
   <id>tag:atstyle.biz,2011:/blog//1.1204</id>
   
   <published>2011-11-10T16:19:19Z</published>
   <updated>2011-11-10T16:21:45Z</updated>
   
   <summary>仕事中はFirefoxも使っているけれども、デフォルトブラウザをSafariに替えてみた。ページ間移動も簡単だし、何よりSafariリーダーが良い感じ。 Safariリーダーを使えば、点滅したりするわずらわしい広告がない、すっきりと整理され...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="500Variety" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="86" label="Mac" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<p>仕事中はFirefoxも使っているけれども、デフォルトブラウザをSafariに替えてみた。ページ間移動も簡単だし、何よりSafariリーダーが良い感じ。</p>

<blockquote><p>Safariリーダーを使えば、点滅したりするわずらわしい広告がない、すっきりと整理されたレイアウトでサイトが表示されます。</p></blockquote>

<p class="origin"><cite><a href="http://www.apple.com/jp/safari/whats-new.html" title="アップル - Safari - MacとWindowsパソコンのためのSafariの新機能。">アップル - Safari - MacとWindowsパソコンのためのSafariの新機能。</a></cite></p>

<p>これさえあれば広告たっぷりのウェブサイトも読みにくい3カラムのサイトでも平気！</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="MacのSafariリーダー" src="http://atstyle.biz/blog/img/mac-reader.jpg" width="500" height="380" class="mt-image-none" style="" /></span></p>

<p>テーマのページを表示してみたらヘッダーやサイドバー・フッターはもちろん「規約」などの「とりあえず今は読まなくてもいい部分」はスッキリと省略されている。</p>

<p>iPhoneにも！</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="iPhoneのSafariリーダー" src="http://atstyle.biz/blog/img/iphone-reader.jpg" width="500" height="750" class="mt-image-none" style="" /></span></p>

<p>便利です。</p>]]>
      
   </content>
</entry>

<entry>
   <title>福岡でCSS Nite redux, Vol.5 が開催されます</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2011/10/26/2319/" />
   <id>tag:atstyle.biz,2011:/blog//1.1203</id>
   
   <published>2011-10-26T14:19:29Z</published>
   <updated>2011-10-26T14:32:09Z</updated>
   
   <summary>「Dreamweaver CS5.5によるスマートフォン対応サイトの実装」と題してレスポンシブWebデザインとjQuery Mobileについてのセッションが行われます。 CSS Nite redux, Vol.5  powered by ...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="500Variety" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="109" label="CSS Nite" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<p>「Dreamweaver CS5.5によるスマートフォン対応サイトの実装」と題してレスポンシブWebデザインとjQuery Mobileについてのセッションが行われます。</p>

<p><a href="http://cssnite.jp/redux/vol05f/">CSS Nite redux, Vol.5  powered by デジタルハリウッド福岡校（2011年11月25日開催）</a></p>

<dl class="info">
<dt>イベント名</dt>
<dd>CSS Nite redux, Vol.5<br>powered by デジタルハリウッド福岡校</dd>
<dt>日時 </dt>
<dd>2011年11月25日（金）19:00-20:50（開場は18:45）</dd>
<dt>会場</dt>
<dd>デジタルハリウッド福岡校 セミナールーム<br>福岡市中央区天神1-7-11イムズ11Ｆ</dd>
<dt>定員</dt>
<dd>45名</dd>
<dt>出演</dt>
<dd>鷹野雅弘（スイッチ）</dd>
<dt>主催</dt>
<dd>CSS Nite実行委員会</dd>
<dt>特別協力</dt>
<dd>デジタルハリウッド福岡校</dd>
<dt>協力</dt>
<dd>CGFM、マイナビ、サイバーガーデンbiz、サイボウズ</dd>
<dt>参加費</dt>
<dd>事前決済：1,500円（PayPalのみ）<br>当日決済：2,000円</dd>
</dl>

<p>11月17日は「<a href="http://atstyle.biz/blog/archives/2011/09/27/1146/">Movable Type で地方から攻めるWeb制作ビジネス戦略とスマートフォン対応サイト制作ノウハウ伝授セミナー</a>」もあるし、これでスマートフォン対応はバッチリかも？</p>

<p><a href="http://cssnite.jp/redux/vol05f/"><img src="http://cssnite.jp/images/CSSNiteRedux-5-hakata-banner.gif" alt="CSS Nite redux, Vol.5  powered by デジタルハリウッド福岡校（2011年11月25日開催）" width="160" height="160"></a></p>

<p>定員が45名と少人数なのでお早めに...</p>]]>
      
   </content>
</entry>

<entry>
   <title>エックスサーバーのFastCGIを設定してみた</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2011/10/25/0055/" />
   <id>tag:atstyle.biz,2011:/blog//1.1202</id>
   
   <published>2011-10-24T15:55:26Z</published>
   <updated>2011-12-10T16:55:51Z</updated>
   
   <summary>エックスサーバーが「FastCGI」に対応しました。 この度エックスサーバーでは、CGI/PHPのCPU負荷軽減、高速実行が可能となる「FastCGI」に対応しました。 また、PHPプログラムにてFastCGIのご利用がサーバーパネルから簡...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="100MovableType" scheme="http://www.sixapart.com/ns/types#category" />
   
      <category term="400@Style Web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="6" label="MovableType" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="24" label="Product" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<p><a href="http://px.a8.net/svt/ejp?a8mat=1HS3QU+LGDU+CO4+61JSI">エックスサーバー</a><img width="1" height="1" src="http://www10.a8.net/0.gif?a8mat=1HS3QU+LGDU+CO4+61JSI" alt="">が「FastCGI」に対応しました。</p>

<blockquote><p>この度エックスサーバーでは、CGI/PHPのCPU負荷軽減、高速実行が可能となる「FastCGI」に対応しました。<br>
また、PHPプログラムにてFastCGIのご利用がサーバーパネルから簡単におこなえる「PHP高速化設定(FastCGI化)」機能を追加しました。</p></blockquote>

<blockquote><p>また、CGIプログラムにおきましても、FastCGI対応プログラムのご利用により、FastCGI化が可能です。Movable Typeは標準でFastCGIに対応しており、FastCGI化の設定を行うことで、CPU負荷軽減や動作の高速化を図ることが可能です。</p></blockquote>

<p class="origin"><cite><a href="http://www.xserver.ne.jp/news_detail.php?view_id=1154" title="CGI/PHPの負荷軽減、高速実行が可能となる「FastCGI」対応および「PHP高速化設定(FastCGI化)」機能追加のお知らせ">CGI/PHPの負荷軽減、高速実行が可能となる「FastCGI」対応および「PHP高速化設定(FastCGI化)」機能追加のお知らせ</a></cite></p>

<p>早速、以下を参考に設定を行った。</p>

<ul>
<li><a href="http://www.xserver.ne.jp/man_server_php_fastcgi.php">FastCGIについて</a></li>
<li><a href="http://www.xserver.ne.jp/man_server_php_rapid.php">PHPの高速化設定とは</a></li>
</ul>

<p>再構築は記事490件で40秒から55秒程度。従来と変わりなさそうですが、検索が速い！サイドバーのタグクラウドでお試しください。</p>

<p><a href="http://px.a8.net/svt/ejp?a8mat=1HS3QU+LGDU+CO4+6AC5D">
<img width="350" height="240" alt="エックスサーバー" src="http://www29.a8.net/svt/bgt?aid=090330870001&amp;wid=001&amp;eno=01&amp;mid=s00000001642001056000&amp;mc=1"></a>
<img width="1" height="1" src="http://www11.a8.net/0.gif?a8mat=1HS3QU+LGDU+CO4+6AC5D" alt=""></p>]]>
      
   </content>
</entry>

<entry>
   <title>Mac mini（OS X 10.7.2 Lion）へMovable Typeインストール完了</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2011/10/17/1222/" />
   <id>tag:atstyle.biz,2011:/blog//1.1201</id>
   
   <published>2011-10-17T03:22:54Z</published>
   <updated>2012-01-27T14:50:35Z</updated>
   
   <summary>iOS 5に伴い、現在のメインマシン Mac miniもOS X 10.7.2へのアップデート。 「iCloudですべてのデバイスが繋がった、快適！」と喜んでばかりはいられない。Movable Type用のローカル環境を再度構築しないといけ...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="400@Style Web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="116" label="MAMP" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="86" label="Mac" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="6" label="MovableType" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<p>iOS 5に伴い、現在のメインマシン Mac miniもOS X 10.7.2へのアップデート。</p>

<p>「iCloudですべてのデバイスが繋がった、快適！」と喜んでばかりはいられない。Movable Type用のローカル環境を再度構築しないといけない。<br>
<a href="http://atstyle.biz/blog/archives/2011/07/30/1707/" title="LionにMovable Typeをインストール">前回の手順</a>でインストールしてみたがエラーとなる。もう一度やってみたが同じ。</p>

<p>以下を参考にMacPortsとインストールしたものを全て削除。</p>

<p><a href="http://d.hatena.ne.jp/navyfox_sh/20110730/1312035511" title="MacPorts 2.0がリリースされていた - use No::Name;">MacPorts 2.0がリリースされていた - use No::Name;</a></p>

<h3>インストールの手順（覚書）</h3>

<p>MAMPのダウンロードとインストール</p>
<ul><li><a href="http://www.mamp.info/en/index.html">MAMP: Mac, Apache, MySQL, PHP</a></li></ul>
<p>MacPortsのダウンロードとインストール</p>
<ul><li><a href="http://www.macports.org/">The MacPorts Project -- Home</a></li></ul>
<p>MacPortsの初期化</p>
<pre class="prettyprint"><code>echo 'export PATH=$PATH:/opt/local/bin:/opt/local/sbin/' &gt;&gt; ~/.bashrc
echo 'export MANPATH=$MANPATH:/opt/local/man' &gt;&gt; ~/.bashrc
echo 'source ~/.bashrc' &gt;&gt; ~/.bash_profile
sudo port -d selfupdate
sudo port -d sync</code></pre>
<p>ImageMagickなどのインストール</p>
<pre class="prettyprint"><code>sudo port install ImageMagick +perl</code></pre>
<p>PerlのパスをMacPortsのインストールディレクトリへ変更</p>
<pre class="prettyprint"><code>cd /usr/bin/
sudo mv perl perl.bak
sudo ln -s /opt/local/bin/perl /usr/bin/perl</code></pre>
<p>DB関連モジュールのインストール</p>
<pre class="prettyprint"><code>sudo port install p5-dbi
sudo port install p5-dbd-mysql
sudo port install p5-dbd-sqlite
sudo port install p5-dbd-sqlite2</code></pre>
<p>オプションモジュールのインストール</p>
<pre class="prettyprint"><code>sudo port install p5-gd
sudo port install p5-crypt-dsa
sudo port install p5-archive-zip
sudo port install p5-xml-atom
sudo port install p5-mail-sendmail</code></pre>
<p>FTPクライアントを使って.htaccessを追加</p>
<pre class="prettyprint"><code>Options +ExecCGI
AddType application/x-httpd-cgi .cgi .pl
</code></pre>

<p>「mt-check.cgiが見つかりませんでした。」と表示されたのでp5-libwwwをインストール</p>
<pre class="prettyprint"><code>sudo port install p5-libwww-perl</code></pre>

<p>画像のアップロードでエラーが発生するのでGDに変更。mt-config.cgiに追加</p>

<pre class="prettyprint"><code>ImageDriver GD</code></pre>


<p>ものすごく時間かかりましたが無事完了。</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="Mac miniにインストールしたMovable Type" src="http://atstyle.biz/blog/img/lion_mt.jpg" width="500" height="373" class="mt-image-none" style="" /></span></p>]]>
      
   </content>
</entry>

<entry>
   <title>Google アナリティクスにリアルタイムがやってきた</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2011/10/07/2319/" />
   <id>tag:atstyle.biz,2011:/blog//1.1200</id>
   
   <published>2011-10-07T14:19:06Z</published>
   <updated>2011-10-07T16:02:58Z</updated>
   
   <summary>9月30日に以下のURLよりGoogle アナリティクス リアルタイムの早期申込を行った。 https://services.google.com/fb/forms/realtimeanalytics/ 本日利用できるようになった。 ただ、...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="500Variety" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="57" label="Google" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<p>9月30日に以下のURLよりGoogle アナリティクス リアルタイムの早期申込を行った。</p>

<p><a href="https://services.google.com/fb/forms/realtimeanalytics/">https://services.google.com/fb/forms/realtimeanalytics/</a></p>


<p>本日利用できるようになった。</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="Google Analytics リアルタイム" src="http://atstyle.biz/blog/img/google_analytics.png" width="500" height="371" class="mt-image-none" style="" /></span></p>

<p>ただ、現在Google AppsのアカウントではなくGoogle+で使っている個人アカウントなのでChromeだけでログインすることになる。</p>]]>
      
   </content>
</entry>

<entry>
   <title>【福岡開催】Movable Type で地方から攻めるWeb制作ビジネス戦略とスマートフォン対応サイト制作ノウハウ伝授セミナー</title>
   <link rel="alternate" type="text/html" href="http://atstyle.biz/blog/archives/2011/09/27/1146/" />
   <id>tag:atstyle.biz,2011:/blog//1.1199</id>
   
   <published>2011-09-27T02:46:45Z</published>
   <updated>2011-09-27T03:04:08Z</updated>
   
   <summary>福岡でMovable Type関連のセミナーが行われます。 Movable Type で地方から攻めるWeb制作ビジネス戦略とスマートフォン対応サイト制作ノウハウ伝授セミナー 福岡では2006年6月に【Web2.0セミナー】という今では「ち...</summary>
   <author>
      <name>@Style</name>
      <uri>http://atstyle.biz/</uri>
   </author>
   
      <category term="100MovableType" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="6" label="MovableType" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://atstyle.biz/blog/">
      <![CDATA[<p>福岡でMovable Type関連のセミナーが行われます。</p>

<p><a href="https://www.sixapart.jp/seminar/sa/2011/09/20-1223.html" title="Movable Type で地方から攻めるWeb制作ビジネス戦略とスマートフォン対応サイト制作ノウハウ伝授セミナー">Movable Type で地方から攻めるWeb制作ビジネス戦略とスマートフォン対応サイト制作ノウハウ伝授セミナー</a></p>

<p>福岡では2006年6月に【<a href="http://atstyle.biz/blog/archives/2006/06/21/2255/" title="Web2.0セミナー">Web2.0セミナー</a>】という今では「ちょっと懐かしい」タイトルで当時シックス・アパートの平田さんが講演されたセミナーに参加したことがあります。レンタルサーバーの会社主催でMT3.3リリース直前だったことを覚えています。</p>

<h3>概要</h3>

<dl class="info">
<dt>開催日時</dt>
<dd>2011年11月17日（木）13:30～17:00（13:00受付開始）</dd>

<dt>セミナー名</dt>
<dd>Movable Type で地方から攻めるWeb制作ビジネス戦略とスマートフォン対応サイト制作ノウハウ伝授セミナー</dd>

<dt>場所</dt>
<dd>天神クリスタルビル 3F Aホール</dd>

<dt>住所</dt>
<dd>福岡市中央区天神4-6-7</dd>

<dt>参加費</dt>
<dd>無料（事前のお申し込みが必要です）</dd>

<dt>定員</dt>
<dd>100名</dd>

<dt>主催</dt>
<dd>株式会社スカイアークシステム、アイデアマンズ株式会社、シックス・アパート株式会社</dd>

<dt>共催:</dt>
<dd>Japan Perl Association、エムロジック株式会社</dd>
</dl>

<h3>スケジュール</h3>

<ol>
<li>「Perlの可能性と開発ロードマップ」
<dl class="info">
<dt>講演者</dt>
<dd>一般社団法人Japan Perl Association<br>
代表理事　牧　大輔</dd>
</dl>
</li>

<li>「Movable Type 5 と jQuery Mobile でつくるマルチデバイス対応サイト」
<dl class="info">
<dt>講演者</dt>
<dd>シックス・アパート株式会社<br>
執行役員製品企画担当　金子　順
</dd>
</dl>
</li>

<li>「講演タイトル未定」
<dl class="info">
<dt>講演者</dt>
<dd>株式会社スカイアークシステム<br>
代表取締役社長　小林　晋也</dd>
</dl>
</li>

<li>「Movable Typeによるスマートフォンサイトの制作とスマートフォンオプション」
<dl class="info">
<dt>講演者</dt>
<dd>アイデアマンズ株式会社<br>
代表取締役社長　宮永　邦彦</dd>
</dl>
</li>

<li>「iPhne/androidネイティブアプリ開発入門」
<dl class="info">
<dt>講演者</dt>
<dd>エムロジック株式会社<br>
取締役　関根　元和</dd>
</dl>
</li>
</ol>

<p>なんとイケメン揃い（関係ないか...）。福岡・近県の方、参加いかがですか？</p>
]]>
      
   </content>
</entry>

</feed>

