@Style Web | ブログ | アットスタイル

昨日公開した当ブログのスマートフォン版デザイン。
このデザインを作成するにあたって、ちょっと手を入れたのが、FacebookのLike Boxです。
デフォルトだと固定レイアウトなので、スマートフォン版に実装するにあたり、CSSのみで可変レイアウトにしています。
要望もあったので、実装方法を公開しちゃいます。

Facebook Like Boxを可変レイアウトにして横幅ピッタリにするカスタマイズCSS | [M] mbdb

.fbcomments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fbcomments iframe[style],
.fb_iframe_widget span{
    width: 100% !important;
}

ありがとうございました！うまく表示できたので、調子に乗ってTwitterのウィジェットも可変レイアウトにしてみた。

#twitter-widget-0 {
	   width: 100%;
}

Posted: @Style; 12:02

アットスタイルのFacebookページ

2012年10月23日

Facebookページ自体は、2011年2月7日に作成し、特にお知らせもしないままRSS Graffitiでブログとテーマの情報を掲載しておりました。

色々あって、Like Box・OGP・インサイトの情報が必要になりましたので、本日皆様にお願いし、めでたく「いいね！」が30を超えました。

最近はブログの更新もあまりできておりませんが、今後ともアットスタイルをよろしくお願いします。

Facebook

Posted: @Style; 23:46

当サイト（及びブログ）にインストールしているプラグイン一覧

2012年9月10日

結局のところ、使用しているのはMT3の頃に購入したMTPaginateだけで、その他は全て標準のプラグイン。

システム

ウェブサイト

ブログ

プラグイン入れなくとも、とりあえずは何とかなります。

Posted: @Style; 22:20

MAMPを使ってMac OS X 10.8 Mountain Lion へMovable Typeをインストール

2012年8月23日

ちょっと遅くなりましたが、Mountain Lionインストールに伴い、ローカルの開発環境も入れ替えました。

以下、覚書

インストールの手順（覚書）

Mac App StoreからXcodeをインストールする

下図のようにXcodeにCommand Line Toolsをインストールする

Xcode

MAMPのダウンロードとインストール

MAMP: Mac, Apache, MySQL, PHP

MacPortsのダウンロードとインストール

The MacPorts Project -- Home

MacPortsの初期化

echo 'export PATH=$PATH:/opt/local/bin:/opt/local/sbin/' >> ~/.bashrc
echo 'export MANPATH=$MANPATH:/opt/local/man' >> ~/.bashrc
echo 'source ~/.bashrc' >> ~/.bash_profile
sudo port -d selfupdate
sudo port -d sync

ImageMagickなどのインストール（＊ここ、1時間くらいかかります！）

sudo port install ImageMagick +perl

PerlのパスをMacPortsのインストールディレクトリへ変更

cd /usr/bin/
sudo mv perl perl.bak
sudo ln -s /opt/local/bin/perl /usr/bin/perl

DB関連モジュールのインストール

sudo port install p5-dbi
sudo port install p5-dbd-mysql
sudo port install p5-dbd-sqlite
sudo port install p5-dbd-sqlite2

オプションモジュールのインストール

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

FTPクライアントを使って.htaccessを追加

Options +ExecCGI
AddType application/x-httpd-cgi .cgi .pl

Posted: @Style; 23:39

ウェブサイトを高速化

2012年6月20日

近頃話題の高速化

アットスタイルでも6月17日クライアント様のサイト（MT5）の高速化対応を行い、納品いたました。

Page Speed

YSlow

表示が1秒以上速くなり、大満足していただきました。

パフォーマンスアップをお考えの方はご相談ください。

Posted: @Style; 17:46

サイトをMovable Typeへ移行中

2012年5月4日

先日、ブログをMovable Type 5.13へアップデートしましたが、本日ウェブサイトを設定いたしました。

トップページはテンプレート、「テーマとテンプレート」以外ページをウェブサイトのウェブページで作成しました。

ウェブページの一覧

今後、「テーマとテンプレート」をブログで構築する予定です。

Posted: @Style; 02:26

フィードのURLが変わりました

2012年5月3日

Movable Type 5.13へのアップグレードに伴いサイトのテンプレート情報とブログで個別に配信しておりましたFeedを/atom.xmlに統一いたしました。

公開を終了したFeed

/rss/news.rdf
/rss/news.xml
/blog/index.rdf
/blog/index.xml
/blog/atom.xml

RSSリーダーのご登録変更をお願いします。

お手数をおかけいたしますが、よろしくお願いします。

Posted: @Style; 00:03

MTOS4.38からMT5.13へアップグレードしました

2012年4月29日

昨日、このブログをMT5.13にアップグレードした。

まずはMTの便利な機能、「ブログの完全バックアップ」と「バックアップしたブログの復元」を利用してデータベースをSQLiteからMySQLに変更。

その後、MT5へのアップグレード。これまでMTOS4.38を使っていたのでMTOS5.13にアップグレードするつもりだったが、なぜだかエラー。MTOSではなくMT5.13を試すとすんなりアップグレードできた。（原因は調べていません）

MT5のライセンスが一つ余っていたので、このままMT5.13を使うことにした。

ウェブサイトは全く利用しておらず、構成やテンプレートをどうするかが悩みどころです。

ウェブサイトのテンプレート

Posted: @Style; 00:36

SoftBank 007Zを解約してau Wi-Fi WALKER DATA08W

2012年4月17日

SoftBank 007Zのメイン回線がBS放送による電波干渉で全く使えなくなった。

田舎なのでイー・モバイルのサブ回線もなかなか繋がらないことが多いのに...これじゃ、全く使い物になりません。

