キイタ?( ゚д゚)オクサン(゚д゚ )アラヤダワァ トップページへ

空手・収納・プラモ・手芸・ブログカスタマイズ・モバイルHP製作etc…多趣味な人の日記です。レーシックレビューも。
2008/09123456789101112131415161718192021222324252627282930312008/11
microad

お知らせ
推奨閲覧環境
[更新履歴(主にブログカスタマイズ・素材関連)]
カスタマイズやプラグイン導入・素材利用の際、コメントやトラックバックを頂けたりすると喜びます。
09/30] サイト外タグ検索(プラグインバージョン)自分と同じタグを指定したブログを検索 
09/05] 下記共有プラグインが再承認されました(公開中・DL可能) 
09/03] 共有プラグイン「なんでもスクロール」再登録について
08/13] 画像URL〜画像でリンクを貼る
08/05] 左右振り分けカスタマイズ(記事欄&コメント欄用)についてのお知らせ
08/01] 続・スタイルシートでタイトルと日付を左右に振り分け(コメント欄用)
07/03] サイトと同じ幅のフリーエリアを作る
05/21] 今日の日付入りカレンダー(共有プラグイン登録)
05/11] 管理者用記事編集タグ・最新版
05/08] 横カレンダーの表示&背景色の変更
04/20] FC2ブックマークの位置を変更
04/18] FC2ブログ拍手の位置を変更
[04/18] 最上部移動と記事編集タグ管理者用作業リンクを再編集
03/28] ユーザータグリスト改良版
03/23] はてなブックマークアイコン15色製作と設置方法
03/16] RSSフィードアイコン&メールボタン製作
03/13] スタイルシートでタイトルと日付を左右に振り分け(記事タイトル用)
03/10] ミニブログPIYO用のボタン追加
03/09] ミクシー用バナー(ボタン)製作(3/11サイズ追加)
02/22] スクロールバー設定タグに「横スクロールが出てしまった場合」の修正方法を追記
[02/22] スパムコメント対策として、コメント投稿時における画像認証機能を適用
[02/21] リンク文字にマウスカーソルを合わせた時の装飾(レインボーリンク)
→2007年
[11/18] クリック型ランキングを全て削除。
08/23] コミュニティー(テーマ・ジャンル)のリンク設置方法
08/17] 記事毎に指定したユーザータグを表示 その2 (サイト外タグ検索)
08/17] 記事毎に指定したユーザータグを表示 その1 (サイト内タグ検索)
08/12] スクロールバー色分け用解説図
06/29] ミニブログPIYOバナー(ボタン)製作
06/21] web拍手用バナー(ボタン)製作
05/21] 管理者用作業リンク
05/18] スクロールバー設定タグ(後に「なんでもスクロール」で共有プラグイン登録)
05/16] 公式プラグイン「メールフォーム」を折りたたみにする方法
04/15] 空手衣・パンダアイコン製作
04/10] きのこアイコン製作
02/15] 最上部移動と管理者用記事編集タグ
01/19] 新着記事にNEWマークを表示する

・掲載画像はクリックで拡大するものもあります。
・配布素材(アイコン・バナー)以外の画像、及び文章の複製・転載はご遠慮下さい。→詳細


【現在のページ】 HOMEテンプレート ≫ スタイルシートでタイトルと日付を左右に振り分け

管理者用記事編集 スタイルシートでタイトルと日付を左右に振り分け

記事タイトルと日付を左右振り分けて横並びにする方法として、以前FC2ブログのテンプレート工房様の管理者用記事編集リンク のコメント欄にて、「テーブルでやりました」などと書いたことがあるのですが、その後文法チェック(Another HTML-lint gateway)なるものを知ってしまい、エラーが出まくることが判明した為、外してしまいました。


そして直し方が分からないまま半年経過。
で、さっき閃いた。(大袈裟な言い回し。)
スタイルシートでやればいいじゃん。今までなんで気が付かなかったんだろ。馬鹿じゃね私(゚д゚)


