Liner Note

情報(ユーザー中心デザイン・ユーザビリティ)と技術(ウェブプログラミング・ウェブサービス)についてのメモ書き

要約:このサイト上で使用しているブログツール「WordPress」用の1カラムのテーマ "cielo" を公開します

前々からこのサイトのテーマの配布準備作業を進めていましたが、ようやく形になったので一般公開します。ちなみに “cielo” とはイタリア語で空という意味です。

デモサイト

スクリーンショット

ダウンロード
cieloテーマ(約1.2MB)
最終更新日
動作環境
PHP5.2.0以上、WordPress 2.5以上
ライセンス
ライセンスが設定されているリソースはそのライセンスに従ってください。その他は修正BSDライセンスとします

使い方

  1. ファイルをダウンロードしたら解凍してください
  2. 中に入っている/module/config.phpファイルがテーマの設定ファイルですので、指示に従って設定してください
  3. サーバの/wp-content/themes/フォルダに(2)をアップロードしてください
  4. サーバの/wp-content/themes/cielo/cache/フォルダを書き込み可能な状態(パーミッションを0777<rwxrwxrwx>)にしてください
  5. 必須プラグイン一式をダウンロードし、解凍します
  6. サーバの/wp-content/plugins/フォルダに(4)をアップロードしてください
  7. 管理画面からプラグインを有効化します
  8. 管理画面からテーマを有効化します
  9. 記事一覧ページなど特殊なページを作成します。投稿 → ページ から以下のページを作成してください。中身はテンプレートから自動的に読み込まれます
    • ポストスラグ名:webmemoのページを作成。タイトルはご自由に、中身は空でOK
    • ポストスラグ名:archivesのページを作成。タイトルはご自由に、中身は空でOK
    • ポストスラグ名:allのページを作成。タイトルはご自由に、中身は空でOK
    • ポストスラグ名:readmoreのページを作成。タイトルはご自由に、中身は空でOK

特徴

快適に読むための環境

ウェブデザイン

ブログは読者あってこそ。できるだけ多くの人に快適にブログを見てもらえるよう、多すぎず、少なすぎず必要な機能を配置しました

1カラム
本文のレイアウトが崩れにくく、本文を一番読んでもらえる1カラムを採用しました
本文検索機能
並び替え機能、検索結果の自動継ぎ足しをサポート
次の記事へ
関連記事、人気の記事(自動取得&手動設定)で次の記事へ読者を案内します

各種ウェブサービスとの連携

ウェブメモ

ブログサイトを運営する上で欠かせないネット上のサービスも簡単に利用できます。

Google Analytics
Googleのアクセス解析サービスも設定画面から認証キーを入力すれば利用できます
はてなブックマーク
エントリーページにはてなブックマークへのリンクを自動的に表示します
コメント欄には、はてなブックマークのコメントがシームレスに表示されるよう組み込みました
ウェブメモ機能
twitter, tumblr, はてなブックマーク上での最新の更新をウェブメモコーナーとして表示できます。表示した各記事には、はてなスターをつけることができます(はてなスターのトークンの発行が必要です)

ウェブアプリケーションを簡単に使える内蔵機能

内蔵機能

便利なウェブアプリケーションが記事中で簡単に呼び出せます

Googleマップを1行で
住所を指定するだけでその周辺の2D地図や風景を表示できます(Googleマップ APIの発行が必要です)
動画の貼り付けも1行で
動画共有サイト(Youtube, Googleビデオ)上の動画や自作動画をコードを考えることなく簡単に公開できます

モバイルにも対応

モバイル向けの表示

もちろん、携帯電話やiPhoneなどのモバイル機器にも対応します

携帯電話にもプラグイン使用で対応
餅は餅屋…ということで動きの速い携帯電話向けの最適化はKtai Styleを使うことで対応することにしました
iPhone / iPod touchに標準対応
ビジュアルデザインはiPhoneのSafariでも読みやすくなるよう最適化しています
呼び出した動画や地図は、iPhone / iPod touch内蔵アプリでも再生できるように工夫しています

その他にも

