カテゴリ「カテゴリなし」の投稿［4110件］（56ページ目）
画像にワンクッションの方法を模索していた者です。
>>3216 >>3224 のご教示ありがとうございました。てがろぐ、使う側の工夫次第でいろんなことができそうで楽しいです😄
また、拙宅での試行錯誤もご紹介くださりありがとうございました（とりあえず問題ない方法だとわかって一安心しましたｗ
>>3216 >>3224 のご教示ありがとうございました。てがろぐ、使う側の工夫次第でいろんなことができそうで楽しいです😄
また、拙宅での試行錯誤もご紹介くださりありがとうございました（とりあえず問題ない方法だとわかって一安心しましたｗ
Twitterで見る デモモードで動作しています。ここでは、作者であるnishishiアカウント以外のツイートの埋め込みはできません。テキストリンクとして掲載は可能ですが、ツイート主が拡散を希望していない可能性がある点にもご配慮下さい。
ご報告ありがとうございます！ 問題なくなって良かったです。もしかしたら違うところにも別の問題がある可能性も（そういえば可能性としては）あるよな……と後になってから思い至ったので、どうなのかちょっと心配でした。(笑) 解決して良かったです。>>3277
▼いきなりは見せたくない画像にギャラリーモード用スキンでもワンクッション置きたい場合の(たぶん)簡単な方法 #🌱豆知識
No.3216でご紹介した方法は（標準添付スキンの）ギャラリーモード用スキンでは使えません。そのギャラリーモード用スキンを大幅にはカスタマイズせずに同じことを実現したい場合、もし、カテゴリを利用しても構わないなら（＝特定のカテゴリに属する投稿だけで、画像にワンクッションを置く……という運用で構わないなら）、以下の方法もあります。
※注：てがろぐ完全構成パッケージに標準添付しているギャラリーモード用スキンでの話です。ギャラリーモードそのものに特別な事情があるわけではないので、スキンの作り方次第でどうにでもなります。
長いので畳んでおきます。
---【デフォルトの内側スキン】---
（標準添付スキンの）ギャラリーモード用スキンでは、投稿本文に含まれる1枚目の画像を表示する部分として、以下のように書いています。
<p class="imagebox">
<!-- ▽投稿本文内の1つ目の画像だけを表示 -->
[[ONEPICT:1]]
</p>
---【内側スキンのカスタマイズ】---
ここに、カテゴリIDだけが得られる記法 [[CATEGORYIDS]] を下記のように加えます。
<p class="imagebox [[CATEGORYIDS]]">
<!-- ▽投稿本文内の1つ目の画像だけを表示 -->
[[ONEPICT:1]]
</p>
すると、もし「カテゴリIDが cushion であるカテゴリ」に属している投稿では、以下のように出力されます。（説明に不要な属性は省略）
<p class="imagebox cushion">
<!-- ▽投稿本文内の1つ目の画像だけを表示 -->
<a class="imagelink" href="画像"><img class="embeddedimage" src="画像"></a>
</p>
※もし複数のカテゴリに属しているなら class="imagebox hogehoge cushion higehige" のような感じで、半角空白文字区切りで全部出力されます。
---【CSSの追記】---
なので、以下のようにCSSを書いておくことで、問答無用でクッション画像に差し替えられます。
.cushion .embeddedimage { display: none; }
.cushion .imagelink {
display: inline-block;
width: 200px;
height: 200px;
background-image: url("クッション画像のURL");
}
上記のCSSの中身は、No.3216でご紹介した方法と同じです。(赤文字のセレクタが異なるだけです。ここは用意したカテゴリIDに変更する必要があります。)
1行目で『本来表示されるハズだった画像』を消して、2～7行目で『代わりのクッション画像』を表示しています。（クッション画像の原寸が表示サイズよりも大きいなら、さらに background-size:contain; 等を加えると良いと思います。）
もしクッション用画像が複数種類あるなら、その分だけカテゴリを増やす必要があります。
なので、「クッション画像を加えるためだけにカテゴリを使いたくない」という場合には使えない方法ですね。
「カテゴリは使いたくないが、ハッシュタグなら使っても良い」という場合には、moka（えむおか）さんによるテクニックもあります。「特定のハッシュタグに続く画像」を対象にするというテクニックですね。なるほど、こんな方法が……と驚きました。（判定用に記述するハッシュタグは、CSSで非表示にすれば、見た目を変えることなく使えそうな気もします。）
畳む
No.3216でご紹介した方法は（標準添付スキンの）ギャラリーモード用スキンでは使えません。そのギャラリーモード用スキンを大幅にはカスタマイズせずに同じことを実現したい場合、もし、カテゴリを利用しても構わないなら（＝特定のカテゴリに属する投稿だけで、画像にワンクッションを置く……という運用で構わないなら）、以下の方法もあります。
※注：てがろぐ完全構成パッケージに標準添付しているギャラリーモード用スキンでの話です。ギャラリーモードそのものに特別な事情があるわけではないので、スキンの作り方次第でどうにでもなります。
長いので畳んでおきます。
---【デフォルトの内側スキン】---
（標準添付スキンの）ギャラリーモード用スキンでは、投稿本文に含まれる1枚目の画像を表示する部分として、以下のように書いています。
<p class="imagebox">
<!-- ▽投稿本文内の1つ目の画像だけを表示 -->
[[ONEPICT:1]]
</p>
---【内側スキンのカスタマイズ】---
ここに、カテゴリIDだけが得られる記法 [[CATEGORYIDS]] を下記のように加えます。
<p class="imagebox [[CATEGORYIDS]]">
<!-- ▽投稿本文内の1つ目の画像だけを表示 -->
[[ONEPICT:1]]
</p>
すると、もし「カテゴリIDが cushion であるカテゴリ」に属している投稿では、以下のように出力されます。（説明に不要な属性は省略）
<p class="imagebox cushion">
<!-- ▽投稿本文内の1つ目の画像だけを表示 -->
<a class="imagelink" href="画像"><img class="embeddedimage" src="画像"></a>
</p>
※もし複数のカテゴリに属しているなら class="imagebox hogehoge cushion higehige" のような感じで、半角空白文字区切りで全部出力されます。
---【CSSの追記】---
なので、以下のようにCSSを書いておくことで、問答無用でクッション画像に差し替えられます。
.cushion .embeddedimage { display: none; }
.cushion .imagelink {
display: inline-block;
width: 200px;
height: 200px;
background-image: url("クッション画像のURL");
}
上記のCSSの中身は、No.3216でご紹介した方法と同じです。(赤文字のセレクタが異なるだけです。ここは用意したカテゴリIDに変更する必要があります。)
1行目で『本来表示されるハズだった画像』を消して、2～7行目で『代わりのクッション画像』を表示しています。（クッション画像の原寸が表示サイズよりも大きいなら、さらに background-size:contain; 等を加えると良いと思います。）
もしクッション用画像が複数種類あるなら、その分だけカテゴリを増やす必要があります。
なので、「クッション画像を加えるためだけにカテゴリを使いたくない」という場合には使えない方法ですね。
「カテゴリは使いたくないが、ハッシュタグなら使っても良い」という場合には、moka（えむおか）さんによるテクニックもあります。「特定のハッシュタグに続く画像」を対象にするというテクニックですね。なるほど、こんな方法が……と驚きました。（判定用に記述するハッシュタグは、CSSで非表示にすれば、見た目を変えることなく使えそうな気もします。）
畳む
3214です。
すみません、本体自体は問題なかったのですが、SSIで他のページに投稿を埋め込むとサムネイル画像が表示されません。サブディレクトリの位置がImagesディレクトリと同じ位置で出力されてるようです。
ちなみにてがろぐ本体の設定ですがmy $howtogetpathの値を0に変更してます。
#報告
すみません、本体自体は問題なかったのですが、SSIで他のページに投稿を埋め込むとサムネイル画像が表示されません。サブディレクトリの位置がImagesディレクトリと同じ位置で出力されてるようです。
ちなみにてがろぐ本体の設定ですがmy $howtogetpathの値を0に変更してます。
#報告
3.8.5β配布ありがとうございます。こちらもアップデートさせていただきましたが、設定画面も動作に問題ないです。
nememori.infoさんで配布して下さっているスキンを使いたくてβ版入れました！
自分だけのツイッターみたいで壁打ちに最適で楽しいです！
配布して下さってありがとうございます！
自分だけのツイッターみたいで壁打ちに最適で楽しいです！
配布して下さってありがとうございます！
Ver 3.8.5配布ありがとうございます!!
自動で入る色を設定しておける機能が地味に便利で嬉しいです!😊
自動で入る色を設定しておける機能が地味に便利で嬉しいです!😊
ああそうか。標準添付のギャラリーモード用スキンだと、先のではダメなのか。_(:3」∠)_
▼いきなりは見せたくない画像にワンクッション置きたい場合の(たぶん)チョー簡単な方法 #🌱豆知識
ワンクッション用の画像を（画像ごとに用意するわけではなく）共通の1種類だけ用意して使い回したい場合には、サムネイル画像を用意するよりも、以下の方法で記述する方が楽で良さそうです。
長いので畳んでおきます。
---【前提説明というか事前説明というか背後の説明】---
てがろぐでは、画像を挿入する際に、以下のように書きますね。
[PICT:gazo.jpg]
これだけだと、実際には以下のような感じのHTMLで出力されます。（説明に不要な属性は省略）
<a class="imagelink" href="画像"><img class="embeddedimage" src="画像"></a>
---【ワンクッション置きたい際の記述例】---
先の画像挿入記法を、さらに自由装飾記法で囲んで、以下のように書きましょう。
[F:mask:[PICT:gazo.jpg]]
すると、以下のようなHTMLで出力されます。（説明に不要な属性は省略）
<span class="decorationF deco-mask"><a class="imagelink" href="画像"><img class="embeddedimage" src="画像"></a></span>
これを利用すれば、以下のようにCSSを書いておくことで、問答無用でクッション画像に差し替えられます。(リンク先は変わらないので拡大画像では本来の画像が見えます。)
.deco-mask .embeddedimage { display: none; }
.deco-mask .imagelink {
display: inline-block;
width: 200px;
height: 200px;
background-image: url("クッション画像のURL");
}
●まず、1行目で『本来表示されるハズだった画像』を消します。
●2～7行目で、『代わりのクッション画像』を表示しています。（画像は6行目にある background-image プロパティにURLを指定します。サイズは、4行目と5行目の width と height に指定します。クッション画像の原寸が表示サイズよりも大きいなら、さらに background-size:contain; とか background-repeat:no-repeat; とか加えると良いと思います。）
もしクッション用画像が複数種類あるなら、自由装飾記法で使うclass名を mask1、mask2、mask3……とか複数用意すれば良いでしょう。
※自由装飾記法で「mask」と指定すると、実際に出力されるclass名は「deco-mask」になる仕様に注意してCSSを書いて下さい。
自由装飾記法については、公式マニュアルの「class名を自由に指定できる装飾記法」をご覧下さい。
なお、画像1つずつで異なるクッション画像を用意したい場合は、今回の Ver 3.8.5β で実装したサムネイル画像機能が望ましいでしょう。
上記で紹介した方法でも、サムネイル画像を使う方法でも、OGP(og:image)では本来の画像が出ます。それを避けたい場合は1枚目の画像には無難な画像を指定するとかして下さい。^^;
また、本格的に容易には見せたくない画像の場合は、鍵付き機能を使うと良いと思います。鍵付き投稿の場合は、デフォルト設定ではOGPにも表示されません。
CSSは、もうちょっとなんかイイ書き方があるかも知れません。今ぱっと思いついたのを書いただけなので……。
※（標準添付スキンの）ギャラリーモード用スキンで同様の方法を使いたい場合は、No.3224をご覧下さい。
畳む
ワンクッション用の画像を（画像ごとに用意するわけではなく）共通の1種類だけ用意して使い回したい場合には、サムネイル画像を用意するよりも、以下の方法で記述する方が楽で良さそうです。
長いので畳んでおきます。
---【前提説明というか事前説明というか背後の説明】---
てがろぐでは、画像を挿入する際に、以下のように書きますね。
[PICT:gazo.jpg]
これだけだと、実際には以下のような感じのHTMLで出力されます。（説明に不要な属性は省略）
<a class="imagelink" href="画像"><img class="embeddedimage" src="画像"></a>
---【ワンクッション置きたい際の記述例】---
先の画像挿入記法を、さらに自由装飾記法で囲んで、以下のように書きましょう。
[F:mask:[PICT:gazo.jpg]]
すると、以下のようなHTMLで出力されます。（説明に不要な属性は省略）
<span class="decorationF deco-mask"><a class="imagelink" href="画像"><img class="embeddedimage" src="画像"></a></span>
これを利用すれば、以下のようにCSSを書いておくことで、問答無用でクッション画像に差し替えられます。(リンク先は変わらないので拡大画像では本来の画像が見えます。)
.deco-mask .embeddedimage { display: none; }
.deco-mask .imagelink {
display: inline-block;
width: 200px;
height: 200px;
background-image: url("クッション画像のURL");
}
●まず、1行目で『本来表示されるハズだった画像』を消します。
●2～7行目で、『代わりのクッション画像』を表示しています。（画像は6行目にある background-image プロパティにURLを指定します。サイズは、4行目と5行目の width と height に指定します。クッション画像の原寸が表示サイズよりも大きいなら、さらに background-size:contain; とか background-repeat:no-repeat; とか加えると良いと思います。）
もしクッション用画像が複数種類あるなら、自由装飾記法で使うclass名を mask1、mask2、mask3……とか複数用意すれば良いでしょう。
※自由装飾記法で「mask」と指定すると、実際に出力されるclass名は「deco-mask」になる仕様に注意してCSSを書いて下さい。
自由装飾記法については、公式マニュアルの「class名を自由に指定できる装飾記法」をご覧下さい。
なお、画像1つずつで異なるクッション画像を用意したい場合は、今回の Ver 3.8.5β で実装したサムネイル画像機能が望ましいでしょう。
上記で紹介した方法でも、サムネイル画像を使う方法でも、OGP(og:image)では本来の画像が出ます。それを避けたい場合は1枚目の画像には無難な画像を指定するとかして下さい。^^;
また、本格的に容易には見せたくない画像の場合は、鍵付き機能を使うと良いと思います。鍵付き投稿の場合は、デフォルト設定ではOGPにも表示されません。
CSSは、もうちょっとなんかイイ書き方があるかも知れません。今ぱっと思いついたのを書いただけなので……。
※（標準添付スキンの）ギャラリーモード用スキンで同様の方法を使いたい場合は、No.3224をご覧下さい。
畳む
β版配布ありがとうございます！早速アップデートしてサムネイル画像が表示されることを確認しました。ブラウザ上でサムネイル画像がアップロードできるようになるなら、サムネイル画像のファイル名が自動的に画像のファイル名と同じになってくれるとありがたいです。
#報告 #要望
#報告 #要望
てがろぐアンケート自分も回答した一人ですが、こうして他の方の回答 を知れるのも面白いですね～！
>>3203
はーい |´ω`)ﾉﾞ))
てがろぐアンケートのおかげで、同サーバてがろぐ仲間が見つかるという思わぬ喜びが。
はーい |´ω`)ﾉﾞ))
てがろぐアンケートのおかげで、同サーバてがろぐ仲間が見つかるという思わぬ喜びが。
海外のブックマーク「OneTab」
https://www.one-tab.com/page/GemDT7UmRiechnNmyo8mvw
https://www.one-tab.com/page/GemDT7UmRiechnNmyo8mvw
ブログ読ませていただきましたが、スマホで操作するのに不便を感じたことはないです。アップデートで躓くこともありませんでしたし。普段スマホでしか投稿しないので、むしろ本体更新のためにパソコンを開くのが億劫すぎて…。さすがにスキンをイチから作るときはパソコンを使いますが、手直しする程度ならテレビ見ながらスマホでサクサクっと弄っちゃいます。外出先で即更新できるのも便利。出かけるときにパソコンを必ず持っていくわけじゃないですが、スマホは必ず持っていくので。慣れたら更新程度なら5分とかかりません。
半月前くらいから実施している「てがろぐ稼働サーバについてのアンケート」にご回答下さった方々、どうもありがとうございました（回答自体は今も受け付けています）。思いのほかたくさんの回答が得られましたので、ちょっと集計してみた結果をお知らせ致します。
➡てがろぐ稼働サーバと機能認知度の話
➡てがろぐ稼働サーバと機能認知度の話
Twitterの方鍵掛けてらっしゃるので見えないけれども、スキンを数種配布してらっしゃる方、新作ｷﾀｰ！ 後でDLしに行く。
もしサムネイル画像がアップロードされていたら、最初はサムネイル画像の方を表示しておいて、クリックされたらLightboxではオリジナル画像を見せる機能を実装した Ver 3.8.5β(未配布)の動作テスト。
※注：てがろぐ側でサムネイル画像が自動生成できるわけではありません。FTP等の手段を使って、オリジナル画像の他にサムネイル画像を自力でアップロードした場合に限って使える機能です。
※画像のアップロード先は、必ずしもてがろぐの画像保存用ディレクトリでなく他のディレクトリでも構いません。
※サムネイル画像は、てがろぐ内蔵機能を使ってはアップロードできません。少なくとも今のところは。（なので、FTP等の別手段で画像をUPしている方々のみに向けた機能です。今のところ。）
※注：てがろぐ側でサムネイル画像が自動生成できるわけではありません。FTP等の手段を使って、オリジナル画像の他にサムネイル画像を自力でアップロードした場合に限って使える機能です。
※画像のアップロード先は、必ずしもてがろぐの画像保存用ディレクトリでなく他のディレクトリでも構いません。
※サムネイル画像は、てがろぐ内蔵機能を使ってはアップロードできません。少なくとも今のところは。（なので、FTP等の別手段で画像をUPしている方々のみに向けた機能です。今のところ。）
今日のひとことに投稿されていた、BBCのフォントの件ですが、StylusのようなユーザーCSSを適用できる拡張機能を使えば、好みのフォントで見られるようになりますよ！
私はこれを使って、自分の好きなフォントでウェブサイトを見ています。快適です。
BBCにお好きなフォントを適用するCSSを書いてみました。参考にどうぞ。
body, button, select, input, option, textarea, label, .bbc-uc98c5, .bbc-1vr3bdn, .bbc-1tf9dgo, .bbc-1hic50p, .bbc-piraa4, .bbc-1s1cxbv, .bbc-1oa7vn6, .bbc-1lz5bd3, .bbc-1y0drz9, .bbc-dv6s4x, .bbc-1g1sves, .bbc-yn6o4f, .bbc-br9lqb, .bbc-7x6bd, .bbc-bsvy9j, .bbc-otirxy, .bbc-x8tdvl, .bbc-1c2bffn, .bbc-3mkwa9, .bbc-8qmk60, .bbc-1xek14n, .bbc-6nijst, .bbc-mzf1mo, .bbc-1l80z7i, .bbc-1ssqj8h, .bbc-1376p5v, .bbc-1c5klff, .bbc-1c8gppe, .bbc-190umnl, .bbc-sahdy6, .bbc-16pexes, .bbc-woxom8, .bbc-1w4k4yn { font-family: /* お好きなフォント */; }畳む
私はこれを使って、自分の好きなフォントでウェブサイトを見ています。快適です。
BBCにお好きなフォントを適用するCSSを書いてみました。参考にどうぞ。
body, button, select, input, option, textarea, label, .bbc-uc98c5, .bbc-1vr3bdn, .bbc-1tf9dgo, .bbc-1hic50p, .bbc-piraa4, .bbc-1s1cxbv, .bbc-1oa7vn6, .bbc-1lz5bd3, .bbc-1y0drz9, .bbc-dv6s4x, .bbc-1g1sves, .bbc-yn6o4f, .bbc-br9lqb, .bbc-7x6bd, .bbc-bsvy9j, .bbc-otirxy, .bbc-x8tdvl, .bbc-1c2bffn, .bbc-3mkwa9, .bbc-8qmk60, .bbc-1xek14n, .bbc-6nijst, .bbc-mzf1mo, .bbc-1l80z7i, .bbc-1ssqj8h, .bbc-1376p5v, .bbc-1c5klff, .bbc-1c8gppe, .bbc-190umnl, .bbc-sahdy6, .bbc-16pexes, .bbc-woxom8, .bbc-1w4k4yn { font-family: /* お好きなフォント */; }畳む
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137