と言うわけでタグを貼っておきます。(続きを読むからどうぞです。)


【HTML】
赤文字を追加します。
元々あった場所の日付の行は削除(二重表示になりますので)

<!--▼▼ メイン表示 ▼▼-->
<!--▼ エントリー(記事)▼-->
<!--topentry-->
<div class="ently_outline">
<h2 class="ently_title">


<div class="entry_date">
<%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_wayoubi>)
</div>



</h2>


【スタイルシート】
赤文字を追加します。「記事」部分に入れておくと後々作業しやすいかと思います。
御自分のブログのデザインに合わせて数値等の変更をして下さい。

/*** ▼ 記事 ▼ ***/



.entry_date{
font-size:10pt;     /* 文字サイズ(日付) */
color:#ffffff;      /* 文字色(日付) */
padding: 0px 0px 0px 0px; /* 文字位置 (上・右・下・左) */
background-color:#000000;   /* 背景色(日付) */
float: right;
}

/*** ▲ 記事 ▲ ***/




【注意書き】
1. 文字サイズ・色・位置等はお使いのテンプレートに合わせて下さい。
2. テンプレートによってはこのタグが有効でないことがあります。
3. 何はともあれ「topentry」部分を探して、色々試してみると良いと思います。
4. 必ず「複製」してバックアップを取っておいてから弄り倒しましょう。
5. 「出来ねえよ!(`Д´メ)」とか「分かりません」とか言われても困ってしまいます。
6. テーブル使うよりマシですが、文法チェックでエラーが出ます。(号泣)


【動作確認】
○…IE・Opera・Firefox・safari


「文法チェックで引っかかるのは嫌だけど左右には振り分けたい!」
と言う私のような方は、HTML部分を

<!--▼▼ メイン表示 ▼▼-->
<!--▼ エントリー(記事)▼-->
<!--topentry-->
<div class="ently_outline">


<div class="entry_date">
<%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_wayoubi>)
</div>


<h2 class="ently_title">



</h2>

として、スタイルシートの文字位置の数値を変更して下さい。




【関連記事】
続・スタイルシートでタイトルと日付を左右に振り分け

このエントリーをはてなブックマークに追加 このエントリーをFC2ブックマークに追加 このエントリーを各種ブックマークに追加 | この記事に拍手する | ブログ | カスタマイズ | テンプレート | TB(0) | CM(13)

このコメントは管理人のみ閲覧できます
[ 2008/03/13(木) 21:28 ] ◆[ 編集/削除 ]
このコメントは管理人のみ閲覧できます
[ 2008/03/14(金) 21:33 ] ◆[ 編集/削除 ]
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ftakeiteasy371.blog62.fc2.com%2F&profile=css21&usermedium=all&warning=1&lang=ja
こちらのCSS検証サイトでk2さんのブログのスタイルシートを拝見させて頂いたのですが、

.entry_date {
font-size : 10pt;
}

のみの指定になってしまっています。

.entry_date{
font-size:10pt;     /* 文字サイズ */
color:#ffffff;      /* 文字色 */
background-color:#000000;   /* 背景色 */
padding: 5px 20px 0px 0px;   /* 文字位置 (上・右・下・左) */
float: right;
}

これを全部入れることによって正しい位置に表示されるはずなのですがもう1ケ所、

.ently_outline {
padding : 0 0 20px;
background-color : #fde4b9;
margin-bottom : 0;
}



.ently_outline {
border : 0px solid #000000;
margin-bottom : 10px;
background-color : #fde4b9;
}

に変更します。

padding : 0 0 20px;
この赤文字の数値が2段になってしまう原因だと思います。
[ 2008/08/05(火) 01:16 ] ◆KVRhAO0s[ 編集/削除 ]
お忙しいところ、ご丁寧な返答ありがとうございます。
しかしながら、ご指摘の訂正をしても一向に症状が治りません。
自分でもご指摘を参考に色々やってみなのですが・・・
上記サイトを参考に色々挑戦してみます。
このたびはご迷惑おかけしました。
[ 2008/08/05(火) 02:03 ] ◆gPxiGQPc[ 編集/削除 ]
キャッシュのクリアやクッキーの削除をしても駄目でしょうか?
良かったら私のスタイルシートを覗いてみて下さいね
何か原因が分かるかもしれません

お役に立てずすみませんm(__)m
[ 2008/08/05(火) 02:12 ] ◆KVRhAO0s[ 編集/削除 ]
上記いただいた方法もだめでした。
しかし、僕はFire fox3を使ってるんですが、試しにIE7を使ってみたら正常に表示されました。
もしかしたらブラウザの問題なのかもしれません。
度々、スミマセンでした。
今回は諦めて、勉強してみます。
[ 2008/08/05(火) 02:33 ] ◆-[ 編集/削除 ]
教えてもらったURLでコチラのスタイルシートを見せてもらって、何も考えず、記事部分を全てソチラのものを移植(コピー)したら出来ました。
原因は分からずじまいですが・・・
ご迷惑おかけしました。
[ 2008/08/05(火) 14:33 ] ◆-[ 編集/削除 ]
うまく行って良かったです^^

上の記事内に【動作確認】の項目を追加してみました。
私もブラウザをIE・Opera・Firefox・safariの4つをインストールしてあるので、カスタマイズ記事を書く度にチェックしていたのですが、完全に見落としていました_| ̄|○
しかも5ケ月も経過。。。お恥ずかしい限りで(泣)

k2さんのご指摘が無ければ気付かなかったと思います。
有難う御座いました(*´ω`)
[ 2008/08/05(火) 22:46 ] ◆KVRhAO0s[ 編集/削除 ]
こんばんは^^