「対策に何年もかかるでしょ」と腹を立ててもしょうがない。あっさりと解約（契約解除料・割賦残債も免除）

WiMaxが使えるau Wi-Fi WALKER DATA08Wを導入した。

au Wi-Fi WALKER DATA08W

家の中ではWiMaxをつかめないけど、外に出ると、快適。早く替えておけばよかった。

Mac
Personal

Posted: @Style; 17:22

google-code-prettifyを使ってみた

2012年1月24日

簡単にシンタックスハイライトが導入できるgoogle-code-prettifyを使ってみた。

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

Quick Tip: How to Add Syntax Highlighting to Any Project

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

利用するファイルは2つだけ

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

HTMLファイルに以下を記述する

<script src="/js/prettify.js"></script>
<script>prettyPrint();</script>

preでマークアップ

<pre class="prettyprint"><code>ここにコードを記述する</code></pre>

Posted: @Style; 00:26

zenback BIZにアップグレードしました

2012年1月3日

12月22日、個人向け無償版のzenbackからzenback BIZにアップグレードいたしました。

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

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

Posted: @Style; 01:05

新年おめでとうございます 2012

2012年1月1日

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

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

平成二十四年元旦

アットスタイル　柳泰久

Posted: @Style; 03:14

Internet Explorer 7への対応も終了いたします

2011年12月22日

先日「当ウェブサイトでのInternet Explorer 6 対応終了」をご案内した後にInternet Explorer 6からのアップデートを促すようie6alert-jsを組み込みましたが、IE6で閲覧した場合にはグローバルナビゲーションにアラートが重なり使いにくくなっておりました。

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

スクリプトは少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックスの中の「9. IE6以下ユーザーにメッセージを表示」を使用させて頂きました。

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

.error {
    background:#84b8c7;
    text-align:center;
    font-size: 87.5%;
    color: #fff;
    padding: 8px 10px;
}
.error span {
    font-weight: bold;
}

IE6と7へのアラート

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

Posted: @Style; 17:36

当ウェブサイトでのInternet Explorer 6 対応終了のお知らせ

2011年11月14日

当ウェブサイトおよびブログにてInternet Explorer 6への対応を終了させて頂きます。

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

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

よろしくお願いします。

Posted: @Style; 00:57

フォーム周りのCSSをいじってみた

2011年11月12日

7月にお問い合わせフォームを編集したが、今回はブログのコメントも一緒にいじってみた。

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

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

.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;
}

コメントフォーム

Blog
CSS

Posted: @Style; 00:55

エックスサーバーのFastCGIを設定してみた

2011年10月25日

エックスサーバーが「FastCGI」に対応しました。

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

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

CGI/PHPの負荷軽減、高速実行が可能となる「FastCGI」対応および「PHP高速化設定(FastCGI化)」機能追加のお知らせ

早速、以下を参考に設定を行った。

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

Posted: @Style; 00:55

Mac mini（OS X 10.7.2 Lion）へMovable Typeインストール完了

2011年10月17日

iOS 5に伴い、現在のメインマシン Mac miniもOS X 10.7.2へのアップデート。

「iCloudですべてのデバイスが繋がった、快適！」と喜んでばかりはいられない。Movable Type用のローカル環境を再度構築しないといけない。
前回の手順でインストールしてみたがエラーとなる。もう一度やってみたが同じ。

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

MacPorts 2.0がリリースされていた - use No::Name;

インストールの手順（覚書）

MAMPのダウンロードとインストール

MAMP: Mac, Apache, MySQL, PHP

MacPortsのダウンロードとインストール

The MacPorts Project -- Home

MacPortsの初期化

echo 'export PATH=$PATH:/opt/local/bin:/opt/local/sbin/' >> ~/.bashrc
echo 'export MANPATH=$MANPATH:/opt/local/man' >> ~/.bashrc
echo 'source ~/.bashrc' >> ~/.bash_profile
sudo port -d selfupdate
sudo port -d sync

ImageMagickなどのインストール

sudo port install ImageMagick +perl

PerlのパスをMacPortsのインストールディレクトリへ変更

cd /usr/bin/
sudo mv perl perl.bak
sudo ln -s /opt/local/bin/perl /usr/bin/perl

DB関連モジュールのインストール

sudo port install p5-dbi
sudo port install p5-dbd-mysql
sudo port install p5-dbd-sqlite
sudo port install p5-dbd-sqlite2

オプションモジュールのインストール

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

FTPクライアントを使って.htaccessを追加

Options +ExecCGI
AddType application/x-httpd-cgi .cgi .pl

「mt-check.cgiが見つかりませんでした。」と表示されたのでp5-libwwwをインストール

sudo port install p5-libwww-perl

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

ImageDriver GD

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

Mac miniにインストールしたMovable Type

Mountain Lionの方は、こちらをどうぞ！「MAMPを使ってMac OS X 10.8 Mountain Lion へMovable Typeをインストール」

Posted: @Style; 12:22

休業のご案内（9月16日・9月17日）

2011年9月9日

謹啓　時下ますますご清栄のこととお喜び申し上げます。

平素は格別のご高配を賜り厚く御礼申し上げます。
さて、誠に勝手ながら下記期間を休業とさせて頂きますのでご案内申し上げます。

休業日: 平成23年9月16日（金）・9月17日（土）

期間中のご質問の対応、テーマの送付などが出来ませんので、17日深夜以降に対応させていただきます。

ご迷惑をおかけ致しますが、ご了承賜りますようお願い申し上げます。

Personal

Posted: @Style; 17:23

Prev« »Next 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | All

インストールの手順（覚書）

インストールの手順（覚書）

Tags