記事一覧

レスポンシブWebデザインのライトボックス(lightbox)の組み込みサンプル。PC/スマホ両方で、画面のサイズに画像が拡大されます。画像のグループ化や、インラインフレーム(iframe)からの画像拡大のJavaScriptサンプルコード。

2021年06月28日 すぐ使えるCMS

クリックして画像を拡大表示するために、固定サイズの jQuery lightBox を「すぐ使えるCMS」で使う方法。色を変えるカスタマイズや、インラインフレームから親フレームへの画像拡大の方法を紹介。

2017年09月16日 すぐ使えるCMS

ライトボックス(lightBox、クリックでの画像拡大表示)が設定されているページをインラインフレーム(iframe、アイフレーム)で表示した時に、親ページの中心に拡大画像を表示する方法。

2017年02月13日 すぐ使えるCMS

縦横比(アスペクト比)やサイズの違う画像を、指定サイズに収めて表示する方法。CSS と JavaScript を組み合わせて調整します。jQuery を使います。

2017年06月19日 すぐ使えるCMS

形(縦横比)の違う画像を、幅か高さで揃えてホームページ上に並べる方法。CSSのサンプルと解説。

2017年06月19日 すぐ使えるCMS

HTMLページ上で画像を位置揃え(右寄せ/左寄せ/中央揃え/サムネイル表示)するCSSのサンプル。画像の周りにテキストを回り込ませる方法、画像が無かったらその位置に本文を流し込みする方法の紹介。

2017年06月22日 すぐ使えるCMS

「すぐ使えるCMS」で、イメージギャラリー(フォトギャラリー、画像ギャラリー、画像サムネイルの一覧)を作成する方法。CSSの解説と、サイズなどの表示調整方法。

2017年07月04日 すぐ使えるCMS

ホームページ上に表示したサムネイル(縮小版画像)から、クリックで大きな拡大画像を表示する方法。

2015年01月15日 すぐ使えるCMS

「すぐ使えるCMS」サムネイル(縮小版)画像の扱いの説明。デザインテンプレートにサムネイルの表示が指定されている時、サーバ等の問題でサムネイルが作成できなかったら?

2012年09月19日 すぐ使えるCMS

Facebookに表示されるサムネイル画像をURLごとに指定する方法。フェイスブックで「いいね!」や「シェア」された時に表示される画像を指定できます。複数の画像から選択する方法や、優先順位、Open Graphタグの設定方法の解説...

2017年06月22日 すぐ使えるCMS

「すぐ使えるCMS」で書き出したページにFacebookの「いいね」ボタンを設置する方法。細かい調整のためのメタタグ Open Graph Protocol tag(OGP タグ) の設定方法。

2017年06月22日 すぐ使えるCMS

ホームページにツイッター(Twitter)のツイートボタンやフォローボタンを付ける方法。カウント数数表示は Twitter では公式には停止。フォロー数だけ表示可能。

2017年06月19日 すぐ使えるCMS

ホームページにTwitterカードを設定する方法。Twitterカードとは、ツイッターでホームページが紹介(ツイート、シェア)された時に見栄え良く表示するために、ホームページに含めておくメタタグです。

2017年06月19日 すぐ使えるCMS

「すぐ使えるCMS」ではファイルのアイコン自動判別はPDF、エクセル、ワード、パワーポイント、ZIP、テキスト、画像に対応していますが、さらに自動判別できる種別を増やす方法。

2017年07月02日 すぐ使えるCMS

ファイルがアップロードされなかった時に、<a> タグごと削除されるか、中身の要素が残るのかの基準のご説明。

2021年06月28日 すぐ使えるCMS

RSSやメタタグのdescriptionなどに表示する記事抜粋(サマリー、要約)の長さや、後置の「...」(3点リーダ)表示を変更する方法。

2017年06月23日 すぐ使えるCMS

CMS[すぐ使えるCMS] では、曜日の表示が可能です。日本語、英語の他、好きな言語や形式で曜日を表示する方法をご案内します。

2017年06月16日 すぐ使えるCMS

<ul>と<li>タグを使った一覧(目次、新着情報)にCSS(スタイルシート)で罫線・表組・アイコンの表示をする方法。マウスオーバーでの色変更、行ごとの色変更方法など。

2017年06月17日 すぐ使えるCMS

お知らせ一覧や記事の目次にページネーションを付ける方法。ページネーションは、[1]、[2]、[3]... のページ番号を表示して前後ページへリンクする事です。ページング、ページ分割、ページ移動リンク。

2016年09月01日 すぐ使えるCMS

「すぐ使えるCMS」で更新したお知らせ一覧や記事の目次に、初期設定の「○件中 11-20 を表示」を変更し、ページ番号(「1 ページ目 / 3 ページ」...)を表示する方法。

2016年08月12日 すぐ使えるCMS

JavaScriptで数値の桁数を揃える方法。

2017年06月23日 すぐ使えるCMS

<dl>,<dt>,<dd> (定義リスト)を使ってファイルの一覧を表組で表示する方法の紹介。ページ幅が狭い場合に表が欠たり潰れたりしないよう、レスポンシブWeb対応しています。

2017年06月21日 すぐ使えるCMS

表(テーブル、<table>)の中に値が無い行(空欄)があったら行ごと削除する JavaScript 。<table> タグの場合と、<dl> リストで表組している場合の JavaScript サンプルコード。jQuery を使用。

2017年09月19日 すぐ使えるCMS

「すぐ使えるCMS」の、CSSフレームワーク Pure を使った初期設定のレスポンシブWebデザインのテンプレートを非レスポンシブ(PC専用/スマホ専用)に変更する方法。

2016年07月01日 すぐ使えるCMS

<meta>タグのdescriptionは、要約を示すタグで、検索エンジンでの結果一覧などで表示されます。「すぐ使えるCMS」で更新しているページにこの<meta>タグを書き出す方法の紹介。本文からの自動抜粋と手動編集の両方が可...

2017年06月21日 すぐ使えるCMS

「すぐ使えるCMS」でページ間リンク「次へ」「前へ」のリンクの方向を変更する方法。

2017年06月23日 すぐ使えるCMS

インラインフレーム(iframe、アイフレーム)のあるページにアンカーを付けてリンクし、iframe 内のページをアンカーの位置までスクロールさせる方法。JavaScript を使います。

2017年09月08日 すぐ使えるCMS

CSSインスペクタ(Web開発者ツール、デベロッパーツール、Webインスペクタ)の使い方。見ているホームページのCSS設定を調べることができます。

2017年03月01日 すぐ使えるCMS

「すぐ使えるCMS」と「すぐ使えるメールフォーム」の初期設定のテンプレートで使用されている「sugu-t-*」という名前のクラスとIDについての解説。

2016年04月22日 すぐ使えるCMS