WordPressのTwenty Elevenテーマ解説まとめ

11月 22 2011

worrdpressのTwenty Elevenをカスタマイズしたいのですがいまいち内容が解っていないため見かけた解説のサイトをまとめることにしました。順次追加します。

■小粋空間

WordPressのTwenty Elevenテーマ解説:ヘッダー (header.php):その1
WordPressのTwenty Elevenテーマ解説:ヘッダー (header.php):その2
WordPressのTwenty Elevenテーマ解説:メインインデックスのテンプレート (index.php)

WordPress3.2 テーマ「Twenty Eleven」 サイトタイトルの表示・非表示について

■8Bit

Twenty Eleven のレスポンシブ構造を図解してみた

Twenty Eleven のファイルを分類してみたよ

WordBench 東京勉強会 in KDDI でプレゼンしたこと Reloaded

■youtube動画

レスポンシブデザインをつくろう

WordPress 3.2のデフォルトテーマTwenty Eleven
How to create Twenty Eleven Child Theme WordPress 3.2 Tutorial

Add Logo to Twenty Eleven Theme

テーマ「Twenty Eleven」は iPad, iPhone に対応している

 

No responses yet

地震に役立つアプリ

4月 14 2011

計画停電になったり自宅待機になったり不安定な3月をすぎ、
さあ!じっくり打ち合わせ☆と、始めたとたんに揺れ来るコールがなってみんなそわそわ、
そのまま、なぜか地震のお話にwなんてことはありませんか?

そんな中教わったiPhoneアプリやあれやこれや、出先でも便利なツール、せっかくなのでここにまとめておくことにしました。

揺れ来るコール(無料)
電車に乗ってるといっせいにみんなのアラームがなって、きた!地震!
なんて体験の方も多いのではないでしょうか?
docomo、auなどの通常の携帯電話なら緊急地震速報が鳴るが、iPhoneだとこの警告を受けることができない
というのでiPhoneユーザーに有名なこのアプリ。
通知を受け取る地震の震度設定と予測地点を設定するだけです。

なまず速報 β(無料)

Androidユーザーに重宝されているのが『なまず速報 β』。地震速報をプッシュ通知してくれるアプリ。
これ最近まで知らなくてtwitterで「うちのなまずが、、」なんてつぶやきをなんだろうと思っていたんですがこのアプリだったんですね。
まだβ版だそうですが、余震が続いているので次が出るのでは?と期待。

ちなみに、この地震速報系アプリの仕組みはこちらの記事に → 手放せなくなった緊急地震速報 【仕組みを理解して正しく身構える】

●ご近所ナビ – Newton Japan Inc.(iPhone)

ご近所ナビは、近くにある様々な情報ナビゲーションしてくれます。たとえば飲み物を買おうとコンビニを探したいとき、近い順に一覧表示し、それを地図上にマークしてくれその場所への方角を教えてくれます。
地震当日は電車がとまり、都内から近県まで歩いて帰宅した人も多いのではないでしょうか?
そんな時こんなナビで方向や目印の建物が簡単に分かると便利かもしれないですね。

ツブエキ – Thumbs Apps

駅、路線、そして街の「なう」を普段使っているツイッタークライアントと同じように見ることができるiPhoneアプリ。
気になるあの駅、あの駅の情報が手に入るかも。

「放射線チェッカー」(無料)
なんと都道府県別の放射線量と水道水の放射性物質量をチェックできるのだそうです。Andoroidアプリ。

とココまで書いてまだネタはあるのですが一休み。随時書き足しておこうと思います。

なんだかWEBサイト作成に全く関係ないネタじゃん!と思われるでしょうがさにあらず。

打ち合わせでまったく初めての方にお会いしても、地震どうでしたか?と始めて、アプリの話なんかすればとってもスムーズに話に入れることまちがいなしなのです。

と強引に?WEBネタにつなぎまして。

 

◎災害時に役立つAndroidアプリ

http://plusd.itmedia.co.jp/mobile/articles/1103/25/news056.html

http://plusd.itmedia.co.jp/mobile/articles/1103/23/news064.html

http://k-tai.impress.co.jp/docs/news/20110322_434349.html

◎おすすめAndroidアプリの紹介サイト

http://androider.jp/

No responses yet

CMSで記事更新の際のデザインのガイドライン

3月 01 2011

CMSでサイトを構築し新着記事はクライアントサイドで更新する場合

社内にWEBデザイナーがいたりデザインの決まりがある場合は別ですが、

そうでない場合もあるかと思います。

そんなとき、誰もが(?)納得する更新時のデザインのガイドラインのようなものがないかと探しているのですがちょうどいいものがうまく見つかりません。

ホームページ担当者が知らないと困るWEBサイトリニューアルの常識から↓

更新時のルールの一例としてほんの一部引用すると

