スマホ閲覧時のテーブル横スクロール滋賀県守山市のホームページ制作

スマホ閲覧時など横長の表テーブルを見やすくするために、その箇所だけ横スクロールを表示させる。

<div class="scroll_table">
   <div class="scroll_inner">
      ここにテーブル
   </div>
</div>

★CSS

.table_scrollbar,
.scroll_table {
	overflow-x: scroll;
	overflow-y: hidden;
	width: 100%;
}

.table_scrollbar {
	height: 20px;
}
.table_scrollbar_inner {
	width: 800px;
	overflow-x: scroll;
	overflow-y: hidden;
	height:20px;
}
.scroll_inner {
	width: 800px;
}

★JS

$(function(){
	$('<div class="table_scrollbar"><div class="table_scrollbar_inner"></div></div>').insertBefore('.scroll_table');
	$('.table_scrollbar').on('scroll', function(){
		$(this).next($('.scroll_table')).scrollLeft($(this).scrollLeft());
	});
	$('.scroll_table').on('scroll', function(){
		$(this).prev($('.table_scrollbar')).scrollLeft($(this).scrollLeft());
	});
});

完全オリジナルデザインでのホームページ制作に関しましては、2024年8月末まですでに予約分で作業予定が埋まっております。2024年8月～12月の作業で残り1サイトのみ承ります。

AI＆ノーコードのホームページサービスを2024年夏頃にリリース予定

以前から何度も計画しては頓挫しているサブスクホームページの提供を今年の8月を目途にリリース予定です！

写真撮影案件は随時承ります！

単発の写真撮影案件は随時承っております。お気軽にお問い合わせください！

年始のご挨拶でも説明しましたが、2023年は一般の方向けのホームページ制作は2ヵ月に1本のペースでの受注体制となっておりました。受注が6本となりましたので、大変申し訳ありませんが一般の方からの受付は本日で終了となります。下請け業務と並行しての制作で、私ひとりでの作業となりますのでリソースにどうしても限界があります。何卒ご容赦願えますでしょうか。

今度こそ本当にテンプレート型のホームページを提供予定

以前から何度も計画しては頓挫しているテンプレート型のホームページの提供。作業の隙間隙間で今度こそ取り組みます！

html {
	scroll-behavior: smooth;
}

bodyでは動かなかった。

翻訳したくない箇所にCSS追加
リンクなどは不可。

でも不可
class="notranslate"

※カラーミーショップなどECサイトでは、JSで戻すしかない。
function changeLocation() {
  window.location.href = "URL"
}

<button onClick="changeLocation()">JP</button>

★パーマリンク設定によっては404エラー

→　FV Top Level Categories　追加
<?php
	$paged = get_query_var('paged') ? get_query_var('paged') : 1;
	$args = array(
		'post_type' => 'post',
		'posts_per_page' => 12,
		'category_name' => "tokyo,tokyo23,kyushu,kanto,kansai,hokkaido",
		'orderby' => 'modified',
		'paged' => $paged,
	);
	$the_query = new WP_Query($args);
	if ($the_query->have_posts()) :
?>

<ul class="clearfix hM01">
<?php while ($the_query->have_posts()) : $the_query->the_post();?>    
<?php
    $category = get_the_category();
    $cat_name = $category[0]->cat_name;
	 $cat_slug = $category[0]->category_nicename;
	 $field = get_field_object('pref-name');
	 $value = get_field('pref-name');
	 $label = $field['choices'][ $value ];
?>
      <li>
         <a href="<?php echo esc_url( home_url( '/' ) ); ?><?php echo $cat_slug; ?>#<?php the_ID(); ?>"><time><?php the_modified_date('Y年m月d日'); ?></time>
            <?php if(get_field('pref-name')): ?>
               <?php echo $label; ?>
            <?php else: ?>
               <?php echo $cat_name; ?>
            <?php endif; ?>
            <?php the_title(); ?>
         </a>
      </li>
<?php endwhile; ?>
</ul>

            <div class="detailLink"><a href="<?php echo esc_url( home_url( '/' ) ); ?>result">一覧</a></div>
<?php else : ?>
<div id="worksNon">
現在、発行実績は御座いません。
</div>
<?php endif; wp_reset_query(); ?>

function my_sort_order_by_modifired ( $query ) {
	if ( $query->is_main_query() ) {
		$query->set( 'orderby', 'modified' );
	}
}
add_action( 'pre_get_posts', 'my_sort_order_by_modifired' );

条件分岐
// ホームだけの場合
if ( $query->is_home() ) 
 
// ホームまたはカテゴリーページの場合
if ( $query->is_home() || $query->is_category() ) 

if ( $query->is_front_page() && $query->is_category() )