12月31日

■WordPressのアドレス設定を変えてみる

ブログのアドレスが「/wp」て言うのもなんとなく背中が痒い感じなので、
ありきたりな「/blog」に変えてみましょうか、というおはなし。

1)最初にWordPress側でアドレスを変更する。
 ・下の欄だけでいいですよと読めるが両方書き換えないとダメっぽい。
 ・先にサーバーのアドレスを変更するとWordPressにログインできなくなる。
 (当たり前
2)サーバーのフォルダ名を「wp」から「blog」に変更する。

これでログインとテキスト閲覧は問題ないのだが、画像が表示されない。
貼った画像のアドレスまでは変更されていないので、
編集→書き換えという面倒な作業が残るわけですね。

サーバー引っ越しの時と同じ様にやったほうがいいのか、
フォルダ名変える程度ならもっと楽な方法があるのか。

別の要因でやっぱり「/wp」じゃないと都合が悪いとかで、
2ヶ月後くらいに元に戻す事態にならない事を祈りたい。

今日が大晦日だとか、明日が正月だとかいう雰囲気全くありませんけれど、
良いお年を~

12月30日

■Webの馴れ初め(日本語間違ってるかもしれん

ちょうど10年くらい前に作ったページ
写真がヘタすぎて泣けるw
kyoto2002

floatだとかそんな気の利いたものは授業(3~4日)でやらなかったので、
全部テーブルでレイアウトという今からすればだいぶ力技な書き方。
もちろんCSSって何?な状態なので、背景色とか書体なんかもHTMLに直書き。

あの時も記述が間違っていて並びが崩壊していたっけ、
と10年後にしみじみと思い出す羽目になろうとは・・
tableとかfloatとかレイアウトに関係するあたりが鬼門の様です、わたし。
 

<html>
<head>
<title>kyoto 2002 vol.1</title>
</head>
<body bgcolor="#000000">
<center>
<table height="338" width="840" border="0">
<tr>
<td height="169" width="120"><img src="kyoto03/fern169.jpg"></td>
<td height="342" width="244" colspan="2" rowspan="2"><img src="kyoto03/shrin342.jpg"></td>
<td height="169" width="244" colspan="2"><img src="kyoto03/garden1244.jpg"></td>
<td height="342" width="244" colspan="2" rowspan="2"><img src="kyoto03/approach342.jpg"></td></tr>
<tr>
<td height="169" width="120"><img src="kyoto03/shisendo1169.jpg"></td>
<td height="169" width="120"><img src="kyoto03/pond169.jpg"></td>
<td height="169" width="120"><img src="kyoto03/lantern169.jpg"></td></tr>
</table>
<font face="arial" color="#FFFFFF" size="6">Kyoto 2002<font size="5"> vol.01</font>
<table height="338" width="840" border="0">
<tr>
<td height="342" width="244" colspan="2" rowspan="2"><img src="kyoto03/ladle342.jpg"></td>
<td height="169" width="120"><img src="kyoto03/window169.jpg"></td>
<td height="169" width="120"><img src="kyoto03/shade2169.jpg"></td>
<td height="342" width="244" colspan="2" rowspan="2"><img src="kyoto03/garden2342.jpg"></td>
<td height="169" width="120"><img src="kyoto03/flower7169.jpg"></td></tr>
<tr>
<td height="169" width="244" colspan="2"><img src="kyoto03/ginsyadan244.jpg"></td>
<td height="169" width="120"><img src="kyoto03/handrail169.jpg"></td></tr>
</table>
<table height="10" width="840" border="0">
<td align="left"><a href="page0803.html"><font face="arial black" size="3" color="#FFFFFF">back</font></a></td>
<td align="center"><a href="home02.html"><font face="arial black" size="3" color="#FFFFFF">photogallery home</font></a></td>
<td align="right"><a href="page0902.html"><font face="arial black" size="3" color="#FFFFFF">next</font></a></td>
</table>
</center>
</body>
</html>

コード全部いれると子窓になるのか。

保護中: 12月27日

この投稿はパスワードで保護されています。表示するにはパスワードを入力してください:

カテゴリー: 写真 | タグ: | コメントを読むにはパスワードを入力してください。

12月25日

■最後の審判

の抗弁(という名の言い訳

デザインができない=やらない、という事で早々に見切りをつけたわけで、
CSSなんていらないんじゃね?ていうレベルなのは否定のしようもなく。

なのでどこを工夫しましたとか、技術的にどうだとか言うネタもなく、
サイトの趣旨を説明しただけで済ませ、というかそれしか選択肢がない。

「発表が短い」

と言われてしまうのも致し方ないのです。

シンプル・イズ・ベストは意図するところであり、
デザインしない事がデザインなのであるが、しかし。

判決主文(原文まま

1)画像をダウンロードできるようになれば
2)ワードプレスはシンプルでなくてもよいかと
3)何か他の要素が欲しい
4)海外向けということで、日本人の私には何がこれというのがわからなかった
5)発表が短い
6)Gnavに現在位置がわかる表示がほしい
7)いまいち何のページなのか分かりづらい
8)好きな写真に好きな月のカレンダー機能はぜひ実装してほしい
9)ちょっと重い?
10)ページ遷移が分かりづらいかな

