工房周囲の水田では10日ほど前には、ほぼ田植えが終わっています。
今日から水無月・6月ですね。
田んぼに囲まれた工房・自宅では夜になるとどこからともなく湧いてくるようにさかんに蛙の鳴き声が響き、睡眠障害になるほど（ウソです。床に付くとバッタン、キューです）。
早苗が徐々にその長さを高くし、青々としてくる頃までの辛抱ですね。
それでもなお鳴き続ける奴は、パートナーを見つけられなかったロンリーフロッグ、ということになるのかな。
そのような場合、早く相手を見つけられるよう影ながら応援してやってください。
今日は、このサイトの仕様について、少しお話ししましょう。
Topページを含む共通の仕様
サイズについて
横幅のサイズは950pxです。
旧サイトは720pxでしたので3割増ということになりますね。
Topページは横幅いっぱいの動的画像が表れますので、やや大きいな、という感を受けるかと思います。
ところで、現在では主要な企業のWebサイトの多くが1,000px前後というのが一般的なようです。
これはモニターが17インチの場合、一時代前の解像度ですと、1280×1024 あたりですので、この解像度に見合うサイズということになるのでしょう。
因みにApple.incの公式サイトの場合、980px〜、Microsoft Japanの場合は950px、首相官邸は950pxですね。（そんなところと較べてどうなん？ 笑）
つまり、950pxというのは極めて一般的なサイズと考えていただけるでしょう。
縦の長さは、当然ですが様々になりますね。
できれば、あまり長くしたくないので、１つのコンテンツを分割してページレイアウトするよう心がけたいと考えています。
とは言っても、まだこのページナビは未導入。
WordPressそのものですと、Blogで経験がありますので簡単なのですが、このWebサイトの場合、いわゆる時系列のコンテンツをページ区分けするのとは異なりやや難しく、研究しなければなりません（ご存じの方がいらっしゃればご教示願いたいです）
しかし、適宜、記事の区切りにTopに戻らせる罫線を置きますので、これを活用してください。
画像のサイズについて
Topページの動的画像の場合、横幅一杯に流していますが、My Workなどのページの画像は640pxで収めてあります。
画像によっては、クリックすることで800〜1,000pxに拡大可能なものもあります。
つまり、Max:1,000pxということになります。
ただ大きなものでもファイル容量としては75KB〜150KB（いずれも72dpi）ほどに圧縮していますので、ストレス無く表示できるものと思います。
カラー設計
ページの背景はお気づきかも知れませんが、少し色を付けています。
RBG表示で#fbfbf8 という色です。
ややグリーン掛かったセピア調といったところ。
真っ白では目が疲れますので、トーンを落としたというところです。
トーンを落とす、ということでは、フォント基本色、あるいは工房 悠のロゴなども同様です。
ケバいのは似合いませんし、クールにいきたいですからね。
ただ、普段私はiMac 27″ LCD(2560×1440px, コントラスト比1000:1)モニタでチェックしながら作っているのですが、先日Windowsでの確認のため、24″のDellで視認したのですが、そのあまりの汚さに愕然 !
怖ろしい体験をさせられたのでした。
コントラストが稼げないために、中間色の美しさが全く映えておらず、がっくりしてしまったのです。
耐えがたいものがあります。
Macのモニターの驚くほどの美しさには定評があるとは言え、これほどまでの差があるとは信じがたいほどのものがありました。
ただ市場シェアは圧倒的にWin勢が優勢ですので、等閑視するわけにもいかず、少し見直しが必要なのかも知れません。
なお、リリース時から5日ほど経過した先週末、リンク埋め込みのテキスト色を変えました。
当初は橙色だったのです（元々の仕様）が、あまりに鮮烈ですので、Web標準の青色系でトーンを落とした色にしました。
同時に、下線が表れるようにも改編しています。
元々の仕様は、英語をベースとしたもので、フォントサイズなどは日本語にするとチグハグになってしまう場合も多く、かなりの部分で修正を加え、見やすくしたつもりです。
またカリグラフィーというのは、こうした文章表現の場合とても重要な要素となるのですが、因みにこのサイトの場合、H1を〈パピルス：papyrus〉というフォント種でマークアップしました。
Winで正しく表示してくれるか不安ではあったのですが、この〈papyrus〉、MS Officeに標準添付されており、思い通りに表示してくれていてほっとしたものです。
この項続きます。
054 631 4471
10 Responses to “このサイトの仕様”
以前のブログの記事は、もう見ることはできないですか？
ちょっと残念というか、もったいない気もするのですが
どこかにアーカイブスとして残す計画は無いですかね。
acanthogobiusさん、〈以前のブログ〉とは
http://blog.koubou-yuh.com/
のことでしょうか。
これは未だ健在で、ボチボチ更新もしております。
以前もそちらのBlogでこれらの使い分けについて触れておきましたが
こちらが表とすればあちらはよりディープなもの、といった位置づけですね。
acanthogobiusさんには、以前のように「通信 悠悠」の方で
お付き合いいただければうれしく思います。
あらら、そういうことでしたか？
ブログは２本建てになったという理解ですね。
以前、「残照」というブログを一時期展開されていた
と思いますが、それともまた違うのかな？
私はいつもhttp://www.koubou-yuh.com/index.htmlの
旧サイトからブログに入っていたので
旧ブログが残っていることに気が付きませんでした。
新たに両方ブックマークすることにしますが
検索サイトから旧ブログを見つけるのはちょっと
難しいかな。
すみません。一部コードが消されてしまいました。
今度は表示されると思うので、先ほどのコメントは削除してください。
>>１つのコンテンツを分割してページレイアウト
ご希望の方法と違うかもしれませんが
``というクイックタグを挟むことで、ページの分割ができます（WordPressのページ・投稿どちらでも使えます）。
single.php等のテンプレートに
``というテンプレートタグが書かれていれば、[ 1 ] [ 2 ] [ 3 ]というようなナビゲーションが自動で挿入されます。
WordPressのページ分割機能
WordPress Codex – wp link pages
WordPressのページ分割機能
WordPress Codex – wp link pages
ただし、クイックタグはHTMLエディタでしか入力できません。普段ビジュアルエディタ（HTMLタグ不要の編集画面）をお使いの場合、簡単に挿入できるボタンがほしいところです。そんな場合は、以下のコードをfunctions.phpに追加します（場所は一番下で構いません）。
// ビジュアルエディタにページ分割ボタンを追加
function custom_editor_settings( $initArray ){
$initArray['theme_advanced_buttons1'] .= ',wp_page';
return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );
このコードでは、ボタンが列の一番後ろに追加されてしまいますが、TinyMCE Advancedというプラグインを使い、同様のボタンを好きな場所に追加することもできます（詳しくは省略しますが、不要なボタンを隠したり、レイアウト変更も自由にできる便利なプラグインです）。
あ、やっぱりダメでした。何度もすみません。
リンクと合わせてみていただければわかると思いますが。
１つめは
＜!–nextpage–＞
2つめは
＜?php wp_link_pages(); ?＞
です。＜＞は半角に変えてください。
motorajiさん、あなたのWebサイトはWordPressだったようですね。
うっかりしていました。
詳細な解説痛み入ります。
実は公開前、ほぼ同様のことを試み、(single.php)に実装させたのでしたが、期待通りにはhtmlが生成されず、ダメでした。
今回あらためてTestしました。
記事が分割されているようなのですが、Link文字列が現れず、
やはりhtml生成もうまくいっていない感じです。
このテーマの個別の問題だと思われますが、時間のある時にでも検証してみます。
本テーマでは(single.php)の編集、コード追加だけではダメなのかも知れません。
何度もコメント投稿ありがとうございます。
＜code＞タグ、コメント投稿では思うようにいかないようですみません。
コード挿入については、エンティティ化というWebの重要なルールを忘れていました。コメント欄を荒らしてしまい申し訳ありません。
>>記事が分割されているようなのですが、Link文字列が現れず
<?php wp_link_pages(); ?>single.php（テーマによっては別のファイルになっているかもしれませんが、いずれにしろ記事本文を表示する部分です）に上記のテンプレートタグは含まれていますでしょうか。このテンプレートタグがあるのに表示されない場合、なにか動作に邪魔が入っていると考えられます。
また、分割した記事のURLは1ページ目のURL末尾に「&paged=2」を足したものです（数字は表示するページ番号）。分割した記事で、試しにこのURLにアクセスしてみて表示されるかどうかも重要です。
これが404エラーなどになる場合、パーマリンク生成時の問題です。
裏(?)ブログの方で大変お世話になっていますので、お役に立てることがあれば嬉しいです。以上ご参考まで。
(single.php)を含む、いくつかの関連すると考えられるphpファイルにはご指摘の記述は無く、
開発者の何らかの意図があるのでしょう。
（このBlogではPage naviも綺麗にカスタマイズされております←プラグインは使っていない）
休日にでも、解説に即していくつかトライしてみますね。
さほどの文章量でもない、固定ページへのPage navi実装ですので、
分割するといっても、せいぜい1〜3頁ほどのもの。
プラグインも使わずにシンプルなナビでいきたいと考えています。
しかしmotorajiさん、お詳しい。
この世界ではプロ仕様ですね。
今後もWPではお世話になりそうな予感 (笑）
WP、少しづつお勉強していますが、見よう見まねでこわごわやっているだけ。
以下、余談 ──────
裏Blog、数日前から理由不明で表示がおかしくなったり（外枠の画像が消失）
コメント投稿でレイアウトが崩れたりしていました。
カスタマイズした部分などです。
これを今朝ほど、style css部分の修復を行い、復活
Back upは必須ですね
僕のWeb制作はプロの方から見れば所詮趣味レベルだと思いますが、トライ・アンド・エラーを繰り返しているうちに無駄に知識だけは付いてきたようです(笑)
しかし、これからはますます作り手の発信が重要になりそうなので、この能力もそれなりに役立つかなと思っています。
また、素敵な活動をされている方が発信しようとした時、技術的なところで躓いてしまうのはとても勿体ないと思いますので、自分の知識でもお役に立つことがあれば…と考えています。
※ところで、分割記事のURLは「&paged=2」ではなく「&page=2」でした。ややこしくてすみませんm(_ _)m
motorajiさん、
Webを作っていて思うこととして、
やはり若い方々はIT全般にわたって得手とする方が多く、
サイトも良いものを作られています。
同業の私の世代では、見応えのあるサイトを作られる人は稀です。
ただこれは単にITが得意、不得意という問題に留まらず、
発信への意欲の熱量はもちろんですが、木工へ向かうスタンスそのものにおいても
世代間の違いがあるように思えますね。（一言では語れませんが）
個人的に思うのは、家具製作、木工活動もその人の表現手段の１つ。
Webを造り、発信するのも、その人の表現手段の１つ。
つまりは何を、どのように表現するかにおいての方法論の違いこそあるものの、
本質的な意味での大きな違いはないのかも知れないとさえ思えることがあります。
良い木工をしたいのであれば、その熱量に相応するサイトを作る、
というのが、現代のスタンダードなありようなのかも知れません。
してみれば、motorajiさんの素敵なサイトは、
木工の本質の一端を垣間見せている、という解釈は正当だろうと思います。