[WordPress]プラグインWPtouchをカスタマイズしてスマホ向けサイトをリニューアルしました！
@Mori2ndです。時間を見つけては少しずつ取り組んでいたブログデザインのリニューアル。スマートフォン向けサイトのモバイルテーマがほぼカタチになりましたので、公開させていただきました！ ブログトップ トップ画面はこのようになっています。 今までのデザインを踏襲しつつ、記事のタイトルとサムネイル画面を並べて、一画面で多くの記事がわかるようになりました。 このあたりはWptouchのデフォルトテーマをもとに、PHPとCSSをカスタマイズしています。 メニューボタンはほとんどデフォルトのまま。カラーを自分のブログに合わせてみました。 記事個別ページ TwitterやFacebook、はてなブックマークのソーシャルボタンをつけて、H2部分も変更しています。 参考にした記事今回のスマホ向けサイトのリニューアルにあたって、いろいろなブログ記事を参考にさせていただきました。 みなさん自分のブログに合わ
![[WordPress]プラグインWPtouchをカスタマイズしてスマホ向けサイトをリニューアルしました！](https://cdn-ak-scissors.b.st-hatena.com/image/square/d950db22e1ebb0b8a363161bc3e046cc03a71f53/height=288;version=1;width=512/https%3A%2F%2Fdelightmode.com%2Fwww3%2Fwp-content%2Fuploads%2Fsmartphone-theme1.png)
WPtouchをカスタマイズしてブログをオリジナルデザインでスマフォ対応させたよ！（カスタマイズ編）
最近布団から出られません。井畑です。 今回は前回の「プラグイン導入編」に引き続き、Wptouchをカスタマイズしてスマートフォン対応させていったのメモ、「カスタマイズ編」を書いていきます。 (※ここからはあまりよく分かっていない素人に毛の生えた僕が、試行錯誤して色々いじくった話なので、実際にWPtouch内を触る際は自己責任でおねがいします！) カスタマイズした点 今回僕がやったことは大きく分けて次の５つです。 テーマを分ける ヘッダー(右上menu)をカスタマイズ タイトルの下の日付・カテゴリーをカスタマイズ 記事にソーシャルリンクをつける PCと同じようなCSSにする 1.テーマを分ける テーマをいじれば、見た目も変わる 乱暴に言うと、WPtouhは「スマートフォンで見たらWPtouch専用のテーマを読み込ませて表示するんだよ！」という設定をするプラグインです。 なので、そのWptou
スマートフォンWPtouch トップページのカスタマイズ
iPhone、Android、Galaxyなどのスマートフォン向けにしてくれるとっても便利で有名なプラグインWPtouch があります。プラグインを有効化してデフォルトでも充分に使えますが、当サイトのようにトップページに固定ページを設けて作成しているサイトにとってはデフォルトではブログのイメージが強く何か物足りません。そこでトップページを新たに作成してみました。 WPtouch をカスタマイズする前の準備 WPtouch をインストールされていない方は、まずWPtouch のプラグインをインストールして有効化しましょう。有効化したらレイアウトを確認してみましょう。もしも手元にスマートフォンがない方はパソコンでスマートフォン画面を確認するをご覧下さい。 WPtouchをインストールしてプラグインを有効化する。 パソコンでスマートフォン画面を確認出来る状態にする。 WPtouchを有効化したス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://knk-n.com/2011/06/27/wptouch-top/