Calendar
Sun Mon Tue Wed Thu Fri Sat
 123456
78910111213
14151617181920
21222324252627
28293031   
<< May 2017 >>
RECOMMEND
最新記事タイトル
最新コメント
カテゴリ
これまでの記事
最新トラックバック
お勧めサイト
管理人の紹介

そらのいろつちのいろ

スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - |
素人専門JUGEM開発日誌(最終回)
こんな企画・・
やっぱり恥ずかしいので
さっさと終わらせたいと思います。

あと、JUGEMのテンプレートの
plainをお使いの方は、
MY blog List設置後にバグの出る
環境があるそうなので、
それだけ注意してください。
くわしくはこちら

で、最終回ですが、
細々したことを・・UPです。
ほとんど他力本願な開発作業ですが、
素人・・ってことでお許しください。

まず、サイドのタイトルにエントリーされている
コメントなどのツリー化ですが、
JUGEMカスタマイズ講座こちらの記事を参考に
させていただいています。

あとは、MY blog Listが増えてきた時、
活用すると便利なのが、スクロールバー。
これまたstroll::blogさんの
こちら記事です。

二つとも、楽しいカスタマイズが
目白押しのblogですので、更なるオリジナリティを
目指す方は是非。

かなりこのカテゴリを書いていく際、
未だにわかってない自分」を
再認識いたしましたので、
記事の中、至らない部分もあるかと思いますが、
あったら教えてくださーい。

そういうわけで、最終回もまったく締まらない内容・・でした。

| 素人専用JUGEM開発日誌 | 13:50 | comments(6) | trackbacks(0) |
第四回 画像を差し込むには
はてさて、
大体、色などの変え方はわかってきましたね?
ではでは、画像!これの差し替えを
説明したいと思います。
ちょっと大変ですが、
一つ一つ着実にやってみましょうね。
ゆっくり、焦らず、凹まず?

まず、当たり前ですが、画像を用意してください。
差し替えたい場所にあうサイズで
(適当にやって、後で習性してもOKです)
自分らしさを表現できるものがいいですね。

写真でも、イラストでも、テキストでも・・。
例えば、お料理主体や、雑貨主体のblogなら、
家にあるお鍋(ルクとか)
こまごましたおもちゃ類などを写真にしても
いいですよね。
ルクが色とりどりで並んでいても、
個人で楽しむ範囲ですから、
なんら問題ありません。


まず、最初にタイトル部分を画像に差し替えるやり方です。
私のblogの場合で言う、
「そらのいろ つちのいろ」の部分ですね。

私の場合は、HPを持っているので、
(持ってない方、画像を共有する必要の無い方は、
簡単な方法があるので、また後で追記いたします)
リモートサイトに画像をUPして、
それをブラウザで開き、画像にカーソルをあてて、
左クリックして、プロパティを開きます。
そこに、その画像のURLが表示されていますので、
そのURLをメモしておきます。

この後の説明、私が書いてもいいんですが、
こちら方がわかりやすく説明してくださっていますので、
この方法を一度参照ください。
で、この中に出てくる、

<h1 class="site_title"><img src="./?image=XX" width="XX" height="XX" alt="サイトのタイトル" /></h1>
って所の、

<h1 class="site_title"><img src="この部分に" width="XX" height="XX" alt="サイトのタイトル" /></h1>

先ほどメモしていたURL、
http://〜(差し替えたい画像のアドレス)を入れるのですが・・
画像に差し替えると、
「タイトルをクリックすることで、そのblogのHomeに飛ぶ」という
機能が失われてしまいます。
ですので、リンク機能もそのまま保ちたい人は、

<h1 class="site_title">
<a href="http://自分のJUGEMアドレス">
<img src="http://差し替えたい画像アドレス" border="0" alt="サイトのタイトル" />
</a>
</h1>

こちらのほうを、HTML編集フォームの
<!-- BEGIN title --> の上か
<!-- END title --> の下にいれます。

タイトルの背景画像だけ変更したい方はこちらを参考にさせていただきましょう。

で、一番後ろの背景画像なんですが、
これまた、テンプレートによって色々なのですが、
私の使用している、FLATの場合ですと、

body {
margin: 0px 0px 0px 0px;
background: url(背景画像のURL);
}

と変更します。
ちなみに、私は、背景の画像をJUGEMにUPしてあるので、
背景画像のURLの部分に、
itinisan-daa.jugem.jp/?image=15って入ってます。

このあたりは、そのテンプレによって、様々違う所ですので、
こちらの方で、テンプレートの名前で検索されると
知りたい情報が見つけやすいと思います。

