boplog tag:log.bop-coding.com,2007-12-29://1 2008-02-19T14:34:45Z web制作のメモログ Movable Type Publishing Platform 4.01 上手いなって思ったCSS tag:log.bop-coding.com,2008://1.14 2008-02-19T14:30:52Z 2008-02-19T14:34:45Z msk margin-left:1em;
text-indent:-1em;
}

※テキストテキスト
　テキストテキストテキスト

ってなる。

こういったテキスト形式をあまり書いたこと無かったので、あれですが。
関心しました。
たぶん自分じゃ思いつかない。

凄く地味だけど、上手いな～って思いました。
]]> tabAccordion tag:log.bop-coding.com,2008://1.13 2008-02-05T14:37:00Z 2008-02-05T14:49:44Z 心地良く動いてくれるアコーディオンライブラリ。tabAccordion設置方法等... msk
tabAccordion

設置方法等は出揃っているし、オフィシャルを見れば問題なく設置できる。

注意点を何個か
  • xml宣言をしているとIE6では動作しない。（コンテンツは見れる）
  • ネスケだと動かないどころか、コンテンツが表示されない。
  • デザイン段階からIE6で動作しない場合の見た目も視野に入れておく。
  • トリガーになる部分がdivで囲んであると、ページを開いてから一度クリックしないとコンテンツが表示されなかった。
  • <head>内にスクリプトを記述。
  • </body>前にもスクリプトを記述。
現段階では、この位を注意。

非常にいいライブラリなんだけど、スクリプトを<head></body>に書かなければいけなかったり、プリセットのCSSに#wrapperが設定されてたり（変更可能だけど書き直さなきゃ使えない。。）微妙な点も少しあり。。。]]> wordpress カテゴリ内の記事一覧 tag:log.bop-coding.com,2008://1.12 2008-02-05T14:22:59Z 2008-02-05T14:35:03Z wordpressだと、ループ内で呼び出した記事タイトルやコンテンツは、カテゴリ... msk
でも、今日作業していてその仕様通りに動いてくれなくてなぜかと思っていたらなんのことはなく、そのループよりソース上で早いところで特定カテゴリーの新着記事を全ページで読み込んでいたからでした。

ループの設定は同一ページ内では最初の設定が後続のものにも適用されてしまうのでカテゴリーの記事が呼び出され無かっただけだった。

テンプレ自体をシンプルに作りたかったので、分岐等で対応するのはやめて、マークアップ的にもページ下部でも論理的に問題は無かったのでモジュールをソース下部で読み込んで、CSSで表示位置を設定した。

備忘録程度に。。。
]]> SEOとは tag:log.bop-coding.com,2008://1.11 2008-01-17T02:42:44Z 2008-01-23T05:06:44Z SEOとは「サーチエンジン最適化（Search Engine Optimizat... D SEOとは「サーチエンジン最適化（Search Engine Optimization）」の略で、検索エンジンの検索結果にホームページが上位に表示されるようにキーワードやソースを整える他、被リンク（他サイトからのリンク）を強化する手法をいいます。
目的を持って特定の情報を探しているターゲットユーザーをウェブサイトに誘導、アクションを誘うSEM手法です。

  • リスティング広告とオーガニック検索の違い

ヤフー、グーグル、MSNの検索エンジンで調べたい単語を検索したときに色が変わって上位に表示されているものがリスティング広告で、検索キーワードに該当したページの一覧が表示されている「検索結果」部分がオーガニック検索結果となります。
双方良い点はたくさんあるのですが、オーガニック検索の方が70％以上のクリック率があるというデータもでているようです。

  • SEO対策手法

私どものSEO対策手法は、お客様からご相談を受けた後にサイトの分析、キーワードのご提案、HTMLソースの改善案、被リンクの状況分析を行った上で対策を行っております。やはり検索件数が多く、単体ワードなどとなると多くの費用がかかってしまいます。

  • アクセスアップ後のさらなる将来性

対策後、実際のアクセス数がアップし、多くのサイトからリンクを受けることで対象サイトの「信頼度」もアップします。
ここにでてくる「信頼度」とは、情報を的確にすることで得るユーザー様からの信頼度と、検索エンジンからのサイトへの評価の事を意味しています。

]]> stripemaniaでストライプ作成 tag:log.bop-coding.com,2008://1.9 2008-01-09T13:20:43Z 2008-01-09T14:01:09Z sripemaniaバックグラウンド等でよく使われるストライプをオンラインで作成... msk sripemania
バックグラウンド等でよく使われるストライプをオンラインで作成できるサイト。

stripemania.jpg
  • stripwidthで線の太さ
  • spacingwidthで線と線の間隔
  • stripeorientationでストライプの方向
  • backgroundcolorで背景色
  • stripecolor(s)でストライプの色を設定左右で色を変えてgradientをonにするとグラデーションの線でストライプを作れます。
以上の設定が終わったらDOWNLOAD THIS STRIPEを押して作成したストライプを保存できます。
]]> JQIRでソースを汚さずテキストを画像へ tag:log.bop-coding.com,2008://1.8 2008-01-08T13:17:36Z 2008-01-09T14:09:46Z msk 概要

  • ソースにはテキストを書くが、ブラウザで出力されるのは画像。
  • <h2>heading01</h2>がソースは<h2>heading01</h2>のまま<h2><img src="heading01" /></h2>として出力される

メリット

  • ソースは<h2 id="heading01" class="jqir">javascriptでソースを汚さずテキストを画像へ</h2>のようにテキスト情報を入れられる。
  • 従来のCSSで背景で実現するものとは違い、印刷時にも問題なく、ブラウザで画像を表示しないようにしていてもテキストが表示される。
デメリット
  • idで画像のファイル名を適応させていくので同一ページ内に同じものを使うとidが重複してしまってvalidにならない。
設置方法
  • jqueryライブラリ・JQIRをダウンロードしてきて、解凍し任意のフォルダに置く。
  • htmlのheadに
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-jqir.js"></script>
    のように記述し、jqueryライブラリ・JQIRを読み込む。
  • jquery-jqir.jsの最後に$(function(){
    $(".jqir_jpg").jQIR("jpg", "img/");
    });
    のように記述する。
    $(".jqir_jpg")は任意のCSSクラス名
    .jQIR("jpg", "img/")の
    "jpg"は適応させる画像フォーマットPNGに適応させる場合"png"となる。
    "img/"は画像までのパスを記述。
    例えば、JQIRを同階層のimgというフォルダの中にあるpngにjqir_pngというクラス名で適応させたい場合は
    $(function(){
    $(".jqir_jpg").jQIR("jpg", "img/");
    $(".jqir_png").jQIR("png", "img/");
    });
    となる。
  • html側への記述は
    <h2 id="welcometoboplog" class="jqir_jpg">welcome to boplog</h2>
    とする。
    classを入れることでjqirが適応される。
    idで画像を指定するので、上記の場合welocometoboplog.jpgという画像がこのh2に対して置換される。
    例えば、helloboplog.pngという画像に置換したい場合は、
    <h2 id="helloboplog" class="jqir_jpg">hello boplog</h2>
    という形になる。
以上でJQIRを導入することができます。
]]>