livedoorブログベースでこんな感じのブログデザインは実現できそうでしょうか、パート2
livedoorブログベースでこんな感じのブログデザインは実現できそうでしょうかの続きです。例にあげたサイトの悪かったのか話の方向がずれてしまったので…
このような思い切ったデザインです。
このような普通のWebサイトのデザインがブログベースでちょっとプラグインを配置しなおしするだけで実現可能でしょうかです。
本来記事が表示される部分が記事タイトル一覧になって、 クリックしてはじめて記事が読めるようにします。
他社のサービスを利用しない。
Wikiで作るのではなくあくまでブログベース。
回答(5)
1.

また、以前の質問にあったサイトのようなデザインのイメージでブログを作ってみました。
そうです、このような感じです。ヘッドラインのようなデザインもあったら面白そうだと思ったのですよ。
2.

ブログという枠で考えるよりサイトデザインからはじめて
blogの仕様に落とし込んでいけば大概はできそうです。
ただniftyのようなFlashを絡めるというのはちょっとわかりませんが。
ニフティのようにしたければ、あのソースをパクってLD blog独自のタグ($~~$)を落とし込んで設置すればそんな感じに見えると思います。
手間をかければ自由にできるんですね。
3.

完全にうまくいくかどうかは確認してないけど・・・
まず、CSSで
日付とタイトルとカテゴリを一列に並べるように配置
下に点線。
トップページとカテゴリのHTMLで記事まわりを外す。
タイトルが画像下のメニューは
HTMLに直接書く方法でも良いんですが
最近、仕様が変わったので
フリーエリアでも比較的簡単に出来ると思います。
4.

本来記事が表示される部分が記事タイトル一覧になって、 クリックしてはじめて記事が読めるようにします。
トップページの記事のループで、
各個別記事へのリンクのあるタイトルだけにします。
5.

>クリックしてはじめて記事が読めるようにします。
こういうことですか?
やり方はデザインのカスタマイズ→トップページで日付・記事タイトル・本文のところを大改造します。
・日付→いらない一番上のdivタグ以外削除
・記事タイトル→一番上のdivタグ以外削って記事一覧と入れる
・本文→一番上のdivタグ以外削ってコメントにあるように、削った日付・記事タイトルから必要なものを配置し直す。
・<IndexArticlesLoop></IndexArticlesLoop>は記事がいくつも並ぶために必要なLDブログタグで位置を変える。具体的には元にある場所から本文を削って配置したものを包むように上下に置く。
・コメント・トラックバックetc→いらない一番上のdivタグ以外削除
PSリンク先のgoogleAdの場所に注目w
そうです、その通りです。掻き回してしまってすみません。
コメント(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> <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> <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
とりあえずトップページとアーカイブページをタイトルだけ表示するテンプレートをみんなのデザインにアップしました。これを参考に改造してみてはどうでしょうか。
http://blog.livedoor.com/shared_design/detail/708
新管理画面になってブログを複数持つのが簡単になったので、デザインテスト用にブログを新たに作り色々と試してみるのも良いと思います。
ああ、なるほど。デザインを作り直してみんなのデザインに公開すればいいのか。
これって、既存のLDデザインを弄くったやつでも大丈夫ということですか?なんなら依頼主のにょさんの今使ってるブログデザインを変えて公開した方が親切かなぁと。



