2010年08月16日

アクセス解析を見てみました

たまには、自分が作ったサイトの状況を確認してみようという事で、

Google Analyticsアクセス解析のデータを見てみることにしたわけです。

(そんな自慢できるデーターではないのですが・・)

 
G.jpg
 

 ある分野の、非常にニッチ(特定の分野でいいのかぃ?)なサイトですが

かなり放置していたので、アクセスが無いものだと考えていたのですが・・

アクセスが多少なりとも、あった訳なんです。【・・;】


なんだぁ〜こりゃ、とは思います、訪問者が実に少ない(ニッチだから仕方ないけど)

来る人が少ないけど、滞在時間が長い・・・ページも良く見てくれる

サイト直帰率も、全く上昇しません・・・(-_-;)

直帰率って、要はサイトに訪問しても、スグに帰る人の割合ですから、

当然数字が高いと、あまり良いサイトではないということになってしまいます。


個人的には、そろそろこのサイトは閉鎖しておこうか?とも考えたのですが、

数は少なくても、こうしてじっくり見てくれる人がいるということは、

少しは役に立っているサイトではなかろうか?と推測したわけです。


訪問者が爆発的に多いサイトは数多いのですが、直帰率が60%以下でないと

有益なサイトではないのではないか?と考えてしまうわけです。

(ブログなんかが、この傾向が強いですね)


正直、このアクセスという部分だけで考えると、その時の流行り物や、TVでのニュース内容

ついでに芸能ニュース系のアクセス数には、逆立ちしてもかないません。

しかし、直帰率が中々低くはなりません・・・一瞬で終わる話題が多いとも言えるのですが

こうしてジックリ見ている人がいる、リファラー(再訪問者)も3割ほど存在している。

もう少し存続させようかな?と考えたわけです。


 サイト訪問者の95%が、検索エンジンからの訪問者(GoogleやYahooです)

ブックマークしてくれている人も・・意外と多い。

たった、15ページ位しかないサイトなんですけど、こりゃ〜もっと有益なページを増やさないと

せっかく訪問してくれている人に対して、ちょっと申し訳ないな・・・と反省してしまいました。


どんな内容のサイトだとか、あえて紹介はしません。

XHTMLとCSSだけで作ったサイトというだけです(CMSで無くてもイケルということにもなります)




posted by アラフォー親父 at 08:02 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2010年08月02日

コピーライトの年号を、自動で更新

 別に大したことは無い!と言われればそれまでですが
サイトのフッター部分については、あまり気にしていない人が多いのかな?
と思う事があります。
基本的には・・

  1. Copyright ©
  2. サイト名や、作者名、作成年などなど
  3. All rights reserved.

 この部分にリンクを絡めたり、ちょっとした事を行う位ですが、
スクリプトを使ってコピーライトの年号を、自動で更新するという方法があります。

//コピーライトの年号を、自動で更新
Copyrightc<script type="text/javascript">myDate = new Date() ;myYear = myDate.getFullYear ();document.write(myYear);</script>mydomain.com. All Rights Reserved.
ブログの更新では、役に立つかもしれません。

 大変暑いので、皆さんも健康管理には御注意を。
posted by アラフォー親父 at 09:28 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2010年07月30日

ドロップダウンメニューでのULの使い方

 なんだか専門的な話ですが、よくネット検索していると

トップメニューにマウスカーソルが触れたら、下にガァ〜とメニューが出てきますが

あれがドロップダウンメニューというものです。


 普通はJ-QueryというJavaScriptで作成された、プログラムを使った方が

(<script>google.load("jquery", "1.4");</script>みたいなやつ)

動きもスムーズで、使いやすいのですが・・・・

そこを、あえて!(あえて!ですよ)CSSのみの実装で行う!

という事に現在チャレンジしているのですが・・・


 CSSはいいのですよ、別にstyle.cssに全てを記載しなくても

inport.cssというCSSファイルを作り(その前にCSSのフォルダを作りますけど)

