解決済

clip!clip!
Ads By Google

livedoorブログベースでこんな感じのブログデザインは実現できそうでしょうか、パート2

livedoorブログベースでこんな感じのブログデザインは実現できそうでしょうか


の続きです。例にあげたサイトの悪かったのか話の方向がずれてしまったので…
このような思い切ったデザインです。



このような普通のWebサイトのデザインがブログベースでちょっとプラグインを配置しなおしするだけで実現可能でしょうかです。

本来記事が表示される部分が記事タイトル一覧になって、
クリックしてはじめて記事が読めるようにします。

他社のサービスを利用しない。

Wikiで作るのではなくあくまでブログベース。

2009-06-15 05:42の質問
デザイン  livedoorブログ  ブログデザイン  
デザイン
デザイン の情報はこちらです
www.span.ne.jp
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(5)

1.

2009-06-15 07:02:03みんなナイスな
このようなデザインであれば、ブログパーツを並び替えるだけでは出来ませんが、デザインテンプレートのカスタマイズで可能です。

また、以前の質問にあったサイトのようなデザインのイメージでブログを作ってみました。

そうです、このような感じです。ヘッドラインのようなデザインもあったら面白そうだと思ったのですよ。

2.

2009-06-15 08:55:15みんなナイスな
基本的にlivedoorブログはCSSだけじゃなく構造のHTML部分も自作できますし、それだけじゃなくフリーエリアでJavascript等ほぼなんでも動く状態だと思うので、手をかければ基本何でもできるのではないでしょうか?

ブログという枠で考えるよりサイトデザインからはじめて
blogの仕様に落とし込んでいけば大概はできそうです。

ただniftyのようなFlashを絡めるというのはちょっとわかりませんが。

ニフティのようにしたければ、あのソースをパクってLD blog独自のタグ($~~$)を落とし込んで設置すればそんな感じに見えると思います。

手間をかければ自由にできるんですね。

3.

2009-06-15 10:28:26みんなナイスな
久しくデザインやってないので
完全にうまくいくかどうかは確認してないけど・・・

まず、CSSで
日付とタイトルとカテゴリを一列に並べるように配置
下に点線。

トップページとカテゴリのHTMLで記事まわりを外す。

タイトルが画像下のメニューは
HTMLに直接書く方法でも良いんですが
最近、仕様が変わったので
フリーエリアでも比較的簡単に出来ると思います。

4.

2009-06-15 18:56:06みんなナイスな
本来記事が表示される部分が記事タイトル一覧になって、
クリックしてはじめて記事が読めるようにします。

トップページの記事のループで、
各個別記事へのリンクのあるタイトルだけにします。
回答レベル : アドバイス

5.

2009-06-16 01:57:22みんなナイスな
>本来記事が表示される部分が記事タイトル一覧になって、
>クリックしてはじめて記事が読めるようにします。

こういうことですか?


やり方はデザインのカスタマイズ→トップページで日付・記事タイトル・本文のところを大改造します。
・日付→いらない一番上のdivタグ以外削除
・記事タイトル→一番上のdivタグ以外削って記事一覧と入れる
・本文→一番上のdivタグ以外削ってコメントにあるように、削った日付・記事タイトルから必要なものを配置し直す。
・<IndexArticlesLoop></IndexArticlesLoop>は記事がいくつも並ぶために必要なLDブログタグで位置を変える。具体的には元にある場所から本文を削って配置したものを包むように上下に置く。
・コメント・トラックバックetc→いらない一番上のdivタグ以外削除

PSリンク先のgoogleAdの場所に注目w

そうです、その通りです。掻き回してしまってすみません。

Ads By Google

コメント(13)

Javascriptで動くので他のサイト情報を動的にiframeで設置したり編集したりすればニューストピックなんかも置けるんじゃないでしょうか?ちょっと重くなるかもですが。

ところで関連ですが、Livedoor Topにあるような自分のID情報とログインログアウト・ブログを作る・メール*件とかいうあの部分をブログにつけれれば結構便利のような気もするが、ログイン情報はどうやって取得するのだろうかw

