ブログノウハウ

これならできる!ブログデザインを無料でカスタマイズする方法

ブログデザインを自分専用のオリジナルデザインにカスタマイズしたいと思ったことはありませんか?

 

  • ヘッダー画像を変えたい
  • 画像RSSを表示させたい
  • メルマガの登録フォームを設置したい
  • 期間限定広告を表示させたい
  • ブログランキングのバナーを各記事に自動的に表示させたい

など・・・。

要求を挙げだしたらキリがないと思います。

 

また、

  • 無料ブログのデフォルトテンプレートはもう飽きた
  • 売っているテンプレートをそのまま使うと、他のブログとデザインが被るからイヤだ!

といった、わがままな理由から、デザインを変更したいと思う方もいるはずです。

 

今日は、そんな「ブログデザインを自分でカスタマイズしたい」というわがままな方のために、私が度々活用しているブログデザインのカスタマイズ方法をご紹介します。

 

今回は、カスタマイズの例として、トップページの任意の場所にバナー広告を設置してみました。

カスタマイズ手順

デザインのカスタマイズには、無料ブログでもワードプレスでも

  • HTML
  • CSS

をいじることになります。

 

「やっぱり元に戻したい。」

「どこをいじったのか、わからなくなっちゃった。」

 

デザインを変更し始めてからこういった事態にならないようにするために、まず初めにメモ帳などを使って、「HTML」と「CSS」のバックアップを必ず残しておきましょう

ワードプレスの場合

管理画面から「外観」→「テーマの編集」と進んで、これから変更を加えるテンプレートを開き、アルファベットの文字列をメモ帳にコピー&ペーストします。

 

ほとんどのワードプレステーマでは、

  • トップページ⇒メインインデックスのテンプレート (index.php)
  • 個別記事⇒単一記事の投稿 (single.php)

に対応しています。

 

Control(Command)+A :全文選択

Control(Command)+C :コピー

Control(Command)+V :貼り付け

を使うと便利です。

無料ブログの場合

管理画面から「デザイン設定」などに進み、HTMLやCSSの変更画面を開いて同様にバックアップをとってください。

修正したい場所に「アタリ」をつける

バックアップが済んだら、実際に変更していきます。

 

HTMLでもCSSでも、ほとんどの場合アルファベットの文字列内に、「メインコンテンツ」とか「トップページへ」といった文言を見つけることが出来ます。

こういった説明文を頼りに、自分のブログの修正したい部分に対応した、HTMLコードを見つけます。

 

さきほどの「メインコンテンツ」であれば、ヘッダー画像やサイドバー、フッターなどを除いた部分、すなわち、記事本文などに対応した部分が「メインコンテンツ」より下に書かれているのがわかります。

また、HTMLの「メインコンテンツ」より下には「最新記事」が書かれています。

 

これらの情報から、HTMLの「メインコンテンツ」と「最新記事」の間部分に広告コードを書き込むことで、ブログでいえば、「スキマの余白部分に広告が表示される」と予測できます。

 

ところで、HTMLの「メインコンテンツ」と「最新記事」の間には、何行もアルファベットが書かれています。

いったいどこに広告コードを書き加えたら良いのでしょうか?

 

1234

 

広告コードの追記場所を確認するために、①②③④の各場所に、それぞれ「あ」「い」「う」「え」と書き加えて、一旦保存してみます。

すると・・・。

 

 

ブログの方には、「あ」と「い」しか表示されません。

 

つまり、広告コードは、HTMLの「あ」「い」に該当する部分に書き込めば正しく表示されるということです。

実際に書き加えてみたら、表示したい場所に、うまく表示させることができました。

 

同様の手順を踏むことで、RSSフィードを設置したり、メルマガの登録フォームを設置することもできます。

ブログカスタマイズ方法(まとめ)

今回はHTMLの修正をメインとしたブログカスタマイズ方法しか説明できませんでした。

しかし、CSSも似たような手順で変更することが可能です。

 

  • アメーバブログ
  • ライブドアブログ
  • FC2ブログ
  • ワードプレス
  • HTMLサイト(ホームページ)

どんなブログ・サイトでも基本的に同じ手順でカスタマイズができます。

 

「業者に頼むと高いんだよね」

「ほんのちょっとだけ修正したいんだけどな~」

そういうときは、自分でできることがないか挑戦してみてください。

 

ちなみに、なんで私がここまでブログカスタマイズに詳しくなってしまったのか?(-_-;)という経緯は、こちらを読めばだいたいわかります。

↓  ↓  ↓

無駄ではなかったニート時代の経験

 

あの時苦労したおかげで、いまでは、ブログで稼ぐ方法を人に教えることができるようになりました(感無量)。

ブログのカスタマイズはこちらもご参考に!

Twitterタイムラインの埋め込みとデザインカスタマイズの実施手順

わずか30秒でイケてるブログ用「サムネイル画像」が作れる「Pablo」が超便利!

ブログ記事のSNSシェア数増加には「忍者おまとめボタン」を使え!

bitFlyer ビットコインを始めるなら安心・安全な取引所で CMでもお馴染みの仮想通貨取引所
カンファレンスバナー 日本一満足度の高いASP

関連記事

  1. 初心者が「ブログで稼ぐ」のは不可能!その根拠と初心者でもブログで…
  2. ブログアフィリエイトで売れやすい商品を探す4つの手法【商品選抜の…
  3. 使わないドメインはオークションに出品!賢いお金の増やし方
  4. ブログの改行の仕方を変えました!ウザイ改行を無くした3つの理由
  5. 中古ドメインを使ったサイトの実例【知らないサイトに飛ばされます】…
  6. ブログアフィリエイトに限界を感じたらメルマガの出番!
  7. 【SNS集客】Facebook、Twitterを使ってブログのア…
  8. ブログを独自ドメインにする理由。稼げる「資産ブログ」を作るなら独…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

ソーシャルメディア

  1. Facebook
  2. Twitter
  3. YouTube
  4. LINE@
  5. Mailmagazine

アーカイブ

最近の投稿

カテゴリー

おすすめ記事

ビットコインゴールドの分裂に備えて、ビットコインを買い増ししました

2017年の8月くらいから、メルマガやブログ以外の収入源として仮想通貨投資をしているのですが、今月末…

ピックアップ記事

おすすめ記事

  1. もう貧乏は嫌だ!『ラットレース』『ワーキングプア』から脱出する方法
  2. 貧乏になる人、貧乏になりやすい人の3つのタイプ/お金持ちになる方法
  3. コロナ不況になりネットビジネスは大学生・主婦・サラリーマンの必修科目になりました
PAGE TOP