人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

トップ(メインページ)に、記事一覧(10件ほど)表示させています。

各記事「タイトルをクリック」すると、その記事詳細にリンクになっていますが、
これが、別ページ or 他サイトへのリンク、またPDFへのリンク、と色々変わる場合、どのようにすればいいでしょう?
それ+できればPDFへのリンクの際、PDFのアイコンを付けたいのです。
(PDFアイコンは、ブログに限らずウェブページなどでも使用したいので、?pdfで認識できて自動的にアイコンがつけられればと思っています)
また、ブログ、ウェブページ作成画面で、URL指定などのフィールドってありませんが、どのように作成すればいいですか?

以下の記述を使ったり、こう書くという解説もお願いします。URLのみじゃ分からないこともあるので。。

↓はトップの記事一覧10件表示の箇所です。

<mt:Entries lastn="10" category="新着情報">
<$mtEntryDate format="%Y.%m.%d"$>
<span><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></span>
<span class="icn_new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span>
</mt:Entries>

●質問者: sakuma1
●カテゴリ:インターネット ウェブ制作
✍キーワード:PDF URL アイコン ウェブページ クリック
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● koriki-WeKan
●30ポイント

MovableTypeを使っているという前提か?(前提条件を明示してほしい)


>別ページ or 他サイトへのリンク、またPDFへのリンク

HTMLのAタグを使って書くしかない。

http://www.htmq.com/html/a.shtml


>PDFへのリンクの際、PDFのアイコンを付けたいのです

フリーのPDFアイコンを探してきて、HTMLのIMGタグで書く。

◎質問者からの返答

情報が不足しておりました、MovableType4.2を使用しております。

別ページリンク、PDFリンクについてですが、

aタグは分かるのですが、、詳しく書くと以下のようにしたいのです。

MTでの「ブログ作成の編集画面で」ブログを作る際に、別ページへリンク、PDFへリンクと指定できないでしょうか?

ニュースなので、以下のような感じです。

http://canon.jp/

例えばですが 右側の「キャノンからのお知らせ」で、

2010年6月29日

男子プロゴルフトーナメント「キヤノンオープン」の開催について

は、ニュース記事詳細へリンクしているとして、その下の、

2010年6月28日

キヤノン株式会社によるキヤノンマシナリー株式会社の完全子会社化に関する株式交換契約締結のお知らせ

は別のページへリンクさせています。

こんなかんじで、タイトルをクリックして、別ページへリンクさせたいですが、

ニュースなので、mtのテンプレートで書いて、、一つ一つaタグでリンク先を指定・・とはいきません。。(更新者が増やしていくものなので)

ですので、記事作成時にURL先がある時は別ページに、というようにしたいのですが、(項目はカスタムフィールドで増やすとして・・)

しかしその記述方法がわかりません。。

もしくはもっと簡単にできるのかもしれませんが・・今はそれしか思いつかないのです;

本文にURLを書くことはできますが、それだと、「タイトルを押した際に」、別ページへリンクができないのです。

みなさんどうされているのでしょう?


2 ● kaz
●30ポイント

■別のページやサイト・PDF などへのリンク

手書きするしかありません


■PDFへのリンクの際、(自動的に)PDFのアイコンを付けたい

拡張子を基準に、自動的にアイコンをつける場合、

jQuery などを利用して条件に合致した a タグにクラスを付加し、

CSS で背景画像を指定するのが良さそうです。


jQueryを使ったPDFアイコン付加プラグイン

http://www.nk0206.com/life/2009/03/jquerypdf.html

◎質問者からの返答

以前の質問にも回答いただきありがとうございます。

最近はてなを使いだしたのところで、、ポイントの付け方をみてまた付けさせて頂きます。

>手書きするしかありません

何か方法があると思うのですが、、私の説明が不十分なのもあるかと思いますので、

上の回答者様の所に追記しております。

>jQueryを使ったPDFアイコン付加プラグイン

さっそく試してみました!?.pdfのリンク先に見事につきました、、感激です。

ありがとうございました!!


3 ● kaz
●30ポイント ベストアンサー

> 記事作成時にURL先がある時は別ページに、というようにしたいのですが、(項目はカスタムフィールドで増やすとして・・)


<span><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></span>

カスタムフィールドを利用するのであれば、質問分の上記の部分に分岐を持たせ、

リンク用のカスタムフィールドに値があれば、そちらをリンクとして表示させ、

無い場合は記事タイトルを表示させると良いと思います。


テンプレートタグ「sp_title」のカスタムフィールドをリンク用のタイトル、「sp_url」をリンク用 URL にする場合。

<span>
<MTIfNonEmpty tag="sp_title">
<a href="<$mt:sp_link$>"><$mt:sp_title$></a>
<MTElse>
<a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a>
</MTIfNonEmpty>
</span>
◎質問者からの返答

おお、、やってみたらできました・・・! 正にこれです!!

MT始めてから日が浅いもので、、途中までこんなことすればできるのでは!とまではいきつくのですが、

どのようなタグを書いたらいいかが分からなくって、行き詰まる⇒本やサイトをみる、という感じです。

タグの本は買って持っていて、分からないものはそれで試行錯誤して使ってみてるのですが、

どうも思ったものにならなかったりして; 中々難しいですね。

実は前の回答でPDFアイコンがうまく入ったと思ったのですが、

PDFマークとNEWマークどがちらかしか今表示できないようで、

IE6ではNEW!!のみ、Firefox&OperaはPDFマークのみ表示されてしまうのです。

どちらも表示することってできませんでしょうか?書き方が悪いのでしょうか。。

<script type?>は<body>の直前に書いています。</p> <p>↓newアイコンは以下を参考にしています。</p> <p><a href="http://koyo-marlins.biz/blog/2007/10/new.html" target="_blank">http://koyo-marlins.biz/blog/2007/10/new.html</a></p> <p>●ヘッダー</p> <p><!-- icn_new --></p> <p><script type="text/javascript"></p> <p>//<![CDATA[</p> <p>displayNewMark();</p> <p>//]]></p> <p></script>

<script type="text/javascript"></p> <p>$(function(){</p> <p> $("a[href$='pdf']").addPdfIcon("before");</p> <p>//$("a[href$='pdf']").addPdfIcon("after");</p> <p>});</p> <p></script>


↓Newマーク表示箇所

<$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$>

●newmark.js (略してます)

// display content

var content = 'NEW!!';

spans[i].getAttribute('className') == 'icn_new') {

●css

newマーク */

span.icn_new {

display: none;

color: red;

font-weight: bold;

}


4 ● fu2020
●0ポイント

PDF リンク.....

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