ふじの院生ブログ

就活が終わった理系大学院生のふじです。自分の体験や経験から皆さんの役に立つであろう情報を発信していきます。よろしくお願いします。

【ここを変えるだけ】はてなブログでリンクのURLの名前を変える方法

スポンサーリンク

f:id:fujifuji95:20190808210912p:image

こんばんは!

ふじです。

 

はてなブログ初心者のみなさん、色んな人のブログを見ていると

ここをクリック!」や「リンクはこちら」などいろんなリンクの名前の表示方法があって、「こんなリンク作りたいなー」「どうやったらできるんやろ?」そう思ったことはありませんか?

 

大丈夫です!

あるところを変えるだけで簡単にこのようなリンクが作れます。

今日はこのように、はてなブログでリンクのURLの名前を変える方法について、できるだけわかりやすく図解していきます。

それでは早速いってみます!

 

 

 

リンクのURLの名前を変える方法

ここを変えるだけ!

記事編集画面にリンクをすでに貼った状態で、HTML編集内のリンクの箇所の

f:id:fujifuji95:20190808153522p:plain

赤線部分(この場合、黒文字の「YouTube」)を好きな文字や言葉に変えるだけ!

そうすれば、赤線部分の言葉がリンク先に飛べる形で表示され、どんな単語や文章でも緑で書かれたURLに正しく飛びます。

 

この説明で何を言っているかわかった方は、これ以降は読まなくて結構です。

しかし、「何いってんの?」そう思われた方も多いと思います。

そこで今度はより具体的に、リンクのURLの名前を変える方法を説明していきます。

 

具体例

今回は記事内にYouTubeのリンクを貼り、そのリンクの名前を「YouTubeはこちら」というふうに変えたいと思います。

 

ステップ①:はてなブログの記事編集画面を開く(今回はあらかじめ適当に文章を作っております。)

f:id:fujifuji95:20190808144524p:plain

 

ステップ②:記事編集ページの「リンク」をクリック

f:id:fujifuji95:20190808144558p:plain

 

ステップ③:YouTubeのURLをURL欄に貼り付け、「プレビュー」をクリック

f:id:fujifuji95:20190808152145p:plain

 

ステップ④:今回は「タイトル」を選択、「選択した形式でリンクを挿入」をクリック

f:id:fujifuji95:20190808152203p:plain

 

ステップ⑤:記事編集ページで、リンクが正しく貼れているか確認

f:id:fujifuji95:20190808152232p:plain


 

ステップ⑥:記事編集ページ上の「HTML編集」をクリック

f:id:fujifuji95:20190808152906p:plain

 

ステップ⑦:リンクを貼った箇所に該当するところを探し(今回であれば6行目)、赤線の「YouTube」を「YouTubeはこちら」に変える

f:id:fujifuji95:20190808213157p:plain

 

ステップ⑧:「プレビュー」でリンクの表示が「YouTubeはこちら」になっていることを確認

f:id:fujifuji95:20190808152521p:plain

 

今回はリンクを貼るところから説明させていただいたため手順が増えてしまいましたが、

結局はHTML編集の

f:id:fujifuji95:20190808153522p:plain

この赤線部分を好きなように変えていただければ、赤線部分の言葉がリンク先に飛べる形で表示され、どんな単語や文章でも緑で書かれたURLに正しく飛びます。

 

 

最後に

今日は、はてなブログでリンクのURLの名前を変える方法をご紹介しました。

いやー、ブログ始めたばっかりの頃はこれができるようになりたかったんですよね(笑)

同じことで悩んでいる方がおられるだろうなと思い、この記事を書きました。

ブログ書き始めの頃の僕のようにHTMLをいじったことのない方に、ちょろっといじるだけでカスタマイズ可能なんですよ!ってことが伝われば幸いです。

 

また、僕がはてなブログを始めた頃のはてなブログに関する3つの誤解のリンクを載せてます。

はてなブログ初心者のみなさん、もしかしたら僕と同じ誤解をしているかもしれません。ぜひ合わせてお読みください。

ここをクリック!(はてなブログに関する3つの誤解)

 

今日も最後まで読んでいただきありがとうございました。

f:id:fujifuji95:20190808211935j:image

ノートパソコン

 

 

 

プライバシーポリシー お問い合わせ
スポンサーリンク