ブログ作成探偵事務局

ブログ作成や運営に関する情報を解説・提供しているブログです。

2012年04月

ヘッダーを画像に挿し変えてみよう!(FC2ブログ)

よくタイトル部分を画像に挿しかえているブログを見かけますよね、
まとめサイトなどに多いでしょうか。
画像のタイトルは訪問者にブログの印象を残すことができます、
今回はそんなブログのタイトル(ヘッダー)を画像に変更する方法を解説します。

ヘッダー画像を用意する
まずはヘッダー画像を用意します、
サイズはそれほど気にしなくても良いですが800X300ぐらいが良いでしょう。

画像は自分で描いたり素材として配布しているページから頂いたりします、
有名どころでは絵師さんを募集して描いてもらっているブログもありますね。

ヘッダー素材配布サイト
MATERIAL!
ブログ ヘッダー画像 無料

ヘッダーを画像に挿し変える
画像が用意できたらまずアップロードします、
FC2ブログであれば管理画面のファイルアップロードからアップロードしましょう。

アップロードが完了したら次はテンプレートの設定よりHTMLの編集を行います。

まずは<!--▼▼ ヘッダー ▼▼-->と書かれている部分を探します(テンプレートによって名称が異なることもあります)

このブログのテンプレートの場合このようになっていました。


<!--▼▼ ヘッダー ▼▼-->
<div id="header_outline">
<div id="header_body">
<h1><a href="<%url>" title="<%blog_name>" alt="<%blog_name>">
<div class="top_search">
<form action="./" method="get">
<input type="text" size="20" name="q" value="" maxlength="200" />
<input type="submit" value=" 検索 " />
</form>
</div>
<div class="intro"><%introduction></div>
</div><!--/header-->
</div><!--/header_outline-->
<!--▲▲ ヘッダー ▲▲-->



そして<h1><a href="<%url>"><%blog_name></a></h1>の部分を
<h1><a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="http://~" border="0" /></a></h1>
に書き換えます(http://~の部分には画像のURLが入ります)

あとは更新を押せば画像が適用されますので
ブログより確認してください。


トラックバック先URL:http://10plate.blog44.fc2.com/blog-entry-54.html


ブログを作成する上で設置しておきたいページ3つ

ブログに問い合わせようのページなどがあると
訪問者側としても便利です。


相互リンクの募集ページ
相互リンクを増やすことはアクセスアップにも繋がります、
専用のページを作っておくことでリンクを希望している人が迷わずに済みます。

足跡ページ
足跡のページとはブログを訪問しましたよ、とコメントで伝えるページです。
詳しい運営については足跡のページを作ってみよう!を参考にしてください。

TOPページ
本来ブログは投稿された記事が新しい順に並びます、
しかし一番上のページを固定することでTOPページを作れます。
作成方法や使い方はTOPを作ってみよう!を参考にしてください。

リンク

リンクとは
ウェブ上で使用されるものはハイパーリンクと呼ばれる物で、
あるウェブページからリンクにアクセスすることで他のページへと飛ぶことができます。

ブログなどでもリンクは多用されます、
使用例としてはウェブページの紹介や
ファイルのあるページへの誘導など多岐にわたります。

またウェブサイト同士でリンクを貼りあうことを
相互リンクといいます。

関連記事
相互リンクを結んでみよう!
トラックバック

ファビコンを変更してみよう!(livedoor Blog)

今回はlivedoor Blogでのファビコンを変更する方法を解説します。

ファビコンについて
ファビコンを作ってみよう!
コチラの記事を参考に。
ファビコンについてやファビコンを作成できるサイトを解説しています。

livedoor Blogでファビコンを適用する方法
まずは管理画面よりブログ設定をクリック、
基本設定をクリックして設定画面に入ります。

favicon画像変更するを押して出てきたウィンドウの選択をクリック、
ファビコンにしたいデータ(.icoに変更しなくても良い)を選択して送信するを選ぶと
自動的にアップロードされてファビコンが適用されます。

あとはブログのファビコンが変更されているか確認してください。

フリーエリアを使ってみよう!(livedoor Blog)

フリーエリアとは自由に文字を記入し編集できるプラグインです、
このフリーエリアを活用する方法を解説します。

フリーエリアを設置する方法
管理画面よりブログ設定にアクセス、
デザイン / ブログパーツ設定よりブログパーツをクリックします。

自由なカスタマイズ用をクリックしフリーエリア
プラグインエリア(AまたはB)にドラッグ&ドロップします。

フリーエリア設定をクリックすることで自由に編集できます。

フリーエリアの使い方
フリーエリアの活用法はたくさんあります。

使用の一例)
・livedoor以外のブログパーツを設置する
・ブログランキングなどのバナーを設置する
・自分のブログのバナーを設置する
・リンク集を作る
・プロフィールなどを書く
・オススメの記事などをまとめる
・お知らせに使う
・広告を貼る

トップページに最新記事を表示させないようにする(FC2)

本来ブログのホームには投稿した日にち順に記事が並んでいます、
それらの記事を全てトップページから非表示にすることでHPのような見た目になります。

ホームの記事を非表示にする
まず管理画面よりテンプレートのHTML・CSS編集のページにいきましょう、

