Geeklog DEBUG究極の方法
- 土曜日, 11月 29 2025 @ 09:46 am JST
- 投稿者: Admin
- 表示回数 8
ようこそ! IVY SOHO, Anonymous 日曜日, 11月 30 2025 @ 07:50 am JST
たとえば移行時、SSLがあたるまではnon-SSLとなりますが、non-SSLでもサイトが表示エラーを起こさないようにするためにはsiteconfig.phpに以下を追加します。
// SSL判定
function is_ssl() {
// Xserver は SSL 時に $_SERVER['HTTPS'] = 'on' が入る
if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') {
return true;
}
// 念のため 443 ポートもチェック
if (isset($_SERVER['SERVER_PORT']) && $_SERVER['SERVER_PORT'] == 443) {
return true;
}
return false;
}
// 今のアクセスが SSL かどうか
$scheme = is_ssl() ? 'https://' : 'http://';
// 先頭の http:// or https:// を削って、現スキームを付け直す
$_CONF_FCK['site_url'] = $scheme . preg_replace('#^https?://#', '', $_CONF_FCK['site_url']);
$_CONF_FCK['site_admin_url'] = $scheme . preg_replace('#^https?://#', '', $_CONF_FCK['site_admin_url']);
【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方
参考サイト:
https://yuyauver98.me/scroll-visible-range-underline-animation/
Geeklogで活用するには以下のように自動タグで利用します。
html
<p>[text-scroll-underline:pink ピンクの事例]</p>
<p>[text-scroll-underline:yellow 黄色の事例]</p>
<p>[text-scroll-underline: ブルーの事例]</p>
css
.Text-Span {
position: relative;
z-index: 1;
}
.Text-Span:after {
content: '';
position: absolute;
left: 0;
bottom: 4px;
width: 0%;
height: 8px;
background: #dfdfff;
z-index: -1;
transition: all 0.8s;
}
.Text-Span.isActive:after {
width: 100%;
}
.Text-Span-pink:after {
background: #FFDFEF;
}
.Text-Span-yellow:after {
background: #ffffbc;
}
Javascript追加
$(window).on('scroll',function(){
$(".JS_ScrollAnimationItem").each(function(){
var position = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > position - windowHeight + 100 ){
$(this).addClass('isActive');
}
});
});
自動タグ:
text-scroll-underline
<span class="Text-Span Text-Span-#1 JS_ScrollAnimationItem">#2</span></p>
自動タグ:[ a-blue:/ pink pink pink ]:
[a-blue:https://www.papalagi.co.jp/ blue blue blue]
自動タグ:[ a-pink:/ pink pink pink ]:
[a-pink:/ pink pink pink]
自動タグ:[ a-yellow:https://www.papalagi.co.jp/ yellow yellow yellow ]:
[a-yellow:https://www.papalagi.co.jp/ yellow yellow yellow]
自動タグ
a-blue:
<a href="#1" class="underline-leftinright underline-height-3px">#2</a>
a-pink:
<a href="#1" class="underline-leftinright underline-color-pink underline-height-3px">#2</a>
a-yellow:
<a href="#1" class="underline-leftinright underline-color-yellow underline-height-3px">#2</a>
cssの例: https://www.ivysoho.net/layout/modern_geek/css/underline.css
参考サイト: https://www.nxworld.net/tips/css-hover-underline-animation-examples-and-sass-mixin.html
EPUBをWEBで表示するオープンソース Bibiがあります。
Windowsから MACにとうとう乗り換えました。
Google Maps表示は、緯度経度がわかっている場合は以下のソースをテンプレートに埋め込みます。
<style>
#map{code} {
border:solid 1px #666;
height: 350px;
width: 100%;
background-color: grey;
}
</style>
<div id="map{code}"></div>
<script>
// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
var map = new google.maps.Map(document.getElementById('map{code}'), {
zoom: 15,
center: {lat: {lat}, lng: {lng}}
});
var image = '{site_url}/images/maps/icons/icon_{data_type_mst_disp}.png';
var beachMarker = new google.maps.Marker({
position: {lat: {lat}, lng: {lng}},
map: map,
icon: image
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=キー&callback=initMap">
</script>
過去 7 内に最も多くの人の興味を引いたアイテム: 日