mixiチェック
ライブドアブログの中央部分にプログパーツを配置する方法を紹介します。
(カスタマイズ方法を残す意味合いもあります。)
3カラムのデザインを選べば、ブログパーツは左右に配置する事が出来ます。
しかし、真中の記事の直ぐ上に配置しようと思ったら、配置出来ませんでした。
仕方が無いので、カスタマイズする事を決めました。
無事配置出来たら、濱口優(よゐこ)のマネをしながら「出来たど～!!」と一言コメント下さい。
ライブドアブログ、サイドメニューを左寄せで自動スクロールバーを設置
猿橋大、詳解HTMLタグ辞典 第2版
株式会社アンク、CSS辞典 第5版 [CSS2/3/4対応]
栗原明則、初めてでもできる! ブログカスタマイズリファレンス
ライブドアブログで役立つ情報集の一覧
ライブドアブログで役立つ情報集の一覧
・人が来ないブログを活性化する方法
・ライブドアブログ、サイドメニューを左寄せで自動スクロールバーを設置
・ライブドアブログで更新情報をメール配信送信
・ライブドアブログの中央下(ページの一番下)に広告を入れる
・ライブドアブログ、中央にプログパーツを配置
配置したい場所
デザイン / ブログパーツ設定では以下の項目を設定できます。
該当する内容を変更する事で、カスタマイズが可能です。
設定項目一覧
・CSS
・トップページ
・個別記事ページ
・カテゴリアーカイブ
・月別アーカイブ
CSS
・ブログ全体のデザインを変更したい場合に変更します。
トップページ
・ブログのトップページに機能やコンテンツを追加したい場合に変更します。
個別記事ページ
・ブログの個別記事ページに機能やコンテンツを追加したい場合に変更します。
カテゴリアーカイブ
・ブログのカテゴリアーカイブページに機能やコンテンツを追加したい場合に変更します。
月別アーカイブ
・ブログの月別アーカイブページに機能やコンテンツを追加したい場合に変更します。
スタイルシートの追加
/* =============================================== */
/** プログパーツを配置(追記) */
/* =============================================== */
.topmain{
font-size:12px;
color:#000000;
text-align:left;
margin:10px 20px 20px;
padding:5px 10px 10px;
background-color:#FFFFFF;
}
管理画面で、「ブログ設定 → PC → カスタマイズ → CSS」を開きます。
上記のプログラムソースをCSSの一番下に貼り付けます。
紹介しているのは、簡易バージョンです。
更に、カスタマイズしたい場合は、この中にプログラムを追加記入します。
設置したい文字列を追加(トップページ)
管理画面で、「ブログ設定 → PC → カスタマイズ → トップページ」を開きます。
下記のプログラムソースの場所を見つけます。
(30行目～40行目あたりです。)
「
<div id="content" class="hfeed">
<!-- ..... MainColumn ..... -->
<div id="main" class="column">
<div class="column-inner">
<div class="column-inner-2">
<$MessageBoard$>
<$IndexNavigator$>
<!-- ArticlesLoop Start -->
<!-- google_ad_section_start -->
<IndexArticlesLoop>
<$TrackBackAutoDiscovery$>
<div class="article-outer hentry">
<div class="article-outer-2">
<div class="article-outer-3">
」
下記の場所に、文章を書き加えます。
「
<$IndexNavigator$>
<div class="topmain">
ここに、文章を追加します。
</div>
<!-- ArticlesLoop Start -->
」
設置したい文字列を追加(個別記事ページ)
管理画面で、「ブログ設定 → PC → カスタマイズ → 個別記事ページ」を開きます。
下記のプログラムソースの場所を見つけます。
(30行目～40行目あたりです。)
「
<div id="content" class="hfeed">
<!-- ..... MainColumn ..... -->
<div id="main" class="column">
<div class="column-inner">
<div class="column-inner-2">
<$MessageBoard$>
<SetVar ArticlePagerType>2</SetVar><SetVar UseTitlesForPager>1</SetVar><$ArticlePager$>
<$TrackBackAutoDiscovery$>
<div class="article-outer hentry">
<div class="article-outer-2">
<div class="article-outer-3">
」
下記の場所に、文章を書き加えます。
「
<SetVar ArticlePagerType>2</SetVar><SetVar UseTitlesForPager>1</SetVar><$ArticlePager$>
<div class="topmain">
ここに、文章を追加します。
</div>
<$TrackBackAutoDiscovery$>
」
