Own products

  • 新規事業のアイディア創造機

Extra

ITキヲスク、全面リニューアルしました!【2年ぶり3回目】

この記事の読了時間:約45

  • このエントリーをはてなブックマークに追加

約2年ちょいぶりに全面改装!

重かったり古臭かったり、用意したものの使ってないトコがあったりと、記事を書く手が遅くなるに足る様相だったので、ちまちま作り直しました。

ついでにもっと更新しやすいように、簡易なメモ代わりの「Memo log」なるコンテンツも用意したりしたので、今後共ぜひぜひご愛顧頂きたいっ!

んで、せっかくなので、先日まで使ってたテーマや初代のテーマもチラ見せしつつ、ちょろっと技術仕様なんかもご紹介しますよ。

それでは、ハッピー・リニューアル☆

足跡、軌跡、道程、過程

初代 ITキヲスク

こちらが記念すべき、最初のITキヲスクちゃん。

ファーストビューに好きなRSSを読み込んだタブ型リーダーと、自身のRSSや連絡先やアマゾンほしい物リストのリンク先をデカデカ配置したデザインですね。

いま見てみると、なぜトップにメニューを置いたのか、そんでなぜ銀グラデの色味なのか。。。

とはいえ振り返ってみると、現在に至るまでの基盤的なトコはすでに出来てるっぽいですね。

二代目 ITキヲスク

つい先日まで使ってたテーマさん。

ファーストビューにはリスト化した自作サービス群を筆頭に、自己紹介やらRSSリーダーやらを横スライド型のタブにして配置。

開いてたタブをcookieで覚えといたり、アイキャッチ部分を非表示に出来たり、その辺のJavaScriptっつーかjQueryを悪戦苦闘しながら作り込んだ覚えがあります。

このテーマの時期ははてブで初めて2000超えたりtwitterで7000回以上RTされたり後にトップアクセスを誇る持病の記事書いたり[証拠写真]と、めっちゃ思い出深いテーマです。

最新式 ITキヲスク

そして今回のリニューアル、数えて三代目のテーマ!

効果が無かったヘッダーの広告はナシ!重いから記事ページ以外ではSNS系の表示もナシ!

自分以外あんま使われてなかったRSSリーダーは、いっそネタ系だけにしてサイドバーに移動させて、自作サービスのリストもシンプルなスライダーに収めました。

あとは新作コンテンツとして「Memo log」という、ガッツリ書き込むほどでもないけど、どっかに残しておきたいメモ的なコトをさらっと書ける場所を作りました。

今までのスパンから考えると、おそらくまた2年くらいは愛用すると思うので、大事に育てていこうと思います♪

技術仕様について

先代のテーマでは勉強の意味もあってページングを自力で作ってたんですが、カテゴリーやタグのアーカイブページで手間取ったので、いっそ素直にWP-PageNaviで対応しました。

メニューナビやサイドバーあたりは基本的には先代の遺産を流用しましたが、RSSリーダーのトコだけはjQuery FeedsというjQueryプラグインに差し替えました。

あとヘッダー部の自作サービス一覧はbxSliderを導入したんですが、ここで問題が。。。

ページを読み込むと一瞬だけ縦にずらっと画像が並び、背景ごとビヨーンと伸びちゃう!

しかも毎回リロードするたびビヨりやがる!

気になっちゃうとめちゃくちゃ目障りだったので、どの辺が影響してるのかJSひとつずつ消してはリロードして、を繰り返すこと何十回(Firebug使えばよかったと、あとに気付いて後悔)。

原因 → サイドバーの「楽天アフィリエイト用JS」でした。

他の広告バナーは結構削ったんだけど、ちょっとコイツは残したかったので、どうにか出来ないか頑張った!

んで対応策として、楽天の方じゃなくスライダーの方を事前に非表示にしておいて、数秒後にフェードインさせればいいんじゃね?と。

さっそくsetTimeoutでずらしたら上手く行った!

が、調整のために少しずつ起動秒数の値を変えていったら、なんでか1ミリ秒でもスライダーのズレが収まった後で動き出すように。

多分setTimeoutで起動するタイミングが少しでも後ろにずれたコトで、実行キューの一番最後に並ぶから、って理由じゃないかと勝手に納得してます。

それと今回ご新規さんのMemo logだけは、コンテンツとして短文ばかりになると思うので、アーカイブでいちいち関連記事だの読了時間だのを表示させるのも不毛なので、category-memolog.phpを別途用意して対応しました。

また、それに合わせてページングじゃなくajaxで次ページを読み込みたかったのでjquery-autopagerも導入。このあたりの技術は以前記事にしたので、興味あったら見てみて下さいー!

そんなこんなで装い新たに心機一転♪

ちょくちょく更新していきたいと思ってますので、今後ともよろしくお願い致しますですっ!

  • このエントリーをはてなブックマークに追加

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

CAPTCHA


  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate