by echo  

スーパー超シンプルテンプレートのヘッダーにロゴ画像を挿入する方法です。

最悪なカスタマイザビリティが8番目の特徴なので、よく見たSeesaaテンプレートと同じようにカスタマイズしても反映できなくてビックリだと思います

コメントにご質問を頂いたので、ロゴ挿入のカスタマイズについて解説します。

[アイキャッチ画像:300px × 168px, float left]

デザイン>コンテンツのヘッダー部の扱い

スーパー超シンプルテンプレートは「デザイン>コンテンツ」のヘッダー部をまったく使っていません。

ヘッダー部にコンテンツ要素を追加してもまったく反映されないのはそのためです。

ヘッダー部のコンテンツを反映させるには、下記のように content_header 変数を HTML に追加してます。

<div id="wrap">
<header id="header-wrapper" class="clearfix" role="banner" itemscope itemtype="http://schema.org/WPHeader">
<% content_header %>
<% if:page_name eq 'index' -%><h1 id="blog-title" itemprop="name"><a href="<% blog.page_url %>" itemprop="url"><% blog.title %></a></h1>(以下略)

これでデザイン>コンテンツのヘッダー部が使えます。

ヘッダー画像(ロゴ)の挿入

ロゴの画像挿入には色々なパターンが考えられるのでヘッダー部のコンテンツでロゴを挿入する方法とヘッダーに背景画像を挿入する方法の2パターンを例示します。

ヘッダー部のコンテンツでロゴを挿入する

ヘッダーにロゴ画像を挿入

先述の content_header 変数が追加した後、デザイン>コンテンツのヘッダー部に自由形式を追加します。

<div class="logo"><img src="http://ロゴ画像no URL" width="100%" height="96" alt="ロゴの説明文"></div>

logoに対するCSS

.logo{margin-top:60px;max-width:1024}
#blog-title{margin:3em 1em 0 10px}

1024 x 96 の画像を挿入し、logo クラスを割り当てています。

CSSでlogoのスタイルを定義。ページ最上部の bootstrap メニューがあるので、margin-top を 60px前後取らないとメニューの下に隠れてしまいます。挿入したロゴとブログタイトルのマージンが大きいので、#blog-titleのスタイルを修正。上マージン 3em を 1em (前後)に修正します。

ヘッダーに背景画像を挿入する

ヘッダーにロゴ画像を挿入

