シーサーブログのテンプレートが劇的に美しく変わる!(新デザインシステム)

シーサーブログの新デザインシステムのテンプレートって、

ちょっとシンプル過ぎて今一ですよね?

新デザインシステムのテンプレートに、

ヘッダー画像を入れて、見た目を劇的に美しくしてみました!



新デザインシステムでシーサーブログを立ち上げたテンプレートはこんな感じですクリックすると大きくなります


劇的に・・・美しくなります。
↓


写真でヘッダー画像を作成して、シーサーブログの新デザインシステムのテンプレートで表示させた状態クリックすると大きくなります


画像の上で右クリック、「リンクを新しいタブで開く」で別窓で出せます。


劇的じゃない?!  ^^;

でもかなり第一印象は変わったかなと。

ポイントは、自分の好きな写真をヘッダー画像に出来る点ですね。


ご注目イラストシーサーブログの新デザインシステムのテンプレートに

ヘッダー画像を表示する方法


ロング記事です、読むのに7~8分かかります。


シーサーブログを新規作成すると、自動的に

「シンプルA.ホワイト」のテンプレートになるので、

今回は「シンプルA.ホワイト 右カラム」で説明させて頂きます。


手順はこの5つ

  • 写真をヘッダー画像のサイズに合わせてタイトルを入れる
  • シーサーブログにヘッダー画像をアップロードする
  • ヘッダー画像のURLをメモ帳にコピペする
  • 新デザインシステムのテンプレートでヘッダー画像を表示する
  • ブログで表示されるタイトルを消す
チェックマーク写真をヘッダー画像のサイズに合わせてタイトルを入れる

ヘッダー画像にしたい写真が入ったSDカードを

パソコンのSDカード挿入口に入れて下さい。

ヘッダー画像の大きさに合わせていきます。


「シンプルA.ホワイト 右カラム」のテンプレートの場合は、

写真を横幅980px、高さ250pxにします。



「シンプルA.ホワイト 左カラム」・・・写真を横幅980px、高さ250px

「シンプルA.ホワイト 両サイドバー」・・・写真を横幅1180px、高さ250px



パソコン画面の左下のウインドウズのアイコンウインドウズアイコンから、

コンピューターをクリック、

SD Card(G:)をダブルクリックして下さい。


ここから先の写真のサイズ合わせは、

SDカードの写真を縮小する方法」をご覧ください。


リンク先記事と一つ違う点があります。

リンク先では「パーセント」を選択して作業をしてますが、

今回は「ピクセル」を選びます。

ピクセルの水平方向(横幅)を980pxにする

ピクセルに✔を入れて、

水平方向(横幅)を980と入れる点が違いますので注意して下さい。

そして「OK」をクリックすると、


写真の横幅を980pxに合わせて、高さ250pxでくり抜く  大きくなります。



この画像の様に、写真が縮小されたと思いますが、

横幅が980pxで、横幅は良いのですが、

高さが高過ぎますので、250pxに合わせていきます。


横幅はそのままで、写真の高さ250pxで切り抜くには、

ペイント上部にある「選択」をクリックした後、

AからBまで左クリックしたまま(押したまま)スライドさせ、

Bまで持っていき、Bにたどり着いたら指を離して下さい。

(やり直したい時は、キーボード左上のEscを押す)

ヘッダー画像にしたい箇所が、白い点線で囲まれたと思います。


囲めたら、ペイント編集画面上部にある「トリミング」をクリックして

ヘッダー画像になる部分を切り抜きましょう。


写真を横980px、高さ250pxで切り抜いてヘッダー画像にした状態  大きくなります



良さそうなら、画面左り上の「上書き保存」をクリックします。

上書き保存をクリック

ポップアップ画面が出て、写真に名前を付ける様に要求されたら、

名前を付けてデスクトップに保存しておきましょう。


これでテンプレートに使うヘッダー画像が作成出来ました。

ここに、あなたのブログのタイトルを記入する場合、


水上コテージと美しい海、シーサーブログの新デザインシステム用のヘッダー画像  大きくなります



こんな感じにタイトルを入れたい方は、

こちらの記事の真ん中にあるヘッダー画像に文字を入れるの箇所から読んで

同じ様にやってみて下さい。


チェックマークシーサーブログにヘッダー画像をアップロードする

テンプレートのヘッダー画像を作成したら、

シーサーブログにログインして、右上の「マイブログ」から、

あなたの該当ブログ名をクリックします。


次に左サイドバーにある「ファイルマネージャー」から、


シーサーブログに新デザインシステム用のヘッダー画像をアップロードする


「クリック、もしくはここにファイルをドロップ」をクリックして下さい。

ポップアップ画面が出ますので、


シーサーブログにテンプレート用のヘッダー画像をアップロードする



