忍者ブログについて

つづきはこちら

忍者ブログ：ウェブアイコンの設定

①　画像を先に「ファイルアップロード」から画像をアップ。

②　画像のリンク先を入手（画像の上でマウス右をクリック　＞　”Inspect Element”)

③　通常通りに、ウェブアイコンタグをhtmlに挿入しました。

<link rel="apple-touch-icon-precomposed" href="http://保存先/画像名.png " />

しかし、携帯電話からURL先をブックマークに保存してもアイコンは出現しませんでした。
色々試してみた結果、「スマートフォン用テンプレート」を使用しないにしたら、アイコンが出現しました。これが、正式な方法だとは思わないのですが出来たので。。。

「設定」＞「ブログ詳細」＞「ブログ表示の設定」＞「スマートフォン用テンプレート」：使用しないにチェック

忍者ツールズ

「忍者ツールズ」すごくおもしろそうです！！！
色々と試してみたいと思います。
http://www.ninja.co.jp/

忍者：ヘッダーにタイトル画像（ロゴ等）を入れる

[ HTMLからタイトル一部に画像を入れる方法 ]



元のHTMLタグから、現在タイトル文字を指定している、<h1 id="BlogTitle">～</h1>の間を少し変更します。



<div id="HeaderBase">

<header>

<div id="HeaderInner">

  <!--if_not_entry-->

<h1 id="BlogTitle"><a href="<!--$g_url-->"><!--$g_title--></a></h1>

  <!--/if_not_entry-->



赤い文字の<!--$g_title-->場所をimgタグを使ってロゴの画像データが保存されているリンク先に指定する。

（ロゴの画像は「ファイルアップロード」から事前にアップしておきます。リンクのアドレスを調べるには、保存したロゴ画像をマウスで右クリックをして「Inspect Element」（Firefox）でリンクアドレスがわかります。）



<h1 id="BlogTitle"><a href="<!--$g_url-->"><img src="http://file.cglabo.blog.shinobi.jp/Logo.png" alt="logo"></a></h1>



に変更です。

---

[ CSSからタイトル全体を変える方法 ]



元のCSSヘッダコードから、background: --- ; を追加する。



#Header {

margin-left: 10px;

padding: 60px 0 20px;

text-align: right;

}



URLにリンク先を指定。



#Header {

margin-left: 10px;

padding: 60px 0 20px;

background: #333333 url(http://file.cglabo.blog.shinobi.jp/Logo.png) no-repeat center bottom scroll;

text-align: right;

}