BTemplates.com

2013年3月29日金曜日

bloggerモバイル(スマホ)カスタマイズ:下にラベルを表示する方法

スポンサーリンク










HTMLの下の方にサイドバーの名前が書いてあるとこあるので、▼おして開いて





mobile='yes'って入れるだけです!


<b:widget id='Label1' locked='false' title='テーマ別' type='PoularPosts' mobile='yes'>にして保存したも



<b:widget id='Label1' locked='false' mobile='yes' title='テーマ別' type='PopularPosts'>と、順番が入れ替わるからokです♪


簡単でしょ!









以下、この方法がわからなくて苦しんでいた時にあみだした自己流の方法(頑張った記念に残していますが、読む必要はありません)


モバイル版にラベル表示する方法が調べても調べても出てこなくて迷いましがた、なんとかできたのでメモです…。

が、絶対これより楽な方法があると思います…。でもわかんないぽよ…。


しかし2時間くらい悩んだ結果なので記念に…書いておこうかと…私…頑張ったよね??


chromaでの方法です。

まず 表示されたラベルを全て選択します。右クリック→要素を検証(N)

そしたら同ページの下半分にHTML(左側)とCCS(右側)が出てきます。




▼<div class="widget-content list-label-widget-content">

というのがHTML(左側)にあるのでそれを右クリック→Copy as HTML



そして、bloggerのHTMLから<!-- content -->を検索して<!-- content -->のすぐ下にペーストします。


追記:<!-- content -->の下だとちょっとおかしくなったので、訂正します!
一番最後に追記しました。読んでください!


(検索は右上のみたいな形のとこをクリックして検索ってとこ押すと出てきますよ。)



私の場合はこんな感じで出てきました。


<div class="widget-content list-label-widget-content">
<ul>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/youtuber">youtuber</a>
<span dir="ltr">(15)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/%E3%82%B4%E3%83%BC%E3%83%AB%E3%83%87%E3%83%B3%E3%83%9C%E3%83%B3%E3%83%90%E3%83%BC">ゴールデンボンバー</a>
<span dir="ltr">(13)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/%E7%8C%AB%E3%81%AE%E3%81%8A%E8%85%B9%E3%81%AE%E3%81%97%E3%81%93%E3%82%8A%E8%A8%98%E9%8C%B2">猫のお腹のしこり記録</a>
<span dir="ltr">(10)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/blogger">blogger</a>
<span dir="ltr">(8)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/%E5%95%86%E5%93%81%E7%B4%B9%E4%BB%8B">商品紹介</a>
<span dir="ltr">(8)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/%E7%94%BB%E5%83%8F">画像</a>
<span dir="ltr">(8)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/%E6%80%9D%E3%81%A3%E3%81%9F%E4%BA%8B">思った事</a>
<span dir="ltr">(7)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/%E5%8B%95%E7%89%A9">動物</a>
<span dir="ltr">(6)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/%E9%A3%9F%E3%81%B9%E7%89%A9">食べ物</a>
<span dir="ltr">(6)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/google">google</a>
<span dir="ltr">(5)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/%E5%81%A5%E5%BA%B7">健康</a>
<span dir="ltr">(5)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/Mac%E9%96%A2%E4%BF%82">Mac関係</a>
<span dir="ltr">(3)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/%E3%82%86%E3%81%BF%E3%83%BC%E3%82%8B">ゆみーる</a>
<span dir="ltr">(3)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/%E3%83%96%E3%83%AD%E3%82%AC%E3%83%BC">ブロガー</a>
<span dir="ltr">(3)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/%E3%81%8A%E3%82%82%E3%81%97%E3%82%8D%E3%81%84">おもしろい</a>
<span dir="ltr">(1)</span>
</li>
<li>
<a dir="ltr" href="http://minsyojo.blogspot.jp/search/label/%E3%82%AF%E3%83%A9%E3%83%95%E3%83%88">クラフト</a>
<span dir="ltr">(1)</span>
</li>
</ul>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=1390516297273003283&amp;widgetType=Label&amp;widgetId=Label1&amp;action=editWidget&amp;sectionId=sidebar-right-1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;Label1&quot;));" target="configLabel1" title="編集">
<img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18">
</a>
</span>
</span>
<div class="clear"></div>
</div>




青文字の部分は編集ボタンです。これを消さないとエラー出るので消します。(編集ボタン表示していない人はこのHTMLは出ないのかな?)


タイトルつけたい人は上に<h2>好きなタイトル</h2>ってつけると良いと思います。



そんでですねぇ…このまま貼りつけしたら数字が…固定されたままで投稿しても数字が変化しないんですよね><


よくわかんなかったので(9)とか(13)などのHTML内の数字消しました!いちいち消しました!笑

ラベルのリンク自体はクリックしたら、ちゃんと飛びますし、更新されたら反映されてました☆


背景が透明だと変な感じなので(可愛いんだけど、繰り返しているから割れ目に字が入っておかしいことになる。)

<div style='padding:10px 10px;border-color:#ffffff;border-width:1px;border-style:solid;background:#ffffe0;'>この間にラベルのHTML</div>

白枠に薄い黄色を背景にしてみたけど、これじゃない感があります…。


●改善したいとこ

数字(ラベル投稿数)を反映させたいです。
モバイル版の背景画像が繰り返していて変なので消すか無地にしたいです。



以上です!不満はあるけどまぁいまのとこOKです。










追記:数日たって気付いたんですが、PCにもこれが反映されていました。これは困るので<!-- content -->の下じゃなくて




        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
      </div>
    </div>
  </div>

ここにペースト

</b:includable>
<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>



しました。これならPCには反映されませんでした。<b:includable id='postQuickEdit' var='post'>で検索したらすぐ出てきますよ。


↓実際スマホで見てみると、ここの上に反映されてます。

< ホーム >
ウェブバージョンを表示






スポンサーリンク

SHARE 

0 件のコメント:

コメントを投稿