WEBデザインコーディングメモブログ

旅行屋、ご飯屋経営会社のウェブ担当。WEBデザインとコーディング中覚え書き。JquaryライブラリやMT4などメモメモ。

ページ内リンクのイージング実装jqueryプラグインeasing.jsの使い方

ページ内リンク。ここ最近スマホも視野に入れてサイトを制作すると、
1ページの長さが長くなってくる。

そんな時、よく使うのがページ内リンク。

<a href="#">を、全てイージングしてくれるサンプル発見したのでメモ。

 

www.detelu.com

 

Jquery本体と、
easing.js

を読み込んで、

<script>

〜〜省略〜〜

</script>

 

かけばOK!

私みたいなノンプログラマには、こういうサイト様々です。
ありがたく、コピペさせてもらっています。

 

fortiegate90Dで楽天GOLDに接続が出来ない件

またもややることになった楽天構築。
今度は立ち上げから…しかもクライアントです。

以前は自社の楽天サイトがあったけど立ち上げは未参加。
更新だけしかやってなかたもんで、どうなることやら不安でいっぱいです。

前回、fortiegate80入れた途端、いきなり楽天GOLDにFTP接続できなくなったんで、
ネットワーク関係全部お願いしている業者さんに設定してもらいました。

が、また今回入れないよ!

サポセンに電話。
設定方法教えてもらいました。

ポート番号あけて、んけど

無理で、

結局ホスト宛に開放しました。

こういうサーバーとかネットワークとか、ちんぷんかんぷんです。

WEBデザイナ+コーダーはこうだよね。

 

この前はXサーバーに、SSHログインできなんだ。
これもサポセンに電話して、設定方法教えてもらいましたヨ。

とあるエンジニアの方におすすめされたfilezillaも繫がらなかったので
fortigateの設定を。

ほんと、面倒いなあ。

 

それだけしっかりと守られてるってことですね。

wordpressを設置してやること

忘れちゃいそうなのでメモ。

ワードプレスをインストールしたあと、最低限やること。

 

  1. ディレクトリの変更
  2. パーマリンクの設定
  3. テーマのカスタマイズ(タイトルと見出しタグチェック)
  4. メタタグプラグインの追加(meta manager)
    WordPress:プラグイン「Meta Manager」を使用したメタタグ設定 | raining
  5. googleanalyticsタグ設置

こんな感じのことしかまだやってません

これからどんどん増えてくだろうな。

まだ設置して2日目です。

wordpressはじめました

ここにきて、はじめてのワードプレス導入です。

SEOのためにブログを作成することになりまして…

ワードプレスのテンプレートを頂けることになったので、ついに。です。

 

ムーバブルタイプを使っていると、ワードプレスを使うって

なかなかないのでいい機会でした。

 

MTつかってるし余裕かな。と思っていたら

ところがどっこい。

 

まったく別物!

 

動的と、静的ってのは知ってたけど

 

MTは基本HTMLベースで

WPはPHPベースなんですねー

 

PHPは全く???なので、ちょこっとしたカスタマイズにも

苦戦しました…

 

MTだったら条件分岐とかカスタムフィールドとか

まあまあ扱えるようになってたけどまた一からですね。

 

ワードプレスはもともと無料だし、プラグインもろもろたくさん

あるので、これから勉強していこうと思います。

bootstrapに夢中

ご無沙汰です。

実は妊娠・出産と色々ありまして育休を頂いておりました。

つい先日、復帰をさせて頂き、また旅行屋のWEB業に邁進する毎日です。

一年も休んでいる間に、世の中・googleさんはすっかりスマホスマホ

モバイルフレンドリーなんて言葉まで出て来たのですね。


育休中にiphone壊して解約しちゃったWEBデザイナーです。
wilcom(今はYモバイル)のガラケー(カメラもない!!)とipadmini(楽天SIM)持ちです。

既存サイトのスマホページをせっせと作成してもらい、
私は新規サイト制作をすることに。

レスポンシブにするため、bootstrapを導入しました。
テンプレートから作成してますが、便利すぎてOMG!嬉しい悲鳴です。

ぐりっとシステムが最高です。
楽しすぎます。

スタイルは、別になんてことないけど。

なんせグリットシステムに夢中です。

テンプレートから作ってますが、今度は1から構築したいな〜
そしてこれにMovableTypeを…むふふです。
できたら超気持ちいいでしょう。
しがないWEBデザイナーなので、ぽちぽち地味〜に進めていきます。

Soyshopを使ってみた

自社のオンラインショップ、現状取扱商品も少ないので

CGIの簡易カートシステムを使用しておりました。

買い物カゴボタン+メールフォームのようなCGI。

 

商品点数が増えることから、管理に不便があるとの事で、

soyshopを使ってみました。

 

http://www.soyshop.net/

 

オープンソースのショッピングカートです。

 

eccubeのようなもの?

EC-CUBEはなんとなく、敷居が高くて手が出なかったのですが…

 

インストールはとっても簡単。

まずは母体となるsoycmsをインストールしてから

soyshopを追加インストールします。

DLしてアップして、データベースの設定すれば完了。

 

さくらのサーバーで無事動きました。

さくらのサーバー500円プラン、昔はDBが1個だったのに

今は複数作れるので便利です。

 

 

テンプレート編集して、対応させて表示。

カスタムで商品説明の項目増やせるので便利。

 

phpの知識があれば、もっとカスタマイズ出来るのかも。

私、htmlとCSSのみの人間ですが、なんとか使えそうです。

 

これからもっと勉強してカスタマイズ出来る様にがんばります。

 

次はエックスサーバーにインストールしてみます。

Jqueryを使ってボックス要素のランダム表示

担当者からの要望で、アクセスするたびに表示する内容を変えたいとのこと。

 

アクセス毎 表示 ランダム java

アクセス毎 表示 ランダム jquery

 

などのワードで検索。

最初に出てくるのはランダムに画像を変えるというもの。

画像じゃないんだよなあ。。

<div>〜</div>でかこった要素なんだよなあ。。

と思ってると発見!

 

jQueryを使ってボックス要素をランダムに表示する方法

http://webtips-blog.com/2011/02/22/jquery_tips/

 

JqueryなのでJqueryは読み込んでいることが前提です。

jsファイルを作成して、読み込ませて

ランダム表示させたい親要素に

<div randomdisplay="3">

 

</div>

 

ってするだけでした。

サンプルでは

<ul randomdisplay="3">

<li></li>

</ul>

だったのでどうかな〜と思ったのと、

小要素も<div>で中にフロートさせたり要素いっぱいだったのですが

普通に動きました。

めっちゃ便利かも?!

 

<div class="oya" randomdisplay="3">

 

<div class="box">

<div class="imgbox">画像</div>

<div class="txtbox">テキスト</div>

</div><!--box-->

 

<div class="box">

<div class="imgbox">画像</div>

<div class="txtbox">テキスト</div>

</div><!--box-->

 

</div><!--oya-->

 

こうするとclass="box"の<div>がランダムで表示されました。

やりたかったことと見事一致。

ありがとうございます。超便利です。