tsuka-time - レスポンシブWordpressサイト

● profile ● ログイン

《イラスト●open●close》

レスポンシブWordpressサイト

このページはレシポンシブを目指したワードプレス別サイト用メインビジュアルのテストページです。上部のメニューをクリックする事で下部のコンテンツが反応して切り替わる仕組みです。他のjQueryとも干渉するので、定義付けが面倒ですが…。それ以上に工夫したいのは、レスポンシブ仕様へのこだわり…。しかも画像部分だけでなく、div要素そのものを可変したいので、それなりの効果がありそうな。ワードプレスでは、左側にメニューイラストを配置して右側にコンテンツとして、その中からこのjoomla!にリンクさせる予定です。ちなみにwordpressはblogから発展しているので、今まで使ってなかったのだが、レスポンシブを考えた場合フレームワークがややシンプルな分親和性が高そうなので今回試しに採用してみた。

ワードプレサイトhttp://tesign.sakura.ne.jp/wp/

【ipadminiとipadair、MacbookAir端末のサイズ比較】
macbookairwhite

●Apple iPadminiレティーナ
iPadminiのサイズは、高さがMacbook-Airと同じ、そして、iPad1/2/3rdは、横のサイズがMacbook-Airの高さと同じという関係。Macbook-airとiPadサイズになると若干電車内だと肘が隣人に当たるというか脇を締めてやらないとダメ。それ以前にiPadは重い！それならいっそのことMacbook-Airを持ち出した方が、充電も持つし、PCなんでofficeやadobe等アプリの制約もなく、会社の作業が丸ままで来てしまう。iPad miniは、そう意味で中間的で使い勝手はいいのだ。
ただ機能的には、iOS7で安定してるし、OSに依存してる分iPhone４以降からの目新しさはない。5cのポジションが一番不明だったが（笑）
スペック的にもそこそこ早いだろうし画像も綺麗なんだろうが…。まぁ、不満がないということはこの市場もしばらく安定期に入るだろうな。Appleは、インテル以前のパワーMac世代が一番面白かった。iPhoneのおかげで、Macのシェアも増えたみたいだし、改めてみたら、Windowsよりも立ち上がりなんかは早く扱い慣れしたら簡単。
しかもwinは各メーカーがマシンを作ってるから復元が超めんどくさい。Mac OSはタイムマシンで一気に復元や再構築できるのを皆実感してんだろう。ただ、Appleは、office系の付属は標準でインストールされませんその分割高かな。とりあえずスペック表転記。
「Retina ディスプレイ」を搭載した機種は、そうではない旧モデルと比較して、画面の面積はそのままで、解像度が2倍になった。図はピクセル数を比較するもので、実際の画面の「面積」ではない。画面の解像度（ppi）は、iPhone/iPod touchの方が大きく高精細になる。

<!--
$(function() {
  $('#swap').cycle({
    fx:'scrollLeft',　/* 縦クスロールはscrollDown */
    speed:'2500',　/* スライドが切り替わるアニメーション動作速度 */
    timeout:8500,　/*スライド1つ1つの表示時間を指定 */
　　　　　　sync: 1,　/*消えるアニメーションと現れるアニメーションを同時に実行*/
    pager:'#menu',
    pagerEvent:'mouseover',
    pauseOnPagerHover: true,
    pagerAnchorBuilder:function(idx,slide) {
    return'#menu li:eq('+(idx)+') a';
    }
  });
  $('#swap').mouseover(function(){
    $('#swap').cycle('pause');
    });
  $('#swap').mouseleave(function(){
    $('#swap').cycle('resume');
    });
});
//-->

またまた、googlechromeに不都合が…webフォントの描画不可に続き、今度はjavascriptのスクロールが残像が残った感じでプレビュー出来ない。何故だ〜。

wordpress使用プラグイン

wordpressのプラグインは左バーメニュー＞プラグイン＞新規追加ページから、検索窓に名前を入力してインストールさせる事ができる。インストール後は有効化ボタンを押すとプラグインにより左バーに出たり、設定項目の中に追加されたりし、おおまかなセッティングが出来る様になりさらに細かいCSS等のカスタマイズは編集のページとなる。もちろん通常通りプラグインの開発ページからダウンロードし解凍した後にFTPでアップロードする事も可能だ。通常プラグインはwp-content＞pluginsの中に格納される。投稿ページや固定ページ、その他各部分にプラグインを反映させる場合はウィジェットに項目が出てたり、ショートコードが設定画面で出てくるので掲載したいページに貼付けてやる。

WordPress 3.8.1プラグイン

SEO対策	All In One SEO Pack	SEO関連の各種設定を行うことができるプラグイン。記事毎に「title」や「description」を設定したり「canonical」の設定などを行うことができる。
3Dタグクラウド	WP-Cumulus	タグクラウドが3D空間で回転表示するプラグインです。ノーマルでは文字化けするので日本語パッチを当てます。使い方はウィジェットから追加できます。
パンくずリスト	Breadcrumb NavXT	パンくずリストはカテゴリ―やタグ、日付などをベースに表示させる事ができる。
ヘッダータグ読み込み	Header and Footer	本来はheader.phpに設定する各種機能をプラグインにより格納させ管理させるプラグインです。これで画面が真っ白にならないね。
トゥイッター＆Facebook	Simple Share Buttons Adder	TwitterやFacebookの共有ボタンを簡単につけることができる意外とオシャレなパターンが入っているので使い勝手いいです。
最新記事埋め込み	What's New Generator	新着情報の日付、タイトルは自動的に表示されます。また、タイトルをクリックすると該当のページが開く属に言う新着コラムです。ウィジェットに出てきます
お問い合わせフォーム	Contact Form 7	問い合わせを行う場合に使用するメールフォーム。左バーの“お問い合わせ”と設定画面がでてきます。
画像プレビュー	Shadowbox JS	似たようなものがある中で、しっかりどの媒体でも動いて軽く、シンプルで、使いやすくて、ちょっとかっこいい。rel="stylesheet"と要素に追加する。
管理画面カスタマイズ	Ultimate TinyMCE	設定画面は左バーに露出します。チェックしていくと投稿画面に反映される。
ソースピックアップ	WP SyntaxHighlighter	SyntaxHighlighterというライブラリのWordPressプラグイン版。
ファビコン挿入	Favicon Rotator	このプラグインは、なくても良かったかも…
スクロールでページが増える	Infinite Scroll	スクロールしてページ下部まで移動すると、次のページを自動的に読み込んで表示するjインフィニティスクロールという機能でTwitterや、Facebookでおなじみ
サイトマップ	PS Auto Sitemap	結構色々なパターンが選べて重宝しそう。`<!-- SITEMAP CONTENT REPLACE POINT -->`と希望ページを埋め込むだけ。
トップに戻る	Back To Top	これもトップに戻る素材が色々選べる。おおまかな設定と細かいCSS編集が可能
他のサイトの新着記事を取得する	WP-RSSImport	他のサイトで発行しているRSSを収集して新着として表示する。

コメントを追加

お名前:
メールアドレス:
Webサイト:
件名:
コメント:

yvComment v.1.19.0

レスポンシブWordpressサイト

■ハンドルとハンドルノブもチェンジ！

wordpress使用プラグイン

WordPress 3.8.1プラグイン

コメントを追加