「続きを読む」のリンクを好みに合わせてカスタマイズする方法②

「続きを読む」のリンクを好みに合わせてカスタマイズする方法②


いつもFC2ブログをご利用いただきありがとうございます。
FC2ブログスタッフです。

前回の記事では、「続きを読む」のリンクに使われている「続きを読む」という文字を「ピヨッ!」に変更しました

▼「続きを読む」のリンクを好みに合わせてカスタマイズする方法①
https://fc2blogstaff.blog.fc2.com/blog-entry-102.html

今回の記事では、リンクに使われている文字を好みの画像に変更する方法をご紹介します

なお、今回使用する公式テンプレートwhite_card_respテンプレートでは、
前回の変更が適応されたものをそのまま使用するため、現在は続きを読むためのリンクが「ピヨッ!」と表示されています。

トップにアクセスしたときに、一番最初に表示されている記事の「ピヨッ!」と、
それ以降の記事に設定されている「ピヨッ!」が別々に指定されているので、それぞれ編集しましょう


readmore2.png

さっそく始めてみましょう!



手順は以下の3ステップとなります。

①imgタグを用意する。
②ブログ管理画面で「テンプレートの設定」を開く
②HTML編集画面で「ピヨッ!」を探す。
④「ピヨッ!」が表示されていた場所に用意していたimgタグを入れてテンプレートの内容を保存する。

今回は、「ピヨッ!」という文字リンクを、pyo_chan - smallというピヨちゃんの画像に変えてみましょう

①imgタグを用意しよう!



imgタグについて、簡単に説明したいと思います

imgタグとは、web上に画像を表示させるためのものです。
<img src=”URL”>
のURL部分に
画像が保存されている「場所」を入力することでその画像が表示されるようになります!

この記事で使用するピヨちゃん画像であれば、
「 https://blog-imgs-111.fc2.com/f/c/2/fc2blogstaff/20181214231742c88.png 」が
ピヨちゃんの画像がある「場所」ですね!

この「場所」は、ブログ管理画面>「ファイルアップロード」にアップロードされている
各画像のURLなので、内容をそのままコピー
していただければ大丈夫です!

また、今回実際に使用するimgタグは、以下のものを使います。

<img src="https://blog-imgs-111.fc2.com/f/c/2/fc2blogstaff/20181214231742c88.png" alt="pyo_chan - small" border="0" width="65" height="65" />


ここでタグの内容を簡単にご説明します。

画像のタイトルは、
「alt="pyo_chan - small"」の””内に書かれている、
pyo_chan - small」です。
万が一、画像が表示されなかった場合に代わりに表示されます。

画像の枠線は、
「border="0"」の””内に書かれている、「0」です。
(が、0になっているので、実際は枠線がない状態です!)

画像の横幅は、
「width="65"」の””内に書かれている、「65」です。
65pxのサイズで横幅が設定されます。

画像の縦幅は、
「height="65"」の””内に書かれている、「65」です。
65pxのサイズで縦幅が設定されます。

②PCテンプレート設定で「ピヨッ!」を探そう!



ブログ管理画面で「テンプレートの設定」を開きましょう

tenplate.png

テンプレートの設定画面を開いたら、HTML編集画面内で「ピヨッ!」を見つけます。キーボードのCtrlキーとFキーを押して、検索フォームに「ピヨッ!」を入れると簡単に見つかります。



CtrlキーとFキーを押して、検索をしてみると…
以下のように2つほど検索結果に出てきました

piyotemplate.png

先ほどの検索で「ピヨッ!」がどこにあるかが分かったので、
表示された2つの「ピヨッ!」をそれぞれ削除しておきましょう

syoukyo1.png

③用意していたimgタグを設置してみよう!



さて、ここまでくれば、終わりはすぐそこですね
先ほど上の方で用意したimgタグを、「ピヨッ!」が書かれていた場所にそのまま入れてみましょう

syoukyo3.png



④テンプレートを保存して、ブログを確認してみよう!



書き換えたら、「更新」ボタンを押して、テンプレートの設定を保存しましょう。

piyopiyo.png

テンプレートを保存したら、ブログ管理画面の右上にある、
「ブログの確認」を押してブログの表示を確認します。

piyopiyopiyo.png

「ピヨッ!」からピヨちゃんの画像に変わっていることが確認できました
final.png

皆さんも「続きを読む」リンクをお好きな画像に変えて、オリジナルブログを作成してみてはいかがでしょうか
これからもカスタマイズ方法をご紹介していきたいと思いますので、どうぞお試しください


FC2サービスでは、お客様からのご要望やリクエストを募集しております。
もし宜しければ、FC2ブログに関するご意見・ご要望を
下記のページからご投稿いただけますと幸いです。

▼FC2リクエスト
https://request.fc2.com/

FC2ブログに関してご不明な点がある場合は、
下記の専用お問い合わせフォームより詳細を添えてお問い合わせをお願いいたします。

▼FC2ブログお問い合わせフォーム
https://form1ssl.fc2.com/form/?id=15028
関連記事

【公式】FC2ブログスタッフ

FC2ブログの使い方やおすすめブログのご紹介など、FC2ブログのスタッフによる公式ブログです🐤

月間500億越えのPV数を誇るFC2サービスを使いこなして、ブログで情報発信していこう♪

FC2ブログ 公式チャンネルの公式Twitterも、フォローよろしくお願いします!



皆様の応援を心よりお待ちしております👌

web拍手 by FC2

最新記事

Yahoo!ブログからFC2ブログへお引越し登録の時にエラーが表示されたら 2019/04/18
まさかそんなところで!意外と気が付かなかった(かもしれない)関連記事の設定方法♪ 2019/04/11
FC2おすすめブログのご紹介♪『40代はハゲでした。』 2019/04/04
こんなに簡単!コメント欄表示/非表示を設定する方法 2019/03/28
301リダイレクトと302リダイレクト、違いと使い分け方について! 2019/03/21

公式ブロガー

FC2ブログの公式ブロガーとしてご活躍されているブロガー様のご紹介です♪


ブログ特集

検索フォーム