2017年12月17日
ファンブログ備忘録(3)画像の左右に文字表示
ファンブログ備忘録(3)として記録しときます
画像の左右に文字を表示させる方法を調べてみました
1.align
@ align="(top|middle|bottom|left|right)" 文字との位置関係
<img src="/??????.JPG" border="0" alt="??????.JPG" align="(top|middle|bottom|left|right)">
・top
img上部と文字一行を揃えて表示
・ middle
img中央と文字一行を揃えて表示
・bottom (初期値)
img下部と文字一行を揃えて表示
・left
左にimgを浮動、右に文字を回り込み表示
・right
右にimgを浮動、左に文字を回り込み表示
Abr >clear clear="(left|all|right|none)" 回り込みの解除
clearは、イメージなどの回り込み文字を解除するのに用います。たとえば、<img align="(left | right)">のとき、それぞれ、clear="(left | right)"を用いて解除します。両方の回り込みを同時に解除するときには、clear="all"を用います。初期値(default)は、clear="none"です。
・clear="left"
<img align="left">のとき、普通に改行をすると(<br>)
回り込み内での改行となります。(<br>)
これを解除するのには、<br clear="left">を用います。(<br clear="left">)
・clear="right"
<img align="right">のとき、普通に改行をすると
回り込み内での改行となります。
これを解除するのには、<br clear="right">を用います。
2.style
@ style="(none|left|right)" 文字との位置関係
<img src="/??????.JPG" border="0" alt="??????.JPG" style="(none|left|right)">
・none
画像の表示位置は指定しません。(デフォルト)
・left
左にimgを浮動、右に文字を回り込み表示
・right
右にimgを浮動、左に文字を回り込み表示
Aclear clear="clear:both;" 回り込みの解除
clearは、イメージなどの回り込み文字を解除するのに用います。
<br style="clear:both;">
文字の回り込みが解除され画像の下の行にきます
ファンブログ備忘録(2)このカテゴリーの最新記事の画像保存を禁止するオマジナイ
ファンブログ備忘録(2)として記録しときます
【このカテゴリーの最新記事】の画像が保存できちゃうんですね
画像保存禁止するにはHTMLを編集する必要があることがわかりました
デザイン⇒html⇒HTML追加で編集ができます
このカテゴリーの最新記事はHTMLでこんな感じになっているんですね
<div class="heading">【このカテゴリーの最新記事】</div>"onSelectStart="return false"oncontextmenu="return false;"を下記に追加します
<ul>
<% loop:list_category_article %>
<li>
<% if:article.first_image %>
<div class="articleImage">
<a href="<% article.page_url %>"><img src="<% article.first_image.page_url_thumbnail %>></a>
<img src="<% article.first_image.page_url_thumbnail %>"onSelectStart="return false"oncontextmenu="return false;">
編集が終わったら適当な名前をつけて保存します
保存したら適用をチェックして反映させます
プロフィールの画像も保存できちゃうようです
これも禁止したいのですが方法がわかりません
2017年12月08日
ファンブログ備忘録(1)記事の画像保存を禁止するオマジナイ
ファンブログ備忘録(1)として記録しときます
ファンブログで画像を公開すると誰でも簡単に保存できちゃうみたいです
禁止する方法を調べてみました
画像を挿入するとこんなコードになります
<a href="???????.JPG" target="_blank">
<img src="???????-thumbnail2.JPG" border="0" alt="???????.JPG">
</a>
これだとクリックしただけで画像が表示されてしまいます
<a href="???????.JPG" target="_blank">を削除すると
クリックしても表示されません
しかし右クリックで画像の保存ができてしまいます
そこで
oncontextmenu="return false;"
をオマジナイとして追加します
<img src="???????-thumbnail2.JPG" border="0" alt="???????.JPG"oncontextmenu="return false;">
</a>
他にもあるかもしれませんが
忘れないうちに記しておきます
ドラックも禁止する場合