えと、皆さん興味があるか分かりませんが・・・
別ブログで”ブログの編集について”の話題が出たので、これを機に
素人が、手探りでイジっている、現在の「pukupuku+」ブログの
テンプレなどについて多少ご説明をしようかと。
#gooブログご利用の方には参考になるかしら?
#使用するブログ会社、テンプレートで詳細は異なります。
1)ベース
まず、gooブログの無料サービス範囲内で使える、「CSS編集」が
できるテンプレートを使用しています。
私が使っているのはカスタム用の「クリアパープル(左メニュー)」。
そこのCSS編集ページで背景とタイトル背景、文字色、本文背景色、
リンク貼りの設定など、自分にしか分からないような細かい
設定をしています。
#すっごい凝って作っても気付かれなかったり、逆に見づらくて
ウザくなったりするトコロです。(笑
2)背景を変える
タイトル背景のましゃ(仮名)の写真は、意識して横に広い写真を
撮影し、Photoshopソフトで加工しています。
タイトル欄の大きさにあわせて切り取って、カンパスサイズを変え、
色を変えたりぼかしたり、レイヤーを何枚か重ねていったり。。。
完成したら最後にWeb用に容量を軽くしています。
(全て初歩的な処理です)
素材集のHPから頂いた背景のコブタちゃんとましゃの編集画像は
一度自分のブログの「画像フォルダ」に取り込み、そのURLを
CSS編集の背景画像設定部分に貼り付けています。
(方法が合っているかは不明デス)
現在のコブタちゃんは、更に背景色も本文背景色に合わせて
うすーい紫?を入れてますね。
3)本文(日記内容)の入力
HTMLエディターの方で入力。gooは加工した分がリアルタイムで
プレビューできるので非常に使いやすいです。
で、基本の文字の大きさを「-1」で固定し、色つけやリンク、画像貼り
は上に並ぶメニューボタンを使用。
色つけなど装飾をした後に文章を加えると、色つけしたくないところ
までカラーになったりするので、「HTMLのソースを見る」(一番右の
<>ボタン)でHTMLを使って手直しをしています。
4)テーブルを使って・・・(各社共通?)
写真の横に文字を何行か入れるときや、表の形で作りたいときは
「HTMLのソースを見る」画面でテーブルをプログラムしています。
その名のとおり、HTMLで出来ます。テーブルの基本1行目は↓
<TABLE borderColor=#ccccff cellSpacing=0 cellPadding=2 border=1>
以下<TBODY><TR><TD>・・・と続きます。(一例です)
テーブルのプログラミングはベースができれば使いまわしが可能。
モノによって、枠幅(border=)を”0”にしてなくしたり、枠線と画像・文
との間隔を変えたりしてます。
#サンプルはコチラ
⇒上の表は枠線アリ間隔広め、下の画像のトコは枠線ナシです。
※画像に文字を回り込ませる方法は他にもあります♪
***
そんな感じで、ブログを始めた当初(昨年8月)よりは、多少個性的で
見やすく?なっているかと思います。(注:あくまで自己満足w)
まあ、普通に使っても十分な機能なのですが、多少知識があると
試したくなるのが人のサガで・・・w
HTMLの基本部分は簡単に習得できるし、結構おもしろいですよ。
ネット上に文章を公開していく生活に慣れたら、是非
誰にも気付かれないこだわりで(笑)遊んでみてくださいね~♪
※ココをもう少し詳しく!とか もっといい方法があるよ!ここは違うよ!
などアドバイスがあったら気軽にコメント↓ください
別ブログで”ブログの編集について”の話題が出たので、これを機に
素人が、手探りでイジっている、現在の「pukupuku+」ブログの
テンプレなどについて多少ご説明をしようかと。
#gooブログご利用の方には参考になるかしら?
#使用するブログ会社、テンプレートで詳細は異なります。
1)ベース
まず、gooブログの無料サービス範囲内で使える、「CSS編集」が
できるテンプレートを使用しています。
私が使っているのはカスタム用の「クリアパープル(左メニュー)」。
そこのCSS編集ページで背景とタイトル背景、文字色、本文背景色、
リンク貼りの設定など、自分にしか分からないような細かい
設定をしています。
#すっごい凝って作っても気付かれなかったり、逆に見づらくて
ウザくなったりするトコロです。(笑
2)背景を変える
タイトル背景のましゃ(仮名)の写真は、意識して横に広い写真を
撮影し、Photoshopソフトで加工しています。
タイトル欄の大きさにあわせて切り取って、カンパスサイズを変え、
色を変えたりぼかしたり、レイヤーを何枚か重ねていったり。。。
完成したら最後にWeb用に容量を軽くしています。
(全て初歩的な処理です)
素材集のHPから頂いた背景のコブタちゃんとましゃの編集画像は
一度自分のブログの「画像フォルダ」に取り込み、そのURLを
CSS編集の背景画像設定部分に貼り付けています。
(方法が合っているかは不明デス)
現在のコブタちゃんは、更に背景色も本文背景色に合わせて
うすーい紫?を入れてますね。
3)本文(日記内容)の入力
HTMLエディターの方で入力。gooは加工した分がリアルタイムで
プレビューできるので非常に使いやすいです。
で、基本の文字の大きさを「-1」で固定し、色つけやリンク、画像貼り
は上に並ぶメニューボタンを使用。
色つけなど装飾をした後に文章を加えると、色つけしたくないところ
までカラーになったりするので、「HTMLのソースを見る」(一番右の
<>ボタン)でHTMLを使って手直しをしています。
4)テーブルを使って・・・(各社共通?)
写真の横に文字を何行か入れるときや、表の形で作りたいときは
「HTMLのソースを見る」画面でテーブルをプログラムしています。
その名のとおり、HTMLで出来ます。テーブルの基本1行目は↓
<TABLE borderColor=#ccccff cellSpacing=0 cellPadding=2 border=1>
以下<TBODY><TR><TD>・・・と続きます。(一例です)
テーブルのプログラミングはベースができれば使いまわしが可能。
モノによって、枠幅(border=)を”0”にしてなくしたり、枠線と画像・文
との間隔を変えたりしてます。
#サンプルはコチラ
⇒上の表は枠線アリ間隔広め、下の画像のトコは枠線ナシです。
※画像に文字を回り込ませる方法は他にもあります♪
***
そんな感じで、ブログを始めた当初(昨年8月)よりは、多少個性的で
見やすく?なっているかと思います。(注:あくまで自己満足w)
まあ、普通に使っても十分な機能なのですが、多少知識があると
試したくなるのが人のサガで・・・w
HTMLの基本部分は簡単に習得できるし、結構おもしろいですよ。
ネット上に文章を公開していく生活に慣れたら、是非
誰にも気付かれないこだわりで(笑)遊んでみてくださいね~♪
※ココをもう少し詳しく!とか もっといい方法があるよ!ここは違うよ!
などアドバイスがあったら気軽にコメント↓ください