サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
10prs.com
ウェブサイト制作、HTML5・CSS3、CMS「freo」についての備忘録 MENU MENU ホーム ブログ freo Tips freo(PHP)に「てがろぐ」の投稿を埋め込む 2022/12/06 スキンの書き方や別の方法について追記しました。 一応当サイトのコンテンツの一つとして設置してみたてがろぐですが、スマホ等で見たときに本サイトからアクセスしづらかった(PCなど画面サイズが大きい環境では上部メニューリンクの「コンテンツ」にホバーしたときに展開される項目最下部からアクセスできるんですけどスマホのハンバーガーメニューだと表示されない)のでサイトトップページに最新一件を表示できるようにしてみたメモです。 てがろぐの投稿をHTMLファイルに埋め込むには てがろぐCGIが出力した最新の1件を任意の場所にSSIで埋め込む方法 - Sakura scopeで解説されている通りに埋め込み用の
ウェブサイト制作、HTML5・CSS3、CMS「freo」についての備忘録 MENU MENU ホーム ブログ てがろぐ Tips 「てがろぐ」記事単体表示の時のtitle要素 2022/12/06 てがろぐ作者のにししさんからのご指摘をもとに修正追記を行っています 自分のてがろぐでも書いていましたが、てがろぐの記事単体表示の時のtitleの中身は「記事No. - 主タイトル 副タイトル」になっていて、スキンの記述で「投稿本文一行目を記事タイトルとして表示」するようにしていてもここの表示を変えることができません。そこでtitleの中身を「記事No. 投稿本文一行目 - 主タイトル」にするカスタマイズの覚書です。 使用するのは jQuery 考え方はfreoの管理画面のタイトルをわかりやすくすると同じです。動的にtitle要素の中身を書き換えています。 skin-onelog.html 以下
ウェブサイト制作、HTML5・CSS3、CMS「freo」についての備忘録 MENU MENU ホーム ブログ てがろぐ Tips てがろぐで名前変換小説 2022/12/06 他スクリプト使用についての追記を最下部にしております。 てがろぐで名前変換小説が書けるスキンを公開したのですが配布を待つより解説が欲しい気配を感じたのでとりいそぎY'z Atelier 夢書きさんのアトリエのalice.jsを導入し投稿本文で名前変換をできるようにするカスタマイズの紹介です。 Y'z Atelier 夢書きさんのアトリエさんのスクリプトは改変・再配布が可とのことなのでこの記事の最後にてがろぐ用に調整したもの(変換2箇所バージョン)+名前変換用記述を追加した標準スキンのskin-cover.htmlを置いておきますのでご利用ください。以下自力でカスタマイズする方用の解説です(自分でスキンに追加する場合
ウェブサイト制作、HTML5・CSS3、CMS「freo」についての備忘録 MENU MENU ホーム ブログ てがろぐ Tips てがろぐ「ギャラリーモード」のカスタマイズ ローカルでいじっていた「てがろぐ」の体裁がなんとなく整ってきたのでウェブにも上げてみました。 で、スマホでもできる!「てがろぐ」簡単設置・始め方の次は粗忽者の私が躓いたことを踏まえて最低限の初期設定の話をメモしておこうと思ったのですけど(配布元さんの説明をきちんと読めばすべて解決するんですけどあの圧巻の量に怯んでしまったので)、なんとなく周りを見てると設置の後の初期設定に困ってる方ってそんないない感じなので先にギャラリーモードカスタマイズの話をメモしておこうと思います。 てがろぐのギャラリーモードというか画像関係の機能としてはつい昨日、 サムネイル画像が存在する場合には『ページ上の表示にはサムネイル画像を使い、Lig
ウェブサイト制作、HTML5・CSS3、CMS「freo」についての備忘録 MENU MENU ホーム ブログ サイト制作 xamppでてがろぐ(CGI)を動かす 以前から気になっていたフリーCGI「てがろぐ」をウェブアプリケーションの開発環境をローカルで簡単に構築できるソフト「XAMPP」で動かすためのメモです。 xamppを使わない場合はてがろぐをローカルで動かそう | チラ裏ソリロキーが参考になるかと思います。 Windows10 Home 64bit 21H2 xampp(portable) Control Panel v3.3.0 / PHP Version 8.1.6 そのほか細かい設定は「xampp」タグ参照。 ググると「xampp同梱perlは古い・簡易版でフルバージョンではない」等の情報が見られましたが、最新のxamppではそのようなこともないようです。ただ、ダウンロード
EOT( Embedded Open Type )形式 TTF(True Type Font)形式、OTF(Open Type Font)形式 SVG(Scalable Vector Graphics)形式 WOFF(Web Open Font Format)形式 EOT 形式は IE 向けウェブフォントの独自形式です。以下のソフト・サービスで TTF 形式から EOT 形式のフォントへ変換ができます。 Microsoft Typography - WEFT 3 Download ttf2eot WOFF 形式はMozilla Corporationと、Type SupplyやLettError、多くのフォントファンダリが共同で提案したウェブ専用の新しいフォントフォーマットです。以下のサービスで TTF 形式から WOFF 形式のフォントへ変換ができます。 @FONT-FACE GENER
10press webで、暮らしに広がりを。HTML / CSS解説・webテンプレート・web素材。 Lecture HTML/CSS Download Documents Blog Link Info サイト内検索 トップ > その他 > ファビコン(favicon)を設定する favicon(ファビコン)を設定する faviconとは、favorite icon(お気に入りアイコン)のことで、ブラウザのお気に入りやアドレスバーに表示されます。また、タブブラウザではタブ上に表示もされます。 favicon(ファビコン)をお勧めする理由 ブラウザ上でサイトの見分けがしやすくなる!というのが私の考える最大の利点です。 サイドバーでブックマークを開いた時の表示 アドレスバーでの表示とタブでの表示 特にタブブラウザでタブをたくさん開いた時はfaviconでどのタブがどのサイトかということを
10press webで、暮らしに広がりを。HTML / CSS解説・webテンプレート・web素材。 Lecture HTML/CSS Download Documents Blog Link Info サイト内検索 トップ > その他 > Firefox 覚書 > userChrome.css の設定(ブラウザの外観) userChrome.css では、ブラウザの外観をカスタマイズすることができます。個人的にはブラウザのGUI領域を節約して web ページ表示領域を広げることに命を懸けています。いました。 userChrome.css のダウンロードと最終的な外観のスクリーンショットはこのページの下部でどうぞ。 userChrome.css の場所 userChrome.css は、通常 C:\Documents and Settings\Application Data\Mozil
ウェブサイト制作、HTML5・CSS3、CMS「freo」についての備忘録 MENU MENU ホーム ブログ freo Tips details+summaryでJSなしの折りたたみ HTML5から導入された詳細折りたたみ要素、detailsを使ってfreoのサイドバーを折りたたむTIPSです。 details要素の概要 <details> <summary>Details</summary> Something small enough to escape casual notice. </details> detailsは上記のようにsummaryとセットで使います。実際にブラウザでどのように表示されるかは以下。 Details このように<summary>~</summary>で囲まれた部分が開閉のトグルボタンとなります。また、詳細(折りたたまれるコンテンツ)にはプレーンテキストだ
ウェブサイト制作、HTML5・CSS3、CMS「freo」についての備忘録 MENU MENU ホーム ブログ freo Tips グッジョブ送信プラグインのお礼をモーダルで表示 龍の棲む場所さんで配布されている「グッジョブ送信ブラグイン」の「お礼画面を表示せずにカウントだけを取得する方法」で表示される「お礼文」をモーダルウィンドウで表示するTIPSです。 準備 グッジョブ送信プラグイン配布元の解説通りにプラグインを導入 管理画面の「設定管理」→「プラグインの設定:グッジョブ送信」の「グッジョブに対するお礼画面の表示」を 「表示しない」(すべてのグッジョブ送信ボタンがお礼画面を表示しなくなります) または「表示する」のままで直下のテキストエリアにモーダルウィンドウでのお礼表示をしたいページIDを記入 します。 テンプレートファイルの編集 プラグイン配布元の解説にあるように、「お礼画面を表示
ウェブサイト制作、HTML5・CSS3、CMS「freo」についての備忘録 MENU MENU ホーム ブログ 雑記 祝・三年ぶりfreo公式更新 #freo_jp Ver 1.21.0 を公開しました。 https://t.co/qzWxUqOIww — refirio (@refirio) November 20, 2021 早速ダウンロードし、ローカルで触ってみています。freoはやっぱり楽しいです。で、一から設置してオレオレカスタマイズを施しているんですが自サイトの解説に間違いというか抜けがあるのも発見したりしたのでまた追い追い修正などしようと思います。 Web Liberty の頃からないとさんの作るスクリプトにはお世話になっていたし好きなのでこれからも細く長く使わせてもらえたらなぁと願っています。
ブラウザによって適用させるCSSを振り分ける方法 ※この情報は古い恐れがあります。 スクリプト・.htaccessによって振り分け javascriptやcgi、.htaccessによってUAを取得し、それによってlink要素で呼び出すCSSを変更する方法です。 コンディショナルコメントを使う(Win Internet Explorer向け) <head>~</head>で<!--[if IE]>~<![endif]-->の間にIE向けのCSSを記述します。<style type="text/css">~</style>でもlink要素による外部CSSファイル呼び出しでもOKです。 コンディショナルコメントの書き方・使える値 IEに適用
同じスタイルを指定しているのにブラウザによって表示が異なるなどのバグ・トラブルについて解説します。 グローバルナビゲーション webサイト(ホームページ)作成基礎 HTML・CSS基礎 ステップアップ & 小技 素材・テンプレートなど 資料 CSSバグとは何か CSSバグは、ブラウザによるCSSの独自の解釈により、作成者の思ったとおりではない、あるいは他のブラウザと異なる表示のされ方をしてしまう現象を指します。 CSSバグの回避法・初歩の初歩 CSS作成中の表示確認はSafari・Opera・Firefoxなどで行う 残念ながら、ユーザーが多いInternet Explorerにはたくさんのバグが存在します。より多くのブラウザでできるだけ思い通りのデザインを実現したい場合は、上記のようなCSSを極力正しく解釈するブラウザに合わせてCSSを書き、その後IE向けに調整する方が効率的です(参考:
userChrome.jsの設定 普通のアドオンと違って、有志の方が作ったスクリプトをFxアドオンとして使うための拡張機能です。javascriptの知識があれば自作も出来ます。情報が散らばっている状態なのでかなり模索しながら使っています。 簡単な使い方 userChrome.xpiをFirefoxにインストール サブスクリプトローダをChromeフォルダのuserChrome.jsに上書き スクリプトをChromeフォルダに置く 使っているスクリプト xpiはuserChrome.js 0.8 (FX) - Add-ons MirrorのModified、ローダはalice0775のファイル置き場のものを使っています。 alice0775のファイル置き場で配布されているもの TextLinkもどき 範囲文字列をコンテキストメニューの検索プラグインを選択検索(ConQueryもどき改2)
404エラーページに候補のURLを表示する Google ウェブマスター ツールにて、404エラーページに「もしかして:」的なURL候補を表示させるサービスが登場しました。 このサービスを利用すると、自作の404ページに簡単なソースコードを追加するだけで 最も近いURL候補 「もしかして:」的なURL候補 サイトマップへのリンク 関連しそうなキーワードがあらかじめ入力された検索ボックス を表示することが出来ます。2008/08/22現在、テスト版での提供のため一部サイトでは「最も近いURLやURLおよびサイトマップの候補」が表示されません。 404ページにURL候補を表示するための手順 この機能を使う場合にはGoogleアカウント及びGoogle webマスターツールへの登録が必要です。 Google ウェブマスター ツールを開く。 サイドメニューの「運用ツール」>「拡張された404ページ
about:config及びuser.jsの設定 about:configでの設定はuser.jsでも設定・上書きすることが出来ます。私はFirefox 3への移行に伴ってuser.jsでまとめることにしてみました。 以下が私の設定です。このページの下部にjsファイルへのリンクもあるのでよろしければDLでどうぞ。 // ################################# // user.js for Fx 3 Edit by Niichi // Last Modified 2008-06-19 // ################################# // ----------- Index -------------------- // 1. ネットワーク関連 // 2. プライバシー・セキュリティ・ログイン // 3. ダウンロード // 4. 拡張・
webサイト/ホームページ作成(HTML・CSS)についての解説と、webサイトテンプレートの配布をしています。CSSの基礎CSSの基礎知識や概要、CSSデザインのTIPSを解説。CSS - スタイルシートって何? Cascading Style Sheetsの略で、Webページのレイアウトを定義する規格。 CSSを使うと、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を文書本体(及び文書の論理構造を記述したHTML)から切り離すことができる。 HTMLが裸の人間だとすると、CSSは洋服やアクセサリーみたいなものです。 CSSの指定法 CSSをHTMLに適用するには4つの方法があります。 タグに直接書きこむ(style属性として指定する)方法 例)<p style="color:#ffffff;">~</p> HTMLヘッダーで宣言しておく方法 例)head~head内
Tools & Flow HTML CSS Step Up Material HOME © 10press rights reserved. | Last Modified: 2008-06-21T14:52:33
当サイト作成においてHTML・CSSを書くときのガイドラインです(覚書)。 あくまでも「自分のための」ガイドラインであり、一般的なサイト作成においてこれに従わなければならないものではありません。 また、配布テンプレートについては別のガイドラインに従って作成しています。 HTML DTDに関わらず、文法的に正しい記述を心がける。また、HTMLでは文書の構造を示すことを目的とし、見た目の装飾に関わることを記述しない。 宣言・文字コード 文字コードはUTF-8 IEに対してはXML宣言を省略 DTDはXHTML 1.0 Transitional head 基本的にはmeta、link、script、titleの順に記述 最初にmeta要素で文字コードを明示 link要素によるナビゲーションを活用 titleは「ページ名 - サイト名」とする body以下 body要素にはコンテンツごとに任意のc
こんなところも気を使ってみる favicon(ファビコン)を設定する faviconとは、favorite icon(お気に入りアイコン)のことで、ブラウザのお気に入りやアドレスバーに表示されます。また、タブブラウザではタブ上に表示もされます。 favicon(ファビコン)をお勧めする理由 ブラウザ上でサイトの見分けがしやすくなる!というのが私の考える最大の利点です。 サイドバーでブックマークを開いた時の表示 アドレスバーでの表示とタブでの表示 特にタブブラウザでタブをたくさん開いた時はfaviconでどのタブがどのサイトかということを判断しているので、faviconをつけているサイトはありがたいです。 favicon(ファビコン)の作り方 16×16(ピクセル)の画像を用意する ico形式に変換する(便利サイト・ソフト) アップロード htmlファイルの<head>~</head>間
まずはHTMLの基本的な構造を知る ※HTML 4.01では終了タグが省略できたりしますが、当サイトではXHTMLへの移行も視野に入れて「省略形でのタグの書き方」は推奨しない方向で説明していきます。 HTMLの基本的な構造は図のようになっています。 文書タイプ宣言(DTD):文書型定義に沿う場合は最初に html要素:その範囲の文書がHTML形式で記述されていることを宣言します。 head要素:文書の情報を示す範囲です。 meta要素 link要素 style要素 script要素 title要素:(省略不可) などを書くことが出来ます。 body要素:この中に書いたものがブラウザに表示されます。 基本構造はテンプレート化しておくと便利 HTMLファイルを作るごとに基本構造を手打ちするのは面倒。<body>~</body>間だけを書き換えるとHTMLファイルが完成するようにテンプレートにし
ブラウザによって適用させるCSSを振り分ける方法 スクリプト・.htaccessによって振り分け javascriptやcgi、.htaccessによってUAを取得し、それによってlink要素で呼び出すCSSを変更する方法です。 コンディショナルコメントを使う(Win Internet Explorer向け) <head>~</head>で<!--[if IE]>~<![endif]-->の間にIE向けのCSSを記述します。<style type="text/css">~</style>でもlink要素による外部CSSファイル呼び出しでもOKです。 コンディショナルコメントの書き方・使える値 IEに適用
検索ロボット避け 検索サイトに自分のサイトを表示させたくない!人はこちら。 metaタグ Googleの場合 サイトのページをすべてのロボットのクロール対象から除外するには、次のメタ タグをページの <HEAD> セクションに挿入します。 <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> サイトのページを Google ロボットのクロールからのみ除外し、他のロボットにはクロールを許可する場合は、次のタグを使用します。 <META NAME="GOOGLEBOT" CONTENT="NOINDEX, NOFOLLOW"> ロボットにサイトのページのクロールを許可し、外部リンクの追跡を許可しないようにするには、次のタグを使用します。 <META NAME="ROBOTS" CONTENT="NOFOLLOW"> Yahoo!の場合 検索結果からサ
about site 当サイトはウェブサイト制作、HTML5・CSS3、CMS「freo」及びCGI「てがろぐ」についての備忘録および実験場です。HTML5(HTML Living Standard)・CSS3・Javascriptを使用しています、閲覧は最新のブラウザをお勧めします。また、一部リンクにアフィリエイト広告を利用しています。 もっと詳しく
このページを最初にブックマークしてみませんか?
『10press - ホームページ作成・テンプレート・素材』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く