<!--▼ エントリー(記事)▼-->
<!--not_index_area-->
     
     (省略)

<!--/not_index_area-->
<!--▲ エントリー(記事)▲-->

↑のようにエントリーの直後と直前にそれぞれ<!--not_index_area--><!--/not_index_area-->
と記入してください(テンプレートによって多少名称などがかわります)

次に↓の部分をHTMLより探します。

<!--permanent_area-->
<!--▼ページナビゲーション(個別記事)▼-->
(省略)
<!--▲ページナビゲーション(個別記事)▲-->
<!--/permanent_area-->

<!--not_permanent_area-->
<!--▼ページナビゲーション(全体ページ)▼-->
(省略)
<!--▲ページナビゲーション(全体ページ)▲-->
<!--/not_permanent_area-->



見つけたら次の赤文字の部分をHTMLに記入します。

<!--permanent_area-->
<!--▼ページナビゲーション(個別記事)▼-->
(省略)
<!--▲ページナビゲーション(個別記事)▲-->
<!--/permanent_area-->

<!--not_index_area-->
<!--not_permanent_area-->
<!--▼ページナビゲーション(全体ページ)▼-->
(省略)
<!--▲ページナビゲーション(全体ページ)▲-->
<!--/not_permanent_area-->
<!--/not_index_area-->

<!--index_area-->
<!--▼ページナビゲーション(トップページ)▼-->
<p class="page_navi">
| <a href="<%url>" title="<%blog_name>">HOME</a> |
<a href="<%url>page-0.html" title="次ページへ進む">次ページ≫</a>
</p><!--page_navi-->
<!--▲ページナビゲーション(トップページ)▲-->
<!--/index_area-->

※HTMLは全てFC2ブログのテンプレート工房様より引用させていただいております

最後に更新を押して変更が適応されているかブログを確認してください。


トラックバック先URL:
http://10plate.blog44.fc2.com/blog-entry-152.html


トラックバック

トラックバックとは

トラックバックとはブログ特有の機能で
他の記事に対して(自他問わず)新たな記事を書き
その記事のリンクをトラックバック先に貼る機能です。

トラックバックを使用することで
リンク増加によるアクセスアップが狙えたり
トラックバック先の管理人さんと仲良くなれるかもしれません。

関連記事
トラックバックを使ってみよう
スパムって何?

コメント

コメントとは

ブログではブロガーが書いた記事に対して
コメントを残すことができる機能があります。

この機能を使うことで管理人と読者の交流が深まったり
新たな発見が生まれることがあります。

関連記事
他のブログにコメントしてみよう!
スパムって何?

最新記事と最新コメントを表示させる(Blogger)

Bloggerには最新記事と最新コメントを表示させるプラグインがありません、
しかしRSSを利用することで表示が可能になります。

Bloggerで最新記事・最新コメントを表示させる方法
まずBloggerの管理画面よりレイアウトを選択、
ガジェットを追加からフィードを追加します。

そしてフィードに最新記事または最新コメントのRSSを入力し設定します。

最新記事のフィード(URLの部分には自分のブログのURLが入ります)
http://~.blogspot.com/feeds/posts/default

最新コメントのフィード(URLの部分には自分のブログのURLが入ります)
http://~.blogspot.com/feeds/comments/default



注意点
この方法はRSSを利用して表示させるものなので
記事・コメントが更新されてから反映するまで多少時間がかかります。

ブログをデザインするとき注意すること3項目

ブログはテンプレート(スキン)やブログパーツを使って
オリジナリティあふれるページが簡単に作れます、
今回はブログデザインをカスタマイズする上での注意点を解説します。


自分のブログのテーマを強調する
例えば料理や食べ歩きのブログなら食べ物のデザイン、
といった感じで人目でどんなブログか分かる物がいいです。

ブログにあったテーマが無い場合は
明るい暗いなど他の要素からテンプレートを決めましょう。

色合いを考える
訪問者がページを開いたときいきなり真っ赤なページや全面黒一色のページが出てきたらどでしょう、
きっと目がチカチカしてページを見るのはかなり苦痛ですよね。
もっと優しい色だと訪問者も落ち着いて記事を読めると思います。

また”カラフルなページにしたい”と様々な色を使用してしまうと
あまり整頓された感じには見えません。

ブログパーツなどのカスタマイズは最小限に
ブログパーツをたくさん付けるとページの読み込みが非常に重くなってしまいます、
またよくミニゲーム的なブログパーツが貼り付けてあるブログがありますが
訪問者が求めている物は記事です、きっと見向きもされないことが多いでしょう。

ブログに入ると動画や音楽が再生される物もあまりよくありません、
訪問者がその音楽を気に入るとは限りませんしやはり重くなってしまいます。
カーソルアイコンの変更やブログスイッチも同様の理由からオススメしません。

最後に
こちらに書いたものは全て個人の価値観と見解によります、
従ってこれが正解というわけではありません。
また今回はあくまで初めて訪問する人に向けてのカスタマイズを前提としていますので
既にリピーターを獲得していたり自己満足の域をでないブログ運営であれば
この記事はあまり参考にならないかもしれません。
livedoor プロフィール
アクセスカウンター

最新コメント
QRコード
QRコード
タグクラウド
  • ライブドアブログ