WEB空間の世界へ
ホーム
CLOUD
MENU
ホーム
CLOUD
SIDE
ホーム
manage
userbility
web-info
【リンクシール】ストーンシリーズ
【リンクシール】ストーンシリーズ
2021年2月24日水曜日
manage
userbility
web-info
前回と前々回の投稿でアップしたリンクシールのデザインは、早く形にしたくて、急いで作成したものでした。今回は、自分のブログで本当に使いたいデザインのリンクシートを、ゆっくり考えながら作りました。
リンクシートとは？と思った時は、こちらの記事も合わせてお読みください。
ブログカードの代わりに「リンクシール」で良くない？ | 学んで実践するサイト運営とSEO対策
投稿記事に関係ある WEB ページへのリンクは、テキストリンクからリッチリンクに進化していました。当サイトもブログカード始め、色々と検索して、検討をして来ましたが、共通する些細な問題点がいくつかあり、あれやこれやを使って見ているが、最終的にこれで統一しょうと思うものはまだありませんでした。
【リンクシール】特徴と使い方を説明します。 | 学んで実践するサイト運営とSEO対策
推奨しているのは、ブラウザの拡張機能（アドオン等）を利用して、コピペをすることです。筆者が使っている Chrome の場合は、拡張機能の「Create Link」を先ずインストールして下さい。この拡張機能は安全である事は、多くのユーザーが証明していますので、安心して使っていただえます。
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLcVe5NlxI1RnHkgeL0oAa0HAGfUn0zMIRY7S-YOKLc6Bs7mroUp6VwIuDCACj1irvbDf1ADHMy6N2rIDv0CPgPhCLLuegzwYCsQnPPXF4G0Ics1LyY9Dh6WRiE5Np3ZpTHceF90Ec3HMG/s920/210224-g+stone.jpg" style="background-repeat: no-repeat; background-size: 100% 100%; height: 200px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 51px 80px 0px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 80px 0px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBLT0Tsep2eNOtyQaKbPiDEhhKiL0Z53KxOmLf2H1O8KMlrKOCr7mofKFhq09Q3Totp8i8II1tuyGzNq_WLUPxuLAV6UreGucbwITQueutVAo9npmB9Qt3_tTkd3edbFTeEs7PH1YoOgV/s920/210224-h+stone.jpg" style="background-repeat: no-repeat; background-size: 100% 100%; height: 200px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 51px 80px 0px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 80px 0px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU8arcMwxYA7Vvc2rXLNLGZj7O4Y9AhajJITQ7bG5DuolXIDrshz0X6FKsv-VXaKZ3jDl-RBw8OBgRiWKR_HASp76zFP9GBDq8w8ujKYaeuSzssSR9m1YpVwAg73AyFhRKovZNb1RwSE4Z/s920/210224-i+stone.jpg" style="background-repeat: no-repeat; background-size: 100% 100%; height: 200px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 51px 80px 0px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 80px 0px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7tfURCiwm8u5raS_uEg1xDTDxY_meJAysojKQdIiWDwEnWL5fqngSvtHZREW-8BX84-7pD7ZPwgZGVcnCLvZa4HzGnyM7lwd7Qrlc1FTmNFKM4_uXzjYf0voNI5DVt8DpSMZdKxJibwGe/s920/210224-j+stone.jpg" style="background-repeat: no-repeat; background-size: 100% 100%; height: 200px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 51px 80px 0px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 80px 0px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiPIGhWtj2qdkRN6TMqgTW1aya4Cbk0zwGHTMmoz5N1VeDgZ3DxpbkfoAEr9-eqUD_VxW_q40yqF-B30jtWozghUa5hPYqsa_Re9_CR5JGIcSwfzkfZWhtn5S0E6J1kFKc7ZSXCqzCVTbg/s920/210224-k+stone.jpg" style="background-repeat: no-repeat; background-size: 100% 100%; height: 200px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 51px 80px 0px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 80px 0px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVRCChdZN9TUUpWCL8zxa5uDUl7Ewj17zL2lwNHM88mGE07-k2jNkdMWjPI8DgtFKdkqLdtjMwPLPWyTQaQL3e_SyEZImZFstK0XrFaEVj_FiuqeLWHIY5zF142lSQpBsC-2MHa3Z1U36I/s920/210224-l+stone.jpg" style="background-repeat: no-repeat; background-size: 100% 100%; height: 200px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 51px 80px 0px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 80px 0px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLHhkW7rKAlnjUaAWj9k0aDG9w3ABvTrAacw84JwohYOJDlIfinIK6wYZYOsw2cD9DuQBKB5dUOC-csOC43PPB06-GCdVvykHIrq4r-DAN6hesf_ZbVHfv2uv14Y6zi58GU1XtXDwOlJoc/s920/210224-m+stone.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 25px 35px 0px 50px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 35px 0px 50px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWv7dEH_uSHrCTN_Ko8OSG_v89yAV2OEMuYBPo3psFY3kEdqdgSv8707WD3pPKEqf81NhWuiUa6O8kboTrEOIzBh-uLQ9I1QNtpw7LtPVF5A6ff7DaIBJnRLXQpRfiHa4T9HS4-_wGBH16/s920/210224-n+stone.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 25px 35px 0px 50px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 35px 0px 50px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2hoPVasAHOsEx6YIi-PyHh9Y1bNOZDJ2W-yphGCeUlcyGmF0_srXsX3Jwtg3D2XqEhY35_v10MFuo-qqUWb3PWZjkLyOgk5Ms_8Rg2F7BfaaX9GJ4eyYSeTQ9yZgVsHO77mOPpSa_mBDp/s920/210224-o+stone.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 25px 35px 0px 50px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 35px 0px 50px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NmbclnlFUkDH0PL05RlTE-OHVvjvO1gWRZeG3GdvPbJKfxYQLOoST0KjRXqRSuE3c-tDTLyIARwBPV6DEghN0SSY1EconI-Nwp63-zso2Dl5RuW4foBWY2EITpJtu9-S4nnqm0fkFZBh/s920/210224-p+stone.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 25px 35px 0px 50px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 35px 0px 50px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWdxyp7DQQ05N6m57PUuKh_z0qG0p3oiqo3Wlod_5N6e2LUzADxtXtLArkC3ffbj2BUe_OLI-ebw8qdudiJwdlkkRb48qhnU8_4rgePxmOiYItemFzAgATj5Tb7UqcQse7HKC5AXtYb7i/s920/210224-q+stone.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 25px 35px 0px 50px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 35px 0px 50px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibochLkzrhZaUgmzFFrzeBHQW-U4eFG7j9eoXhuQsu_W7Zq-AzRpU6WLKk3KJoCucEhV3CJffMgc3hl7bVC-Gcf60EBrz1p9K_xKOL2z6ak_Qzff2MrovOzFkHNXO5ZOJq-CLag2k0YIBl/s920/210224-r+stone.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 25px 35px 0px 50px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 35px 0px 50px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpUa-nzV2JrrvlJqVA1nfmypmN2PfWfcAUrB4IQw7t3spf-wsu3RF1lpzDg8Ev2psVAGQc-0xcQjIQNwsUMCyIELYmEbpZPLJ8ifFsESdITr4_cFmf7RgG1KgIxOvkaLzxNRdVIxoR1dOd/s920/210224-s+blockwall.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 25px 35px 0px 85px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 35px 0px 85px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yMmlqpSV0E3RXmriPMfWlo_7bAYW97p69WblgX5fk47WnDP9f_tahVmK8RreS49MV5kz6DA3SJbWr1IvrRufXuvoRvZ-zYB2y7oqs0bif8SN52mcAErLXo-GyUyhKxQEKRgCygXxofiE/s920/210224-t+blockwall.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 25px 35px 0px 85px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 35px 0px 85px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8FeXpiYJtUYWasafbDiJeSL4fQWqfr7d9X93U43KMfYnxOG4eW_EUgG0KEdjwDhjcy0eIv1yOEt4X8CKdBcllKxf7fYhl47cICtSnSLEYmPhq6EotmkKx_5-W08Ji4Cd24ICEwv9ycrA6/s920/210224-u+blockwall.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 25px 35px 0px 85px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 35px 0px 85px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN-WMSXQpD9t4MxXIzVZMDYSpMb9gLvN7heGnxggedXwD7iRDtv3v5_C_i9DKvm88Fufi9oZ6RNmcMBXPdX-OFGkpC6TgbSsV7sQwH6LAsTkGA93PSoftYcbh4AMHL_0wM7u0L65QEKdI6/s920/210224-v+blockwall.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 25px 35px 0px 85px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 35px 0px 85px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6oVL7oPVz-le8KfXnepLjppFo8RFw-gUnlIlmoMyOKi8OaM2PQt3yBfq5GfB8pYu233B74zjFynKaC8kAp4jnAXgeEyKXZ-WrXS8C1a-iL_Uhkgnrozuh9mDnOsQFQgFnfNgmhNPfyY9U/s920/210224-w+blockwall.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 25px 35px 0px 85px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 35px 0px 85px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
CreateLinkにコピペして使うコード
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0p-PubPh5HsRF8p3UvS4LfR3_4_Q7JMiKzbCApTxHNA5G3EH2Hd4QgoXHt0cJXDEZstITcjKC9ipqiop6xDcmmBLDhFbBtpu0_K0mE0ZasG4b4dzucpOJHnKwIwYBzVMCpnJ5KJ4XbkyD/s920/210224-x+blockwall.png" style="background-repeat: no-repeat; background-size: 100% 100%; height: 150px; margin: 0px auto; width: 460px;"> <tbody><tr width="100%"><th style="font-size: 18px; line-height: 1.1em; width: 100%;"><a href="%url%" style="display: block; font-color: black; height: 35px; overflow-y: hidden; padding: 25px 35px 0px 85px; rel: noopener; target: _blank; text-decoration: none;">%title%</a></th></tr> <tr><td style="font-size: 14px; line-height: 1.2em; valign: top;"><a href="%url%" style="display: block; font-color: black; height: 50px; overflow-y: hidden; padding: 5px 35px 0px 85px; rel: noopener; target: _blank; text-decoration: none;">%htmlEscapedText%</a></td></tr> <tr height="100%"><td></td></tr> </tbody></table>
B!
PREV
NEXT
コメント
0 件のコメント :
コメントを投稿
コメント
0 件のコメント :
コメントを投稿