＊「いつも がんばってるキミに ボクたちからプレゼントがあるんだ。 ＊「白い雪でできた 大きなバラの花だよ。 白バラの花言葉は『心からの尊敬』 ＊「強くて 優しくて 勇気があって…… そんなキミを 心から尊敬してるよ。
ぐうかわ
スタイルをシンプルなものに変更
スタイルをよりシンプルなものに変更した。1カラムにすることで、よりスッキリした印象を与えるのが狙い。
結構前から、白い背景に黒いテキストのサイトにハマっていて(そのサイトが有益なものなら尚更)、余計なものをとことん省いているストイックさに痺れる。だけど自分がそれをやると何故か味気ないので、なんとかフォントや色味や配置やホワイトスペースを駆使して”Design”に昇華させたいのだけど、それが難しい…。
とりあえず以前のスタイルはDocumentsページにぶち込んだ。その作業をしている途中で、さらに以前のスタイルを見つけて懐かしんでいた。やっぱり何かを残すっていうのは後で振り返るときに良い。そしてそれを発見しやすい・残りやすいのがWebの良いところだと思う。
ところで、以前からトップページがクソ重かったのだけど、多分広告のせいだと思うので、1つだけの表示にした。別に広告で稼いでいるわけではないのだけど、表示していると「ぽい」ので。収益は1年経っても1,000円行ってないし(´；ω；｀)
なるべくCMSの恩恵を受けられるように、何かを変えたら全部が変わるように、またPHPをちょこちょこ弄った。今さっきの1記事目のみ広告表示とか、個別ページ(ディレクトリ)の子ページは個別に書いたHTML(DOCTYPEから)を適用させるとかとか。一応例を書いてみる。
if (is_page('about') or is_page('documents') or is_page('link')) {
// headerとかfooterとか予め用意してあるテンプレを読み込む
} else {
// 1から書けるように、headerとかfooterなどを読み込まない
// Web(WordPress)上から編集できるように
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_content();
endwhile;
endif;
}何の事は無い、このサイトにはAbout、Documents、Linkの個別ページがあるので、それ以外を個別にHTMLが書けるようにしただけ。これ、親である個別ページが膨大になってきたらどうするんだろうね。or連発するのだろうか…。もっとスマートなやり方があるだろうけど、ひとまずこれで。
○記事目で条件分岐させるやり方は、「投稿記事の○件目」で条件分岐させるWordPress カスタマイズまとめを参考にした。
他にも次ページ・前ページの部分とか、検索結果ページとか、カテゴリインデックスページとか、修正したいところがいくつかあるのだけど、ちょっともう今日は体力の限界なので、これから少しずつこっそり修正していこうと思う。仕事でもさんざんやってるのに、プライベートでも2～3日徹夜とか、ホントWeb制作って楽しいなぁ。
Hamlで半角スペースが無視される件
最近Hamlにハマっていて、ある程度覚えて使っていたのだけどつまづいた。以下の例を見てほしい。
<p>I eat well Milky Way recently.</p>こんな感じで、要素を1行で吐き出したい時ってあると思うんだけど、これをHamlで書くと以下のようになる。
%p I eat well Milky Way recently.%p<
I eat well Milky Way recently.文章中にリンクが張ってあるのはよくある話で、「Milky Way」というテキストにリンクを張ってみる。
<p>I eat well <a href="http://www.milkywaybar.com/">Milky Way</a> recently.</p>上記が出力される理想形。Hamlでやってみる。
%p<
I eat well
%a(href="http://www.milkywaybar.com/")> Milky Way
recently.これで出力すると以下のようになる。
<p>I eat well<a href="http://www.milkywaybar.com/">Milky Way</a>recently.</p>ない！「well」と「recently」の間にスペースがない！じゃあスペース入れてみようと思い、やってみた以下の書き方はすべてダメ。
- space = " "
%p<
I eat well#{space}
%a(href="http://www.milkywaybar.com/")> Milky Way
#{space}recently.- space = "¥s"
%p<
I eat well#{space}
%a(href="http://www.milkywaybar.com/")> Milky Way
#{space}recently.%p<
I eat well
= " "
%a(href="http://www.milkywaybar.com/")> Milky Way
= " "
recently.%p<
I eat well
= "¥s"
%a(href="http://www.milkywaybar.com/")> Milky Way
= "¥s"
recently.行頭と行末の半角スペースは無視されるようだ。正規表現もダメとは…。
というわけで、表示は変えずに「ソース上では1行で出力する」という要件を満たすためには、以下のようにやるしか方法が見つからなかった。
- space = " "
%p<
I eat well#{space}
%a(href="http://www.milkywaybar.com/")> Milky Way
#{space}recently.%p<
I eat well
= " "
%a(href="http://www.milkywaybar.com/")> Milky Way
= " "
recently.%p<
I eat well
%a(href="http://www.milkywaybar.com/")> Milky Way
recently.こうすると以下のように出力されて、意図した表示になり、1行で出力される。
<p>I eat well <a href="http://www.milkywaybar.com/">Milky Way</a> recently.</p>もうね、全然直感的じゃないし、「軽量マークアップ言語」とはなんだったのでしょう…。Markdownは直感的でメモ書きとかには超便利だと思うけど、要素の細かな指定は普通のHTMLと変わらないし、ならHTML書くときは普通にHTMLでいんじゃないかなぁと思った。
HamlはSassも中で書けるから、1つのファイルで全部1行で出力したらなんかいいなぁ（キャンペーンサイトとか1枚ペラのページ限定だけど）と思ったんだけど、compressedで吐き出す方法分からないし、とりあえず保留しておく。
あ、ちなみに例文の私が最近ミルキーウェイというお菓子に超ハマっているというのはマジです。
追記
@yoruakihttp://t.co/3Z1Yj3MYyX
だけど、link_toかsurround使うんじゃない？
— ながしまきょう (@hail2u_) 2014, 2月 28
か、神様…！
ちょっとlink_toについてはよく分からなかったのだけど(Ruby on Railsかな)、surroundを使うことで解決できた。Module: Haml::Helpersを参考にした。
%p<
= surround "I eat well ", " recently." do
%a(href="http://www.milkywaybar.com/")> Milky Wayこれで意図した表示になります。@Kyoさんありがとうございました。
Webってこういうのがいいんだよなぁと改めて思った次第です。