作成したヘッダー画像の保存先から(画像ではデスクトップ)、

該当のヘッダー画像を選択し、「開く」をクリックしましょう。


チェックマークヘッダー画像のURLをメモ帳にコピペする

ファイル一覧に、先ほど作成した

シーサーブログの新デザインシステム用のヘッダー画像が

下記画像のように、アップロードされると思います。


テンプレートのヘッダー画像がアップロードされました。



ヘッダー画像のURLを調べる為に、「挿入」をクリックします。


ヘッダー画像のURLをメモ帳に貼り付ける  大きくなります。




記事作成画面にこのような文字列が挿入されたと思いますが、

赤枠内が、ヘッダー画像のURLになります。

メモ帳を開いて、コピペしておいて下さい。



パソコン画面の左下のウインドウズのアイコンウインドウズアイコンをクリックし、

「すべてのプログラム」⇒「アクセサリ」⇒「メモ帳」を開きます。



メモ帳にヘッダー画像のURLを貼り付けたら、この記事作成画面は不要なので、

一旦、左サイドにある「設定」をクリックして画面を変えておきます。


チェックマーク新デザインシステムのテンプレートでヘッダー画像を表示する

「デザイン」⇒「デザイン設定」⇒「シンプルA.ホワイト 右カラム」


シーサーブログ新デザインシステムのスタイルシートを編集する


順にクリックしていきます。

スタイルシートが表示されると思います。


シーサーブログ新デザインシステムのスタイルシートの一番下にこのコードを追加するクリックすると大きくなります


スタイルシート一番下までスクロールして、

次のコードをコピーして貼り付けて下さい。

.l-header{
  height: 300px; /* ヘッダー画像の高さ */
  background-image:url("ここにヘッダー画像のURLを貼る"); /* 背景画像 */  
  background-repeat:no-repeat; /* 背景画像繰り返し */
}


そして、

background-image:url(“ここにヘッダー画像のURLを貼る“); /* 背景画像 */

“ “ の内側に、

先ほどメモ帳に貼り付けておいたヘッダー画像のURLを入れて、

保存をクリックして下さい。

ヘッダー画像の高さは変えられますが、

お好みで変更して下さい、上の画像では高さ300pxにしてます。


それでは、シーサーブログ(テンプレート)を表示してみましょう。


ヘッダー画像を追加した新デザインシステムのシーサーブログを表示させる



表示されましたが・・・タイトルが重なってる^^;


シーサーブログにヘッダー画像を表示出来たが、元々のブログタイトルと重なってしまう状態  大きくなります。




2015/10/27 追記:

ヘッダー画像が表示されない方は、

パソコン画面の上やや右にある

更新マーク(更新マーク)をクリックして下さい。



チェックマークブログで表示される元々のタイトルを消す

いよいよ最後の作業となりましたが、

ここまで読んでくれた人が果しているの?と自問自答しつつ続行・・・

今の状態では、ヘッダー画像の上に、

元々あったブログタイトルと重なっていて最悪ですよね。

最後消して終わりです。


これもシーサーブログの新デザインシステムのスタイルシートに


元々表示させるブログタイトルを消す(新デザインシステム)



この一文 display: none; を加えて保存すれば、全ての作業が完了します。

h1 {
  font-size: 2em;
  margin: 0.67em 0;
  display: none;  
}
一文を追加して保存したら、

もう一度シーサーブログを表示して頂き、

パソコン画面中央右にある更新マーク(更新ボタン)をクリックすれば、

サイトタイトルが一つになり、きれいに表示されたと思います。


シーサーブログ新デザインシステム「シンプルA.ホワイト 右カラム」テンプレートにに写真のヘッダー画像を追加して劇的に美しくした最終完成形クリックすると大きくなります



もしも最後まで読んでくれた方がいるとするなら、

多分その方は、実践して頂けたのだと思いますが、

出来ましたか??

出来たなら、私は大変嬉しいです。

私の苦労も報われます。この記事書くのに15時間ぐらいかかってますから。^^;


2017/3/12追記

ヘッダー画像は綺麗に表示されると思いますが、ヘッダー画像がクリックできなくなります。 対策としては、次にあるメニューを設置して、「トップページ」のリンクを貼る事で対応して下さい。

また、当サイトを参考にカスタイズして、何か問題があっても質問等は受け付けません。予めご了承下さい。



えっ!?もっと完璧にしたい?

それじゃ、ヘッダー画像の下に、メニューを表示しますか?

こんな感じに・・・(メニュー1からメニュー4を表示)

グローバルメニュー設置完了の画面
「トップページ」や「カテゴリー」

「プロフィール」などのリンクを表示が出来ます。

ご希望なら、こちらへどうぞ。^^





サブコンテンツ

当サイトの記事一覧

アーカイブ

このページの先頭へ