*Essence

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

Top Page › Template › カスタマイズ › 見栄えにちょっと使えるかな?という小技。
2018-11-25 (Sun)  23:26

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

簡単に、見栄えを良くするタグと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>で挟むだけ。

先ず、管理画面左のメニュー→『プラグインの設定』画面を開き、プラグインカテゴリーの中から『月別アーカイブ(自身で変更している場合有り)』の名前を探して、右から2番目の列の『詳細』をクリックします。

アーカイブのコンパクト化

上記のような画面が出ますので、そこの『HTMLの編集』をクリック

アーカイブのコンパクト化2

表示されたHTMLタグを、赤い文字列部分を追加して挟みます。(画像クリックでちょっと大きく表示)

敢えて class="infobox(任意の名前)"を付けたのは、CSSでスタイルを付けたいと思った時のため。
テンプレートを変更してもそのままボックスを表示するように、タグに直接 属性としてスタイルを指定しています。(その度にcssに追記するの面倒ですし。)

<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>

(画像が荒く見難くなってしまいました。スミマセン。。m(__)m 掲載文面はコピペで利用可。)
青文字の部分は公式プラグインの『月別アーカイブ』のタグです。
これを赤文字部分で挟むだけで↓こんな感じになります。

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

height: 200px; の部分がボックスの高さです。数値をお好みに調整して下さい。
border: black 1px solid; の部分が枠線のスタイルです。
black を他のカラーネームやカラーコードに変更したり、1px を増やして枠線を太くしたり、solid を他の線種に変更できます。
( padding: 5px 10px; の数値は内側の余白で、5pxは上下 10pxは左右の値です。)
長くブログを運営されている管理人様、是非ご利用下さいませ。(^-^)
☆ 同様に、プラグインに有る 縦に長~~くて困るものもスクロールボックス化出来ますのでお試しを。
カラーコード、カラーネームのご参考に。素材サイト web material *Essence より カラーネーム表

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

20181125.jpg

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

Comment




ご質問,不具合は確認用にURLをお願いします。




管理者にだけ表示を許可