で、その検索方法がちょっとわかりにくいので、
簡単に説明すると、TOPの、タイトルの下にある、
「過去ログ」を開いて、
ページの部分を順番に表示するのですが、
いちいち、「移動」ボタンをクリックしてから、
検索用語を入れて検索してください。
かなりの情報量なので、欲しい情報は見つかると思います。
それでダメなら、
掲示板TOPで質問してみてくださいね。
(できるだけ探してみましょうね)

あと、スクロールバーですが、
これはHPをお持ちの方なら、容易にわかると思いますが、
私の場合は、CSS編集の一番最初に以下のものを差し込んでいます。

html {
scrollbar-3dlight-color : #FFFFFF;
scrollbar-arrow-color : #333333;
scrollbar-base-color : #FFFFFF;
scrollbar-darkshadow-color : #FFFFFF;
scrollbar-highlight-color : #FFFFFF;
scrollbar-shadow-color : #333333;
scrollbar-track-color : #FFFFFF;
}

ただ、環境によって変わらない場合もあるそうです。
変わらない方は、こちらを参考にしてみてください。

色は#333333っていうところの数値を
変更したりしてオリジナルを作っていくわけです。
ちなみに、scrollbar-arrow-color ってのが矢印部分の色。
他の所は、自分で色を変えたりして、
確認してみてください。
(文章で説明してもわかりづらいので)
色見本は第三回を参照して下さい。

では、次回は最終回?
その他細々としたことをまとめます。

追記:画像UPですが、ホームページを持ってない場合、
直接JUGEMにUPしちゃいます。(写真UPと一緒)
もちろん、ホームページをお持ちでない方にもお勧めです。
そこのURLを
(管理ページの画像の管理の写真をクリックすると、表示されます)
使ってくださいね。

| 素人専用JUGEM開発日誌 | 18:21 | comments(4) | trackbacks(0) |
第三回 サイドのタイトルを変えてみよう
まず、サイドのタイトルを
変えてみたい場合のやり方です。

私は、どうせ、見るのはほとんど
日本人なのだし・・と思って、
ほとんどのサイドのタイトルを日本語表記に
変更しています。
この辺は好みなので、そのままでもOKな人は、
そのままにしておいてください。

まず、JUGEM管理者ページの、
テンプレートの編集を開いてください。
そして、HTMLの編集フォームに行きます。

ここで、注意なのですが、
これからテンプレをいじっていく際、
変なふうに間違って、取り返しがつかなくなる場合も
あります。
心配な人は、その都度、コピーして何処かに保存でも
しておいてください。
とにかく、;とかだけ抜けても、デザインが崩れますので、
気をつけてくださいね。

さて、HTML編集フォームを見ていくと、
中ほどに、
<strong><!-- BEGIN selected_entry --></strong>というタグが
みつかります。
この下の下、
NEW ENTRYとか、書いてあります(一部例外もあるみたいです)
ここがサイドのタイトルに表示されている部分なので、
そこの部分をそのまま書き換えるだけです。

そうやって見てみると、他のも同じ構造になってますので、
同じように書き換えてみてください。

そして、色も変えてみましょう。
同じページのCSS編集フォームの中、
中程に、

.linktitle {
font-family: "Verdana";
font-size: 12px;
font-weight: bolder;
color: #CF4078;
line-height: 100%;
margin: 0px 10px 0px 10px;
padding: 2px;
border-bottom: 1px dotted #847461;
}

ってのがあると思います。
entrytitleのほうじゃないですよ。
.linktitle {    }ってのの中身はテンプレによって微妙に違います。
デザインが違いますから・・。

