記事内リンクの貼り方

リンクのイメージ

リンクの貼り方

さて、ワンランク上の記事作成に当たって、記事内でリンクを貼る方法のことを、忘れていました。

ブログカードで貼る場合

まず、「ブログカード」としてリンクを貼る場合には、Akiraさんのブックレットをお借りする方法を、おすすめいたします。

FC2ブログで、美しいブログカードを使ってリンクを張る - ブログカスタマイズ

FC2ブログで、美しいブログカードを使ってリンクを張るさて、以前に、コミュニティのほうでも、紹介したのですが、あまり反応がなかったので、もう一度取り上げてみます。 はてなブログやエキサイトのブログカードは、キレイで便利そうですよね。FC2には、公式のブログカードは、ありませんが、同じくらいにキレイなブログカードを使うことは、可能です。Akiraさんが、ブックマークレットを用意してくれています。ブ...

文章の中に差し込むなど、テキストリンクとして使いたい場合

それ以外に、文章の中に差し込んで使うという場合に、「テキストリンクの貼り方」というのは、いろいろありますが
  1. FC2のエディタのツールを使う。
  2. 手作業でタグを作成する。
  3. ブラウザのアドオン(拡張機能)を導入し、右クリック一発でリンクタグが作れるようにしておく。
私は、個人的には、今はほぼ、3です。
が、それほどリンクを貼りまくるというわけではない方の場合には、自分に合った方法を、それぞれ、見つけていただくと、よいと思います。
かなりひんぱんに、テキストリンクを使うという場合には、やはり、ChromeかFirefoxで、ブラウザのアドオンを導入するというのが、おすすめです。

とにかく、こうなればよい

いずれの方法でも、以下のような形のタグを作って、記事エディタのHTMLのほうに貼り付ければ、それでいいわけです。
リンクタグ

リンク用のマークをつけたい場合

ここからは、拙共有テンプレートに限った話です。
リンクタグに、何かマークをつけたいということであれば、拙テンプレートでは、Google Material Iconsを読み込んでいますので、この中にあるアイコンフォントなら、どれでも使えます。
ここでは、通常リンクマークとして使われることの多いアイコンを、リンクの直前に、くっつけてみます。
↓リンクマークをテキストの前につけた場合の例
sample この場合に、記事に貼り付けるときには、以下のように、「class」を書き込んでやります。
class="anchor_i"の前後には、半角英数で空白を空けます。
<a class="anchor_i" href="https://blueskyblue726.blog.fc2.com/blog-entry-15.html">確認テスト記事</a>
ここでは、anchor_iというclass名を使っていますが、これでなくても、自分の覚えやすい、使いやすい名前でいいのです。
そして、最初に1回だけ、テンプレートのスタイル編集(CSS)に、以下を追加しておきます(class名を変えた場合には、CSSを貼り付ける前に、anchor_iという部分を変えてください)。
/*記事内リンク*/               
.anchor_i:before{content:"\e89e";font-family:'Material Icons';font-size:14px;font-weight:bold;vertical-align:middle;}
すると、次からは、anchor_iというclass名のついたリンクの前には、このアイコンマークが、つくようになります。
「手間」としては、aタグに、class名を付け加える、という作業です。
また、文字の「後ろ」にしたい場合には、beforeをafterに変えてください。
関連記事

コメント

コメント(0)
コメント投稿
【お願い】FC2ブログの方は、必ず、ご自分のブログURLを入力してください。
非公開コメント

プロフィール

Janedoe1471

Author:Janedoe1471 この写真とはまったく違うおばさんです。
が、気持ちだけは、いつまでも、こういう感じでいたいと思っています。

更新通知登録ボタン

更新通知で新しい記事をいち早くお届けします

検索フォーム