徒然日記

おもしろき こともなき世を おもしろく


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Category: スポンサー広告 | --.--.-- --

« イチロー | - MAIN - | 1 + 2 + 3 = 6 »

すっきりリンク

前回のコメントにてFuwari Funwariさんより
「すっきりリンク教えてください」 とあったのを見て

最初は
( ゚д゚) 「すっきりリンク」って何?
と思ったのですが

私のブログのリンクの表記について、ということでした^^;

これについては前にちょこっと記載したのですが
今回は改めてリンクについて書いてみます。

※ ただし、ほぼ素人が試行錯誤した結果ですので、誤りがあってもご容赦ください



私がリンクをカスタマイズしたのは以下の理由から

  ① ブログのタイトルが長いと1行で表記できず、改行されるのを避けたかった。

  ② ブログのタイトルだけだと(私が^^;)誰のかが分からなくなるので
    ○○さんの『***』とリンク表記したい

  ③ ②の表記だと、名前の長さが皆さん違うので
    『***』の位置がまちまちになるのを揃えたかった。


ではその手順はmoreにて

※ 内容はそんなに無いんですが、やたら長くなってしまいました
  要は 1-42-3 だけ読めば十分です(ーー;





1.プラグインの設定をカスタマイズ

 1-1. プラグインの設定をクリック

Link_1-1.gif



 1-2. リンクの詳細をクリック

Link_1-2.gif



 1-3. プラグインの改造の【HTMLの編集】をクリック

Link_1-3.gif



 1-4. 元の内容を削除した後、下記の内容をコピー貼付します
      (元の内容は念のため、どこかにコピーしてとって置いた方がいいかも)



<!--link-->
<div style="margin-bottom:3px; margin-left:15px">
<span style="font-size:7.5pt;">
<a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a>
</span></div>
<!--/link-->
<div style="margin-bottom:3px; margin-left:15px">
<span style="font-size:7.5pt;">
<a href="./?admin">管理者ページ</a>
</span></div>




      margin-bottom:3px
       リンク間の幅です。
       3pxの数値を変えることで調整可能

      margin-left:15px
       リンクの左側スペースの幅です。
       15pxの数値を変えることで調整可能

      font-size:7.5pt
       リンクの文字の大きさです。
       7.5ptの数値を変えることで調整可能

      ※それぞれの数値は0.5刻みで使用できます。(ex. 15.5pxとか8.5pt)


      [プレビュー]ボタンにて確認と調整を行った後
      [設定]ボタンを押して、プラグインの設定のカスタマイズを終了します。






2.リンクの表記を2行以上で行う

 2-1. リンクの設定をクリック

Link_2-1.gif



 2-2. ○○さんの『***』 という形式でリンク追加を行う
      (既に追加済みの場合はこの手順は不要)

Link_2-2.gif



 2-3. リンク一覧でサイト名を修正する

Link_2-3.gif

  ここで○○さんの『***』 との間に<br>を入れます。

   《表示例》
    ○○さんの<br>『***』
     ↓
    ○○さんの
    『***』


    ○○さんの<br>□□□『***』
     ↓
    ○○さんの
    □□□『***』

   ※ は実際はスペースです。
     ご自分のブログの幅に合わせて調整してください。

      修正後、[修正]ボタンを押して、リンクの設定を終了します。






以上で説明は終わりです。

直接話して伝えると簡単な内容も、文章だと結構大変ですね(ーー;
ま、仕事柄そんなことは結構多いのですが^^;

お役に立てれば幸いです^^


最後は追記。

私の実際のリンクのプラグインはこのようにしています。
違いがおわかりになるでしょうか?^^



<!--link-->
<div style="margin-bottom:3px; margin-left:15px">
<span style="font-size:7.5pt;">
・ <a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a>
</span></div>
<!--/link-->
<div style="margin-bottom:3px; margin-left:15px">
<span style="font-size:7.5pt;">
■ <a href="./?admin">管理者ページ</a>
</span></div>




リンクの目印用に先頭に 「・」「■」 が付くようにしています。
これは☆とか○とかでも可能です。


また、カテゴリーなどもフォントを小さくしていますが
それについては次の機会に...

てか今回はもう気力がありません (ーー;



ご質問はコメントにてお願いします。

Category: Diary | 2008.06.25 Wed

« イチロー | - MAIN - | 1 + 2 + 3 = 6 »

  • 2008.06.25
  • YUMAさん
    URL

お久しぶりです。以前コメントさせていただいたYUMAです。僕の場合は、ブログピープルというツールを使ってます。ジャンル別に分けることができて、さらに更新時間もわかるので使いやすいですよ!ただ、ブログの作者名まではわかりませんが(^^;

  • 2008.06.25
  • Sky(更年期主婦)さん
    URL
  • [Edit]

すっきりしていいですね。
詳しく解説されてるからできますね。

私は余裕がなくて、リンクのことを
改造できそうにないですけれど
自分のブログを作っていく感じで
楽しいですね

  • 2008.06.25
  • そぺさん
    URL

前に自分もしすけんsのリンク見やすいな~って思ってたんですが、やっぱ同じこと考える方いますねwww

やり方読んで理解しようと思いましたが・・・
自分には無理でしたorz

しすけんさん、お帰りなさ~い♪
ありがとうございます(;;)
大変なお手間を掛けてしまいました。(^^;
心から感謝しています。

出来るかな~って心配はありますが、
しすけんさんのこの綺麗なリンクは是非
真似っ子したいので、頑張ってみます。

また質問させて頂くかもしれませんが、宜しくお願い致します。
<(_ _*)>ほんと~にありがとうございました。

なるほど~~~~

とっても分りやすくて助かります。
で、早速Tryして「すっきりリンク」に修正してみました。
ありがとうございました(^▽^)/

あ~そうなんだ!
いやぁ、私もしすけんさんの所のLINKは素敵だなって思っていました。

私のテンプレではCSSへの指定タグが入り混じっていて、そのままコピペは出来そうもなかったんですけど、文字間設定とかspanタグとか使えるなら、物凄い便利です~
参考にさせてもらいます!ありがとうございましたv(^^)

  • 2008.06.25
  • 工藤さん
    URL

確かにブログタイトルだけより、HNが有った方がわかりやすいっすね!!☆
オイラもマネッコさせて貰おうかなぁ~♪

  • 2008.06.26
  • しすけんさん
    URL

コメント有難うございます(ーー)

お役に立てれば嬉しいです^^

おぉ!!
これは非常に役立つ情報ですね。
ただ、自分とこのサイドバーの幅があまりにも狭く…orz

○○さんの『***』ってのは非常にイイですね。
自分もやりたいです!!…orz

参考にさせていただきます。

  • 2008.06.27
  • しすけんさん
    URL

コメント有難うございます(ーー)

> まさぽんさん
内容としては単純ですけど
お役に立つのでしたら是非どーぞ^^

しすけんさん、やった~ヽ(^◇^*)/
出来ました!
すっきりリンク、やっと完成です。
大変なご尽力を頂きましたお蔭で、
ブログのリンクをすっきりする事が出来ました。
<(_ _*)>ありがとうございました♪
文字があまり小さくならなかったんですが。
いいですよね。

  • 2008.07.02
  • しすけんさん
    URL

コメント有難うございます(ーー)

> Fuwari Funwariさん
おぉう、良かったです^^


> いいですよね。

いっちゃね~?^^;

この記事にコメントする

Font & Icon
投稿コメントを公開しない場合はチェック

« イチロー | - TOP - | 1 + 2 + 3 = 6 »

Calendar

Link

Profile

Category

Comment

Search in blog

Monthly archive

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。