フッターの幅をコンテンツの幅に揃える

現在、このblogでは、Wordpress提供のテーマ「Twenty Fifteen」を基にした子テーマを使用しています。
もとのTwenty Fifteenよりもサイドバーをややせまくしています。
ブログのデザインを変更した – nackpan Blog

フッターの幅をコンテンツの幅に揃える

コメントにて、フッターの幅をコンテンツの幅と合わせる方法について質問をもらいましたので、これを機にやり方を調べました。

レスポンシブデザイン

Twenty Fifteenでは、メディアクエリを使うことで画面の幅によって、適用するスタイルを変えています。

現在使用している子テーマでは、
* Desktop Small 955px
* Desktop Large 1240px
のときのサイドバーの幅を変更しています。
そのさい、フッターはコンテンツ部分とずれて表示されています。
(元のTwenty Fifteenではフッターとコンテンツ部分は揃っている)
* Desktop Small 955px
* Desktop Large 1240px
でも、フッターとコンテンツが揃うようにCSSを見直しましょう。

関係部分の構造。

20160711css_structure
footerはsite-contentと同じ階層にあります。
site-contentの下に、いくつか階層を挟んで記事、コメント、ナビゲーション部分があります。

marginとwidth

marginとwidthで位置と幅を指定しています。
今回のCSSでは、パーセントで指定しています。
このパーセントは親要素の幅を基準とします。

Desktop Small 955px(幅が955px以下の場合)での
site-contentの位置・幅。
20160712content

ナビゲーション部分の位置・幅。
20160712nav

これを踏まえて、site-footerとコンテンツ部分との位置・幅がそろうようなmarginとwidthを求めます。
margin。
20160711footer_margin

width。
20160711footer_width

計算した結果。
Desktop Small 955pxでは、footerの適切な位置・幅は
margin-left: 26.2939%;
width: 58.824%;
となりました。

おなじように、画面幅Desktop Large 1240pxでもfooterの適切な位置・幅を計算すると
margin-left: 28.8772%;
width: 64.6574%;
となりました。

これらを加味して、CSSは以下のようになりました。


これでブラウザの幅を広げたり縮めたりしても、フッターがコンテンツ幅と同じに保たれます。

Autodesk Graphic(旧iDraw)で線のアウトライン化

20160622outline
Autodesk Graphicでパスツールやラインツールで線を引いた後、アウトライン化する方法。

図形を選択して
変更 > 線の外側
ss 2016-06-22 7.40.51

を行う。

また、
ウィンドウ > プロパティ
を表示して、そこで「線の外側」を選択することでも行える。
ss 2016-06-22 7.41.22


当初、メニューに「アウトライン」を含むものを探していましたが見つからず、アウトライン化はできないのかと思ってしまいました。実は「線の外側化」と日本語化されていたのでした。

参考
Create a Set of Flat Weather Icons | Autodesk Graphic Tutorials
ss 2016-06-22 21.51.48
こちらのチュートリアルのStep 8でアウトライン化を使っている。

[世界を変えた書物]展を見てきました

「PRINCIPIA PERFECTUS」を現在開発中のTOMEさんの情熱的なツイートとブログに感化されて、[世界を変えた書物]展に行ってきました。

[世界を変えた書物]展 人類の知性を辿る旅|金沢工業大学

「プリンキピア」をはじめ、重大な科学的発見を記した貴重な書物が、印刷時代以降現代まで120冊以上展示されています。

科学史ものといえば、
発明・発見のひみつ (学研まんが ひみつシリーズ)
そして
なぜ地球が動くと考えたのか (集英社文庫―大発見)
を読んで面白かった思い出があります。
具体的な内容は断片的にしか覚えていないのですが、今回の展示にかかわりある分野では、ケプラー・ガリレオ・ニュートンあたりの物語が印象的でした。そこででてきた書物の実物を見られるということで、楽しみです。

さて、今回は「書物」展なので、書物についてすこし知ろう。ということで、
西洋製本図鑑
を借りてきてざっと眺めました。
それで、展覧会では装丁部分に目がいきました。
見ているときは、その当時もこういう装丁をしていたんだ、「図鑑」に載っていた手法だーと感慨にふけっていました。
(ただ、あとから考えると、カバーは購入者の意向で作成したものだったり、あとになって装丁し直したのかもしれないなーと思いました)

会場はグランフロント大阪北館ナレッジキャピタル イベントラボ。大阪駅のすぐ隣です。
ファイル 2015-11-26 23 02 06