現状、「4)他の要素が~」の以前に目次しかない本と同じ状態なわけで、
つまり要素(コンテンツ)自体がそもそも存在していないがために、
「7)何のページなのか~」という審判を下されるに至る。
「4)海外向けの~」おそらく同じ理由によると推測される。

「9)ちょっと重い?」は画像のせいだが、このままでいいかと言えば要改善。
800*400でも36枚も貼っているわけで、まぁ仕方なの無いところ。
画像でYCC420は破綻が目に見えているが、YCC422でどこまで圧縮できるか。
PsだとJpeg品質?5~8がYCC422だった記憶。

「6)Gnavに現在~」「10)ページ遷移が~」は、余計なものを残しているため。
Phpto/Calendar/Blog/Aboutの4つにすれば解決、のはず。

「2)ワードプレスは~」についてはメモ書きなのでテンプレのまま。
本体との統一性も踏まえて、不釣合いなデザインにするより現状が適当。

「1)画像をダウンロード~」については画像を用意するという難関が。
貼ってる画像があるじゃないのという至極当然な問に対しては、
あれは諸々外に出すものとしては妥当でない環境で生成されているがため、
と何を仰ってるのアナタ?な答えになるのだが、まぁ平たくいうとですね、
「躾のなってない娘を嫁に出すなんてできなくってよ」ていうことなのね。

・・・まるで意味がわかりませんね、えぇ。
も少し解りやすく言うと、キャバクラのおねいさんに昼間お会いしたらアナタ誰?
な事態になるのとやや近い現象かもしれません。

別の機会にしましょうか。

で、「8)好きな写真に~」も要因が絡んでくるわけですが、
作るだけなら問題ないしどこかのタイミングで組み込んで見ようかと思います。
とりあえずは今日の日付にカレンダーが自動的にめくれる仕組みを。

書いたの読めないんじゃ・・・と心配するほどの字面なわたくしですが、
他の人のを見るに似たようなもので安心したり。(ごめんなさい

人妻のサドル200個盗んだ男 常にニット帽で礼儀正しかった
http://zasshi.news.yahoo.co.jp/article?a=20131225-00000004-pseven-soci

匂いでわかるとか、逮捕する方のお役に立てそうな気がするのだがw

12月23日

■リンクを無効にする方法

右メニュー

子メニューを作ると、親メニューは子メニューを開くだけの動作が望ましく、
親クリック時に該当箇所にスクロールするのは意図するところではないので、
親のリンクだけを無効にしたいよね、という流れになるわけです。

そこだけCSSを上書きすればという助言を頂いたものの、
その時はなんとなく理解した様でいて、それは眠気による勘違いだったという。

メニューの構造上親にaタグが無いと子が開けないわけで、
つまりボタンをaタグの背景からliの背景にした所で変わらず、
画像リンクにしてもやはり子が開けない事態は避けられない。

「aタグは無効にしたくないが、画面遷移は無効にしたい」
というのが求めるところ。

結局、「css リンク 無効」であっさり調べがついたのだけれど、※
検索の仕方が悪いのか、グーグル先生とは言葉の趣味が合わない様です。

あと、子メニューがありますよ的な下矢印とか付けてあげると、
デザイン的におしゃれな感じになるのかもしれないが、
シーケンス的には親クリック以外に無いわけで無用な気がしなくも。
コンテンツによって子の有り無しが発生するなら矢印必須なのだが。
(オリジナルでは矢印つき)

あれがこれがと付け足していくと、
中途半端にCSS3が混じっていく事になり、後々の災いの素的な匂いがw

1)表示しているページ(About)のリンクを無効にする
→bodyにidをつけてそのページだけCSSを適応
http://coliss.com/articles/build-websites/operation/css/css-tips-pointer-events-current-navigation.html

//HTML
<body id=”about”>
<nav>
<ul>
<li class=”home”><a href=”#”>Home</a></li>
<li class=”about”><a href=”#”>About</a></li>
<li class=”clients”><a href=”#”>Clients</a></li>
<li class=”contact”><a href=”#”>Contact Us</a></li>
</ul>
</nav>

//CSS
#about nav .about > a {
pointer-events: none;
cursor: default;
}

2)任意のページ(Home)のリンクを無効にする
→該当するaにclassつけて「pointer-events: none;」「cursor: default;」をCSSに
http://ja.forums.wordpress.org/topic/12181?replies=22

//HTML
<nav>
<ul>
<li class=”home”><a class=”no-links” href=”#”>Home</a></li>
<li class=”about”><a href=”#”>About</a></li>
<li class=”clients”><a href=”#”>Clients</a></li>
<li class=”contact”><a href=”#”>Contact Us</a></li>
</ul>
</nav>

