ホームページ 一覧

#text は、「空白のみのテキストノード」ってやつですが、HTMLで、

<div id="title">

<div class="hoge00">aaaaa</div>

<div class="hoge01">bbbbb</div>

<div class="hoge02">ccccc</div>

</div>

としたときに、ブラウザ上では、下記ように空行が入ってしまいました。

aaaaa

(←ここに空行がはいる)

bbbbb

(←ここに空行がはいる)

ccccc

 

これが、単純な話ですが、<div class=~~~~>の前に、思わず、半角スペースをいれてしまうという超初歩的なミス・・・・・・

それを、コピーして使ったから、全部に空行がはいってしまった(-_-;)

 

半角スペースを消して、TABに修正して 無事 空行が消えました。

 

何やってんだか・・・・って思いましたが、忘れないように、恥をさらすようですが、ブログに記載してしまいました。

 

最近、お客様のサイトで、宣伝を強くするために、キャンペーン用の項目を追加しました。

 

Movabale Typeで、作成したものでしたが、色々やり方はあるとは思いますが、キャンペン用のウィジェットを作成して、それを、トップページに組み込む形にしました。

 

通常のWebページを作成した際に、タグにたとえば「キャンペーン」っていれると、トップページに、繁栄されるようにしました。Webページの自動更新が表示されるところを作成してあるので、キャンペーン更新ってちゃんと自動で出るようにもしました。

 

ただ、この時に、少し失敗してアホみたいなことで、1週間ばかりかかってしまったのですが、ただ単に構造を作成する際に、<div>で囲むところを間違えるという、大変恥ずかしいミスを・・・・・

 

けど、これを見つけるまで、構造をすべてなめつくさないとわからなかったんですよ・・・・(;_:)

 

見た目は問題ないけど、構造的にミスがある時は中々気遣いもんですね・・・・(ただ、単にスキルの問題と集中力の問題だと思いますが・・・・)

前のブログで書いたのですが、文字の縁取りを設定したら、Firefox、IE、Operaでは問題なく、Chrome、Safariでは、縁取りが太くなって、かっこわるくなってしまいました。

 

元々、

http://liginc.co.jp/web/html-css/css/70065

を参考に、IE、Firefox,Chrome、Safariに対応するように記述したのですが、上記のサイトそのままなのですが、下記のように記述しました。