ソースを見てみると

	<div id="member">
	<a href="http://www.livedoor.com/r/user_profile"><img src="http://image.profile.livedoor.jp/icon/fuck_sakujenne_16.png" width="16" height="16" alt="" title="" class="profileicon" /></a><p class="profile"><span class="username"><a href="http://cms.profile.livedoor.com/home/"><script>new livedoorProfileNickname('【livedoor ID】');</script></a></span>さん</p>
		<ul class="guest-info">
		<li class="bdno"><a href="http://www.livedoor.com/r/user_logout">ログアウト</a></li>
	</ul>
	<ul class="member-menu">
		<li><a href="http://www.livedoor.com/r/user_blogcms"><img src="http://image.livedoor.com/img/top/icons/02/blog.gif" width="20" height="20" alt="" title="" /></a><p><a href="http://www.livedoor.com/r/user_blogcms">ブログを書く</a></p></li>

		<li><a href="http://www.livedoor.com/r/user_mail"><img src="http://image.livedoor.com/img/top/icons/02/mail.gif" width="20" height="20" alt="" title="" /></a><p><a href="http://www.livedoor.com/r/user_mail">メール</a>&nbsp;<span id="mail-unread">0通</span></p></li>
		<li><a href="http://www.livedoor.com/r/user_rss"><img src="http://image.livedoor.com/img/top/icons/02/reader.gif" width="20" height="20" alt="" title="" /></a><p><a href="http://www.livedoor.com/r/user_rss">RSS</a>&nbsp;<span id="reader-unread">0件</span></p></li>
	</ul>
		<ul class="member-info">
		<li><a href="http://www.livedoor.com/r/user_point">0pt</a></li><li class="bdno"><a href="http://www.livedoor.com/r/user_member">登録情報</a></li>
	</ul>
		</div>
	<div id="member-iconlist">

	<ul><li><a href="http://www.livedoor.com/r/i_blog"><img src="http://image.livedoor.com/img/top/icons/02/blog.gif" width="20" height="20" alt="blog" title="blog" id="icon-blog" /></a></li><li><a href="http://www.livedoor.com/r/i_pics"><img src="http://image.livedoor.com/img/top/icons/02/pics.gif" width="20" height="20" alt="pics" title="pics" id="icon-pics" /></a></li><li><a href="http://www.livedoor.com/r/i_lislog"><img src="http://image.livedoor.com/img/top/icons/02/lislog.gif" width="20" height="20" alt="lislog" title="lislog" id="icon-lislog" /></a></li><li><a href="http://www.livedoor.com/r/i_reader"><img src="http://image.livedoor.com/img/top/icons/02/reader.gif" width="20" height="20" alt="reader" title="reader" id="icon-reader" /></a></li>

(改行なしで)

<li><a href="http://www.livedoor.com/r/i_weather"><img src="http://image.livedoor.com/img/top/icons/02/weather.gif" width="20" height="20" alt="weather" title="weather" id="icon-weather" /></a></li></ul>
	<p><a href="./icon">設定</a></p>
	</div>
</div>

ヘッダに

<script type="text/javascript" src="http://portal.profile.livedoor.com/js/livedoor_profile_nickname.js"></script>

とまあこんなところだけど、【livedoor ID】0通 0件のところを生成取得できる方法があれば完璧なんだが。。。

>>3の編集後のソース
article-outer-3 DIVタグ内

<div class="article-outer-3">
	<div class="article-header">
		<div class="article-title-outer">
			<h2 class="article-title entry-title">ブログ記事一覧</h2>
		</div>
	</div><!-- articleHeader End -->
	<div class="article-body entry-content">
		<div class="article-body-inner">
			<IndexArticlesLoop>
			<div class="title_list"><a href="<$ArticlePermalink$>" title="個別記事ページへ" rel="bookmark"><$ArticleTitle ESCAPE$></a><IfArticleRating><span class="rating"><$ArticleRatingIcon$></span></IfArticleRating><abbr class="updated" title="<$ArticleDateISO8601$>"><span class="article-date"><$ArticleDate$></span><span class="article-time"><$ArticleTime$></span></abbr></div><br>
			</IndexArticlesLoop>
		</div>

	</div><!-- articleBody End -->
	<div class="article-footer">
	</div><!-- articleFooter End -->
</div>

ちなみにこれだと規約違反($advertise$がない)ので

邪魔にならないbody終タグの前にでも
<div class="garbage"><$Advertise$></div>
</body>
と入れてやってくださいwww

×>>3の編集後ソース
○>>5の編集後ソース

スマソorz

#11.  tani.masaru
2009-06-16 14:00:11

とりあえずトップページとアーカイブページをタイトルだけ表示するテンプレートをみんなのデザインにアップしました。これを参考に改造してみてはどうでしょうか。
http://blog.livedoor.com/shared_design/detail/708

新管理画面になってブログを複数持つのが簡単になったので、デザインテスト用にブログを新たに作り色々と試してみるのも良いと思います。

ああ、なるほど。デザインを作り直してみんなのデザインに公開すればいいのか。
これって、既存のLDデザインを弄くったやつでも大丈夫ということですか?なんなら依頼主のにょさんの今使ってるブログデザインを変えて公開した方が親切かなぁと。

トラックバック(2)

トラックバックURL: