投稿下に表示されるラベルの位置を、左から右に変更する。

　ブラウザの機能を使って、
自分のサイトの要素を確認すると、
ラベルは　post-labels　と指定されています。

ラベルは通常左側（左下）に表示されています。
テンプレートによりますが。

これを、右側に表示するようにします。

ラベル名の表示位置を左右変更

　別に左側でいいよという方が多いと思います。
単に私は、右側に移動させたかっただけです。

こういう事も出来るのだと、
適当に読んでみてくださいね。

　まず、テンプレートで

<span class='post-labels'>を検索しましょう。

　2つあると思います。
ひとつは、モバイル表示用です。

　前後に　mobileの文字があると思います。

Bloggerのテンプレートは、
PC用もモバイル用も1つのページで編集するので
ややこしいですが、
間違いないかよく確認して下さいね。

バックアップをとって、何度か試してみると確実です。

　今回はモバイルではなく、
PC表示の時にラベルリンクの位置を変えます。

もちろん、モバイル表示の場合でも応用できますので、
どうぞ最後までご覧ください。

　私が今回変更したのはPC表示の方です。
前後のタグで、PCであることを確認してください。

このようになっています。

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
</b:loop>
</b:if>
</span> </div>

投稿内容の下にある、

post-footer-line-2　と指定している中に、

post-labels　があります。

という意味です。

コードを入力するだけで右寄せできる

　今からここに、右側へ表示させるコードを追加します。

右側にするコードは、

<div align='right'>ここにコンテンツ</div>

ですね。

画像等を右側に表示させる時に使うコードです。

これを応用します。

　ということで、

このように変えました。

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

</b:loop>

</b:if>

</span></div> </div>

　これでOKです。
ちゃんと右側にするコードを追加しています。

　実際にスマホから、自分のサイトを見て
ちゃんと指定通りに右側に表示されているかチェックしてみてくださいね。

スマホはテンプレートによっては、
もともと右側にラベルが表示されているかもしれません。

お疲れ様でした。

　当ブログ内の情報は、
全ての方に応用できるとは限りません。

必ずテンプレートはバックアップを取っておいて下さいね。

また、ご利用は自己責任でお願い致します。

ラビットしま子は美容ライターであり、
サイト制作のプロではありません。

個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）

スポンサードリンク

ページ

2015年4月11日