今まであまり使い方が分からなかった、MTのアーカイブマッピング。

必要に迫られ、調べたところ、これを使いこなせば何でもできる!
ということが分かりました。

「カスタム」ってやつで、MTのタグが使えるのです!!

これは大きな発見です!


私がやりたかったのは、
カテゴリ名に(MTcategorylaelの方。URLに出る方)
「日本語%20日本語」としたかったのです。

%20ってのはスペースです。

ところが、MTのカテゴリ名を付けるところで、
スペースや%20は入れる事ができないんです・・・。
エラーが出てしまって・・・。

そこで、アーカイブマッピング!!


デザイン→テンプレート→ブログ記事の
テンプレート設定のところを「カスタム」にして、

<MTEntryIfCategory>%c/</MTEntryIfCategory><mt:EntryTitle>/%i

てな感じに入れました。

こうすれば、カテゴリを作らなくても、
ブログ記事を書くだけで、カテゴリもできちゃいます!!

お客様が編集できるように渡すMTなので、
なるべく簡単にできるようにしようと思ったため、そうしました。

「まずカテゴリを作って・・・」という説明も要りません!!

カテゴリを作って、カテゴリ別ブログ記事リストでやる場合は、

<$MTCategoryLabel$>/%i
こうです。


MTを使うようになって、かれこれ5年位(?)

MTのことにはかなり詳しくなりましたが、
アーカイブマッピングを使うようになり、
今まで「これはできないな」と言っていた事も、
これで何でもできる気がします。


書き方について詳しくは、MT公式サイトより↓
アーカイブマッピングで利用するアーカイブファイル名の定義

クリックすると、ビヨーンとのびる(出てくる)メニューを作りたくて、
JQueryでやってみました。

JQueryって便利だなあ。なんでもできるなあ。


.slideToggle()


ってやつを使うとできます。


最初にクリックする部分に、cssでポインターの形をリンクのやつにして、

JQueryの部分をヘッダーに書くだけ。


<script>
$(function(){
$("#hogehoge").on("click", function() {
$(this).next().slideToggle();
});
});
</script>


後は、クリックする部分や隠れてる部分をcssで見栄えを整えるだけ。

簡単だし、なんか動きが気持ちいいので、
思わすクリックしちゃいます。


実際にお客様のサイトで使いました。
http://www.gensiti.com/kodawari.html

こちらの場合は、隠れてる部分を、該当ページにいるときには
表示したままにしたかったので、cssで調節しました。


display: none;

の反対がなかったので、

display: block;

にしたら、隠さずに表示したままにできました。
noneじゃなかったら、何でもいいみたいです。


分かりやすくて参考にさせていただいたサイト様。
ありがとうございます。
詳しくは、以下に載っています。

http://liginc.co.jp/web/js/jquery/34048

http://coder.blog.uhuru.co.jp/js/easy_accordion
htmlにphpのプログラムを組み込むのに、
通常なら、拡張子はphpにしなけりゃなりません。

でも、主にSEOに関する理由で、変えたくない時もあります。

そんな時は、htaccessをちょちょいと変えてしまえば、
htmlの拡張子のままでできる方法があったのです!
これは素晴らしい!

実際にお客様のサイトの新着情報のプログラムを入れるのに使いました。
http://www.ishikawa-k.co.jp/


.htaccessに、

AddType application/x-httpd-php .htm .html

てのを書くだけ!簡単!

でも、サーバーによってはできないところもあるみたいですけどね。

http://php.nekosuke.com/000048.htm

こちら様が詳しく教えてくださいます。
html5でコーディングした時に、
なぜか画像と画像の間に隙間ができてしまいました。

気になる。なぜだろう?


http://www.kishin-design.com/?p=76

こちらのサイトが詳しく教えてくれました。
助かる、助かる!


img {
vertical-align: bottom;
}

と、cssで指定するといいみたいです。


ただ、イメージが全部下揃えになってしまうので、
そうしたくないところを変えなきゃならないのが面倒です。

