-
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
-
リンクカードも設定してみた。
こんなの↓
より美しいHTMLをシェアしよう｜ShareHtmlを、もっと綺麗にしたメーカー
ブログ記事内で他サイトリンクをサムネイル（アイキャッチ画像）付きで表示するためのブログパーツです。デザインが洗練されているツールがなかったので作りました。より美しいHTMLをシェアできる、ShareHtmlを、もっと綺麗にしたメーカーです。
これを 表示させるには……。
デザインからCSSを弄る。一番下に↓これ追加/*-----リンクカード----*/
影付きボックスです。影の色は
.link-box { border:1px solid #e1e1e1;
padding:10px;
display:flex;
margin:10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.link-box:hover {
background-color:#f3f3f3;
-webkit-transition:background-color .35s;
transition:background-color .35s;
}
.img-box {
width:35%;
float:left;
}
.img-box div {
min-height:150px;
background-size:cover;
background-position:center center;
}
.text-box {
width:65%;
float:left;
padding-left:20px;
line-height:1.7;
margin:0;
}
.text-box .title {
font-size:18px;
font-weight:600;
color:#428bca;
padding:0;
margin:0;
}
.text-box .description {
font-size:15px;
color:#777777;
padding:0;
margin:0;
}
@media only screen and (max-width:767px) {
.img-box div {
min-height:80px;
}
.text-box {
margin-left:2px;
line-height:1.5;
}
.text-box .title {
font-size:11px;
margin:0;
}
.text-box .description {
font-size:9px;
margin-top:5px;
}
}
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
↑この辺りで変更可能です。私は(255, 215, 0, 0.75);にしています。
他にも背景色とかタイトルの色を変えてます。
どこかから拝借したデザインだと思うけれど、どこからなのか忘れてしまった……。
調べたら、他のデザインも出てくるかも。
これを付け加えた後に、上記のリンク先にリンクしたいURLを入れる。
出てきた、HTMLをブログ記事に張り付けで完成。
……この手順を忘れそうになる。
おまけ。
このブログのリンクカード。
空歌童心
『書く』『考える』『楽しむ』｜空歌童心
PR -
ファビコンを付けてみた。
昔作ったものをそのまま……と思ったけれど、今は変わってしまったらしい。
なので、作り直した。
何が変わったかと言えば、「スマホ用アイコン」が出てきた。
私がファビコンを作った時はPCだけだったのが、今はスマホ用まで用意出来るらしい。
で、いろいろ調べた結果。
参考にしたサイト↓
ホームページのタブ画像作成と設定まとめ
昔作ったアイコンも使えそうだけれども、今、使えるものにするために作り直し。
作った画像を↓このサイトで増殖。
様々なファビコンを一括生成。favicon generator
https://ao-system.net/favicongenerator/
必要なファイルを忍者ブログにアップロード。
下記を<head>の後に
<link rel="icon" type="image/x-icon" href=".アイコンのURL.ico"><link rel="apple-touch-icon" sizes="180x180" href="アイコンのURL.png">
これだけ、載せる事にした。
……調べたら、無駄に種類が多かったけれど、たぶん、この二つだけで間に合うだろうと。
ファイル形式も一応、「ico」にしてみたけれど、「png」対応にもなってきているらしい。
数年後にはpngで作り直しかもしれない。
忍者ブログは「ico」ファイルのアプロードも出来るので、助かった。
ジュゲムさんは出来なくて…どこにアップしようか散々迷った。
ファビコンに必要なのは
：アイコン画像
：アイコン画像のアップロード場所
：タグ
の３つ。
無くても困らないケド、あるとちょっとだけ目立つアイコン。
このブログのアイコンは……元のサイトの「時の交差点」から…十字架があるならバッテンも作っておこう。
と、作っておいたもの……使った事が無かった。
何だか風車みたい……と、今更思ってる。 -
忍者ブログにOGP設定をしてみた。
ジュゲムでは結局、上手く行かなかった。
このサイトを参考にさせてもらった。
<!--/*OGP設定*/--><!--if_entry--><!--entry--><meta name="twitter:card" content="カード種類"><meta name="twitter:site" content="@ユーザー名"><meta property="og:url" content="<!--$g_page_url-->" /><meta property="og:title" content="<!--$g_page_title--> | <!--$g_title-->" /><meta property="og:description" content="<!--$g_explanation-->" /><!--if_entry_image--><meta property="og:image" content="<!--$entry_image-->" /><!--/if_entry_image--><!--if_not_entry_image--><meta property="og:image" content="デフォルトのサムネイル画像のURL"><meta name="twitter:image" content="デフォルトのサムネイル画像のURL"><!--/if_not_entry_image--><!--/entry--><!--/if_entry--><!--if_toppage--><meta name="twitter:card" content="カード種類"><meta name="twitter:site" content="@ユーザー名><meta property="og:url" content="<!--$g_url-->" /><meta property="og:title" content="<!--$g_title-->"><meta property="og:description" content="<!--$g_explanation-->"><meta property="og:image" content="デフォルトのサムネイル画像のURL"><meta name="twitter:image" content="デフォルトのサムネイル画像のURL"><!--/if_toppage--><!--/*OGP設定*/-->
カード種類には、summaryかsummary_large_imageらしいです。
私はsummaryにしてます。
<!--if_entry-->は記事のページだったら……という事のようです。
私はページ設定を使って、トップページを少し変えていたので、
<!--/if_toppage-->を<!--/if_not_toppage-->に変えて設定してました。
この辺りはブログデザインに合わせて、変えた方がよさそうです。
たぶんこれで上手く行くはず……ハズ。
ジュゲムブログでツイッターカードの設定。
Bloggerでツイッターカードの設定。
他のブログでも設定してみた記録