その中に・・



  • @charset "UTF-8";

  • @import url(####.css);

  • @import url(style.css);


 と記載してしまえば、CSSファイルが増えても対応出来ますので、何とかなるのです。

しか〜し!HTMLファイルの方は、若干メニューの項目のタグの部分に癖があります。


例えば、普通に左カラム・サイド・メニューから右に出ると仮定しましょう。

<ul id="nav" class="dropdown">

 <li><a href="####">サイトトップ</a></li>

  <li><span class="drop">親メニュー</span><!--span classを使います-->

    <ul>

<!--判り易くするために、タブ(Tab)を用いて、インデント(字下げ)をします-->

     <li><a href="####">子メニュー1</a></li>

     <li><a href="####">子メニュー2</a></li>

     <li><span class="drop">子メニュー3</span><!--span classを使います-->

       <ul><br />

         <li><a href="./">孫1</a></li>

         <li><a href="./">孫2</a></li>

         <li><a href="./">孫3</a></li>

       </ul>

      </li><!--span classの終了タグはここ!-->

     <li><a href="####">フガフガ</a></li>

     <li class="droper"><a href="./"></a></li>

   <!-- 違うクラスでCSS指定する-->

    </ul>

 </li>


 とまあ・・普通ならば<ul>〜から続くリスト表示では、

<li>は閉じタグまでは文章が続くのですが、<li>〜の間にも

<ul>を入れ込む方法で、dropdownをさせていきます。

こんなんで、いかがでしょうか?

タグ:UL
posted by アラフォー親父 at 09:16 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2010年07月08日

携帯とPCの表示の違い

 今朝ですが、自分のブログを携帯で確認してみたところ
おお〜ぃ!と思えるような状態だったので、
PCメインで、ブログの更新している人の参考になるのでは?
と考えて記載しておこうと思いました。

 携帯とPCプラウザの大きさが違うので、表示が違う!という事は
当たり前と言えるのですが、もっと重要な事がございました。

 携帯の機種はドコモなのですが(しかも3年前の物)
PCでセカセカとHTMLタグを入れても、
以外と表示に反映されていないという事です。
意味が判らない?・・・・

 つまり、PCでは有効なタグが、携帯では全く効果なし!
ということと、WYSIWYGタイプでブログを書くと文章の段落繋がりがメチャ、クチャになっているなど、気が付いただけでも、結構ありました。

  1. テーブルタグが一切反映されていない
    つまり、表は極力避けるか画像がベター
  2. 定義リストは、他の箇条書きリストのようには反映されない
    つまり携帯では<ul><<ol>でも、機種によっては怪しい
  3. 無駄な空白は、文章がメチャクチャになる
  4. 携帯からのアップだと、PCでは空白が目立つ・・
  5. ブログエンジンで、かなりの差がある
    このseesaaでは広告も多いとか・・・
  6. 画像はPCと違い、サムネイルまたは、縮小表示なので、必ずaltタグは入れましょう
    つまり、altタグが無いと、画像時代た小さいので、何の画像なのかサッパリ・・となります。

 携帯とPCの表示を同じようにするという事は、非常に難しいのですが
PCで一生懸命更新しても、テーブルタグは一切反映されませんので、
使わない方が無難と言えます
(まだリスト表示の方がましです)

 表示サイズが違うので、当たり前と言えば当たり前なのですが
どうしてもPC側だけで更新していると、
携帯表示の事はスッカリ、忘れてしまいがちです。

だからと言って、PCではきちんと表示されないと困りますし、
SEOで考えてもWYSIWYGタイプは使ってはいけませんしね・・

 ちなみに、WordPressを使った場合のプラグインで携帯スタイル表示がされますが、
これも、色々と表示に問題があります。
(一々301表示が出るのもちょっとね・・)

posted by アラフォー親父 at 10:28 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2010年06月17日

ホームページを作る時に、一番時間がかかるもの

 単純に、htmlでコーディングしつつ、ホームページを作成する時、一番手間暇がかかる部分として、
筆者が感じている部分に、画像があります。
(あくまでも、単純に!といった場合です)

 普通何も知識が無い状態で、ホームページを作ろうと思い立ったとしましょうか・・
当然htmlタグを知らない、CSSって何?、スクリプト?全然判らない・・・と、
コーディングに関する事だけで、手一杯になっている状態だと思うのですが、
これが以外と、今まで行われていた方法を使わずとも、簡単にホームページは作成できます。
(出来るのですよ!、今や知識は不要かも?と言いたくなる位です)

 現在、様々なサービス(Googleホームページとかね)が行われていますので、別にhtmlやCSSの事が判らなくても、ホームページを作る事に障害が少なくなっているのですが、
どうしても避けられない事として、画像加工に対する知識が必要不可欠
と、なってきています。

  1. まずは、画像で使われている拡張子の種類を覚える
  2. 画像加工が出来る、ソフトの使い方を覚える
  3. 画像の、貼り付け方を覚える

 この位の知識があれば、自分のホームページへ画像を挿入できますので、
サイトの見栄えが違ってきます。

 どうしても人間は、テキスト文章だけのサイトは、敬遠してしまう傾向がありますので、
これからホームページを作りたい!と考えているならば、
マークアップ言語云々よりも、画像加工の知識から覚えていく方が、
早くホームページを公開できると筆者は考えています。

 ホームページ作成サービス(しかも無料で)も色々ありますし、
そんなサイトに使用するテンプレートも豊富に存在しています。
で・・・そのサイトにUPする画像選定や加工だけは、自分で何とかするしかありませんから、これからは画像加工の知識が一番になってくると思います。

 調べれば、スグに判るのですが、プロのデザイナーはアドビーの「フォト・シップ」を使っています。
しかし、おいそれと手が出る金額(下画像参照)ではありませんから、フリーで使用出来る画像加工ソフトを探すしかありません。

kakaku.jpg

 大体そこで行きつく先はGimpになりますので、このGimpの使い方をマスターすると、これからのホームページ作成に役立ちます。
 なんといっても、Adobe Photoshopのブラシも使える、Adobe Photoshopで作ったpsdファイルも開いて、見る・加工する事が出来るのも、このGimpですから、ひとつ使ってみてください。
(ここいらは、自分で調べて下さいな)

タグ:画像加工
posted by アラフォー親父 at 12:13 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2010年06月11日

悩むIDとクラス名

 なんですね、いつもいつも、htmlとCSSの連携を行う時に、

悩んでしまう「あれ」がありますね。

 「あれ」といっても、◎○禁というような、あれではありません。

 一般的なIDやクラス名に関する内容なのですが・・どれにしようかな?

天の神様の云う通り!的なノリではいけません。

 ズイズイずっころばし、ごまみそズィと、決めるわけにもいきませんので、

代表的な物をババッと抜粋して、お届けしてきましょう。

(ちなみに、&と%が記載されていますが、その理由は下に書いてあります)


%クラス・ID・ヘッド〜ナビ

&topicpath

&breadcrumbs

&/***パンクズ****/

&topicpath

&local-nav

&lnav

&assist-nav

&utlity

&utlity-nav

&/******ローカル・補足ナビ******/

&global-nav

&gnav

&nav

&navi

&navigation

&/*******ナビゲーション*******/

&header

&header-area

&/*******ヘッダー********/

&container

&wrapper

&page

&pagebody

&/******全体************/

%クラス・ID・コンテンツ〜フッター

&footer

&footer-area

&copyright

&publication

&/*******フッター**************/

&section

&entrybody

&article

&entry

&/******見出しや記事単体********/

&sub

&subcontent

&sidebar

&beta

&secondary

&/******サブコンテンツ*********/

&main

&maincontent

&alpha

&primary

&/******メインコンテンツ********/

&content

&container

&wrapper

&/*****コンテンツ全体*******/


 実はですね、筆者である私アラフォーが愛用しているTera Pad
ツールに組み込んでいる、HTML Helper with TeraPadのTag.iniファイル内部に記載して、使用しているのですが、上記の内容をそのままコピー・ペーストして使うと判るのが、下の画像になります。

※ Tag.iniファイルは、上から順に記載していくと、表示では全く逆で、下に記載してある内容が、上から表示されるようになっていますので御注意を。

 
WS000002.JPG

 
まずは、Tera Padの起動画面でごわす

ツール設定で、Tera Padと同時にHTML Helper with TeraPadも起動するようにしています。
 
WS000003.JPG

 
IDやクラス名を入れたくなったら、マウスでカーソルを動かすとこんな感じでホイホイと出てくるようになっています。
 
WS000004.JPG

 
 ついでに、もう一つ!
 
WS000005.JPG

 
Tera Padでも、こんな感じで使うと便利なんです(ヒーハー!)
 

 こんな感じで使いますと、Tera PadでCSSとhtmlの連携に役立つ、IDとクラス名をガンガン作ることができますので、もしTera Padを使っている人がいましたら、ひとつ参考にしてみて下さい。

PS : Tag.iniファイルは、Tera Padでシコシコ作れますので、色々試して下さい。

posted by アラフォー親父 at 09:22 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2010年06月07日

画像ファイル保存形式の特徴

 画像加工ソフトなどで、色々な画像を制作したりするのですが、
この時に、「よく判らないから、とりあえずJPGで保存」といった感じで保存をしてしまいそうになるのですが、画像ファイルの拡張子でも、その向き・不向きがあるわけです。

 
 テキスト・エディタでは、HTMLやCSS・txtにPHPなどの拡張子で保存したりする時に、その目的ファイル別でという状態になるので、さほど悩んだりすることは無いのですが、WEBで使う画像の特徴を少しでも知っておけば、例えばGimpやPhotoScapeで制作した画像ファイルを、どの形式で保存すればいいのか、一応の目安にはなると考えてシェアしておけば、WEB画像制作の初心者(筆者を含めて)の人にとってみたら、助かるのではないかと考えました
png23.png
PNG
画像の解像度をそのままの状態で保存するので、綺麗に残すことができます。その代わり、容量は若干大きくなります。また一部ですが、未対応のブラウザがあり、透明色が正常に映らないという問題があります
png21.png
JPEG
画像の圧縮度によっては、画像が粗くなってしまうことがあります。文字画像の保存には向かないが、写真などの多くの色を使う画像の保存に向いています。透明色は自動的に白色に変わります
png20.png
GIF
シンプルな画像形式。写真などの多くの色を使う画像はJPEG の方が向いていますが、文字画像が入った画像はGIF の方が綺麗に残しやすいです
 合っていないファイル形式で保存すると、時々画像が粗くなったり、ぼやけたりすることが起きますので、一応の目安として覚えておくといいと思います。
posted by アラフォー親父 at 10:12 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2010年05月29日

IE6以下をWeb標準に準拠させるライブラリ『IE7.js』ヒエ〜です。

 いつもながら、ネット徘徊をしていると、

目を疑うような記事を発見したので、今回もシェアしておこうと思います。


 まあ〜なんというか、今までCSSハックなどで泣きをみていたことが

この下に記載しているタグを入れると、IE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。

 はい!この下を見て下さい!


<!--[if lt IE 7]>

<script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE7.js"

type="text/javascript"></script>
<![endif]-->

 もう・・おいおい、という感じなのですが、

Google コードのie7-jsより直接読み込むことが可能です。

 そうです、またまた出所がGoogleさんからなのですが、

いくらIE6サポートが終了したとは言っても、まだまだユーザーさんはいるわけですから、これは使わないといけないと筆者は感じた次第です。


 出来れば、早くIEユーザーさんも、IE8位にはスイッチして欲しいのですけどね。

タグ:IE7.js
posted by アラフォー親父 at 19:57 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2010年04月27日

IME、手書きで書いたら、環境依存・・?で表示とは・・・

 最近更新が滞り気味になっているアラフォーなのですが、

実は易経の写しを、PCのTera Padで行っているのです。

 これが・・・中々漢字探しの旅になることが多く、中々進行していきません

(当たり前か・・)


 どうしても文字コードで処理出来ない漢字というものがありまして、
IMEパッドで書ける文字として出てきても

環境依存文字になっていたりすると、そのまま文章にしてしまうと???の状態になってしまいますので、時たま当て字や部首+その他の部分といった感じで、漢字を記載している状態です・・

(これが・・疲れるのですよ)


 元にしている写本が、昭和初期の頃に書かれた文章ですから、

漢字の読みも、現在の読みと違う漢字があったり、

IMEでは、手書きでないと出てこない(-"-)、という事が多くありますので

中々思う様なスピードになりませんね。

手書きでも環境依存文字になっていたりすると、もうアウトです。


 しかし、現代で使用している漢字と、昭和初期頃に使われていた漢字を

比べる良い機会となっているのですが、個人的な感覚では

味わいが違う!という感覚になってきます。


 例えば現代語では、「これを」と書きますが、漢字では「是れを」となっていたり
「ただし」が「然し」だったりしますので、

読みやすい方が必ずしも良いとは限らないのでは?と感じる事が多くあります。

ふと感じた、漢字の不思議といった感じです。


posted by アラフォー親父 at 17:14 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2010年04月08日

【ロリポップ!】★期間限定★成果報酬70%!&初期費用半額+おこづかいキャンペーン!

このブログでもバナーを貼りつけているのですが、
ロリポップ・サーバーがまたまた割引キャンペーンを始めました
(いいのかな?こんなにサービスして・・・)





もし、サーバー選択で迷っていたら、選択範囲の中として現在お奨めです
  
★★★★★☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆★★★★★


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
      ディスク容量★8GBにUP!★で【成果報酬が70%にUP!!!】
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 ディスク容量が8GBにUPした「ロリポップ!」レンタルサーバー会員募集プログラムでは
 本日より、成果報酬アップキャンペーンをスタートいたしました!

 成果報酬:「通常=ご利用料金の50%」→キャンペーン期間はご利用料金の“70%”!

 1年契約だと…通常の成果報酬1,500円→キャンペーン期間は2,100円!
 2年契約だと…通常の成果報酬3,000円→キャンペーン期間は4,800円!
 3年契約だと…通常の成果報酬4,500円→キャンペーン期間は6,300円!

 ★…キャンペーン期間…★

  2010年4月8日(木) 〜 2010年5月21日(金)

 --------------------------------------------------------------------
 
 ●○●ロリポの豆知識●○●
 
 ロリポップ!レンタルサーバーは・・・

 ・月263円から、おこづかいで使えるレンタルサーバー。
 ・安いのに、なんと容量8GB!(オプション利用で10GB)
 ・「Word Pressかんたんインストール」機能で、
今流行のWord Pressもかんたんに使えます

  http://lolipop.jp/manual/user/applications/

 4月下旬にcron機能を追加予定など、
 ロリポップ!レンタルサーバーは、どんどん進化していきます。

 ▼ロリポップ!につきましてはこちらから
 http://lolipop.jp/?ref=A8100408



 ▼キャンペーン詳細はコチラから!
 http://support.a8.net/as/camp/a8xlolipop/index2.html

 ★…キャンペーン期間…★
 
  2010年4月8日(木)12:00 〜 2010年5月21日(金)17:00

 --------------------------------------------------------------------
という事です、
posted by アラフォー親父 at 18:28 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2010年04月05日

たまにはこんな感じでテンプレートを作ります

 ちょっと時間があったものですから、htmlテンプレートを作ってみましたので

seesaaブログに、画像などを出してみようと思いました。

(たまには、こんな事も出来るんだぞという事で)

tp-6.jpg

 

 PHPは一切使用しておりません、完全にhtnl+CSSのみのテンプレートになったわけなのです。写真では小さいのでなんですが、WEB-EDITという題名にしていると、なんとなく会社関係みたいで、いいのではないか?と考えたわけです。

 急いで作ったので、まあ・・こんなものでしょう。

itumo.jpg



 Tera Padで設定して使っている、HTML Hyper のビューアーは便利ですね。

フリーソフトでも、この位は出来るわけでが、
(ソースの公開とかは、現在考えておりません)

posted by アラフォー親父 at 09:54 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2010年03月08日

ハッスルサーバーWord Press用 PHP.iniファイルの記載内容(エラー防止の為)

 ワードプレスをインストールして、やれやれとつい考えてしまうのですが、

実は、ワードプレスの固定ページを設定した時、

プラグインを導入した時など、

ハッスル・サーバー側に何も行っていないと

実は表示にエラーが出てしまう事があります。


 サーバーの設定のせいだと思いますので、この問題を解決しておきましょう。

 これを解決するには、php.iniファイルを作り

wwwが置かれている、 / デレクトリィと同じ場所へ

FTPを使い、サーバー側へアップさせておきます。


 php.iniファイルへ記載する内容ですが、

memory_limit = 16Mと記載しておくと、

サーバー側のメモリーをフルに使い、エラーになる事にはなりません。

メモリー容量としては、16〜64の範囲内でしたら、問題は起きないはずです。


 手順をまとめると


  1. テキストエディタで、php.iniファイルを作成

  2. memory_limit = 64M

     と記述する(64Mである必要はありません)

  3. 「/」ディレクトリにアップロードする

    アップロード先は、WordPressのディレクトリではなく

    「www」などがある、「/」へアップしておく


 もしもサイト作りで画像などを多用する場合は、

ファイル容量を増やしておきたいですよね

そんな時は、php.iniファイルへ

upload_max_filesize = 64Mも付け加えておくと安心です。


 ハッスル・サーバーの設定なのだと思うのですが、

php.iniファイルで、調整はできますので、

ちょっとおかしいぞ!と感じたら、サーバーの設定を一度確認しておくといいでしょう。

タグ:word press
posted by アラフォー親父 at 10:26 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
最近のコメント
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。