なんでこんな仕様になってるんだろう?
サイト制作をしていると、たまに必要になる地図!
いちいち書いていると大変です。

提供してくれるサイトがあるので、本当に助かります。


http://www.freemap.jp/
png形式。
豊富だが、色を塗ったり、フォントを変えたりなどのカスタマイズが大変。
epsは有料。


http://www.map-ac.com/
jpg、png、eps形式。
epsがあるので、カスタマイズができてよいのだが、
市区町村に分かれていて、ちょっと細かすぎる。
細かい地図を作成したい時はいいかも。
会員登録が必要。


http://www.kabipan.com/geography/whitemap/
svg、postscript、eps、espi、pdf、ai形式。
程良く簡略化されていて、いい感じの地図。
eps、aiもあるので、カスタマイズしやすい。
今のところ、県の地図を作りたい場合は、こちらが一番いいかも。
ただ、非商用だけど・・・。
あと、クレジット表示が必要なようです。

会社の携帯がずっと充電をしていなくて、
気付いた時にしようとしたら、

「あれ?」

電源に差し込んでもぜんぜん充電が始まりませんでした。
何回やってもです。

仕方無く、同じ型の他の携帯(会社のやつなので、解約したやつの機械(電話機)だけが残っていたので)にSIMカードを入れ替えたりして、使ったりもしていましたが、
登録されていたアドレス帳までは見られなくなってしまって、、、結構困ってました。


そんな時に対処方法を見つけたのです!!

もうソフトバンクのショップにでも行かないと無理かと思っていたけれど、
以外と簡単でした!!

すごーく助かったー。

何回かやってても、いつもやり方を忘れちゃうので、メモしときます。

821SCが充電できない時の対処法


ていうか、買い替えれば?

(笑)

これまた、ソフトやcmsを使ってサイトを作り、
ソースを変えられない場合に重宝します。

IDやCLASSなしでテキストボックスやSUBMITボタンにCSSを適用するには?
やり方の詳細はこちら↑に載っています。


input[type="submit"]

このような感じで「属性セレクタ」というものを使って指定するのです。
JQueryに似てるかな?

諸悪の根源、IE6ではやはり使えないらしい。

でも、便利ですね。

つくづく奥が深いなあ、何でもできちゃうなあと思います。
職種柄か、あまり顔を加工することは今までなかったのですが、
必要に迫られ、今更ながらPhotoshopのお勉強。

ゆがみフィルタを使った画像加工

↑こちらさんが教えてくれます。


すごく簡単に言うと、フィルタからゆがみを選んで、
目のあたりを適当にドラッグするのです。

それで、我が社の看板犬(姉)の蓮ちゃんを加工してみました。

Before
ren2.jpg

    ▼▼▼

After
ren1.jpg

う~ん、どうかな・・・?うまくできたかな?

それより、蓮ちゃんかわゆい~!!

レスポンシブWebデザインをしていかなければ、
だんだん追いついていけない時代になってきていますので、
少し勉強しました。

必読!5分でわかる流行のレスポンシブWebデザインまとめ 制作編

こちらのサイト様、助かりました。
参考にさせていただきました。
ありがとうございます。

特に、IE7~8だと、ちゃんと表示されないことに
気付いた時に、参考にさせていただきました。

html5.jsというのを入れて、

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

てな具合に、head部分に書くと治ります。

ふー、またまたIEめ~!やっかいだ!

ところで、こちら様のサイト、
ページのトップへのリンクが遊び心があって、好きです。
おもしろい!
まあ、全体的にも言えますが。

なかなかそういう発想って、
頭の固い私には思いつかないので、
いいなーと思います。

デザインの参考サイト

| コメント(0) | トラックバック(0)
すばらしいデザインは、たくさんありますね。
私も頑張らなければ・・・。

WEBデザインのクリップ・リンク集|Web Design Clip

イケてるWebデザインリンク集|デザイケ:Design Iketeru

MTBlog50c2BetaInner

2013年10月

    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
MovableType(MT)テンプレート 無料(フリー)
Powered by Movable Type 5.12