最初の部屋は「知の壁」と題して、本棚がつくってあり壁を形作っています。
ガラスケースの中に建築書が置いてあります。
でかい。
図書館にある美術全集サイズ。
その中にピラネージの絵が見開きで表示されていました。
見開きなのに、綴じるところで見にくくなっていません。
変わった方式で見開きのページを作っていました。
ファイル 2015-11-26 23 01 37

♢♦︎♢♦︎♢♦︎♢♦︎

「知の壁」を抜けると、「知の森」と題した広い空間になります。
科学史で重大な影響を与えた書物の初版本が、ガラスケースに並んでいます。
書物の関連性が分かる配置になっています。
ファイル 2015-11-26 23 53 07
コペルニクス「天球の回転について」
分厚い。「地球の方が太陽の周りまわってるんですけど」みたいなパンフレット的な本だと思っていた。天球の回転について – Wikipedia
内容目次によると、天体の運動の計算について述べているのかな。
鏡に映ったカバーが、変わっている。文字面が入っている。

ファイル 2015-11-27 0 22 37
ガリレオ・ガリレイ「星界の報告」
望遠鏡で見た月のスケッチ。
縁の金箔押しが綺麗。


貴重な文献を目の当たりにできて、とても興味深い展示でした。

Repeteの進行具合

Repete、開発しています。
進みましたが、昨日に比べると、いまいち。

進みがいまいちを表したかったけれども、うまく描けません。
快調に走っている状態から、すこし遅れてきている、ただ、まだまだ走れるぐらいのイメージで描きたかったのですが…
また、4枚ぐらい描いて、強引にアニメーションさせたかったのですが、行きつけませんでした。

Repeteの開発の進み具合を絵で表す

Repeteの開発を続けています。
開発していると、「泥沼にはまってたり」「途方に暮れてたり」「順調に進んだり」します。

開発の進み具合の感覚をマラソン的なものに例えて描く、というのを始めました。
今日は比較的順調に進んだので、普通に走っている姿です。

メガネを落とした話

路上。
歩いてました。
寒くなったので、帽子にダウンジャケット。

帽子をとったところ、一緒にメガネが巻き込まれ、そのままアスファルトへ。
あわててメガネを拾い上げました。
なんともなければ良いけど、とおもってあらためました。
右目用レンズの下端がえぐれていました。

かけると視界の端に白っぽい煙がはいりこみます。
気持ち悪い。
我慢してしばらくかけていると、視界の端の異物が目に入らなくなってきました。
しかし、右目の眼球および頭の右側が痛み出しました。血管がずきずきするような感覚です。

メガネを買い替えることにしました。
Surface Book購入資金にまわしたかったお金が、消えてしまいました。
かなしい。

月半ばの開発状況

Repeteの開発を続けています。
以前のプログラムは、建増しが続いてかなり複雑になってしまいました。
ここいじったら影響範囲がどこまであるのか?というのを、ひとつひとつたどっていかなければならない部分などもあって、すっかり扱いづらい状態になっておりました。

新たにSwiftで書き直すにあたっては、無駄に絡み合うのはやめたいものだと考えました。
ただ、それを実現するのに適切な構成を求めてあーでもない、こーでもないとやっていたものの、かえってわかりづらくなったりして進みがどうにも悪い状態が続いていました。
が、ここ数日、かたちが定まってようやく進展する様になりました。
ほっとしています。

WordPressのテーマを削除した

WordPressのテーマ
WordPress ›Twenty Sixteen
ss 2015-11-15 19.58.44

これよいなと思ってインストールしました。

しかし、有効化しようとすると、以下の様なメッセージが出て、できませんでした。

Twenty Sixteen requires at least WordPress version 4.4. You are running version 4.3.1. Please upgrade and try again.

WordPress自体をverstion 4.4以上にしないといけないとのことです。

WordPress › WordPress 4.4 Beta 4
WordPress 4.4はBeta 4まで来ていますが、まだベータ版。
本体のアップデートは正式版になってからにしたいと思います。

それまで、Twenty Sixteenは取っておくことにしました。

ところが、Twenety Sixteenはじつはまだバージョンが0.1.x系で、毎日の様に更新があるのです。
連日の更新通知に、ちょっと面倒に思ったので、いったんテーマを削除することにしました。

WordPressテーマの削除

外観 > テーマ
テーマのページで、対象のテーマにマウスオーバー。
ss 2015-11-15 19.49.26
すると、画像中央に「テーマの詳細」が現れるので、それをクリック。
「テーマの詳細」画面の右下に「削除」メニューがあるので、それをクリック。
以上でテーマを削除しました。


WordPress 4.4はじきに来ますので、その時期になったらまたTwenty Sixteenを試そうと思います。