ヘッダー(#header-wrapper)の背景画像として画像を挿入してみました。画像サイズは1024 x 288 です。このパターンは前提の content_header 変数を追記する必要はありません。

CSSの編集。#header-wrapperは#content-wrapper, #footer-wrapper とスタイルが共有されているので別途新規に追加します。スクショのように#blog-titleのフォントカラーを変更するときにも#blog-title a を新規追加です。

#header-wrapper{background-image:url(http://背景画像のURL);background-repeat:norepeat;height:200px;width:100%}
#blog-title a{color:#FFF!important}

#blog-title のスタイルが変更できないときは !important を追加して下さい。

bootstrap を HTML の style で読んでいるので、基本的な(HTMLリセット的な)定義はそちらが優先されるかもしれません。

ヘッダー画像追加カスタマイズのまとめ

  • 上余白に bootstrap 分の約 60px を余計に取る
  • #blog-title の上余白を減らす
  • bootstrap の CSS が優先されることがあるので !important で優先反映させる

コメント

5 件
echo様

ロゴ画像に関しての記事をわざわざあげてくださったんですか…!
本当に何から何まで感謝の気持ちでいっぱいです。
ありがとうございます。

この記事を拝見する前に
自分でhtmlを直接いじってロゴを配置してしまいました。

このやり方が正しいかどうかはわかりませんが…。
でも、echoさんのあげてくださった記事のとおりで配置してみたいので
ロゴを作り直そうかと思っています。

すごいです!このテンプレート。
自分がseesaaをいじってるのかWordpressをいじっているのか
わからなくなってきます(笑)

それぐらい、無料ブログっぽくなくて素敵なテンプレートです。

またiPhone(iPod touchですが…)のスクショも用意したいと思います。
よろしくお願いいたします。
Posted by クルミット at 
クルミットさん

ヘッダーにロゴを入れる発想がなかったので、コメントを頂いてアイディアが膨らみました。
ありがとうございます。

ところで、コメントにあったクルミットさんブログへのリンク、記録は取ってありますがここからは削除させて頂きました。まだテスト段階でのアドセンス広告はかなりヤバいですから、誰かに通報されては申し訳ないなと。

2015/5/15 16:00現在でテスト記事も含めて5件インデックスされてます。
・設定>詳細設定>ブログ設定:ブログを紹介しない
・設定>外部連携:検索エンジンにサイトマップを出力送信しない

この設定プラス head に
<meta name="robots" content="noindex,nofollow">
これ↑入れておいた方が良いように思います。
記事が溜まったら、すべて逆設定にする。もうクローラが来ているので設定を戻せばインデックスは早いかと。

アドセンスの通報はホント怖いですから。
Posted by echo at 
すみません!
わざわざありがとうございます。
ご心配おかけしてすみませんでした。

テスト記事はもうすでに削除して
普通に運営しているのですが
インデックスは本当に早いです。

もちろん複合キーワードですが
すでに1ページに表示されているものもあります。

本当にすごいテンプレートだと思います!
ありがとうございます。
心から感謝申し上げます。

ところで記事ごとにmetaキーワードを設定したい場合
どこへ記入すればよろしいでしょうか。

seesaaのキーワード欄に書いたものは
meta discriptionに反映されるということでしたので
教えていただければとても助かります。

色々お尋ねしてしまってすみません。
本当に感謝の気持ちでいっぱいです!
Posted by クルミット at 
クルミットさん

>ところで記事ごとにmetaキーワードを設定したい場合
記事ごとの meta keywords 設定はできません。

meta keywords は「設定>詳細設定>ブログ設定」のブログキーワードを参照しています。
記事ページ:ブログキーワードのみ
過去ログ:ブログキーワードのみ
カテゴリページ:カテゴリ名+ブログキーワード
タグページ:タグ+ブログキーワード

という感じです。

Google 検索のヒット結果を見ると検索キーワードが記事本文からピックアップされて、その周辺がスニペットに表示されるじゃないですか。もちろん記事のタイトルに検索キーワードが含まれている記事よりも下位ですけど。ま、その意味ではクルミットさんのブログは記事タイトルがキーワードの固まりみたいなもんじゃないですか。meta keywords なんてもう全然いらないですよ。

Google は恣意的な meta keywords よりもコンテンツ内の文脈に沿ったキーワードを検出して結果に表示しているんじゃないですか。文脈から拾った方が検索ユーザの目的に近いってことですよね。meta keywords が"野球"で本文が政治の話だったとして、野球で検索して上位にいたら検索ユーザはムカつきませんか? ボクは逆にどうやったんだろうって興味津々ですけど。

そんなこんなで、ボクは metaタグのキーワードはほとんど重要ではないという考えです。なのでこのテンプレートでは、meta keywords よりも meta description に比重を置いています。例のAll in One SEO 的な。

記事ごとのユニークな meta keywords が無い代わりと言っちゃなんですが、記事のタグを keyword としてマークアップ(schema.org準拠)するようカスタマイズしてます。あくまでもボクの SEO の考え方ですが、meta keywords系テンプレートよりもこのテンプレートの keyword の扱いのほうがナチュラルで強いと思います。
Posted by echo at 
サイトに訪問するのが遅くなってしまってすみません!
ご回答ありがとうございます!

>meta keywords なんてもう全然いらないですよ。

なるほど!そうなんですね!
勉強になります。

また、何かありましたらぜひお願いいたします!!
Posted by クルミット at 
コメントをどうぞ
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

トラックバック

0 件

スポンサーリンク