前回記事の補足 | スタジオ K.style

スタジオ K.style

Photoshopやアメブログデザインについて書いています♪





読者さんから、前回記事(グロバボタンの設置方法)の中でわかりにくかった部分についてのご指摘と質問がありましたので、補足させていただきます♪





■グロバボタンを押した時に、リンク先を別タブで開かせる方法についての補足


target="_blank"

↑これがどうして空白のページにならないのか…についての回答です♪

ここで言うblankとは「空白」の意味ではなく、新規タブを意味するからです(*^-^)
つまり指定したURLを、同じページではなく別のページ(タブ)で開きなさい、と命令をしているわけですね♪




<a href="リンク先URL"target="_blank">

↑ つまりこの記述の意味を訳しますと

「このURLのページ(a href="リンク先URL")を新規(target)のタブ(blank)で開きなさい」

となるわけですね(*^-^)



これは特に、指定リンク先に飛んでいった読者さんに、もう一度自分のブログ記事に戻ってきてほしい場合などに有効です。

同一タブでリンク先が読み込まれてしまうと、戻ってきてもらえない可能性が高いからですねw







■CSS内に.Free Space という文字がある理由


グロバボタンのCSS記述内に.Free Space=”と書いてあるのは実は当然のことなんです。

CSSとHTMLとは非常に密接な関係にあります。


ここで少しおさらいです♪

◆HTMLとは…
ブログやホームページの基本的な部分を決定する言語です。
例えば記事内の文字の大きさや色、その位置などもそうです。
そして写真や動画のサイズや位置なども含まれます。

◆CSSとは…
CSSはブログやホームページのレイアウトや見た目の部分を決定する言語です。
HTMLと同じく、文字の大きさや色なども指定できますが
CSSで指定したものは 「原則的に」 という意味になりますので
その指定をその時の気分で自由に変えてあげたい場合はHTMLで指定します。

とは言っても専門的な知識のない一般の人にとってHTMLを書くことは至難の業です。




そこで ↑ アメブロにはこのようなBOXが用意され、ここから好きに変更することで誰もが簡単にHTMLを操作できるようになっているわけですね♪

仮にここで何も指定しなければ、文字の大きさや色などはCSSで指定されたものが優先される!ということです(*^-^)





ちょっと専門的になりますが、CSSはその記述の中に「#~」がある場合のみ、HTMLの「div要素」を参照するように仕組まれています。

#ameNavi ←例えばCSSの中にこのような記述があれば
<div id="ameNavi"> ←フリースペース内のこの部分とつながっている♪ということですね。

「<div>」というのは、それ単体では何の意味もありませんが、「<div>~</div>」で囲んであげることでブログなどにスタイルを適用することができます♪

つまりCSSの記述の中に.Free Space=”とあるのは、「フリースペースにこれ(グロバボタン)を動作させるためのHTMLが書かれているので、そこを参照しなさい」という指令なんですね(*^-^)

仮にHTMLがフリースペースではなく、フリープラグインの中に書かれている場合は当然ながら

.Free plugin=”

と参照場所が変わります。





ご理解いただければ幸いです(*^-^)♪