CANPANマニア

ブログタイトルの変わりに画像を設定、こんな例もありますよ。CANPANマニアも使っています。


１．「スキンサイドバー＞HTML」で使用しているHTMLをクリック

２．開いた画面を編集する

２−１　赤枠部分を削除


２−２　削除した場所にカーソルを持って行く


２−３　ブログタイトル変わりの画像をファイルをアップロードし、画像を挿入する
　※画像挿入前に、以下の赤枠部分のように２つのチェックははずし、配置は指定なしにすること


２−４　挿入した画像が下記の赤線部分。赤枠部分「title.jpg」にあたるところをブログタイトルに変更。
　※このとき左右のダブルクオテーションンは消さないこと


２−５　画像にブログトップページのリンクを貼る。※下線「target="_blank"」を削除。


３．「保存する」ボタンを押す

完成です
※印に気をつけながら設定しましょう。

デザインできるひと、これまでプロにデザインしてもらった団体のリーフレットがある、などの団体さんにはおすすめです。

ブログタイトルと説明の背景に画像を設定、こんな例もありますよ。



１．タイトル背景に使用する画像をアップロード
　※横幅は９４０ピクセルで作成すること

２．「スキンサイドバー＞デザイン一覧」でタイトル背景に画像を設定したいものをクリックして編集画面を開く

３．背景画像についてスタイルシートに記述する
※ ここでは１で「title.jpg」という高さ横９４０ピクセル、縦１８０ピクセルの画像をアップロードしたとする。
＜変更前＞

#banner{
padding:30px 5px 20px 5px;
text-align:left;
}

＜変更後＞　※赤字の行を追加。

#banner{
padding:30px 5px 20px 5px;
text-align:left;
background-image: url("https://blog.canpan.info/○○○/img/title.jpg"); /* タイトル背景画像 */
height:180px;
}