ページタイトルのつけ方 ユーザにわかりやすいページタイトルのつけ方を定義します。特に第二階層や第三階層など階層が深くなった場合に、どのようにページタイトル名をつけるか統一のルールを設定しておきます
文字サイズや文字コード改行コードなど ユーザが読みやすいようにフォントのサイズを設定する必要があります。また扱う文字コードや改行コードなども設定しておきましょう
ワーディングの統一 担当部署ごとに使用するワードが違うとユーザーを迷わせてしまう可能性があります。使用頻度の高いワードは、統一のルールを作っておくといいでしょう。

などとデザイン以外にもルールを決めていかないといけない事柄の、さまざまな課題が見えてきます。

しかし実際更新担当者が変わるとルールが変わってしまうことも、ままあるのではないでしょうか?

そしてそして先日見かけた記事には

サイトのデザインは54%が「好みで決定」、27%が最後に上司にひっくり返され、90%は消費者の意見を参考にせず/デザイン決定プロセス調査

なんて記事も。

アートディレクターが決めている割合は5.7%しかないんですね。

この記事は結構反響があったようでTwitterの反応はこんなにあったらしい →

Twitterの反応

デザインって案外主観で決まっている?
ガイドラインを決めてスムースに運用・更新するためには、いろんなハードルがあるのかもしれないですね。

ちなみに
「デザイン決定プロセスで「困ったこと」「おかしいと感じたこと」を聞いたところ、最も多かったのは直しの手間という回答だったが、「上司が最後にひっくり返す」「言うことがコロコロと変わる」といった意見も多かった」

と記事にあります。

やっぱりどこでも多いんだなぁと、改めて感じたのでした。

No responses yet

Bind4 for weblifeの使い方

2月 28 2011

TwitterでBind4の話をしていた時に教えていただいたサイトです。

Bind4 for weblifeの使い方

良く見ると個人で運営しているようですが、充実してる☆

Bind4でサイト作成の際には役に立ちそうですね。

ちなみに運営しているmutsuさんのプロフィールをクリックするとYahoo ログールというサイトに。

どんなサイトか調べてみました → Yahoo ログールって?

ちなみに説明によると

ブログパーツをはり付けると、ブログ読者の詳しい情報(性別、年代、職業、居住地など)を取得できます。そこからあなたのブログを人気ブログへ変えるヒントが得られるかも!

いつ、誰が、どこから来てどの記事を読んだのか……

Yahoo!ログールであなたのブログの読者が“見える”ようになります。

なぬぬ、居住地はともかくどうやって性別、年代まで判定してるのだろう?

果たして私の性別、年齢判定はいかに?

興味となぞは深まって行くのでした。

No responses yet

【wordpress】クライアントがCMSで楽に更新できるようにする一工夫

2月 27 2011

Wordcamp Fukuoka 2011 行ってみたいなと思いつつなにぶん遠方。

どんな内容だろう?と気にしていたら講演の内容をブログにアップして下さっていました。

感謝☆

というので そのブログがこちらです

→ クライアントがCMSで楽に更新できるようにする一工夫

ちょうど自分にとってタイムリーな内容でとても興味深かったです。

それにしても記事内でスライドショーとは思いも付きませんでした。

写真を見ると立ち見まで。Wordcamp Fukuoka大盛況ですね。

No responses yet

【WordPress】プラグインCimy Swift SMTPがうまく動かない?

2月 19 2011

Gmaiなどを使うためSTMPを変更するのに便利なプラグイン Cimy Swift SMTP

このプラグインが動いたり動かなかったり同じサーバーでも挙動が色々だったりで
検索すると同じようなケースがあちこちに書かれているのですがいまいち原因不明。

この件に関しては解決したらまた追記しておきたいと思います。

ちなみにプラグインの解説はこんな記事がありました。
WordPressでSMTPサーバーへ直接メール送信する(GMailを使う)

No responses yet

「千と千尋の神隠し」あなたが一番好きな登場人物は?

2月 19 2011

「千と千尋」に出てくる登場人物で一番人気は絶対「カオナシ!」と主張する知人と意見が分かれ興味をもったので
ためしにアンケートを作ってみました。
使ったのは無料のツールが豊富な忍者のサービス
無料でHPを作れたりアクセス解析やアンケートが作れたりサービス充実。

よく「全部無料でHPを作る!」なんて感じの本で紹介されていたりしますよね。

というわけでアンケート☆

もし良かったら投票お願いします(人ゝω・)

うわ~~アンケート用紙ながい。。
どこかで設定変えられるのかな?

ちなみに私が好きなのはハク。

最初に一票を投じることにします☆

ちなみに結果はアンケートの一番下の”結果”をクリックすると見ることができます。

No responses yet

【WordPress】カテゴリー別RSS表示

2月 19 2011

wordpressのカテゴリー別RSSを表示しようと思って検索。

