アイキャッチ画像挿入の機能がないFC2ブログみたいな無料ブログにアイキャッチ画像を簡単に挿入する方法 | うぇぶ小屋

ホーム / WEBデザイン / アイキャッチ画像挿入の機能がないFC2ブログみたいな無料ブログにアイキャッチ画像を簡単に挿入する方法
  • 2012/12/20
  • アイキャッチ画像挿入の機能がないFC2ブログみたいな無料ブログにアイキャッチ画像を簡単に挿入する方法

    アイキャッチ画像挿入の機能がないFC2ブログみたいな無料ブログにアイキャッチ画像を簡単に挿入する方法

    どうも。ツイッターの背景画像を変更した@webgoyaです。

    今回はアイキャッチ画像についてです。

    アイキャッチ画像というのはこのブログの記事タイトル下の画像や右サイドバーにある記事サムネイル画像の事ですね。

    アイキャッチというのは、「人目を引く」と言う意味があり、記事タイトル下をはじめ人気記事、最新記事、関連記事などにアイキャッチ画像を使えば、記事の内容をイメージとして視覚に訴える事ができます。

    簡単に言うと、目立つ画像を使う事で記事をダイレクトに印象づけるというわけですね。

    また、ソーシャルブックマークなどに記事が登録された場合にはサムネイル画像として表示されるのでクリック率が上がりアクセスも伸びやすくるという効果もあります。

    WordPressやMovableTypeであればアイキャッチ画像を記事単位に設定できる機能があったりするのですが、今回はFC2ブログなどのそういった機能がない無料ブログサービスでも同じようなことができないか考えて実際にやってみました。

    方法はまずCSSを以下のように記述します。

    CSS アイキャッチ画像と記事タイトル、説明文は以下のようにします。

    HTML サイズや色、文字の大きさなどは適宜調整してください。

    アイキャッチ画像を利用するメリット

    ・記事の内容をイメージとして印象付けられる。
    ・ブログの見栄えが良くなる。
    ・ブログ記事の見栄えが良いのでPV数が伸びやすい。


    アイキャッチ画像はこちらで探せますのでよろしければどうぞ。

    商用利用OK・クレジット表示不要のフリー画像素材配布サイト30選


    商用利用OK・クレジット表示不要のフリー画像素材サイトを厳選してまとめてあります。
    全て著作権フリー(ロイヤリティフリー)で素材を無料で配布しているサイトですのでとても便利です。

    以上参考になれば幸いです。
    関連記事

    スポンサード リンク

    TwitterやFacebookページでは日々うぇぶ小屋が気になった情報(ウェブ制作・運営、ブログの収益化に関する事が多い)をつぶやいていますのでこの機会にぜひ"フォロー"または"いいね"をよろしくお願いします。


    Twitterアカウント → @webgoya
    Facebookページ → webgoya
    RSSフィードを配信しています → RSS購読はこちら

    タグ/ CSS 備忘録
    コメント一覧

    <img src="画像URL">
    この画像URLには何を入れれば良いのですか?
    FC2ブログでその様な変数は見当たりませんが・・・。

    2013/07/25 Thu 01:48 | URL

    この記事にコメントを残す
    管理者にだけ表示を許可する

    人気記事

    最新のエントリー

    カテゴリ

    ライター募集!