CANPAN ブログ検索
Loading
  • もっと見る

2014年02月09日

ライトグレー(両サイド)のカスタマイズ4 ブログタイトルの変わりに画像を設定する

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


1.「スキンサイドバー>HTML」で使用しているHTMLをクリック

2.開いた画面を編集する

2−1 赤枠部分を削除
110_12.png

2−2 削除した場所にカーソルを持って行く
110_13.png

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

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


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

3.「保存する」ボタンを押す

完成です手(チョキ)
※印に気をつけながら設定しましょう。

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

ライトグレー(両サイド)のカスタマイズ3 ブログタイトルに背景画像を設定

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

110_10.png 110_08.png



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

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

3.背景画像についてスタイルシートに記述する
※ ここでは1で「title.jpg」という高さ横940ピクセル、縦180ピクセルの画像をアップロードしたとする。
<変更前>

#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は、各自のアップロードした画像ファイルの高さに変更

4.「スタイルシートを変更する」ボタンを押す
完成です!

ライトグレー(両サイド)のカスタマイズ2 配色

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






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

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


ライトグレー(両サイド)のカスタマイズ1 基本

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

<ライトグレー(両サイドバー)の変更前>
110_04.jpg

<ライトグレー(両サイドバー)の変更後(1)>
文字が大きくなる。記事タイトルの緑の○を消去して背景色を設定。リンクを標準色に変更、など
110_05.jpg

<HTMLに新着情報追加後(2)>
メインページ自由記述の下に新着情報を配置
110_07.png



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



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

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

110_10.png 110_10.png




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

2013年08月16日

サイドバーのコンテンツ「自由形式」のタイトルを表示する

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

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

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

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


自由形式のタイトルがない状態

92_4.jpg


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

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


自由形式のタイトルが追加された状態

92_5.jpg


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

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


自由形式のタイトルがない状態

91_2.jpg


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

<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>



自由形式のタイトルが追加された状態

91_3.jpg




詳しい説明は以下です。

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

2.「コンテンツ」の「自由形式」をサイドバーにドラッグ
91_6.jpg


3.「自由形式」をクリックし、左上の「コンテンツHTML編集」をクリック
91_7.jpg


4.<変更前>のコードを消去し<変更後>のコードをコピーする
自由形式のタイトルがない状態

91_8.jpg

自由形式のタイトルが追加された状態

91_9.jpg


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

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

7.設定を反映する

完了です手(チョキ)

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


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


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

2013年06月14日

CSS(ライトグレー・カスタムスキン) サイドバーのタイトルを変える

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

86_1.jpg 86_2.jpg 86_3.jpg


左から
1:背景色を変える・文字色を変える・中央に揃える
2:1に下線を加える
3:背景画像を変える・文字色を変える・中央に揃える

リニューアル後にあるデザイン(ライトグレーの場合)
<変更前>
.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; /*文字を中央に寄せる(変えないならこの行は不要)*/
}



リニューアル前にあるデザイン(カスタムスキン1・2・3の場合)
<変更前>
.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ピクセル
side.png


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

2012年12月08日

CSSを試してみよう(カスタムデザインの場合) いろいろ変えてみた

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

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



スタイルシートの上から

練習1


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

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

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


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

練習2


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


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

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


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

練習3


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


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

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


変更後はこう
60_2.jpg


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


/* 記事タイトルに関するスタイル */
.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
}


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


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

の変わりに以下を追加

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

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

こんなかんじ
60_4.jpg


見出し文字を入れてみた


CSSの一番下に以下を追加

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


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

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

2012年12月07日

CSSについて(カスタムデザインの場合)~試してみよう

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

HTMLとは


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

CSSとは


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

1.CSSを見てみよう


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

開いた画面の枠内がCSS
57_8.jpg


2.CSSの書式


57_4.jpg

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

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

例2)
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内での色の表記の参考はこちら 

3.CSSさわってみよう


57_5.jpg

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

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


変更前
57_2.jpg
変更後
57_6.jpg


2012年12月06日

CSS試してみよう(カスタムデザインの場合) その前に準備

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

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

1.新しいデザインを追加


「デザイン>デザイン一覧」で「一覧からデザインを追加する」ボタンをクリック
58_1.jpg

「カスタムスキン1」の「追加する」をクリック
58_2.jpg

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

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

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


一覧に「カスタムスキン1」をクリック。
58_4.jpg


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


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


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


がが~ん、デザインがぶち変わってるがく〜(落胆した顔)と思ったあなた、大丈夫。

前のデザインの「適応」をクリックしたらすぐに元に戻ります手(チョキ)
58_7.jpg


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


ふぅ、ようやく戻った。

2012年09月07日

タグをカテゴリーのように利用する

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

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

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

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

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

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

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

Dで変更後
37_4.jpg


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

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

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

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



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