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

あわせて読みたい リンク
スポンサーリンク

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

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

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

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

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

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

あわせて読みたい

リンク先タイトル

 

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

リンク先タイトル

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

 

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

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

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

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

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

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

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

 

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

 

あわせて読みたい

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

 

まとめ

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

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

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

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

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

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

あわせて読みたい

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


スポンサーリンク

あわせて読みたい リンク

コメントを残す

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

ABOUTこの記事をかいた人

y-hey

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