/*-------------文字縁取り ---------*/
  filter:dropshadow(color=#02258a,offX= 0,offY=-1)
  dropshadow(color=#02258a,offX= 1,offY= 0)
  dropshadow(color=#02258a,offX= 0,offY= 1)
  dropshadow(color=#02258a,offX=-1,offY= 0);
  -webkit-text-stroke-color: #02258a;
  -webkit-text-stroke-width: 1px;
  text-shadow: #02258a 1px 1px 0px, black -1px 1px 0px,
               #02258a 1px -1px 0px, black -1px -1px 0px;

 

太くなるなら、Safari、Chromeの部分の記述Webkitの部分を細くしてやれ!と思って、1pxから0.5pxってやってみたら、Chromeとかはいい感じになったのですが、次は、Operaの縁取りが細くなりすぎて、スマホだとよく見えなくなってしまいました。

 

僕の結論としては、text-shadowだけの記述にした方が、上記の問題が起きないってことで-webkitの部分は削除しました。ってことで下記のように変更

/*-------------文字縁取り ---------*/
  filter:dropshadow(color=#02258a,offX= 0,offY=-1)
  dropshadow(color=#02258a,offX= 1,offY= 0)
  dropshadow(color=#02258a,offX= 0,offY= 1)
  dropshadow(color=#02258a,offX=-1,offY= 0);
  text-shadow: #02258a 1px 1px 0px, black -1px 1px 0px,
               #02258a 1px -1px 0px, black -1px -1px 0px;

 

ちなみに flterと、dropshadowは、IE8,9の対策です。

 

 

自分のサイトで、項目行の、背景にグラデーションをかけたものと、イメージを指定しました。

 

スマホ用の設定(max-width指定)もして、できた!って思ったら、スマホでは、グラデーションが縞模様に・・・・・・・・

 

内容はこうです。

何~~ってなったのですが、スマホ用で設定したのが、背景画像を、幅に合わせて縮小表示しようと思って、background-sizeを指定しました。

@media (max-width: 640px) {
  .h3  {
     font-size:110%; 
    moz
-background-size:30% auto;
    background-size:30% auto;
  }
}

この時点に完璧に失念していたのですが、グラデーションもイメージと同じ扱いになるため、background-sizeの指定にひっかっかってしまうのです。

 

その為、グラデーションも高さが縮小表示され、縞模様になってしまった・・・・・(-_-;)

 

恥ずかしい失敗でした。

 

結構きれい!って感じで評価されていたので、Googleの日本語Webフォントをブログと、ホームページに入れてみました。

 

組み込むこともできるみたいですが、12.6MBもあるみたいですし、変更があった時に、また組み込み用に軽量化して、入れるのが少々めんどくさいので、googleから呼び出す方式にしました。

 

CSSに

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
適用させたいところにフォント指定します。今回は、全体ってことで、bodyに適用
body {
     font-family: 'Noto Sans Japanese', "メイリオ", serif;
}
って感じにしました。自分のブログを例に、どうなったかの比較
before
font_before.png
after
font_after.png

と、言っても、WordpressからMTに今は逃げていて、バーガーメニューってやつをちゃんとやってみているところです。

 

animenuってやつを、グローバルメニューに使って、CSSとかを、サイトに合うように改造中・・・・・

 

そこで、初めて、疑似要素(:before、:after)と、hover等の要素を同時に指定できるやり方があることに知りました・・・・

 

これは、結構恥ずかしい事なのだろうと思いつつ、今までアホみたいに知らずにやれたな~~と、また反省・・・・

 

ちなみに。リンクのa要素の場合、

a:hover:after

て感じに書けば、afterのhover要素を指定できます。

 

しばらく気が付かなかったけど、MTOS5.2.7と.MTOS5,2,10で仕様が変わっていて、一部テンプレートが動かない事態に・・・・・

 

いかんな~~~ とうのは、MTOS5.2.10はMT6.0使用っぽくなっていたので、タグが変わっていました。

<mt:PageNext>は、<mt:IfPageAfter>でした。そのせいで、次のページを見るためのリンクがうまく動作せずに、デザインも崩れてしまいました・・・・

 

もういい加減にWordpressに乗りかえたほうがよいかな~~ せっかく今までいろいろ勉強してきたのに、MTが廃れているような感じなので、大変残念だし、Opensourceの提供をやめたせいだと思うけど、小さい事業主は、そりゃWordpressに流れますよね・・Wordpressは無料だし

う~~ん、ナビメニューが今いちまだうまくできない・・・・・・

 

Animenuってやつで、ドロップダウンに対応した、ナビメニューを新しいデザインに導入しようとしているのですが、まだ、うまく行かない・・・・・

 

一個一個問題を解決しては、また立ち止まる・・・・ま~スキルの問題なので、そんなにすぐにできるわけではないかもしれないけど、まだまだ知らないことがたくさんあって、いろいろ「へ~~~」って思って感心するところもあって、結構楽しんでいるところもあります。

 

ただ、自分で、MTのウェブページの更新情報を表示するを一から作ろうって思ったのが、ちっともうまくいかず、だんだん嫌になってきていたのですが、昨日やっと・・・・(これがやっとってことで自分のスキルが、まだまだまったくダメなのを再確認もしましたが・・・・)

 

MTの場合、

<MTPages lastn="5" sort_by="modified_on">

これで、MTのウェブページの更新情報を表示してくれます。これを、スクロールバーを付けたBOX表示するっていうのを自分で作ってみよっておもったののが以外を時間がかかりました。

 

結論からいうと、dlでやって、overflow:autoをうまく使えばできるっていうことでした。なんか素人くさい言い方ですが、なんかそうっか~って思うのですが、考えた人すごいな~と妙に感心しました。このことに気が付いたというか、もろにやり方が書いてあったのが、ここ

http://rensabanet.com/blog/hp/12113/

記事を書いてくださったかたありがとうございました<(_ _)>

 

それで、できあがったものがこれ!

<MTPages lastn="5" sort_by="modified_on">
 <mt:EntriesHeader>
  <section id="update">
    <h3>更新情報</h3>
      <dl>
        </mt:EntriesHeader>
          <dt><time datetime="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x"$ language="ja"></time></dt>
          <dd><a href="<$MTPagePermalink$>" title="<$MTEntryTitle$>"><$MTPageTitle$></a>を更新しました</dd>
         <mt:EntriesFooter>
      </dl>
        <nav>
          <a href="<mt:BlogRelativeURL>sitemap.html">Webページ一覧へ</a>
        </nav>
   </section>
 </mt:EntriesFooter>
</MTPages>

これを、テンプレートモジュールに、「ウェブページ更新」って名前で登録して、メインページに、<$mt:Include module="ウェブページ更新"$>を入れてやれば、更新情報が、表示されました。

 

CSSは、上記のサイトを基にして、自分のCSSに合わせて作りました。

こんな感じです。

#update {
 margin:0;
  padding:0;
  border:4px groove #fff;
}

#update h3{
 margin: 0;
}
#update dl.box{
  margin:0 10px 10px 10px;
  padding:5px 10px 2px 5px;
  height: 120px;
  font-size:90%;
  overflow: auto;
  border-top:1px groove #fff;
  border-bottom:1px groove #fff;
}

#update dl.box dt{
  float:left;
  width:120px;
  padding-left:5px;
  }
#update dl.box dd{
  margin:0 0 10px 0;
  padding: 0 0 10px 20px;
  border-bottom:1px dotted #aaa;
}

 

今、新しいMovable Typeのテーマを作っているのですが、その時に、ロゴの直下にスライド画像を表示させているのですが、幅とか、余白のマージンとかちゃんと設定しているつもりでやっていたのに、変な余白がどうしても入って、CSSのなかで、max-widthを設定しているので、余白のせいで、スライドの画像だけ微妙に小さくなって・・・・・

 

ちなみに、スライド画像はリストを使って表示しています。(li)

 

なんで~~ってなったのですが、ちょっと悩んだのですが、完璧にケアレスミスでした。li指定のなかで、list-style-type: none;として、頭に、点とか、数字とかなしのスタイルですって、やったつもりが、はずかしいですが、『list-style-type: none』 って書いてあって、『;』入れ忘れっていう初歩的な話でした。

 

ちゃんと書いたつもりっていうことで確認がしっかりできていなかったのでこんなことに・・・あ~はずかしい

 

やっとわかった~~~


気が付けば、簡単な話だったのですが、サイトのスライドショーの前に、静止画像を重ねて常に見える状態にしたかったのですが、どうしてもできなくて・・・・・


まず CSSでスライドショー部分がblock指定してあったので、静止画像を表示させたい新たなスタイルもBOXに指定、positionは、スライドショーが、position:relative; にし、静止画像のpositionnを position:absolute;にし、位置を決めます。通常のCSS3の画像を重ねて表示させる方法をとったのですが、どうしても、スライドショーが前に来てしまいます。・・・・・


う~~んって悩んでいろいろ調べたら、boxはレイヤーの重なり順っていう z-indexっていうのがあったのをやっと思い出し、静止画像を前に出したいため、z-idex:1; スライドショーのz-index:0;ってしてやったら、やっと思うとおりに表示できた。よかった~~~


言葉で言ってもわかりづらいと思うので、そのままのCSSってわけではないけど、こんな感じって例を・・・・

#contents .inner .slide img{

  display: block;

  position: relative

  z-index:0;

}


#contents  .seishi-ga  img{

  display: block;

  position: absolute; 

  top: 300px;

  right: 300px;

  z-index:1;

}

z-indexについは、ここを参照してください

http://www.dspt.net/stylesheet_css/005/019.html


このページの上部へ

ネットワーク、パソコン サーバ設定

ネットワーク構築ホリテック

 

紆余曲折しながら、独立して中小企業様向けのネットワーク構築
保守、パソコン サーバ、設定運用管理を行っています。ホームページの作成も行っています

ホームページ

 

facebook

 

icon icon

 

マウスコンピューター/G-Tune マウスコンピューター/G-Tune Microsoft Store (マイクロソフトストア) Microsoft Store (マイクロソフトストア)

サイト内検索

にほんブログ村 IT技術ブログへ
にほんブログ村

にほんブログ村 IT技術ブログ ネットワーク・SEへ
にほんブログ村

最近のピクチャ