出てきたBlogを見ながらやったらどうもうまく出ない。

初心にかえってWordpressのCodexへ → WordPress Feeds
あれあれ

http://example.com/category/categoryname/feed

 
で簡単に出るではありませんか☆ いつからこうだったのだろう?wordpressもバージョンによって色々記述の仕方が変わっているようです。

ちなみに今回初めてSpryなるものを使って見ました。
SpryはAdbeから出ているAjaxのフレームワーク
DreamWeaverのCS3から入っていたようですがCS3持っていないのでダウンロード

このSpryを使ってRSSを表示するのはものすごく簡単でした。

Spryのライブラリから

  1. xpath.js
  2. SpryData.js

を読み込んだら

1
2
3
4
5
<script type="text/javascript" src="js/spry/xpath.js"></script>
<script type="text/javascript" src="js/spry/SpryData.js"></script>
<script type="text/javascript">
        var RssData = new Spry.Data.XMLDataSet("[取得するRSSのURL]“, “[記事が収まっているXMLパス]“);
</script>

を記入して表示させたいところに

1
2
3
4
5
6
7
                <tbody>
                    <tr spry:repeat=”RssData”>
                        <td><a href=”{link}“>{title}</a></td>
                        <td>{category}</td>
                        <td><div>{pubDate}</div></td>
                     </tr>
               </tbody>

とたとえばこんな感じに記述するだけで表示されます。
などと喜んで書いていますが今頃知ったのはもしかして私だけかも・・(汗

余談ですが一字間違って検索したらボーイズラブゲームブランドSpray(スプレー)のオフィシャルサイトにたどり着きました☆

No responses yet

CMS導入でウェブマスターと現場Web担当者の間に冷戦勃発

2月 14 2011

CMS導入に関する面白い記事をWEB担当者フォーラムで見つけました。
CMS導入でウェブマスターと現場Web担当者の間に冷戦勃発!なぜ? どうすればいい?
CMSを導入することで記事更新が手軽になる一方、入力のデザインやフォーマットの統一性を守るのが難しくなり、かといって入力テンプレートを沢山作るのはコストや手間がかかりすぎる、といった問題を扱った記事です。

普段は気に留めていませんがいざ一緒に入力するとなると
デザインや色の好みというのは案外人によって食い違っているもの。

誰しも更新できる(しかもデザインの自由度もある程度ある)
更新者は複数人
となった場合、全体にデザインの統一感を持たせるのは難しいという一面も。

CMS導入で一気になんでも解決☆ともいかない一例といえそうです。

No responses yet

【WordPress】Fckediterのカスタマイズ

2月 12 2011

クライアントが記事投稿するときFckediterを入れる場合も多いと思いますが、微妙に出来ないことがあります(たとえば文字の色や背景色は変えられるけど色が限られていたり、文字に囲みの線を入れられなかったり)
また毎回同じフォーマットで入力する場合はそのつどエディタで同じに装飾するのが面倒な場合もあるでしょう。

そんな時に良い方法がないかと思って考えていて思いついたのがプラグインFckediterのカスタマイズ。

なんとよくよく眺めているとFckediterではテンプレートという機能があってそこで定型のデザインを入力できる模様。
Fckediterのテンプレート解説

そこでこのテンプレートのデザインを追加してしまおうと考えてtemplateファイルの場所を探しました。

発見☆

ファイルのパスは

/wp-content/plugins/fckeditor-for-wordpress-plugin/ckeditor/plugins/templates/templates

ここにテンプレートデザインがいました。

default.jsはどうもこのテンプレートの雛形らしい。ちなみにテンプレートのサンプルはこの3つ

ソースはこんなでした。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
CKEDITOR.addTemplates('default',{imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath('templates')+'templates/images/'),templates:[{title:'Image and Title',image:'template1.gif',description:'One main image with a title and text that surround the image.',html:'
<h3><img width="100" height="100" align="left" style="margin-right: 10px;" />Type the title here</h3>
Type the text here

'},{title:'Strange Template',image:'template2.gif',description:'A template that defines two colums, each one with a title, and some text.',html:'
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 50%;">
<h3>Title 1</h3>
</td>
<td></td>
<td style="width: 50%;">
<h3>Title 2</h3>
</td>
</tr>
<tr>
<td>Text 1</td>
<td></td>
<td>Text 2</td>
</tr>
</tbody>
</table>
More text goes here.

'},{title:'Text and Table',image:'template3.gif',description:'A title with some text and a table.',html:'
<div style="width: 80%;">
<h3>Title goes here</h3>
<table style="float: right;" border="1" cellspacing="0" cellpadding="0"><caption style="border: solid 1px black;"><strong>Table title</strong></caption>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Type the text here

</div>
'}]});

というわけでここにデザインを登録。

Fckediter思いがけず便利♪

No responses yet

Older posts »