WordPressのリンクに枠を付けてカッコよくする方法!

 
あわせて読みたい リンク

この記事を書いている人 - WRITER -
y-hey
ブロガー・アウトドアライフクリエイターとして 多くの人にキャンプ、登山、旅行について興味を持ってもらい ”人生を120%楽しんでもらいたい”と考えている男です。 2児の父ですが単独で南米最高峰アコンカグアや アフリカ最高峰キリマンジャロを一眼レフカメラと共に登ったり (普段は自称イクメンです)空手もやってる多趣味な男です。 ブログは2005年から書いています。(当サイトは2015年からです) 2017年8月に月間50,000PV突破しました! もし記事を読んで「役に立った」「面白そう」「笑えるわー」 と思われた方は、いいね、ツイート、はてぶ していただけますと更新の励みになります。 よろしくお願いします!
詳しいプロフィールはこちら

当ブログを読んでいただきありがとうございます。
ブログを11年書いているy-heyです。

ブログを書いている方なら
ご自身のブログの関連記事を紹介したい場合って結構ありますよね?

そんな場合、テキストリンクだけだとなんかちょっとシンプルすぎるというか、
もう少しかっこよくしたいなー、と思ったことありますか?

私はあります。
というわけでネットを調べていたら
はてなブログの動く記事リンク作ったよ!【ブログカスタマイズ】
という記事を発見!

元記事は「はてなブログ」をカスタマイズするコードですので
WordPressを使っている自分のブログは大丈夫かな?
と思いつつ早速参考にさせて頂き、やってみました!

すると、↓のようなカンジでできました!
素晴らしい!

あわせて読みたい

リンク先タイトル

 

元のテキストリンク(↓の文字だけのリンク)

リンク先タイトル

よりなんかクリックしたくなる気がしませんか? 私だけでしょうか?私だけ・・・(笑)
とにかく今回はその設定方法をお伝えします!

 

テキストリンクに枠をつける方法 (WordPress)

1. 事前準備編 CSSをカスタマイズ

まずはCSS(カスケーディング・スタイル・シートと言い、ブログやHPのデザイン部分を決めているコード)
をカスタマイズするのですが、何かあってもいいように
念のため事前にバックアップを取っておくことをオススメします。

(関連記事:初心者でもワードプレスのバックアップを確実に取る方法!

さて、↑の記事を読んでバックアップをしっかりとったら
ここからCSSのカスタマイズに入ります。

まずはWordPressの管理画面を開き、外観→CSS編集を行います。

テキストリンクをカスタマイズ1

 

そして最初に紹介しましたはてなブログの動く記事リンク作ったよ!【ブログカスタマイズ】
のサイトに掲載してありました以下のコードをコピーして貼り付けます。
元サイト様、役立つコードの作成ありがとうございます!

(参照元サイト:はてなブログの動く記事リンク作ったよ!【ブログカスタマイズ】

 

WordPressの画面では↓のようなカンジになるかと思います。

テキストリンクをカスタマイズ2

 

そして無事にコピペが完了しましたら
「スタイルシートを保存」をクリックします。

テキストリンクをカスタマイズ3

 

無事に保存できたら↓のように「スタイルシートを保存しました」とメッセージが出ます。

テキストリンクをカスタマイズ4

これでCSSのカスタマイズは終了しました。

 

2. 投稿編 新規投稿時に以下のコード追加

今度はいつも投稿する時のように新規投稿画面に行きます。

テキストリンクをカスタマイズ5

 

「テキスト」をクリックしてテキストモードにします。

テキストリンクをカスタマイズ6

 

そこで以下のコードを貼り付けます。

(参照元サイト:はてなブログの動く記事リンク作ったよ!【ブログカスタマイズ】

 

テキストリンクをカスタマイズ7

コード内の「リンク先URL」の部分を
リンクさせたい記事のアドレスに変更し、(例:https://y-hey.com/blogwriting-shorter/)

「リンク先タイトル」の部分を
リンクさせたい記事のタイトルに変更します(例:ブログ書く時間を1/3に短縮するたった一つの大切なこと)

最初の例の場合のようですと↓のようになります。

 

すると↓のようなリンクになります!
やったー!

 

あわせて読みたい

ブログ書く時間を1/3に短縮するたった一つの大切なこと

 

スポンサーリンク

まとめ

今回はブログやホームページでテキストリンクをフレームで囲って
カスタマイズする方法を紹介しましたがいかがでしょうか?

ブログを投稿する際にテキストモードにして
以下のコードを貼り付けるだけでいい感じなリンクにすることができます。

(参照元サイト:はてなブログの動く記事リンク作ったよ!【ブログカスタマイズ】

投稿毎に必要になるコードですので
ご自分がお使いのパソコンのメモ帳やワード等にコピペしておくと
ブログ投稿時の作業性があがると思いますよ。

この記事を読んであなたのブログライフがちょっとだけ豊かになれば幸いです。
最後までお読み頂き本当にありがとうございました。

↓さっそく使ってみました!(笑)

あわせて読みたい

【超簡単!】WordPressの投稿でスペース(空白)が消える場合の対処法!

スポンサーリンク
この記事を書いている人 - WRITER -
y-hey
ブロガー・アウトドアライフクリエイターとして 多くの人にキャンプ、登山、旅行について興味を持ってもらい ”人生を120%楽しんでもらいたい”と考えている男です。 2児の父ですが単独で南米最高峰アコンカグアや アフリカ最高峰キリマンジャロを一眼レフカメラと共に登ったり (普段は自称イクメンです)空手もやってる多趣味な男です。 ブログは2005年から書いています。(当サイトは2015年からです) 2017年8月に月間50,000PV突破しました! もし記事を読んで「役に立った」「面白そう」「笑えるわー」 と思われた方は、いいね、ツイート、はてぶ していただけますと更新の励みになります。 よろしくお願いします!
詳しいプロフィールはこちら
 

  関連記事 - Related Posts -

 

  最新記事 - New Posts -

 

Comment

  1. 竹田 正志 より:

    とても参考になる記事ありがとうございます!
    あわせて読みたいの背景の色を赤ではなく他の色にする方法はありますか?

    • y-hey y-hey より:

      竹田さん、お役に立てたようでうれしいです!
      「あわせてよみたい」部分の背景色を変えることもできますよ!

      まずはHTMLの色コード(#000000のように#と6ケタの英数字のコード)を↓のサイトで背景色にしたい色を選んでコピーして下さい。
      https://html-color-codes.info/japanese/

      その後、今回カスタマイズしたCSSコードの15行目にある

      background-color: #ea4747;

      の「#ea4747」の部分を先程コピーした色コードに変更すればできますよ。
      「;」は最後に必要ですので「#ea4747」の部分のみ変更して下さいね。

      竹田さんのサイトの雰囲気に合わせて好きな色にしてみて下さい(^o^)

      • 竹田 正志 より:

        返信ありがとうございます。色を変えることができました。もう一つ質問してもよろしいでしょうか?
        合わせて読みたいの枠の中に2つ以上のリンクを貼ること可能ですか?

        • y-hey y-hey より:

          色を変えれたようでよかったです。
          枠の中に2つ以上のリンクを設置する場合ですが、今回のやり方ですとうまくいかなかったので
          近日中に別の記事で書きますね!申し訳ありませんが、しばらくお待ち下さい・・・

  2. 竹田 正志 より:

    わかりました!ありがとうございます
    記事楽しみにしていますね!

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© 登っちゃえば? , 2017 All Rights Reserved.