＜追加ポイント＞
・○○○は自分のブログアカウント(CANPANマニアの場合URLは「https://blog.canpan.info/77iro/」なので○○○に77iroといれる)
・title.jpgは、各自のアップロードした画像ファイル名に変更
・180は、各自のアップロードした画像ファイルの高さに変更

４．「スタイルシートを変更する」ボタンを押す
完成です！

ブログタイトルの背景色、見出しの背景色、サンプルで5パターン作ってみました。






新着情報をメインページ自由記述の上の配置しない場合でも上記サンプルCSSを使用して大丈夫です。

参考にしたのはインターネットで「配色　パターン　サンプル」で検索して出てきたサイトです。

コピーして貼り付けたら、ライトグレー(両サイドバー)のデザインが変わります。






（１）ライトグレー(両サイドバー)の見た目を変えたい
１．右ファイルをダウンロード　side2_css.txt
２．「スキンサイドバー＞デザイン一覧＞一覧からデザインを追加する」をクリックして「ライトグレー(両サイドバー)」を追加。
３．テーマタイトル一覧画面で「ライトグレー(両サイドバー)」の右横のチェックをクリック(適用を変える)
４．一覧で「ライトグレー(両サイドバー)」のリンクをクリック
５．開いた画面で「スタイルシートタイトル 」に「ライトグレーカスタマイズ_両サイド」と入力。
６．「スタイルシート 」をすべて削除し、１のファイルをテキストエディタ(メモ帳など)で開きコピーする
５．「スタイルシートを変更する」ボタンを押す
完成です！
※元に戻す場合は一覧画面で前のデザインタイトルの右横のチェックをクリックし、適応を変更。



（２）新着情報を表示したい
１．右ファイルをダウンロード　side2_new_html.txt
２．「スキンサイドバー＞HTML＞HTMLの追加」をクリックしてHTMLを追加
３．開いた画面で「ＨＴＭＬ名」に「ライトグレーカスタマイズ_両サイド_新着あり」と入力。
４．「ＨＴＭＬ」をすべて削除し、１のファイルをテキストエディタ(メモ帳など)で開きコピーする
５．「保存する」ボタンを押す
６．HTML名の一覧画面で「ライトグレーカスタマイズ_両サイド_新着あり」の右横のチェックをクリック(適用を変える)
完成です！
※元に戻したい場合は、「デフォルトＨＴＭＬ」の右横のチェックをクリックし適応を変更。

タイトルや説明の背景に画像を設定したり、タイトルや説明の代わりに画像を設定したりもできます。





その他、タイトルや文章の文字の色、フォント種類や全体背景色の変更など、まだまだいろいろありますが、説明はまた後日

コンテンツで「自由形式」を追加した場合、タイトルは表示されません。他と統一したデザインでタイトルを追加したい！という場合は「コンテンツHTML編集」にコードを追加します。
＜変更前＞を消去し＜変更後＞をコピペしてください。(赤字部分が追加になっているところです)

もっと詳しく知りたい方は下のほうを読んでください。

リニューアル後にあるデザイン(ライトグレーの場合)
<変更前>

<% content.header -%>
<% free_text %>
<% content.footer -%>

<変更後(以下をコピー)>

<div class="sidetitle"><% content.title %></div>
<% content.header -%>
<% free_text %>
<% content.footer -%> 

旧テンプレート(カスタムスキン１・２・３、リニューアル前にあるデザインの場合)
<変更前>

<% content.header -%>
<% free_text %>
<% content.footer -%>

<変更後(以下をコピー)>

<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="side">
<div align="center"><img src="/template/<% css_id %>/img/side_title_header.gif" align="absmiddle"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td class="side_title"><% content.title | html %></td>
</tr></table>
<div align="center"><img src="/template/<% css_id %>/img/side_title_footer.gif" align="absmiddle"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>
<div class="side_text">
<% content.header -%>
<% free_text %>
<% content.footer -%>
</div>
</td></tr></table>
</td></tr></table>
<div align="center"><img src="/template/<% css_id %>/img/spacer.gif" align="absmiddle" width="5" height="10"></div>

---

詳しい説明は以下です。

１．「スキンサイドバー＞コンテンツ＞編集モード(ノーマル)」を開く

２．「コンテンツ」の「自由形式」をサイドバーにドラッグ


３．「自由形式」をクリックし、左上の「コンテンツHTML編集」をクリック


４．＜変更前＞のコードを消去し＜変更後＞のコードをコピーする





５．「保存」ボタンをクリックして右上の「自由形式の設定に戻る」ボタンをクリック

６．「タイトル」と「自由入力欄」に記入して「保存」ボタンをクリック。「このウィンドウを閉じる」をクリック。

７．設定を反映する

完了です

CANPANマニアではのこ「自由形式」をサイドバーでいくつも使っています。


タイトルだけではなく、枠線やフォントの色サイズなどもサイドバーの他の部分と統一されるのでおススメです


関連するリンク：サイドバーのタイトルデザインの変更はこのページで

サイドバーのタイトルをCSSを使って変えてみた



左から
１：背景色を変える・文字色を変える・中央に揃える
２：１に下線を加える
３：背景画像を変える・文字色を変える・中央に揃える

リニューアル後にあるデザイン(ライトグレーの場合)
<変更前>

.sidetitle {
padding:4px 10px 4px 10px;
font-weight:bold;
background-color:#ECECEB;
font-family:Verdana;
}

<変更後>

.sidetitle {
padding:4px 10px 4px 10px;
font-weight:bold;
background-color:#00AA3C; /*背景の色*/
color:#FFF; /*文字の色(変えないならこの行は不要)*/
background:url(画像URL) no-repeat;/*背景に画像を置く場合(背景を画像にしないならこの行は不要)*/
border-bottom:3px solid #A8E5A9;/*タイトル背景下に下線を入れる(変えないならこの行は不要 3pxを変えると下線の幅が変わる)*/
text-align:center; /*文字を中央に寄せる(変えないならこの行は不要)*/
}

リニューアル前にあるデザイン(カスタムスキン１・２・３の場合)
<変更前>

.side_title{
        text-align:center;
        font-weight:bold;
        font-size:12px;
        letter-sapacing:1px
        }

<変更後>

.side_title{
        text-align:center;
        font-weight:bold;
        font-size:12px;
        letter-sapacing:1px;
        background-color:#00AA3C; /*背景の色*/
        background:url(画像URL) no-repeat;/*背景に画像を置く場合(背景を画像にしないならこの行は不要)*/
        color:#FFF; /*文字の色(変えないならこの行は不要)*/
        border-bottom:3px solid #A8E5A9;/*タイトル背景下に下線を入れる(変えないならこの行は不要 3pxを変えると下線の幅が変わる)*/
        }

ちなみにデザインを「ライトグレー」にした場合、下サンプルの背景を画像のサイズは横200ピクセル縦40ピクセル


デザインが「カスタムスキン」の場合、横サイズは160ピクセル程度の画像が望ましい

背景色だけでなく、いろいろ変えてみましょう

その前に、以下をまだ見ていない方はチェックしてね
１．CSSを試してみよう(カスタムデザインの場合)　その前に準備
２．CSSを試してみよう(カスタムデザインの場合)　

---

スタイルシートの上から

練習１

* { font-family:'ＭＳ Ｐゴシック','ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','Osaka',sans-serif; }

全体の文字種類を変えてみる

* { font-family:"メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;}


どう、ブログの画面を更新してみてください。文字の種類で結構イメージ変わりますね。

練習２

HR{
color: #999;
height: 1px
}

段落の区切れに使用するHRを変えてみる

HR{
color: #66CC66; /* 線色 */
border: 3px; /* 太さ */
border-style: solid; /* 線種 */
}

※色の表記参考はこちら
こんな感じになりました↓

練習３

a:link,
a:visited {
color:#000;
text-decoration:none;
}
a:hover {
color:#999;
text-decoration:underline;
}

「カスタム１」って、リンクがすごく分かりにくいので変えてみよう

a:link,
a:visited {
color:#003300; /* 文字色*/
text-decoration:underline; /* 文字の装飾 */
}
a:hover {
color:#006600; /* 文字色*/
text-decoration:underline; /* 文字の装飾 */
}

変更後はこう

練習４　記事のタイトル部分を変えてみる

/* 記事タイトルに関するスタイル */
.entry_title {
overflow:hidden;
word-break:break-all;
font-size:12px;
color:#000;
font-weight:bold;
margin:0;
text-align:left;
padding: 5px 5px;
}

/* 日付に関するスタイル */
.date {
font-weight: normal;
font-size: 10px;
color: #000;
white-space:nowrap
}
変更してみる
/* 記事タイトルに関するスタイル */
.entry_title {
overflow:hidden;
word-break:break-all;
font-size:14px; /* タイトル文字サイズ */
color:#FFF; /* 文字色*/
font-weight:bold;
margin:0;
text-align:left;
padding: 5px 5px;
background:#66CC66; /* 背景色*/
}

/* 日付に関するスタイル */
.date {
font-weight: normal;
font-size: 10px;
color: #FFF; /* 日付文字サイズ */
white-space:nowrap
}

見出し背景に下の画像繰り返し入れてみる


background:#66CC66; /* 背景色*/

の変わりに以下を追加

background-image: url("https://blog.canpan.info/77iro/img/test_bg.png"); /* 背景画像 */

背景画像を作ってくれるサイト例
チェック柄：http://www.tartanmaker.com/
繰り返しパターン：http://www.bgpatterns.com/

こんなかんじ

見出し文字を入れてみた

CSSの一番下に以下を追加

/* オリジナル */
h3.org{
color:#5D5D5D; /* 文字の色 */
font-size:18px;
padding: 3px 0px;
border-bottom:dashed 1px #5D5D5D; /* 文字の下に点線 */
}


記事のときに使うときはこう書く

<h3 class="org">見出し３を追加してみた</h3>

以下をまだ見ていない方はチェックしてね
１．CSSを試してみよう(カスタムデザインの場合)　その前に準備

HTMLとは

文書内の各部分に目印をつけて、その部分がどんな要素なのかを明確にすることで、コンピュータがその文書の構造を理解できるようになる。
参考：HTMLクイックリファレンス

CSSとは

CSSは、HTMLと組み合わせて使用する言語。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定。
参考：HTMLクイックリファレンス

１．CSSを見てみよう

「デザイン＞デザイン一覧」で表示される一覧から、「適応」にチェックがあるデザインのタイトルをクリック

開いた画面の枠内がCSS

２．CSSの書式

セレクタ{プロパティ：値;}　・・・・・　どの部分の{なにを：どうする;}

例１）
* { font-family:'ＭＳ Ｐゴシック','ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','Osaka',sans-serif; }・・・・・　全体{文字種類：,'ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','Osaka',sans-serif;}
※1番目のフォントがパソコンになかったら、2番目のフォントを表示。2番目もなかったら3番目を表示・・・の意味

例２）
body {
margin:10px 0 0 0;
padding:0px;
text-align:center;
font-size:12px;　・・・文字の大きさ　12px
color:#333;　・・・文字の色 #333(グレー)
border:none;　・・・枠線 なし
background:#FFF;　・・・背景色　#FFF(白)
}
※HTMLやCSS内での色の表記の参考はこちら　

３．CSSさわってみよう

全体の背景色を変えてみよう
枠線部分を変更「background:#FFF」を「background:#CCC」（全体の背景色を#CCC;にするの意味）
※スペースも含めてすべて半角で記述すること

「スタイルシートを変更する」ボタンを押すとこんな感じに

画面のリンクの色を変えたり、見出しの文字色を変えたり、背景色を付けたり、いろいろブログのデザインを装飾できるCSS

今日は新しいデザインを追加して、そちらで練習します。
※CSSは元のデザインを選びなおすとすぐに元に戻るので大丈夫(^ー^)

１．新しいデザインを追加

「デザイン＞デザイン一覧」で「一覧からデザインを追加する」ボタンをクリック

「カスタムスキン１」の「追加する」をクリック

「追加するスキンを今すぐ使用する」にチェックを入れたまま「追加」ボタンをクリック

一覧に「カスタムスキン１」が追加されている。

カスタムスキン１の名前を変更

一覧に「カスタムスキン１」をクリック。


「スタイルシートタイトル」を「カスタムスキン１」から「カスタムスキン１CSS練習用」に変更。「スタイルシートを変更する」ボタンをクリック。


「デザイン一覧」に戻り、デザイン一覧のタイトルが変更されていることを確認する。


ちなみに、CANPANマニアはこうなりました。


がが~ん、デザインがぶち変わってると思ったあなた、大丈夫。

前のデザインの「適応」をクリックしたらすぐに元に戻ります


あれ、でもなんか前と違う、、、という場合
「スキンサイドバー＞HTML」を開き、一覧から「HTML名」の適応を選びなおします。


ふぅ、ようやく戻った。

カテゴリーを複数設定できたらなぁ
そんな時におすすめなのが「タグ」です。

CANPANマニアの場合、カテゴリーが「初級・中級・上級」となっています。でも難易度ではなくて機能別に「デザイン・記事の装飾・ブログ設定と機能・その他のソフト」で分けた一覧を表示させたい。でもカテゴリー2つ選べないし。。。
そんな場合は、後者の「デザイン・記事の装飾・ブログ設定と機能・その他のソフト」を各記事のタグに入れてやればいいのです。

�@「記事のタグ」を設定して記事を保存。
　※タグに入れる文字は、半角・ひらがなカタカナ等、１文字でも変わると別のタグと判断するので、同じ文字列になるようにそろえましょう。

�A「スキンサイドバー＞コンテンツ」で「タグクラウド」をサイドバーへ移動する。

�B「タグクラウド」の文字をクリックし、編集画面を開く。

�C「タイトル」に任意の名前を付け、表示件数を０にして「保存する」ボタンをクリック。
　※表示件数０は、すべてのタグを表示する、の意味

�D「コンテンツHTML編集」をクリックする。
　元あった内容の「</a> <% /loop -%>」部分を「</a><br /><% /loop -%>」に変更し、保存して画面を閉じる。
　※元ののままだと、タグは１文字づつスペースで区切られて表示することになります。カテゴリーアーカイブのように１行づつ改行するように�Dで変更しましょう。


完了です。
タグのリンク先をクリックすると、タグを設定した記事の一覧がでてきますよ

カテゴリーはお知らせ・活動報告にいれた各記事を、プロジェクトAとしてもまとめて表示したい、という場合などに役立ちます。

タグをメニューのように使う場合は、カテゴリーと同じく、どんな内容にするかをあらかじめ決めてから始めたほうがいいかも。そうでないとカテゴリー同様にどんどん増えてしまうから。

タグはカテゴリーと違って順番を並べ替えできない。。。
バナー画像にタグのリンク先を貼りつけると、今ホットな情報がよくわかっていいかもしれませんね
https://blog.canpan.info/77iro/archive/3



タグをクリックしたら、記事の一覧だけじゃなくて、カテゴリーみたいに記事がでるようにしたい・・・というところ、まだできていません。これはまた後日試してみようと思います。