有難うございます!
設定のことはよく分からず苦労しています。
テンプレートの勉強blogを作ってありましたので早速やってみました。

日付が右端だとタイトルが左でうまくいきます。
日付、タイトルの順にしたいです。
もうひとつの記事の文字が小さくなってしまいます。
お時間がありましたらblogを見て頂けると助かります。
有難うございます、感謝します_(._.)_
[ 2008/08/25(月) 01:09 ] ◆JZ2AL5Xs[ 編集/削除 ]
>日付が右端だとタイトルが左でうまくいきます。
>日付、タイトルの順にしたいです。
と言うことは、「日付・タイトルの順で左揃えにする」いうことで宜しかったでしょうか?

でしたら、HTMLを

<!--▼ エントリー(記事)▼-->
<!--topentry-->
<!--▼ エントリー(記事)▼-->
<!--topentry-->
<h3>
<%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_wayoubi>)&nbsp;
<a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="記事を参照"><%topentry_title></a>
</h3>

<div class="article">
<%topentry_body>


としてみて下さい。

今現在、タイトル部分が左に寄って見えるのですが、スタイルシートを

font-size: 1.0em; /* 記事タイトル文字の大きさ */
/* - - - - - - - - - - - - - - - - */
text-decoration:none;
padding: 0.3em 0.3em 0.3em 1em;
margin: 0;

とすることで直ると思います。

>もうひとつの記事の文字が小さくなってしまいます。
これは解決されたようですね^^
お返事が遅くなってしまって申し訳ありませんm(__)m
[ 2008/08/25(月) 11:55 ] ◆KVRhAO0s[ 編集/削除 ]
こんにちは。
お世話になります_(._.)_

横に日付、タイトルの順に並べることができました!
ただ下にもタイトルのみ重複してしまいました。
私が何かをいじってしまったんだと思います。
その部分を削除すれば解決するかと思われますので探してみます。
こちらのように人に優しいblogと出会えて感謝しています。
[ 2008/08/25(月) 16:40 ] ◆JZ2AL5Xs[ 編集/削除 ]
ちゃんさま、有難うございます!