XHTML1.1 + CSSで書いています
Web標準に準拠した、できるだけシンプルな文書構造を心がけました。現在使われているほとんどのウェブブラウザに対応しています。
SEOにも配慮
metaタグの自動生成、XHTMLでの構造化、わかりやすいページタイトルとテーマ側で出来ることはやっておきました。
間違ってると思ったらすぐ編集
ログインしている間は記事画面からワンクリックで編集画面に移動できます。
エフェクトでおめかし
あれこれポップアップ(リンク先・引用元のタイトルなどをちょっとリッチにポップアップするスクリプト)jQuery lightbox プラグイン(写真のポップアップをエフェクトを付けて表示するスクリプト)を標準で導入しています
ページ毎のCSSデザインも簡単に
Sandbox テーマは主要な要素に現在の状態を示すクラス名をつける機能がありますが、cieloはこの機能を取り込んでいます
ダウンロードは高速に
一部のファイルをGZIPという形式で圧縮しており、サーバとブラウザが対応していれば落とすファイルサイズが小さくなり、高速にページが表示できるようになります(方法)
続き物の記事はまとめよう
記事は独立したものだけではなく、何回かに分けて書いた続き物の記事もあるでしょう。cieloテーマではそうした記事を半自動的にまとめあげ、シリーズのRSSフィードを発行することも出来ます(方法)

サポートしないもの

このテーマは次の機能をサポートしません

  • 可変1カラムデザイン以外の表示方法
  • コメント欄でのアバターの表示
  • UTF-8以外の文字コードでの運用

導入を推奨するプラグイン

依存しているプラグイン

推奨というより、このプラグインを入れていないと動かないので必ず入れておいてください

ダウンロード
必須プラグイン一式をダウンロード
ライセンス
GNU General Public License
runPHP
記事中でPHPコードを使うプラグインです。内蔵の動画共有サイトのコード呼び出し機能などを使ったり、記事一覧ページ中で記述しているPHPコードを実行するのに必要です。「ビジュアルリッチエディタ」「XHTML 構文の自動修正」とは同時使用できないようですが、同種のプラグインは多くあるようなのでそちらを使っていただいても構いません。
Similar Posts
関連記事を表示させるためのプラグイン
Post-Plugin Library
上記プラグインを利用するために必要なプラグイン。これを利用したプラグインとして、上記意外にも人気記事を表示するPopular Postsなどがあるので、余裕があれば試してみては。

入れたら便利なプラグイン

入れなくても良いけど、実害はあまりないし便利なので入れておくことをオススメするプラグインです。

WP-Footnotes
本文中に((脚注の内容))と書くだけで脚注を生成してくれるプラグインです、ちょっとした余談で話の腰を折らずにすみます
Table of Contents Generator
本文中に<!--TOC--%gt;と書くだけで見出しを拾って、目次を生成してくれるプラグインです、長めの記事を書くときは読者のことを考えてできるだけ使った方がよいでしょう
Amazon Linkage
本文中に<amazon>ASIN</amazon>と書くだけで(ワンパターンですいません)、ジャケット画像付きでAmazonへのリンクを貼れるプラグインです。
Ktai Style
携帯電話のアクセス時にコンテンツを読みやすいように最適化してくれるプラグインです。

スパム防止に役立つプラグイン

入れておくと、スパム対策にてきめんの効果を発揮するプラグインです

SOMY SpamBlock JP スパム対策プラグイン
コメントやトラックバックの内容にひらがなやカタカナが指定回数以上ない場合、該当のコメント等をスパム扱いするか、あるいは削除してくれるプラグインです。このプラグインを使って以来、半年に一回スパムが来るか来ないかという程度になりました。セキュリティ上の懸念が残るとご指摘を頂きました(今すぐに危険なわけではないようですが)。利用にあたっては、
Simple Trackback Validation
トラックバックが指定した条件に沿っていない場合、スパム扱いするか削除できるプラグインです。トラックバックポリシーにも書いてありますが、記事のURLを含まないトラックバックは拒否するようにしています。

仕様・技術情報

デモサイトにて技術情報を公開しています。

謝辞 & 著作権表記

このテーマは以下のリソースが無ければできていません。オープンなライセンスでいいものづくりをしてくれた皆さんに感謝。We’re standing on the shoulders of Giants!(お名前の敬称は略しています)

ライセンスとかあまり関係ないけどこちらの方々にも感謝。

更新履歴

