category WebDegign 
WebDegign 2024/12/01
文字の行数制限をするCSSです。
FrontPageなどに文字行数を決めて表示したい場合が、多々あります。
そんな時に使っています。
.post_content
display: -webkit-box; /* 行数制限 必須 */
-webkit-box-orient: vertical; /* 必須 */
-webkit-line-clamp: 2; /* 任意の行数を指定 */
overflow: hidden; /* はみ出た部分を非表示 */
.post_title {
white-space: nowrap; /* 折り返し無しにする */
overflow: hidden; /* はみ出た部分を非表示 */
text-overflow: ellipsis; /* 語尾を3点リーダーに */
}
WebDegign 2024/11/15
テーマ作成に悩む毎日です。
もっとシンプルに...
もっと綺麗に...
表現豊かに...
・・・
試行錯誤の毎日です。
テーマやPHP、HTMLなどのプログラミングをしている時間が、私にとってとても楽しい時間です。
集中してしまいます。
テーマを作り込むのに、多くの時間を費やしています。
もっと簡単に、そこで、基準値を明確にしようと、取り組み、ベースになるテーマを作成しました。
PC幅 1,280px 以上
TB幅 768px
SP幅 480px 以下
画像サイズ 1,280px x 960px
画像サイズは、これもいつも悩む所
最近のデジカメやスマホは解像度が大きくなる一方ですね。
私のスマホも幅も、4,000px以上もあり画像ソフトでいちいち修正して使っていました。
bludit v4 には、二種類の縮小モードがあったと思いますが、v3には一つしかありません。
使い方を工夫してみます。
ネット環境が高速になり、サムネイル画像が必要でしょうか？
確かに4000px以上もある画像は、表示速度も遅いですね。
なるべく画像を小さくアップロードし、サムネイルは使用せず縮小して表示しようと思います。
サムネイル画像サイズ幅を、1,280pxに設定し、サムネイルは縮小表示させてみます。
本当は、画像をアップロードする時に元画像を2000px程に縮小してほしいのですが、私にはCMSをカスタマイズする知識もありません。
当分の間は、この方法で使ってみようと思います。
WebDegign 2024/11/03
トップぺーにスライダー（フェードイン・アウト）を付けたいと思い試行錯誤。
CSSのみと画像の指定はHTMLに配置するようにしたいと思う。
そして、HTMLとCSSをパーツ化して実装することにしました。
参考HP https://pa-tu.work/t/7503
HTML
<div class="slider">
<div class="slider-wrap">
<div class="slider-item"><img src="<?php echo DOMAIN_THEME_IMG.'1.jpg'; ?>"></div>
<div class="slider-item"><img src="<?php echo DOMAIN_THEME_IMG.'2.jpg'; ?>"></div>
<div class="slider-item"><img src="<?php echo DOMAIN_THEME_IMG.'3.jpg'; ?>"></div>
</div>
</div>
CSS
.slider {
width: 100%;
height: 60vh;
}
.slider-wrap {
position: relative;
width: 100%;
height: 60vh;
overflow: hidden;
background-color: #fff;
}
.slider-item {
position: absolute;
inset: 0;
opacity: 0;
z-index: 0;
animation: sliderAnime 30s linear infinite 0s;
}
.slider-item:nth-child(2) {
animation-delay: 10s;
}
.slider-item:nth-child(3) {
animation-delay: 20s;
}
.slider-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes sliderAnime {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
20% {
opacity: 1;
transform: scale(1.1);
}
40%,
100% {
opacity: 0;
transform: scale(1.2);
}
}
@media screen and (max-width:800px) {
.slider {
height: 40vh;
}
.slider-wrap {
height: 40vh;
}
}