出来ました、思うとおりに出来ました!!
この日付の設定、かなり長い間取り組んできましたので、
感激で涙が出そうです。
早速「四季の風」を直しました。

これで希望のスタイルになり直す部分はないですが、
どうしても分からない時はまた教えてくださいませ_(._.)_感謝♪
[ 2008/08/25(月) 17:32 ] ◆JZ2AL5Xs[ 編集/削除 ]
希望通りになると嬉しいですよね♪
私もこのテンプレートに出会わなかったらカスタマイズをして楽しもうとは考えなかったと思います。
配布して下さった「いたおさん」に感謝^^

私も知識が浅い為、分からないことだらけですが、また何かお手伝い出来たら嬉しいです。
[ 2008/08/26(火) 23:25 ] ◆KVRhAO0s[ 編集/削除 ]
コメントの投稿

・ 半角の「”」と、5回以上連続での「-」入力は書き込み出来ません。
・ メールアドレスなどの個人情報は載せないで下さい。














管理者にだけ表示を許可する

この記事へのトラックバックURL(内容確認後の表示とさせて頂いております。)
http://tanpoko.blog70.fc2.com/tb.php/683-2186734c  


閲覧頁数
QLOOKアクセス解析



容量1GB・無料 FC2BLOG
デザイン3000種類以上・アフィリエイト可能−FC2ブログ
自己紹介
千葉県千葉市若葉区内で、
剛柔流空手道 秀礼館
として活動しております。
見学・御質問等、お気軽にどうぞ。
曜日・時間等の詳細はメールにてお問い合わせ下さい。
メール(別窓表示します)
手作りの旗です
※旗は拳斗会の時のものです。

JK Fan 空手道マガジン2007年1月号

【書籍掲載】


JK Fan 空手道マガジン
2007年1月号

「ようこそ JK Blog&HP」


【管理人】 chan (掲示板)

管理人らしき人性講座(婦人科系)も運営中
幽霊会員気味のミクシー
エディタ
FC2ミニブログPIYO
楽天市場買い物リスト−(゚д゚)ウマー

あなたのことがもっと知りたい
50の質問
コトリスト
(↑プロフになるかも)
・ 物作り・収納・掃除に関してはオタク傾向。
・ 過去、バンドでG・Dr・Baを担当した事がある。
(Voをやりたかったが、シャウトがコブシと化してしまう演歌声なので却下される。)

【パパさん】
・ 副業が空手の先生で、改造しまくりなガンプラ&ラジコン製作が趣味。
・ 過去、バンド経験有。
今でもたまにベースを弾いたりする。
・ しかし、嫁もベース弾きなのは結婚するまで知らなかったらしい。
・ ビール、芋焼酎、肉、寿司をこよなく愛する。
・ 不思議な寝言を言う。
・ 嫁を「ちゃん」と呼ぶ。
(ちなみに本名とは一文字も被ってない)

【娘】(高校1年生)
・ 165cmの細長い図体。
あと数cmで母に追い付く。
・ 携帯の待ち受けが弟
(親馬鹿では無く姉馬鹿)
・ ミニーが好き。

【息子】(幼稚園年長)
・ 2006年7月末(3歳時)よりパパさん指導のもと、空手を習い始める。
・ お気に入りの綿毛布としまじろうパペットが手放せない。
・ 彼の辞書には「人見知り」の文字は無い。
・ 姉にミッキー好きにさせられた。

【デカぬこ】(ぽち(♂))
・ 2005年6月生まれ(推定)
・ 犬みたいな性格の白黒ブチ柄ハンサム君。
・ 胸までのジャンプで抱っこを強要する。
・ 雑種なのにミンクのような毛並み。
・ 獣医さんに「うわ〜長いねぇ〜!!」と言われた巨体の持ち主。