最終更新日
2008-10-28
検索結果の処理を修正
ボックスシャドウの生成順序を変更して、体感速度を向上させた
2008-10-26
一部ページで編集リンクが正常に機能していなかった問題を解消しました
脚注の表示方法を変更しました
2008-10-19
記事一覧ページの表示方法を変更しました
WordPress標準の回り込みの記述をサポートしました
ソーシャルブックマークのキャッシュを扱いを変更して、読み込み失敗を減らしました
関連URLの表示を変更しました
その他いくつかの細かい問題を解消しました
2008-10-11
オンラインPDFリーダのリリースにあわせて、PDFと思われるリンクをそちらに向けて書き換えるようにしました

4839929548

キーワード:

似たもの記事

読者の皆さんの反応サイト内コメントの更新情報(RSSフィード)

読者のコメント

16

ブックマークコメント

4

他サイトの関連記事

5

読者のコメント

  1. お名前

    名無しさん

    投稿日時
    2008年09月14日
    21時ごろ
    Comment No
    #1

    こんにちは。はてなブックマークからこちらのサイトへ来ました。
    WPのテーマを使わせて頂こうかと思い、DL、サイトへのアプを済ませ管理画面からテーマを有効化させたら、以下のエラーメッセージが出てきて、有効にすることが出来ません。

    Warning: require_once(XML/RPC.php) [function.require-once]: failed to open stream: No such file or directory in /home/*****/public_html/*****/wp-content/themes/cielo/functions.php on line 3

    Fatal error: require_once() [function.require]: Failed opening required ‘XML/RPC.php’ (include_path=’.:/usr/share/pear’) in /home/*****/public_html/*****/wp-content/themes/cielo/functions.php on line 3

    ※****はWordPressがあるディレクトリのファイル名です。

    このような場合、どう対処したら良いのでしょうか??

    WordPressのバージョンは最新版の2.6.2を使用しています。

  2. お名前

    名無しさん

    投稿日時
    2008年09月15日
    13時ごろ
    Comment No
    #3

    こんにちは。
    早急なご回答と対応有難うございます。
    テーマの修正版と入れ替えたところきちんと反映されました!
    ご迷惑をお掛けしてすみませんでした。

  3. お名前

    名無しさん

    投稿日時
    2008年09月15日
    14時ごろ
    Comment No
    #4

    こんにちは

    早速ですがお願いしたいことがあります。
    このサイトやテーマはカテゴリをタグとして使っているようですが、wordpressのタグはタグとして、カテゴリはカテゴリとして使えるようにならないでしょうか?

  4. お名前

    名無しさん

    投稿日時
    2008年09月15日
    22時ごろ
    Comment No
    #5

    あとから質問内容を読んでいてわかりにくそうなので追記いたします。

    要するにタグアーカイブページを作れないかということです。
    カテゴリーのアーカイブはできるのですが・・・。

  5. お名前

    名無しさん

    投稿日時
    2008年09月16日
    19時ごろ
    Comment No
    #7

    ありがとうございました。
    しかし使用している時にバグを発見しました。
    タグアーカイブページを開いたときに総件数が(2件なら)2件と表示されないといけないところが1件と表示されます。修正をお願いします。

  6. お名前

    名無しさん

    投稿日時
    2008年10月09日
    0時ごろ
    Comment No
    #9

    ブログのライセンスが設定されていません
    と表示されてデザインを変更することができません。

  7. お名前

    ゆりこ

    投稿日時
    2009年01月28日
    6時ごろ
    Comment No
    #11

    貴サイトでは、Mobile Eye+ 向けの拙作パッチをご利用頂いているようで、ありがとうございます。なんと、1月7日に、Mobile Eye+ にXSS 脆弱性が発見されています。拙作パッチはそれを塞ぐようアップデートしていますので、もし未適用ならば更新をお願いいたします。

    また、ブログ本文にも「Mobile Eye+ はそのままでは危険ですので、Mobile Eye+ パッチの適用が必須です」という記述を追記されることをおすすめします。

  8. お名前

    ゆりこ

    投稿日時
    2009年01月28日
    9時ごろ
    Comment No
    #12

    追記です。「SOMY SpamBlock JP スパム対策プラグイン」を紹介されていますが、このプラグインはバックドアが仕込まれているという問題があります。WordPress 2.1 以降ではバックドアは稼動しないため危険性は薄いのですが、そういう作りをしているため安心して使うことができないわけで、避けた方が無難だと思います。できれば、紹介文を取り消し線で消すなどの処理をされた方がよいかと思います。

  9. お名前

    ゆりこ

    投稿日時
    2009年01月29日
    2時ごろ
    Comment No
    #14

    プラグインの更新は管理画面でのお知らせでしか見ていなかったため気づきませんでした。

    管理画面でアップデート通知されるのは、公式プラグインディレクトリー (http://wordpress.org/extend/plugins/) に登録されているものだけですので、古いプラグインや日本独自のものは更新通知が来ません。このへんは、要注意かもしれません。

    Ktai Style を使って頂けるのなら、それはそれでありがたいです。WordPress 2.7 の新機能にも対応していますし、テーマデザインの自由度も高いので、運営者・閲覧者ともに使い勝手が上がると思います。てっきり、PHP が 4.x などで Ktai Style が使えないのだと思っていました。

    「バックドア」認定ですが、SOMY.JP 上に配置された任意のスクリプトを無断で実行しているため、まごうことなくバックドアといってよいです。もし、SOMY.JP から悪意あるスクリプトが送り込まれたら、何をされるか分かりません (WordPress のログインクッキーを盗んで管理者権限を奪う等)。

    作者による更新が待たれるところですが、以前作者はプラグインの開発中止を宣言したため (宣言自体はサイトから消えてしまった)、アップデートは期待できないと思います。これは非常に残念に思っています。

  10. お名前

    お名前(任意)

    投稿日時
    2009年03月29日
    11時ごろ
    Comment No
    #15

    こんにちは。

    テーマをダウンロードして
    TOCプラグインを導入したのですが
    付加されるURLがtoc-
    ol li ol liの部分の数字が1.になってしまいます。

    こちらのサイトのように
    URLをランダム?な文字列
    ol li ol li の部分を1.1.のようにしたいのですが
    どうすればよいのでしょうか。

はてなブックマークでつけられたコメント

moerrariさんのプロフィール画像  moerrari
2008/09/14にアンカー付きでブクマしたものを付け直し/pukiwikiのスキンwhiteflowの作者の人だった!
deburiさんのプロフィール画像  deburi
私のサイトで使わせていただいているテーマです。
ありがとうございます。
trick1さんのプロフィール画像  trick1
使おうかな・・・。
veadarさんのプロフィール画像  veadar
最高峰のWordPressテーマ

他サイトの関連記事

  1. ウェブサイト

    WordPressのテーマを変えてみた - ゼロと無限の間のログ

    投稿日時
    2008年09月16日
    23時ごろ
    Comment No
    #1

    [...] このサイト上で使っているWordPress用テーマ “cielo” を公開するよ – Liner Noteを見て使いたくなったのでダウンロード。でも依存ライブラリがいくつもあって面倒になったので断念。(注 [...]

  2. ウェブサイト

    怒涛のめもめもリンク集 » Blog Archive » WordPressプラグイン:wp-footnotes,toc-generator,Amazon Linkage,Mobile Eye+

    投稿日時
    2008年11月13日
    12時ごろ
    Comment No
    #2

    [...] 入れたら便利なプラグイン -Liner Note [...]

  3. ウェブサイト

    SIMPLE*SIMPLE

    投稿日時
    2009年01月24日
    1時ごろ
    Comment No
    #3

    さりげないレイアウト調整パネル

    右下にある「レイアウト調整パネル」がさりげなくていい感じです。最初は付箋のはしっこだけが見えていて、クリックするとメニューが現れます。

  4. ウェブサイト

    国内のWordPress無料厳選テーマ7 | WordPress【ワードプレス】初心者の部屋~使い方知っとこ?

    投稿日時
    2009年11月14日
    1時ごろ
    Comment No
    #4

    [...] Liner Note WordPress theme [...]

  5. ウェブサイト

    このサイトのWordPressテーマ - しょぼろぐ

    投稿日時
    2009年12月11日
    2時ごろ
    Comment No
    #5

    [...] このサイトのWordPress用テーマはleva氏による“cielo”というテーマです。 [...]


トラックバックとは
この記事に言及したサイトをこちらに掲載する仕組みをトラックバックと言います。ここでは、このサイトに頂いたトラックバックを一覧表示しています。
トラックバックしてくださる方へ
この記事への言及がない記事など、トラックバック受信方針に沿っていないものは、読者にお見せしても仕方ないこともあり削除させていただいることをご了承ください。
トラックバックを受け取るためのURI