で、ここの#CF4078の部分
(テンプレによって、#の後の記号は違います)が色指定なので、
好きな色に変えてみてください。
(色見本、下に配置しておきました)
ただ、サイドのタイトル全部の色の指定になりますので、
全体の雰囲気を確認しながらやった方が良いと思います。

たぶん、(また!)Verdanaってのが、字体で、
font-size: 12px;ってとこで字の大きさを指定して、
bolderってので、太字を指定してると思われます(汗)
border-bottom: 1px dotted #847461;で、これは、
文字の下のドットの線のドットの長さと色を指定してるような
気がします。
これまた、テンプレによって
微妙な差があるかと思いますが、
それらしきものを探してみましょう。

出来ましたか??
さて、次に、
同じ編集フォームの中の
最初の方に

a:link {color:#000000; text-decoration:none;}
a:visited {color:#000000; text-decoration:none;}
a:active {color:#CF4078; text-decoration:underline;}
a:hover {color:#CF4078; text-decoration:underline;}

こんな感じの(汗)を見つけられると思います。
#000000←こういう部分は、色の記号なので、
そのテンプレによって違います。
a:link ってのが、たぶん、(オイ)リンクする文字の色を示します。
(カレンダーを見ると記事にリンクしてる日が黒ですよね)
a:visited ってのが、たぶん、クリック済みの文字の色を示します。
(私は黒を選んで、変わらないようにしています)
a:active ってのが、リンク部分をクリックした時の色で、
a:hover ってのがリンク部分にカーソルを重ねた時の色、そんな気がします。
このへんは好みなので、色々いじってみて、
自分の好みの色に変更して楽しみましょう。

ちなみに、
同じ編集フォームの

.entry_title {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: 12px;
font-weight: bolder;
color: #000000;
margin: 15px 0px 15px 0px;
}

ってのはblog本文の記事タイトル。
ここでいう、「第三回 サイドのタイトルを変えてみよう」
ってのをですね、指定してると思われます。
(確かめろよって突っ込まないで下さい、メンドクサイです)
entryってのが、だいたい、真ん中の本文に関わるやつですね。
entry_date ってのは、記事タイトルの上の日付を現します。
なんとなぁーくわかる気がしますよね?

**色見本ここです**


こんなんでいいのかなぁ?と
思いつつ、次回に続く・・(´・ω・`)
| 素人専用JUGEM開発日誌 | 15:46 | comments(2) | trackbacks(0) |
番外編(JUGEMの頭脳)
JUGEMって、今のバージョンの前に、
ベータ版、ってのがあったんですけれど、
(私も知ってましたが、難しそう?で
しり込みをして参加してませんでした)
このベータ版で、
JUGEMを使いながら、
どうしたら、使いやすくなるか、
どうしたら、楽しくなるのか、
試行錯誤して、協力しあって
今のJUGEMの基本を作られたユーザーの方達が
いらっしゃいます。

もちろん、それなりの知識がないと、
そういったことは出来ないわけで、
でも、とっても楽しそうだったから、
参加しなくてちょっと後悔・・てな
感じですけれども・・。

さて、このかなり私から見ると
「HTMLに詳しくてすごく頼もしい」方達が
まだその記録を残してくれていますので、
できれば、「こうしたいんだけど」と
どこかで聞く前に、
こちらに紹介したサイトを見て、
検索したり、調べたりしてみてください。

もちろん、私のサイト上でカスタマイズしてあることは、
これから解説していきますので、
焦らない方は、ゆっくりお付き合いください。


うーん、自分はこういう感じにオリジナルで
もっと早く作りたい!!と思う方は、
↓こちらを参考にどうぞ!

JUGEMユーザ互助会
JUGEMお役立ちページ集
ユーザ助け合い掲示板
JUGEPI

できるだけ、自分の力で調べましょう!
| 素人専用JUGEM開発日誌 | 19:25 | comments(0) | trackbacks(0) |
第二回 タイトルを変更してみよう。
さて、
blogの機能が大体把握できてきたら、
次は早速カスタマイズをしてみましょう。

とりあえず、最初に変えたいのは、
タイトルだと思います。
これは、簡単です。
JUGEM管理ページの、
カスタマイズJUGEMの設定を開いて、
最初に変更方法が載っていますので、
そちらで変更してください。

こちらの、更新通知設定ですが、
私は全てチェックしてあります。
これをチェックすることによって、
後でリストを載せた時、
相手側に、こちらの更新を伝えることができますし、
各blog総括サービスに、
「最新更新blog」として掲載されます。
例えば、私はMY blog Listというサービスに
登録して、自分のblogにリストを載せていますが、(無料)
登録しなくても、
ここをチェックしておくだけで、更新記録が発信できます。
ちょっと面倒かもしれませんが、
このサービスはお勧めですので、是非登録してみてください。
(JUGEMへのListのUPの仕方を、下に追記いたしました。)

ちなみに、タイトルのフォントもいじりたいなぁ・・と
思ったら、こちら
詳しく書いてあります。

ただし、FONTを変更しても、相手側でも同じFONTを
登録していないことには、こちらの思ったように
表示されるとは限りません。
(わりと、FONTの数を減らしている人って多いんですよね)
↑うちの旦那さんのノートなんて、私のHP開いたら別物になります。

そんなわけで、自分のイメージを的確に表現するなら、
画像を作って貼り付けた方が手っ取り早いです。
ただ、ご自分で画像が作れる方でないと、ちょっと無理です。
画像の貼り付け方は、また後ほどやりますね。
画像だーー!と思った方は、
ご自分のテンプレートにあうサイズで、作っておいてください。

次回は、サイドの「カテゴリ」などのタイトルの変え方、
色の変え方を書いてみたいと思います。
続きを読む >>
| 素人専用JUGEM開発日誌 | 19:06 | comments(4) | trackbacks(0) |