*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

 >  Template >  カスタマイズ >  見栄えにちょっと使えるかな?という小技。

見栄えにちょっと使えるかな?という小技。

簡単に、見栄えを良くするタグとCSSを2つ、載せときます。(^-^)
1) ページを読み込む時にふわっと表示するCSS
2) 高さが有っても小さく表示する、スクロールバー付きのボックス


1) ページを読み込む時にふわっと表示するCSS
ページを読み込んだ時にふわ~っと表示されるのやってみたくて、調べてみたらすごく簡単にできるって♪
CSSだけですぐ出来るので、気になってた方是非やってみて下さいませ。

body {
animation: fadeIn
2s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}


スタイルシート編集枠内、一番下にでも追加記述して下さい。
2s はフェードインする秒数の値なので、短くしたい場合は数値を減らし、長くしたい場合は増やして下さい。(2s は2秒)


2) 高さが有っても小さく表示する、スクロールバー付きのボックス
サイドのカラムに長~く表示された記事のarchive、これだけでかなりスペース取り過ぎな感が有ります。
メインである記事の長さよりまだ長い…スクロールするのも大変だけど、今迄更新してきた年月・記事数、やっぱり表示しておきたい。
…はい。私もそうです。何だかんだと10年超、(記事数少ないけど)続いております このブログ。
こういう類をコンパクトにまとめて表示するのに、スクロールバー付きのボックスの中に入れてしまうのは如何でしょう?
方法は簡単。プラグインの中身を<div></div>で挟むだけ。

<div class="infobox" style="width: 100%; height: 200px; padding: 5px 10px; overflow: auto; border: black 1px solid;">
スクロールバーを出したい
~~~
~~~
ボックスの中身
</div>

敢えて class="infobox(任意の名前)"を付けたのは、CSSでスタイルを付けたいと思った時のため。
この度は取り敢えずテンプレートを変更してもそのままボックスを表示するように、タグに直接 属性としてスタイルを指定しています。(お勧めはしないけど、プラグインだからという事で。^^;)
例えばプラグインの『月別アーカイブ』。
FC2管理画面『プラグインの設定』→『プラグイン管理』→改変したいプラグインの『詳細』をクリック↓
HTMLの編集をクリックしてタグを表示。そのタグを下記のように挟みます。

<div class="infobox" style="width: 100%; height: 200px; padding: 5px 10px; overflow: auto; border: black 1px solid;">
<ul>
<!--archive-->
<li &align>
<a href="<%archive_link>" title="<%archive_year>年<%archive_month>月"><%archive_year>年<%archive_month>月 (<%archive_count>)</a>
</li>
<!--/archive-->
</ul>

</div>

青文字の部分は公式プラグインの『月別アーカイブ』のタグです。
これを赤文字部分で挟むだけで↓こんな感じになります。

divボックスのサンプル1divボックスのサンプル2

height: 200px; の部分がボックスの高さです。数値をお好みに調整して下さい。
border: black 1px solid; の部分が枠線のスタイルです。
black を他のカラーネームやカラーコードに変更したり、1px を増やして枠線を太くしたり、solid を他の線種に変更できます。
( padding: 5px 10px; の数値は内側の余白で、5pxは上下 10pxは左右の値です。)
長くブログを運営されている管理人様、是非ご利用下さいませ。(^-^)

はてさて、今日も良い天気だったので、ゆる~いJoggingに行って参りました。
先週土曜日(17日)に写真を撮って1週間、こんなに駆け足で季節が進んでます。
(クリックで大きく表示)

20181125.jpg

来週にはカレンダーも最後の一枚になるんだなぁ~。一年って早いな。

コメント







管理者にだけ表示を許可する