scribo ergo sum もの書き・八少女 夕のブログ Since March 2012


Posted by 八少女 夕

jQueryにはまった

今日は、ちょっとブログのカスタマイズのことなどを。

私がWEB制作というか、超簡単なホームページの作成の仕事にかかわっていたのは、二十世紀の終わりでした。当時はですね、HTMLをちょっと理解しているだけで、専門家としてなんらかの仕事がもらえたのです。で、その後にまったく違うプログラミングの世界に入ってしまったので、WEBのスクリプティングと言えば、自分のサイトをこちょこちょいじるくらい。PHPやASPも中途半端にかじってしまったので、JavaScriptは特別に必要なもの以外は触ってきませんでした。で、必要なときは、ふつうにJavaScriptをテキストエディタで書くという、力技できたわけです。

PHPとMySQLの入っている個人サイトのほうと違って、ブログではサーバサイドのスクリプトが使えません。かといって、テンプレートを手作りする時間はない。で、現在のテンプレートを使いつつ、使いやすさを追求して機能を増やすにはJavaScriptを書くしかないので、面倒だなと思っていたのです。

が、つい最近、会社で見習いをしている若者と話をしたら、どうもJavaScriptの世界に、超簡単に記述できるjQueryというライブラリがあるということがわかり、自分の使っているテンプレートのソースを眺めてみたら、ここにも使われているではないですか。

で、ちょろっと調べて、試しにいくつか書いてみたら、あら、ホント。モノの数分で簡単に複雑な動きが。

自分用に、このテンプレートをカスタマイズしたところをいくつか挙げてみましょう。

一番目立つのは、右上のページのめくれる効果ですかね。Page Peelというプラグインを利用しています。

それから、追記を個別ページに行かずに開けられるようにしたのも、jQueryを利用しました。お報せのところで使う「このボタンで開閉します」というのも同じライブラリを使って専用のfunctionを記述してみました。

付箋部分は、もとからテンプレートについていた「rss」や「twitter」といった私の使わないリンクのものを利用して、数が足りなかったので適当に足してつくりました。最新のメインの小説、リクエスト小説、コラボ小説やStella専用の記事に簡単に飛べるようにしてみました。

お報せ部分は、プラグイン3にお報せ専用コーナーを作って、旅行用テンプレートにしても同じように表示されるようにしています。

カスタマイズが簡単にできるので、ますますはまって楽しんでいますが、こんなことをやってしまうと、とてもテンプレートを変える氣にならなくなりますね。
関連記事 (Category: このブログのこと)
  0 trackback
Category : このブログのこと

Comment

says...
 こんばんは。
流石ですねーーーーーー 此れだけ自由に 自分に合わせて 作り変える事が出来ると 
楽しいでしょうね。
羨ましい限りですよ!!!!!
此の あちらこちらに貼られている 付箋 お洒落です。
うん この微かな藤色の 此の色彩が 八少女さんの文章の落ち着いたイメージに 
よくあっている様に思います。
此のテンプレートも 図書館の本棚の 奥の さらに奥から 謎の書籍を発見した様な雰囲気で
いい感じですよ。
2013.01.26 11:06 | URL | #- [edit]
says...
いろいろできていいなあ
私はどの言語でもライブラリのリンクの仕方が
よく分からないです><
2013.01.26 12:13 | URL | #- [edit]
says...
こんにちは。

小説書きの方は、小説専用テンプレートを使われることが多いのですが、私は小説以外の記事の方が多いし、読み切り短編も多いので小説用テンプレートは向かないのですよ。で、今のテンプレートなのです。

それでもいろいろと氣になることがあって。たとえば、はじめて来る人、常連の方、それから小説を読んでくださっている方と、記事だけ読む方と、全員にわかりやすいレイアウトって難しい。毎日来てくださる方には、長いスクロールをせずに、すぐに今日の記事が目に入るようにしたいし、週に一度来てくださる方に数日前に書いた重要な記事のことがわかるようにもしたい、などという矛盾する希望ができてしまって。

それで、折りたたみ式のお報せコーナーや、私にとって重要なコンテンツがまとめてワン・クリックでみられる付箋コーナーなど、いろいろと工夫がしたくなってしまうのですよね。

本当は、小説は縦書きで、しかもページがめくれる効果付きでってやるといいだろうなと思うのですが、どうやら死ぬほど更新が大変になりそうなので、これは今のままで諦めようかなと思っています。

テンプレートが雰囲氣にあっているとおっしゃっていただけて嬉しいです。かなり氣にいっています。

コメントありがとうございました。
2013.01.26 12:38 | URL | #9yMhI49k [edit]
says...
こんにちは。

ええとですね。
テンプレートのカスタマイズは「テンプレートの設定」のところでやりますよね。
その「HTML編集」のなか、<head>と</head>間のどこかに
<script src="http://blog-imgs-XX.fc2.com/m/y/s/xxxxx/jquery-151min.js"></script>
みたいにライブラリへのリンクを直接書いてしまうのです。どこかからダウンロードしてきたライブラリを、あらかじめファイルアップロードで自分のブログに置き、そのURLをコピーしてきてリンクさせるのがいいかと思います。よその所にリンクしていると、そのファイルがなくなっちゃった途端に動かなくなりますので。

で、<body>タグと</body>のあいだに、下記のようなfunctionを書いて、動作させています。
<script type="text/javascript">
$(function() {
........
});
</script>

少しでも参考になるといいんですけれど。

コメントありがとうございました。
2013.01.26 12:53 | URL | #9yMhI49k [edit]
says...
こんばんは

私も、最近テンプレートを改造しようとググッてやってみましたが、難しいですねー。

ブログタイトル替えるのにメチャ時間かかりました。

出来た時の爽快感は堪らない物がありましたが・・・

八少女さんみたいに自由にカスタムできるようになりたいですね。
2013.01.26 18:46 | URL | #- [edit]
says...
こんばんは。

自由に、簡単に変えているようで、その実、つまらないところで躓いてどうにもならず、諦めたものもあったりしますe-259
どうでもいいところのスペルを間違えたために半時間も無駄にしたり……。

昔とちがって、HTML、CSS、JavaScriptを全部理解していないと、テンプレートも改造できないようになっていますね。その分、素晴らしいテンプレートも増えているんですけれど。

私も、このテンプレートのオリジナルのタイトルの位置などをいじりました。
もちろん、もともとの方が、デザインとしてのバランスはいいのですが、どうしても、お報せコーナーを設置した上で、スクロールしないで最初の記事のタイトルが読者の方の目に入るようにしたかったのです。

本人が思うほど、読者の方は違いをみていないとは思うんですけれどね〜。

コメントありがとうございました。
2013.01.26 21:25 | URL | #9yMhI49k [edit]

Post comment

管理者にだけ表示を許可する

Trackback

trackbackURL:http://yaotomeyu.blog.fc2.com/tb.php/447-e41da0e4