//CSS
.no-links{
pointer-events: none;
cursor: default;
text-decoration:none;
}

CSS3だからnavないと効かないとかないよね?

※ 追記
2)の方やってみたところ、
リンク無効→クリック出来ない→子メニューが開けなくなり。
navタグがないとやはりだめなのか、別の要因なのか。
1)の方はその挙動で問題ないのだけど。

仕方なく、href=”"を空にしてみたらそれでOKという・・え、それでいいの?
まぁ理屈からしたら当たり前の結果なのだが、
あまりお勧めされる方法ではないのかも。
あぁ、&nbsp;入れとけばいいのか。(違う?

あと、子メニュー開いた状態で親をクリックしたら子が閉じる様にしたい。
JavaScriptを1行足したら出来そうなんだけども。ももっもも。

12月22日

■子メニューをべろろーんって出す方法

jQueryとCSS3を使ったアコーディオンメニュー
http://weboook.blog22.fc2.com/blog-entry-347.html

ボタンを背景画像で済ますならCSS3でなくても良かったりで、
HTMLとCSSの整合が取れるように書き換えて、JavaScriptコピペで動く。
どうせ動かなくてグダグダに無駄な時間を費やすのかとおもいきや、

奇跡の一発起動。

なんとなく理解出来ているという事で。

12月19日

■レイアウトの参考
http://tympanus.net/codrops/category/articles/
http://ronherman.jp/sense/

■bxslider
http://bxslider.com/
http://wp-and.me/bxslider/
スライドショーはとりあえずこれで良さそう
※jQuery-1.6だと動かない。1.83で動作。

http://bxslider.com/options
mode: ‘horizontal’ //スライドのエフェクト ’horizontal’, ‘vertical’, ‘fade’
speed: 500 //スライドのアニメーションの時間
slideMargin: 0 //スライドとスライドのマージン
startSlide: 0 //初めのスライドの指定
randomStart: false //スライドの初めをランダムに
slideSelector: ” //スライドのセレクタを指定
infiniteLoop: true //ループさせるか否か
hideControlOnEnd: false //スライドが最後の時に、次へのリンクを消すか否か
easing: null //イージングの設定※easingのプラグインが必要
captions: false //キャプションの設定
adaptiveHeight: false //スライドの高さが違う場合、それぞれ調節して合わせるかどうか
touchEnabled: true //スワイプできるようにするか否か(スマートフォン)

pager: true //ページャーの有無
buildPager: null //サムネイルページャーの指定

controls: true //次へ、前へ等のコントロールの有無
nextText: ‘Next’ //次へのテキスト
prevText: ‘Prev’ //前へのテキスト
autoControls: false //自動、ストップボタンの有無
startText: ‘Start’ //自動ボタンのテキスト
stopText: ‘Stop’ //ストップボタンのテキスト
auto: false //自動スタート再生さるかいなか
pause: 4000 //スライドの切り替えの間

カルーセルの場合
minSlides: 1 //最低限表示する数
maxSlides: 1 //マックスで表示する数
moveSlides: 0 //スライドをどのくらいの数を動かすか
slideWidth: 0 //ひとつの要素の幅を指定

■つまり遷移過程の装飾
Easing
http://semooh.jp/jquery/cont/doc/easing/
jQuery Easing Plugin (version 1.3)
http://gsgd.co.uk/sandbox/jquery/easing/

「装飾」と変換するのに「曹植」が先頭に来るのは、
あのゲームのせいであろう事は疑う余地がない。
SR曹植

12月14日

Webとは性悪な魔女との戦い。

レイアウトがおかしいとか、思った通りに動かないとか言うのは、
つまり、紛れも無く自分が何かを間違えているという、
反証の余地など寸分もない、現実を突きつけられているに等しい。

幾度と無く間違えを探し、完璧じゃないかと思うに至るのは、
ただの妄想だという非情な現実なのである。
画面の向こうにいる何者かも判らない無言の圧力に、
過ちを認めざるを得ない不条理。

「お前が悪いんだよなぁ?? 
何が悪いのかはおしえてやらねぇけどな! ウヒャヒャヒャヒャ」

いじわるしないで教えてください、ベアトリーチェ様・・・

いまのこの時期にうみねこを読んでるのは何の因果なのだろうか。

12月11日

■スマホとかタブレットで表示させる

スマホとかタブレットの画面サイズでどう見えるのか、
サーバーにいちいち上げて見るの面倒だなぁとか思っていたら、
「マルチスクリーンプレビュー」ていうど真ん中な機能がDwにあったりして。

グーグル先生に聞く前に、手元にあるものをまず使いこなせ。

PC画面サイズでHeaderを固定にすると、スマホの画面サイズだと隙間が
ヘッダー修正まえ

HeaderをWrapperの外に出せば解決
ヘッダー修正ご