BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» livedoorブログカスタマイズ ブログ記事の日付を画像にする方法

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

livedoorブログカスタマイズ ブログ記事の日付を画像にする方法

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

384182e2a156d34a26a54a13a1d1460e_s.jpg

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

今回は、ライブドアブログカスタマイズ ブログ記事の日付を画像にする方法をお伝えいたします。

ブログの日付を画像にするには?

20161001-0.jpg
上の画像の日付「24」をトップの画像に変更しましょう。

まず、ブログの管理画面にログインします。

20161001-1.jpg

記事を書く→画像→貼り付け→HTMLタグ編集の順にクリックします。

すると、HTMLタグが現れます。
下のタグ部分をコピーしておきます。

<img src="http://livedoor.blogimg.jp/caagloble/imgs/1/f/1f777d92-s.jpg" width="480" height="320" border="0" alt="384182e2a156d34a26a54a13a1d1460e_s" hspace="5" class="pict"  />

20161001-2.jpg

次に、ブログ設定→PC→カスタマイズ→トップページと順番にクリックします。

下の四角で囲った画像部分を探してみましょう。

20161001-3.jpg

<span class="article-date">の直前に先ほどコピーしたタグを貼り付けます。

20161001-4.jpg

貼り付けられましたか?

その後、プレビューすると・・・

20161001-5.jpg

青空だけが見えています。
ここで画像の大きさを変えてみましょう。

下のタグにあるwidthとheightを 60 と 40 にしてみます。

<span class="article-month"><$ArticleDateMonthName$></span><img src="http://livedoor.blogimg.jp/caagloble/imgs/1/f/1f777d92-s.jpg" width="480" height="320" border="0" alt="384182e2a156d34a26a54a13a1d1460e_s" hspace="5" class="pict"  /><span class="article-date"><$ArticleDateDay$></span>
  </div>

 width="60" height="40"

その後もう一度プレビューすると・・・

20161001-6.jpg

まとめ

いかがでしたか?

日付を画像にすることで、オリジナルブログがさらにブラッシュアップできたのではないでしょうか?

是非、試してみてくださいね!


live

カテゴリ:

TOPへ