https://qwerty.work/categories/mozshot/ Recent content in Mozshot on qwerty.work Hugo -- gohugo.io ja-JP Tue, 07 Dec 2010 10:23:43 +0900 https://qwerty.work/post/2010/12/phpmozshot/ Tue, 07 Dec 2010 10:23:43 +0900 https://qwerty.work/post/2010/12/phpmozshot/ <p>何かとサイトサムネイルで重宝する<a class="link" href="http://mozshot.nemui.org/" target="_blank" rel="noopener" >Mozshot</a>ですが、</p> <p>サムネイル表示のために、毎回URLの指定やソースの調整をすることがだんだん苦になってきました。</p> <p>簡単にサイトサムネルを表示するファンクションのサンプルがあったので自分なりに改造し、</p> <p>指定URLのタイトル取得とMozshotのサムネイルにリンクを組み合わせてみました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#f92672">&lt;?</span><span style="color:#a6e22e">php</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">/*---- 指定したURLのソースを取得 ----*/</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getURL</span>( $pURL ) { </span></span><span style="display:flex;"><span> $_data <span style="color:#f92672">=</span> <span style="color:#66d9ef">null</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>( $_http <span style="color:#f92672">=</span> <span style="color:#f92672">@</span><span style="color:#a6e22e">fopen</span>( $pURL, <span style="color:#e6db74">&#34;r&#34;</span> ) ) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">while</span>( <span style="color:#f92672">!</span><span style="color:#a6e22e">feof</span>( $_http ) ) { </span></span><span style="display:flex;"><span> $_data <span style="color:#f92672">.=</span> <span style="color:#a6e22e">fgets</span>( $_http, <span style="color:#ae81ff">1024</span> ); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">fclose</span>( $_http ); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span>( $_data ); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">/*---- ソース内にある余計な改行コードを取り除く----*/</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">cleanString</span>( $pString ) { </span></span><span style="display:flex;"><span> $_data <span style="color:#f92672">=</span> <span style="color:#a6e22e">str_replace</span>( <span style="color:#66d9ef">array</span>( <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">10</span>), <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">13</span>), <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">9</span>) ), <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">32</span>), $pString ); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">while</span>( <span style="color:#a6e22e">strpos</span>( $_data, <span style="color:#a6e22e">str_repeat</span>( <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">32</span>), <span style="color:#ae81ff">2</span> ), <span style="color:#ae81ff">0</span> ) <span style="color:#f92672">!=</span> <span style="color:#66d9ef">false</span> ) { </span></span><span style="display:flex;"><span> $_data <span style="color:#f92672">=</span> <span style="color:#a6e22e">str_replace</span>( <span style="color:#a6e22e">str_repeat</span>( <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">32</span>), <span style="color:#ae81ff">2</span> ), <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">32</span>), $_data ); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span>( <span style="color:#a6e22e">trim</span>( $_data ) ); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">/*---- 指定した最初タグ内にある文字列を取得 ----*/</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getElement</span>( $pElement, $pSource ) { </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//取得できなかった場合の代替テキスト </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#66d9ef">empty</span>($pSource)){ </span></span><span style="display:flex;"><span> $pSource <span style="color:#f92672">=</span> <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">60</span>)<span style="color:#f92672">.</span>$pElement<span style="color:#f92672">.</span><span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">62</span>)<span style="color:#f92672">.</span><span style="color:#e6db74">&#34;Pages&#34;</span><span style="color:#f92672">.</span><span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">60</span>)<span style="color:#f92672">.</span><span style="color:#e6db74">&#34;/&#34;</span><span style="color:#f92672">.</span>$pElement<span style="color:#f92672">.</span><span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">62</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> $_data <span style="color:#f92672">=</span> <span style="color:#66d9ef">null</span>; </span></span><span style="display:flex;"><span> $pElement <span style="color:#f92672">=</span> <span style="color:#a6e22e">strtolower</span>( $pElement ); </span></span><span style="display:flex;"><span> $_start <span style="color:#f92672">=</span> <span style="color:#a6e22e">strpos</span>( <span style="color:#a6e22e">strtolower</span>( $pSource ), <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">60</span>) <span style="color:#f92672">.</span> $pElement, <span style="color:#ae81ff">0</span> ); </span></span><span style="display:flex;"><span> $_start <span style="color:#f92672">=</span> <span style="color:#a6e22e">strpos</span>( $pSource, <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">62</span>), $_start ) <span style="color:#f92672">+</span> <span style="color:#ae81ff">1</span>; </span></span><span style="display:flex;"><span> $_stop <span style="color:#f92672">=</span> <span style="color:#a6e22e">strpos</span>( <span style="color:#a6e22e">strtolower</span>( $pSource ), <span style="color:#e6db74">&#34;&lt;/&#34;</span> <span style="color:#f92672">.</span> $pElement <span style="color:#f92672">.</span> <span style="color:#a6e22e">chr</span>(<span style="color:#ae81ff">62</span>), $_start ); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>( $_start <span style="color:#f92672">&gt;</span> <span style="color:#a6e22e">strlen</span>( $pElement ) <span style="color:#f92672">&amp;&amp;</span> $_stop <span style="color:#f92672">&gt;</span> $_start ) { </span></span><span style="display:flex;"><span> $_data <span style="color:#f92672">=</span> <span style="color:#a6e22e">trim</span>( <span style="color:#a6e22e">substr</span>( $pSource, $_start, $_stop <span style="color:#f92672">-</span> $_start ) ); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span>( $_data ); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">/*---- Mozshot用ファンクション ---*/</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">mShot</span>($url,$s){ </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> ($url) { </span></span><span style="display:flex;"><span> $sData <span style="color:#f92672">=</span> <span style="color:#a6e22e">getURL</span>( $url ); </span></span><span style="display:flex;"><span> $sData <span style="color:#f92672">=</span> <span style="color:#a6e22e">cleanString</span>( $sData ); </span></span><span style="display:flex;"><span> $sData <span style="color:#f92672">=</span> <span style="color:#a6e22e">getElement</span>( <span style="color:#e6db74">&#34;title&#34;</span>, $sData ); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">mb_language</span>( <span style="color:#e6db74">&#39;Japanese&#39;</span> ); </span></span><span style="display:flex;"><span> $title <span style="color:#f92672">=</span> <span style="color:#a6e22e">mb_convert_encoding</span>($sData, <span style="color:#e6db74">&#34;UTF-8&#34;</span>, <span style="color:#e6db74">&#34;auto&#34;</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> $imgSize[<span style="color:#ae81ff">0</span>] <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;64&#39;</span>; </span></span><span style="display:flex;"><span> $imgSize[<span style="color:#ae81ff">1</span>] <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;128&#39;</span>; </span></span><span style="display:flex;"><span> $imgSize[<span style="color:#ae81ff">2</span>] <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;256&#39;</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> $thumbUrl[<span style="color:#ae81ff">0</span>] <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;/small&#34;</span>; </span></span><span style="display:flex;"><span> $thumbUrl[<span style="color:#ae81ff">1</span>] <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;&#34;</span>; </span></span><span style="display:flex;"><span> $thumbUrl[<span style="color:#ae81ff">2</span>] <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;/large&#34;</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> $a <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;&lt;div id=¥&#34;</span><span style="color:#a6e22e">mShot¥</span><span style="color:#e6db74">&#34;&gt;&lt;a href=¥&#34;&#34;.</span><span style="color:#e6db74">$url</span><span style="color:#e6db74">.&#34;</span><span style="color:#a6e22e">¥</span><span style="color:#e6db74">&#34; target=¥&#34;</span><span style="color:#a6e22e">_blank¥</span><span style="color:#e6db74">&#34;&gt;¥n&#34;</span>; </span></span><span style="display:flex;"><span> $a <span style="color:#f92672">=</span> $a<span style="color:#f92672">.</span><span style="color:#e6db74">&#34;&lt;strong class=¥&#34;</span><span style="color:#a6e22e">title¥</span><span style="color:#e6db74">&#34;&gt;&#34;</span><span style="color:#f92672">.</span>$title<span style="color:#f92672">.</span><span style="color:#e6db74">&#34;&lt;/strong&gt;&lt;br /&gt;¥n&#34;</span>; </span></span><span style="display:flex;"><span> $a <span style="color:#f92672">=</span> $a<span style="color:#f92672">.</span><span style="color:#e6db74">&#34;&lt;span class=¥&#34;</span><span style="color:#a6e22e">url¥</span><span style="color:#e6db74">&#34;&gt;&#34;</span><span style="color:#f92672">.</span>$url<span style="color:#f92672">.</span><span style="color:#e6db74">&#34;&lt;/span&gt;&lt;br /&gt;¥n&#34;</span> ; </span></span><span style="display:flex;"><span> $a <span style="color:#f92672">=</span> $a<span style="color:#f92672">.</span><span style="color:#e6db74">&#34;&lt;img src=¥&#34;</span><span style="color:#a6e22e">http</span><span style="color:#f92672">://</span><span style="color:#a6e22e">mozshot</span><span style="color:#f92672">.</span><span style="color:#a6e22e">nemui</span><span style="color:#f92672">.</span><span style="color:#a6e22e">org</span><span style="color:#f92672">/</span><span style="color:#a6e22e">shot</span><span style="color:#e6db74">&#34;.</span><span style="color:#e6db74">$thumbUrl[$s]</span><span style="color:#e6db74">.&#34;</span><span style="color:#f92672">?</span><span style="color:#e6db74">&#34;.</span><span style="color:#e6db74">$url</span><span style="color:#e6db74">.&#34;</span><span style="color:#a6e22e">¥</span><span style="color:#e6db74">&#34; width=¥&#34;&#34;.</span><span style="color:#e6db74">$imgSize[$s]</span><span style="color:#e6db74">.&#34;</span><span style="color:#a6e22e">¥</span><span style="color:#e6db74">&#34; height=¥&#34;&#34;.</span><span style="color:#e6db74">$imgSize[$s]</span><span style="color:#e6db74">.&#34;</span><span style="color:#a6e22e">¥</span><span style="color:#e6db74">&#34; alt=¥&#34;&#34;.</span><span style="color:#e6db74">$title</span><span style="color:#e6db74">.&#34;</span><span style="color:#a6e22e">¥</span><span style="color:#e6db74">&#34; /&gt;¥n&#34;</span>; </span></span><span style="display:flex;"><span> $a <span style="color:#f92672">=</span> $a<span style="color:#f92672">.</span><span style="color:#e6db74">&#34;&lt;/a&gt;&lt;/div&gt;¥n&#34;</span> ; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">echo</span> $a; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#75715e">?&gt;</span><span style="color:#960050;background-color:#1e0010"> </span></span></span></code></pre></div><p> </p> <p>上記のfuncｔion.phpをサムネイル表示を使うページindex.phpでインクルードして使う。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#f92672">&lt;?</span><span style="color:#a6e22e">php</span> <span style="color:#66d9ef">include_once</span> $_SERVER[<span style="color:#e6db74">&#39;DOCUMENT_ROOT&#39;</span>]<span style="color:#f92672">.</span><span style="color:#e6db74">&#34;/include/function/function.php&#34;</span>;<span style="color:#75715e">?&gt;</span><span style="color:#960050;background-color:#1e0010"> </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;head&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;title&gt;Mozshotファンクションテスト&lt;/title&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;style type=&#34;text/css&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;!-- </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> #mShot { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> padding: 0px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> margin: 0px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> #mShot .title { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> font-weight: bold; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> #mShot .url { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> font-size: small; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> #mShot img { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> border: none; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">--&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/style&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/head&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;body&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;?php mShot(&#34;http://qwerty.work&#34;,0);?&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;?php mShot(&#34;http://qwerty.work&#34;,1);?&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;?php mShot(&#34;http://qwerty.work&#34;,2);?&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/body&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/html&gt; </span></span></span></code></pre></div><p>このサイト用のCSSを適用しているので、</p> <p>色は違いますが、実際に表示すると</p> <p>の場合</p> <div class="link-card"> <a href="http://qwerty.work" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://qwerty.work" alt="http://qwerty.work" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://qwerty.work</span> <span class="link-card-url">http://qwerty.work</span> </div> </a> </div> <p>の場合</p> <div class="link-card"> <a href="http://qwerty.work" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://qwerty.work" alt="http://qwerty.work" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://qwerty.work</span> <span class="link-card-url">http://qwerty.work</span> </div> </a> </div> <p>の場合</p> <div class="link-card"> <a href="http://qwerty.work" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://qwerty.work" alt="http://qwerty.work" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://qwerty.work</span> <span class="link-card-url">http://qwerty.work</span> </div> </a> </div> <p>となります。</p> <p> </p> <p>参考ページ</p> <div class="link-card"> <a href="http://q.hatena.ne.jp/1145454292#a515779" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://q.hatena.ne.jp/1145454292#a515779" alt="http://q.hatena.ne.jp/1145454292#a515779" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://q.hatena.ne.jp/1145454292#a515779</span> <span class="link-card-url">http://q.hatena.ne.jp/1145454292#a515779</span> </div> </a> </div> <div class="link-card"> <a href="http://d.hatena.ne.jp/steel-plate/20080417/1208445174" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://d.hatena.ne.jp/steel-plate/20080417/1208445174" alt="http://d.hatena.ne.jp/steel-plate/20080417/1208445174" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://d.hatena.ne.jp/steel-plate/20080417/1208445174</span> <span class="link-card-url">http://d.hatena.ne.jp/steel-plate/20080417/1208445174</span> </div> </a> </div> <p>2011/03/01追記</p> <p>指定したURLのタイトルを取得する簡単な方法が見つかったのメモ。</p> <div class="link-card"> <a href="http://hoshiya.biz/blog/2011/03/phpjavascript.php" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://hoshiya.biz/blog/2011/03/phpjavascript.php" alt="http://hoshiya.biz/blog/2011/03/phpjavascript.php" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://hoshiya.biz/blog/2011/03/phpjavascript.php</span> <span class="link-card-url">http://hoshiya.biz/blog/2011/03/phpjavascript.php</span> </div> </a> </div> https://qwerty.work/post/2009/07/mozshotcss/ Sat, 04 Jul 2009 22:31:24 +0900 https://qwerty.work/post/2009/07/mozshotcss/ <h2 id="サムネイルの周りに文字を回り込ませたい">サムネイルの周りに文字を回り込ませたい </h2><p>指定したURLのサムネイルを簡単に表示できる「<a class="link" href="http://mozshot.nemui.org" target="_blank" rel="noopener" >Mozshot</a>」とCSSを組み合わせて、サイトのサムネイル画像の周りに文字を回り込ませて配置する方法をメモ。リンク集のページなどに便利です。</p> <h3 id="ソース例">ソース例 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;style</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/css&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> .imgLeft { float : left ; } /*画像の回り込みの設定*/ </span></span><span style="display:flex;"><span> .clrLeft { clear : both ; } /*文字の回り込みの解除*/ </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/style&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;clrLeft&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;p</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;imgLeft&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;img</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://image.thum.io/get/width/300/crop/200/http://qwerty.work&#34;</span> <span style="color:#a6e22e">alt=</span><span style="color:#e6db74">&#34;QWERTY.WORK&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span> QWERTY.WORK </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span></code></pre></div><h4 id="表示例">表示例 </h4><p>↓↓上記でこうなる↓↓</p> <p>/<em>画像の回り込みの設定</em>/ .imgLeft { float : left ; } /<em>文字の回り込みの解除</em>/ .clrLeft { clear : both ; }</p> <p><img class="gallery-image" data-flex-basis="1440px" data-flex-grow="600" height="50" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://image.thum.io/get/width/300/crop/200/http://qwerty.work" width="300">QWERTY.WORK</p> <h2 id="mozshotはblinkyに変わっていた">MozshotはBlinkyに変わっていた </h2><p>2022/3/22現在、久々に<a class="link" href="http://mozshot.nemui.org" target="_blank" rel="noopener" >Mozshot</a>の公式サイトにアクセスしてみると、<a class="link" href="https://blinky.nemui.org/" target="_blank" rel="noopener" >Blinky</a>という後継サービスに変わっていました。</p> <div class="link-card"> <a href="https://blinky.nemui.org/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://blinky.nemui.org/" alt="https://blinky.nemui.org/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://blinky.nemui.org/</span> <span class="link-card-url">https://blinky.nemui.org/</span> </div> </a> </div> <p>使用方法はほぼ同じです。</p> <div class="link-card"> <a href="https://blinky.nemui.org/usage" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://blinky.nemui.org/usage" alt="https://blinky.nemui.org/usage" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://blinky.nemui.org/usage</span> <span class="link-card-url">https://blinky.nemui.org/usage</span> </div> </a> </div> https://qwerty.work/post/2008/09/mozshot/ Tue, 02 Sep 2008 23:30:20 +0900 https://qwerty.work/post/2008/09/mozshot/ <p>指定のURLのサムネイルをリアルタイムに表示するツール。</p> <p>以下のタグを例に「？」以降にURLを指定してやるだけ！</p> <p>こんなツール待ってました。</p> <p> </p> <div class="link-card"> <a href="http://mozshot.nemui.org/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://mozshot.nemui.org/" alt="http://mozshot.nemui.org/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://mozshot.nemui.org/</span> <span class="link-card-url">http://mozshot.nemui.org/</span> </div> </a> </div> <p> </p> <p>サムネイルの表示の方法もいくつかあるようです。</p> <p>説明のページ↓</p> <div class="link-card"> <a href="http://mozshot.nemui.org/shot/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://mozshot.nemui.org/shot/" alt="http://mozshot.nemui.org/shot/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://mozshot.nemui.org/shot/</span> <span class="link-card-url">http://mozshot.nemui.org/shot/</span> </div> </a> </div> <p>上記ページの内容を参照</p> <p>**- Simple: **   <a class="link" href="https://image.thum.io/get/width/300/crop/200/http://www.google.com/" target="_blank" rel="noopener" >https://image.thum.io/get/width/300/crop/200/http://www.google.com/</a> 　</p> <p>** - Get small (64x64) image: **   <a class="link" href="http://mozshot.nemui.org/shot/small?http://www.google.com/" target="_blank" rel="noopener" >http://mozshot.nemui.org/shot/<strong>small</strong>?http://www.google.com/</a></p> <p>** - Get large (256x256) image: **   <a class="link" href="https://image.thum.io/get/width/300/crop/200/http://www.google.com/" target="_blank" rel="noopener" >http://mozshot.nemui.org/shot/<strong>large</strong>?http://www.google.com/</a></p> <p>** - Get 800x600 image: **   <a class="link" href="http://mozshot.nemui.org/shot/800x600?http://www.google.com/" target="_blank" rel="noopener" >http://mozshot.nemui.org/shot/<strong>800x600</strong>?http://www.google.com/</a></p> <p> **- Set browser window size to 300x300: **   <a class="link" href="http://mozshot.nemui.org/shot/-300x300?http://www.google.com/" target="_blank" rel="noopener" >http://mozshot.nemui.org/shot/<strong>-300x300</strong>?http://www.google.com/</a></p> <p> <strong>- Specify window &amp; image size</strong>:    <a class="link" href="http://mozshot.nemui.org/shot/800x800-800x800?http://www.google.com/" target="_blank" rel="noopener" >http://mozshot.nemui.org/shot/<strong>800x800-800x800</strong>?http://www.google.com/</a></p> <p> </p> <p>更に詳細設定も可能。</p> <div class="link-card"> <a href="http://mozshot.nemui.org/ui/advanced" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://mozshot.nemui.org/ui/advanced" alt="http://mozshot.nemui.org/ui/advanced" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://mozshot.nemui.org/ui/advanced</span> <span class="link-card-url">http://mozshot.nemui.org/ui/advanced</span> </div> </a> </div> <p><a class="link" href="https://image.thum.io/get/width/300/crop/200/uri=http%3A%2F%2Fwww.mozilla.org%2F;noresize=true;win_x=1000;win_y=1000;effect=false;keepratio=true" target="_blank" rel="noopener" >https://image.thum.io/get/width/300/crop/200/uri=http%3A%2F%2Fwww.mozilla.org%2F;noresize=true;win_x=1000;win_y=1000;effect=false;keepratio=true</a></p> <ul> <li><strong>uri</strong>　対象のURL</li> <li><strong>noresize</strong></li> <li><strong>win_x</strong></li> <li><strong>win_y</strong></li> <li><strong>effect</strong>　影の有無　true:あり　false：なし</li> <li><strong>keepratio</strong></li> </ul>