BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» livedoorブログカスタマイズ 「続きを読む」を画像に変更する方法

このエントリーをはてなブックマークに追加

livedoorブログカスタマイズ 「続きを読む」を画像に変更する方法

   投稿日: 2016/10/06    投稿者:webコラム

f04c9b1fb20e0c051269a42a47b89591_s.jpg

こんにちは! ライターのモモタロウです。

今回は、ライブドアブログカスタマイズ ブログ本文の「続きを読む」を画像に変える方法をお伝えいたします。

「続きを読む」を画像に変えるには


まず、livedoorブログにログインします。

下の画像を見ると記事の下に「続きを読む」があります。
20160924-1.jpg

この「続きを読む」を画像に変えてみましょう。


20160924-2.jpg

トップの画像に変更してみます。

記事編集画面で、画像をアップロードします。

上の画像のように「画像をドロップ」するとアップロードできます。

20160924-3.jpg

アップロードしたら、HTMLタグ編集ボタンをクリックします。

20160924-4.jpg
HTMLタグが表示されます。これをコピーしておきます。

続きを読むの画像情報(例)
<img  width="192" height="129" class="pict" alt="続きを読む画像" src="http://livedoor.blogimg.jp/caagloble/imgs/1/f/1fa47d22.jpg" border="0" hspace="5"class="pict"/>


20160924-5.jpg

次に、HTMLを編集します。
上の画像のように、「ブログ設定」→「カスタマイズ」→「トップページ」を順にクリックします。

20160924-6.jpg


<div class="article-body entry-content">
  <div class="article-body-inner">
  <$CommonTheme$>
  <$ArticleBody$>
  <IfArticleBodyMore><span class="article-continue"><a href="<$ArticlePermalink$>#more">続きを読む</a></span></IfArticleBodyMore>
  </div>
  <$ArticleTagsList$>
 </div><!-- articleBody End -->

色の変わった部分を削除します。

「続きを読む」部分は、先ほどコピーしたHTML文に変更します。

以下の通りになります。


<div class="article-body">
  <div class="article-body-inner">
  <$CommonTheme$>
  <$ArticleBody$>
   <IfArticleBodyMore><a href="<$ArticlePermalink$>#more">
<img  width="192" height="129" class="pict" alt="続きを読む画像" src="http://livedoor.blogimg.jp/caagloble/imgs/1/f/1fa47d22.jpg" border="0" hspace="5">
</IfArticleBodyMore>
   <$ArticleTagsList$>
</div>
</div>
<!-- articleBody End -->

20160924-7.jpg

HTML編集を保存して、ブログ記事を確認してみます。

下の画像のようになりました。
20160924-8.jpg

少し画像が大きすぎるようです。

そこで、画像の大きさを変えてみます。

その場合、先ほどコピーした
タグの一部を変更します。

<img  width="192" height="129" class="pict" alt="続きを読む画像" src="http://livedoor.blogimg.jp/caagloble/imgs/1/f/1fa47d22.jpg" border="0" hspace="5"class="pict"/>

width="100"  height="50"にしてみます。

20160924-9.jpg

まとめ


いかがでしたか?

ライブドアブログカスタマイズでさらに個性のあるブログに仕上げてみましょう。

カテゴリ:

TOPへ