2005年08月05日 - ページ上部にガイド文を記載
Blogの上部に、ガイドになる文章を設置したいのだが。
折角なので一番目につく部分に、様々な案内なりを掲示しておきたいし。いずれ気が向いたらば、自己紹介なり座右の銘などを記載しておこうと考えた。
しかし「上級者向けプラグイン」プラグインのフリーエリア、これはあまりにも見づらく物足りないのだ。
スタイルシートより、このように設定。
div.guide1 {
margin: 5px 50px 10px 40px;
padding: 5px 10px 5px 10px;
border: 1px solid : #0000ff:
}
div.guide2 {
margin: 5px 50px 10px 40px;
text-align:left;
}
「デザインの設定」より、トップページを開き。
<!-- HEADER -->
<div id="content">
<div class="blog">
その直前に、このように記載してみる。
<div class="guide1">
<div class="guide2">
<a href="http://d.hatena.ne.jp/LucaLuca/">はてなのLucablog</a>より移転テスト中。
</div>
<div class="guide2">
<strong>
Luca日記推奨</strong>
<br>
<a href="http://d.hatena.ne.jp/LucaLuca/20050305">ファーミング詐欺とDNS(フィッシング詐欺に非ず)</a>
<br>
<a href="http://d.hatena.ne.jp/LucaLuca/20041030">はてながJWordのアクセスポートと提携
</a>
<br>
<a href="http://d.hatena.ne.jp/LucaLuca/20041024">マルウェア(Malware)の定義(スパイウェアやアドウェア)
</a>
</div>
</div>
成功した。
個別記事ページにては、この直前に上記のdivで囲んだものを挿入したらば、成功。
<div id="content">
<div class="blog">
<$TrackBackAutoDiscovery$>
<h2 class="date"><$ArticleDate$><$ArticleTitle ESCAPE$></h2>
はてなの引用ブロックのような見た目のものが欲しいので。これを応用してテストしてみる。
<div class="guide1">---</div>
guide1
折角なので一番目につく部分に、様々な案内なりを掲示しておきたいし。いずれ気が向いたらば、自己紹介なり座右の銘などを記載しておこうと考えた。
しかし「上級者向けプラグイン」プラグインのフリーエリア、これはあまりにも見づらく物足りないのだ。
スタイルシートより、このように設定。
div.guide1 {
margin: 5px 50px 10px 40px;
padding: 5px 10px 5px 10px;
border: 1px solid : #0000ff:
}
div.guide2 {
margin: 5px 50px 10px 40px;
text-align:left;
}
「デザインの設定」より、トップページを開き。
<!-- HEADER -->
<div id="content">
<div class="blog">
その直前に、このように記載してみる。
<div class="guide1">
<div class="guide2">
<a href="http://d.hatena.ne.jp/LucaLuca/">はてなのLucablog</a>より移転テスト中。
</div>
<div class="guide2">
<strong>
Luca日記推奨</strong>
<br>
<a href="http://d.hatena.ne.jp/LucaLuca/20050305">ファーミング詐欺とDNS(フィッシング詐欺に非ず)</a>
<br>
<a href="http://d.hatena.ne.jp/LucaLuca/20041030">はてながJWordのアクセスポートと提携
</a>
<br>
<a href="http://d.hatena.ne.jp/LucaLuca/20041024">マルウェア(Malware)の定義(スパイウェアやアドウェア)
</a>
</div>
</div>
成功した。
個別記事ページにては、この直前に上記のdivで囲んだものを挿入したらば、成功。
<div id="content">
<div class="blog">
<$TrackBackAutoDiscovery$>
<h2 class="date"><$ArticleDate$><$ArticleTitle ESCAPE$></h2>
囲み記事
はてなの引用ブロックのような見た目のものが欲しいので。これを応用してテストしてみる。
<div class="guide1">---</div>
guide1
Posted by Luca at 22:02
│
│
2005年08月04日 - 個別記事へのサイドバー
個別記事の右カラムにサイドバーをつけたデザインにしたいんですが。
どうもうまくいかず、大変物悲しいのです。
livedoorブログのカスタマイズ方法
livedoor Blogで個別記事にサイドバー〜HTMLいじりバージョン
個別記事にサイドバー〜表示乱れ修正
これは少し方法が違う。
一番下に表示させるならば、これで成功したんだけど。
まだレイアウト変更中です!
Livedoor Blogにサイドバーをつける方法
下に表示されるのはスタイルシートを編集すれば何とかうまく行きそうな。
#content{
float:left;
width:500px;
text-align:left;
margin-right:10px;
}
このwidthを500pxから400pxに変更・・・・・・成功した。
450pxでは・・・・・とりあえず成功。
また500pxに戻したら・・・・・・・・・何故か成功した。
意味不明。
気になったのでデザインを一旦初期化し、保存していたCSSと個別記事をそれぞれ貼り付けたらば、またちゃんと表示されるようになっているし。
とりあえず見易さのため550とした。。
結論として、JavaScriptを使う方法は全くうまくいかず。
<div id="links">から</div>までを挿入したら成功。
<成功例>
1)<div class="blog">の直前に<div id="content">を挿入。
2)<div id="footer">の直前に</div>を挿入。
3)<div id="footer">と先ほど追加した</div>の間に、これを挿入。
<div id="links">
<$PluginList$>
<div class="powered">
<a href="<$LDBlogUrl$>"><img src="<$LDBlogLogo$>" width="117" height="28" border="0" alt="livedoor Blog"></a>
</div>
<div class="syndicate">
<a href="<$RSSUrl$>">Syndicate this site (XML) </a>
</div>
</div>
2005年10月4日追記事項
<blockquote>を利用していたものの、今まではこのような問題は生じなかったのだが。昨日投稿した後に、サイドバーが下に表示される現象に遭遇。
スタイルシートを以下のように修正したらば、多少横に長くなったものの解決した。
#container{
width:800px;
margin:0 auto;
text-align:center;
}
#banner,#subbanner{
width:800px;
height:185px;
text-align:left;
background:url
}
どうもうまくいかず、大変物悲しいのです。
livedoorブログのカスタマイズ方法
livedoor Blogで個別記事にサイドバー〜HTMLいじりバージョン
個別記事にサイドバー〜表示乱れ修正
これは少し方法が違う。
一番下に表示させるならば、これで成功したんだけど。
まだレイアウト変更中です!
Livedoor Blogにサイドバーをつける方法
下に表示されるのはスタイルシートを編集すれば何とかうまく行きそうな。
#content{
float:left;
width:500px;
text-align:left;
margin-right:10px;
}
このwidthを500pxから400pxに変更・・・・・・成功した。
450pxでは・・・・・とりあえず成功。
また500pxに戻したら・・・・・・・・・何故か成功した。
意味不明。
気になったのでデザインを一旦初期化し、保存していたCSSと個別記事をそれぞれ貼り付けたらば、またちゃんと表示されるようになっているし。
とりあえず見易さのため550とした。。
結論として、JavaScriptを使う方法は全くうまくいかず。
<div id="links">から</div>までを挿入したら成功。
<成功例>
1)<div class="blog">の直前に<div id="content">を挿入。
2)<div id="footer">の直前に</div>を挿入。
3)<div id="footer">と先ほど追加した</div>の間に、これを挿入。
<div id="links">
<$PluginList$>
<div class="powered">
<a href="<$LDBlogUrl$>"><img src="<$LDBlogLogo$>" width="117" height="28" border="0" alt="livedoor Blog"></a>
</div>
<div class="syndicate">
<a href="<$RSSUrl$>">Syndicate this site (XML) </a>
</div>
</div>
blockquot - 引用タグ利用時のサイドバー
2005年10月4日追記事項
<blockquote>を利用していたものの、今まではこのような問題は生じなかったのだが。昨日投稿した後に、サイドバーが下に表示される現象に遭遇。
スタイルシートを以下のように修正したらば、多少横に長くなったものの解決した。
#container{
width:800px;
margin:0 auto;
text-align:center;
}
#banner,#subbanner{
width:800px;
height:185px;
text-align:left;
background:url
}
Posted by Luca at 21:59
│
│
2005年08月02日 - 投稿時の文章の成型-文字列の装飾と引用ブロック
文字列の装飾
個別の文字列の色を指定するならば、二通りの方法がある。
<font color="#ff0000">赤文字テスト</font>
赤文字テスト
多分、こちらのspanにて指定する方が良さそうな。
<span style="color:#ff0000">赤文字テスト</span>
赤文字テスト
どのような色を利用するかについては、こちらの一覧表をご覧頂きたい。
HTMLのカラーネーム(IT用語辞典 e-Words)
引用ブロック
引用タグ(blockquote)を利用してみよう。引用文として掲載する部分を<blockquote>引用文</blockquote>で囲むのだ。
<blockquote>ここが引用ブロックになる。
なおこの中に引用元としていずこかのURIを掲載すれば、なお宜しい。
<a href="http://www.lucanian.net/">引用例</a>
</blockquote>
これはこのように表示される。
ここが引用ブロックになる。
なおこの中に引用元としていずこかのURIを掲載すれば、なお宜しい。
引用例
ちなみに段落<p>-----</p>の中に引用ブロックを作成するのは、html文法に反するようだが、divは利用してても段落を使ってないのならば気にしなくても良さそうな。
Posted by Luca at 21:42
│
│
2005年08月01日 - トップページに戻れない
デフォルトではトップページへ戻れないLivedoorBlog
livedoor Blogを利用して感じた、最も不便な部分なんだけど。
カテゴリアーカイブ、月別アーカイブに入ってしまうと、そこからトップページへ戻るリンクが無いようだ。
(個別記事ページでは「このBlogのトップへ」なるリンクがあるんだけど)
まずカテゴリアーカイブのみで、この部分を見つけて、
<a class="aposted" href="<$ArticlePermalink$>"><$ArticleTime$></a>
この直下に付記し、このようにした。
<a class="aposted" href="<$ArticlePermalink$>"><$ArticleTime$></a>
<a class="amenu" href="<$BlogUrl$>">このBlogのトップへ</a>
これでそれぞれの日付の記事に「このBlogのトップへ」のリンクが表示されるようになった。
Posted by Luca at 21:27
│
│