ブログのリニューアル中

昨日からこのブログのデザインをまたしてもリニューアル中です。まだ完成したわけではありませんが、おおまかな変更点を簡単にお知らせ。

 

ちなみにスマホで見ている人にはこの内容、全く関係ないかもしれません。スマホで見たときは常にテンプレート通りの表示にされちゃうんですよね、レスポンシブデザインするからスマホ版もPC版と同じ表示にしてくれないかなあ(

本題の前にちょっと愚痴…HTMLやCSSが自由に書き換えられるのがJUGEMブログのいいところですが、特にエディタが提供されているわけではなく、その編集フォームはテキストエリアそのままなので、実際編集するのは今までかなり面倒でした。

そこで今回からはちゃんとしたエディタを使用して、出力したコードをこのフォームに張り付ける形で編集しています。さすが天下のJetBrains、貼り付けは手間ですが効率が段違い(

 

ようやく本題。

今回のブログリニューアルでの変更点ですが、まず最も大きなものから。

HTML5、始めました。

 

今までこのブログはXHTML1.0などという今となっては完全に骨董品となった何かを使っていました。

これはJUGEMブログの投稿がXHTMLのスタイル(例えば改行が<br>でなく<br />)で出力されるのに合わせてのことでしたが、今更そんな細かいこと気にしてられねえ!HTML5の恩恵を受けようぜ!ということで晴れてHTML5化。

それに合わせてdata属性やらなんやらが使えるようになったので、今までJavaScriptで一部かなりカオスな処理をしていた部分をcssセレクタで書き直したりすることができるようになりました。

 

また、このブログにブログの投稿以外のページを追加しました。

ブログにブログ以外のページを追加とかなんのこっちゃって感じですがページの上の方、「Works」だの「About」だのと出ているのがそれ。クリックするとそのページに遷移します。

実際のところ、自由度の大きいJUGEMブログといえど独自のページを追加することなどできるわけがないわけで、このページ遷移はHistoryAPIなんかを使ってかなり無理やり実装しています(ページ遷移のたびにurlは書き換わっているが、再読み込みは発生していないことからわかるはず…)。我ながらなんて無茶をするんだ。

 

あと、記事中にある画像のサムネイルをクリックしたときに、今までは単にその画像のURLに飛ばしていたのをjQueryプラグインのLityでうまく拡大するように変更しました。実は同じようなことを以前(2012年8月くらい)にもやってたんですが…あの時はいちいち手動で画像にプラグイン有効化のためのタグを追加するのが面倒で、それ以降はやってられませんでした(

そこで今回は自動的にあらゆるサムネイルについてプラグインを有効にするようJavaScriptをごにょごにょと。やっぱこうでなくちゃね(

 

今回は他にもレイアウトの変更とかアニメーションの導入とかいろいろやってます。

まだ実装してない部分(ローダーアニメーションとか)、書いてない部分(「About」ページとか)もありますから完成はもうちょっと先になりそうです(

 

では、今日のところはこの辺でwノシ

スポンサーサイト

コメント
トラックバック
この記事のトラックバックURL