ブログ:ミニカスタマイズ
ミニカスタマイズ 27「twitterでつぶやくに対応する」Tweet
久々のライブドアブログのカスタマイズネタです。
「twitterでつぶやく」を追加します。
方法は、簡単。
次のタグを追加だけ。
場所は、いろいろありますが、hatenaなどの流れにのって、タイトルの横に表示したいと思います。
こんな感じでしょうか?
<$ArticleTitle ESCAPE$>の後ろで、</a>の直後というところでしょうか。
展開されると、こんな感じになります。
もし、アイコンを変更したりブログのタイトルを表示させるようにするには、<$PostToTwitter$>ではなく、上記のような内容を出力できるように調整してみればいかがでしょう?
サンプル
動作確認してない…
ぎり、2月に…
「twitterでつぶやく」を追加します。
方法は、簡単。
次のタグを追加だけ。
<$PostToTwitter$>
場所は、いろいろありますが、hatenaなどの流れにのって、タイトルの横に表示したいと思います。
<h2 class="title">
<a href="<$ArticlePermalink$>">
<$ArticleTitle ESCAPE$>
</a>
<$PostToTwitter$>
</h2>
こんな感じでしょうか?
<$ArticleTitle ESCAPE$>の後ろで、</a>の直後というところでしょうか。
展開されると、こんな感じになります。
<a href="http://twitter.com/home/?status=(つぶやく内容 タイトル+URL)" title="twitterでつぶやく" target="_blank" class="postTwitter"><img src="http://parts.blog.livedoor.jp/img/cmn/twitter02.gif" width="20" height="20" alt="twitterでつぶやく" /></a>
もし、アイコンを変更したりブログのタイトルを表示させるようにするには、<$PostToTwitter$>ではなく、上記のような内容を出力できるように調整してみればいかがでしょう?
サンプル
<a href="http://twitter.com/home/?status=<$ArticleTitle ESCAPE$> - <$BlogTitle ESCAPE$><$ArticlePermalink$>" title="twitterでつぶやく" target="_blank" class="postTwitter"><img src="http://parts.blog.livedoor.jp/img/cmn/twitter02.gif" width="20" height="20" alt="twitterでつぶやく" /></a>
動作確認してない…
ぎり、2月に…
参考になりました?応援だと思って
お願いします。
iPhone向けにデザインしてみるTweet
iPhoneユーザとしては、自分のブログぐらいiPhoneにカスタマイズしてきれいに見たい。
というわけで、iPhone用にカスタマイズしてみたいと思います。
・iPhone用CSS [iPhone生活]
・PCサイトをCSSだけでiPhone (iPod touch)に対応させる方法 Kawa.netブログ(川崎有亮)/ウェブリブログ
・css for iPhone
・Travellers Tales : iPhone 用 Web ページおよびアプリケーションの作り方 - iPhone Development Guidelines を読む
・[HTML/CSS]iphone対応サイトの製作 : ma-creators
このあたりの情報からまずは、実験してみる。
・viewportを設定する
デフォルトでは980pxになっているようだ。
一番ベストは、480pxにして、横方向でもっともベストな状態。
縦方向で縮小して表示するような感じにするのがよさそう。
・スタイルシートで切り替える
only screen and (max-device-width: 480px)と指定することで、iPhone向けにスタイルシートを設定する
・スタイルを設定する
最低限がまんできる範囲でデザインする
・テンプレート調整
ブログのデザインをカスタマイズする
しかし、ここで問題。
<$HeadSectionCommon$>
でヘッダーが提供されている。
これを分解するのはいいのだが、分解できない項目がありそう。
このへん…
基本的なコードはできたけど、LivedoorBlogでどのように対応するのがベストかわからず。
だれかカスタマイズしてそうだから、それを参考にする旅に出よう。
それは、また明日の話。
iPhone用テストサイト
#iPhone以外ではなにも違わない。
というわけで、iPhone用にカスタマイズしてみたいと思います。
・iPhone用CSS [iPhone生活]
・PCサイトをCSSだけでiPhone (iPod touch)に対応させる方法 Kawa.netブログ(川崎有亮)/ウェブリブログ
・css for iPhone
・Travellers Tales : iPhone 用 Web ページおよびアプリケーションの作り方 - iPhone Development Guidelines を読む
・[HTML/CSS]iphone対応サイトの製作 : ma-creators
このあたりの情報からまずは、実験してみる。
・viewportを設定する
デフォルトでは980pxになっているようだ。
一番ベストは、480pxにして、横方向でもっともベストな状態。
縦方向で縮小して表示するような感じにするのがよさそう。
・スタイルシートで切り替える
only screen and (max-device-width: 480px)と指定することで、iPhone向けにスタイルシートを設定する
・スタイルを設定する
最低限がまんできる範囲でデザインする
・テンプレート調整
ブログのデザインをカスタマイズする
しかし、ここで問題。
<$HeadSectionCommon$>
でヘッダーが提供されている。
これを分解するのはいいのだが、分解できない項目がありそう。
このへん…
基本的なコードはできたけど、LivedoorBlogでどのように対応するのがベストかわからず。
だれかカスタマイズしてそうだから、それを参考にする旅に出よう。
それは、また明日の話。
iPhone用テストサイト
#iPhone以外ではなにも違わない。
参考になりました?応援だと思って
お願いします。
ミニカスタマイズ 25 簡易版「とりあえずなにも考えずにプラグイン(コメント/トラックバック/カテゴリ)をツリー化」Tweet
[課題]
プラグイン(コメント/トラックバック/カテゴリ)をとりあえずなにも考えずにツリー化表示してみたい!
[はじめに]
この内容は、「ミニカスタマイズ 25:プラグイン(コメント/トラックバック/カテゴリ)をツリー化表示する」がわからないという人のための簡単対応版です。詳細はあっちでお願いします。
それでは、はじめます。
続きを読む
プラグイン(コメント/トラックバック/カテゴリ)をとりあえずなにも考えずにツリー化表示してみたい!
[はじめに]
この内容は、「ミニカスタマイズ 25:プラグイン(コメント/トラックバック/カテゴリ)をツリー化表示する」がわからないという人のための簡単対応版です。詳細はあっちでお願いします。
それでは、はじめます。
続きを読む
参考になりました?応援だと思って
お願いします。
iframeでframeborderはstyle指定できないのはなぜ?Tweet
iframeタグのはなしです。
以前から、トップページの上部にDrecomRSSのクリップを表示させています。
これまでは、JavaScriptでトップページに表示させていました。
しかし、Drecomのサービスは遅くなったりとまったりちょくちょくあります。それでトップページの表示が遅くなることがあります。
それを避けるために改修しました。
iframeを利用して表示させるんです。そうすればDrecomに接続がうまくいかなかった場合にそこだけ表示されなくなります。トップページの表示スピードに影響されません。
方法
・別ページにJavaScriptの記述を記入したページを用意します
・トップページにifarmeで用意したページを指定します
・終わり(それだけ)
と、1週間ほど前に修正しました。
iframeで枠を表示させてくなかったのでframeborderを0にしてスタイルを指定しました。
しかしです。枠が消えないんです。
続きを読む
以前から、トップページの上部にDrecomRSSのクリップを表示させています。
これまでは、JavaScriptでトップページに表示させていました。
しかし、Drecomのサービスは遅くなったりとまったりちょくちょくあります。それでトップページの表示が遅くなることがあります。
それを避けるために改修しました。
iframeを利用して表示させるんです。そうすればDrecomに接続がうまくいかなかった場合にそこだけ表示されなくなります。トップページの表示スピードに影響されません。
方法
・別ページにJavaScriptの記述を記入したページを用意します
・トップページにifarmeで用意したページを指定します
・終わり(それだけ)
と、1週間ほど前に修正しました。
iframeで枠を表示させてくなかったのでframeborderを0にしてスタイルを指定しました。
しかしです。枠が消えないんです。
続きを読む
参考になりました?応援だと思って
お願いします。
ミニカスタマイズ26「表示件数変更に対応」Tweet
ライブドアブログの仕様変更に対応編。
カテゴリアーカイブ、月別アーカイブの仕様が変わっていました。
そのことは結構前から知っていたが、変更しなくても問題なかったので放置プレイをしていた。
ブログの表示形式・表示件数の設定が変更になりました(追記 9/28)
しかし、ついに対応をしなければならなくなりました。
皆さんは対応しなくてもいいように気をつけましょう。
対応しなければならない理由
「ブログの設定」で「ブログの説明」を変更してしまい「設定の保存」を行うとすると、「アーカイブの表示件数」が「0」件ではダメだと言われました。
そこで、20件と指定したら、アーカイブが20件しか表示されなくなりました。
20件以上存在しているアーカイブもいっぱいあるので対応することになりました。
そこで、対応方法です。
とりあえず、カテゴリアーカイブ・月別アーカイブ・トップページ の下のほうに次のコードを書き込んでください。
で、下のほうとはどのあたりにしましょうか・・・。
そうですね。
このあたりはどうでしょう?
この閉じるdivタグの前あたりでしょうね。
サイドバーの前ってことです。
あとは適当に調整の連続ですよ。
試すときは、トップページで何度も試しましょう。
アーカイブでテストをすると再構築の時間がかかるし、回数が増えてサーバが重くなると困るしトップページで試しましょう。
アーカイブのページとそんなに構成は変わらないはずなんで。
1時間もかかってしまいました。
今日はここまで。(柴田風)
カテゴリアーカイブ、月別アーカイブの仕様が変わっていました。
そのことは結構前から知っていたが、変更しなくても問題なかったので放置プレイをしていた。
ブログの表示形式・表示件数の設定が変更になりました(追記 9/28)
しかし、ついに対応をしなければならなくなりました。
皆さんは対応しなくてもいいように気をつけましょう。
対応しなければならない理由
「ブログの設定」で「ブログの説明」を変更してしまい「設定の保存」を行うとすると、「アーカイブの表示件数」が「0」件ではダメだと言われました。
そこで、20件と指定したら、アーカイブが20件しか表示されなくなりました。
20件以上存在しているアーカイブもいっぱいあるので対応することになりました。
そこで、対応方法です。
とりあえず、カテゴリアーカイブ・月別アーカイブ・トップページ の下のほうに次のコードを書き込んでください。
<IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">前のページへ</a></IfPrevPage>
<IfNextPage><a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ</a></IfNextPage>
で、下のほうとはどのあたりにしましょうか・・・。
そうですね。
このあたりはどうでしょう?
</div>
<div id="links">
この閉じるdivタグの前あたりでしょうね。
サイドバーの前ってことです。
あとは適当に調整の連続ですよ。
試すときは、トップページで何度も試しましょう。
アーカイブでテストをすると再構築の時間がかかるし、回数が増えてサーバが重くなると困るしトップページで試しましょう。
アーカイブのページとそんなに構成は変わらないはずなんで。
1時間もかかってしまいました。
今日はここまで。(柴田風)
参考になりました?応援だと思って
お願いします。