アンカーリンクとは を更新しました

#close

戻る

画像を使ったリンクについて

  • 画像リンクの基本(無償版でも使えるおまじない)について検証します。リンク及び、画像を使ったリンクでは、アンカーについての理解が必要です。

アンカーとは

  • *(アスタリスク)の見出しをつけると右に自動的に[#・・・・・]と出来るところが、アンカーになる。正確には、#の後の部分が、アンカーである。

画像を使って別ページへのリンク

  • 画像を使って別ページのアンカーにリンクさせる場合は、以下の2つのおまじないになる。
    [[&attachref(ファイル名,nolink,画像の説明);>ページ名#アンカー名]]
    [[&ref(ファイル名,nolink,画像の説明);>ページ名#アンカー名]]

手動アンカーのおまじない

  • 箇条書きや、任意の場所にリンクさせる場合は、アンカーがないので、手動でアンカーを作ります。
  • アンカーは、戻りたい場所に以下のおまじないを設置します。
    &aname(アンカー名);
  • そして、
    &aname(アンカー名){〇〇へ};
  • アンカー名は、英数字のみしか使えませんので注意してください。
  • アンカー名の前に、#は必要ないのでご注意下さい。
  • アンカーが作成出来きると、リンクの貼り付け方は、同じ操作となります。
  • リンクを貼り付ける場所は、おまじないを入れられるところは、どこでもかまいません。(11月2日)

アンカー設置に注意new

  • ※手動でアンカー設置をしますと、W3C構文エラーが、設置数分だけ出ましたので、注意が必要です。)
  • 以下の方法でページ内リンクをするとW3C構文エラーが出ませんでした。(2011年2月3日)
    [[〇〇に戻る>#アンカー名]]

回り込み画像でリンク

  • 通常の回り込みのおまじないは、#が付きますので、リンクのおまじないが使えません。そこで、段組のおまじないを使って、画像(&を使った画像)にリンクのおまじないを設置しました。

    トップへ

    写真は、海鮮丼ですが、この他にもえっがねの天丼。そして、特別に伊勢海老の内子をたっぷり 使ったスペシャル丼・¥5,000円もあります。スペシャル丼は、1日に、1杯から 2杯程しか作ることが出来ない幻の貴重な一品です。

#style2(style=width:45%;float:left;text-align:left;margin- left:10px)){{
[[&ref2(swfu/d/kaisenndonn.jpg,nolink,,トップへ);>FrontPage#wa5af38c]]
}}
#style2(style=width:45%;float:left;text-align:left;margin- left:5px){{
>写真は、海鮮丼ですが、この他にもえっがねの天丼。そして、特別に伊勢海老の内子をたっぷり 使ったスペシャル丼・¥5,000円もあります。スペシャル丼は、1日に、1杯から 2杯程しか作ることが出来ない幻の貴重な一品です。
}}
#clear


リンク画像をぼかすテクニック(main.css 編集 )

http://dpura.web6.jp/dc/index.php?normal2
上記のページを参考にサクラエディタでcolor.cssを編集
して再度FFFTPでアップロードしたのですが、画像に変化がありませんでした。ブラウザのバージョンも最新にしてみたのですが同じ状況です。
何か他に編集する所や確認するところがあるのでしょうか?
宜しくお願いします。

(QHMユーザーフォーラムの質問から)


  • 上記の質問の、リンク先サイト(D++ Cool Design Labo)の解説をご理解いただいたものとして、以下の説明をします。挿入するソースは次の通り。
    a:hover img{
    opacity:0.85; /* opera firefox safari */
    filter: alpha(opacity=85); /* ie */
    }
  • QHMの最新バージョンでは、color.css が統合されて無くなっていますので、上記のソースを何処に入れるのか、場所探しに苦労しました。

  • テストして見つけた場所は、main.css の #sidebar { ・・・・・ と ・・・#summary { ・・・・・の間でした。下の図のように、常に518行目から221行目とは限らないようです。QHMのそれぞれのサイトの更新状態の違いで位置は変わっていました。故に、前後の記述を良く確認してからその間に挿入してください。

    挿入する位置を間違うと、デザインテンプレートのレイアウトが崩れて、修復出来なくなる可能性があります。(私も失敗しました。)

  • この操作をする時は、skinフォルダもしくは、全体のバックアップを取って作業した方が安全です。

  • 編集するファイルは、FTPで接続して、サーバー側で目的のファイルまでたどり、そのファイルをワンクリックして、ディスクトップ側で離すと、デスクトップにダウンロードされます。

    編集後、そのファイルをワンクリックして、FTPソフトの右側(サーバー側に)にはずすと更新されます。(この操作法に限らず、ご自分で慣れた方法で行ってください。)


    図1)
    ソースの挿入場所


  • 次に設定しておくと良い、QHMライセンスのRSS・W3Cバナー画像を半透明にしないテクニックは、QHMの最新版でもplugin.css はありましたので、問題なく挿入できます。その解説はD++ Cool Design Labo のサイトをごらん下さい。

  • くどくなりますが、CSSの編集は、バックアップを取っておかないと、修復できなくなる事がありますのでご注意下さい。

無償版 main.css

  • 無償版4.27最新版のmain.css の内容は以下の通り。
  • テストサイトで、#summary { ・・・・・の上と言いますか前に記述したつもりでしたが、下の図の場所に自動で移動したのか?最初からその位置に挿入したのか?(17行目~20行目)
    無償版QHMを別途インストールして再度検証してみないと分かりません。
    もちろん、現在の位置でも問題はありませんでした。

図2)
画像の説明

  • 再度無償版QHMをアップして、main.cssに図1)と同じ位置にソースを挿入しましたが、問題ありません。
    現段階でいえることは、図1)と図2)のどちらの位置でも安全だったと言うことです。

  • 次のようになりました。(リンク画像)


    トップページへ

アンケート

  • このページはあなたにとって参考になりましたか?
選択肢 投票
参考になった 11  
もっと詳しく 1  
分かりにくかった 3