"雑記"カテゴリーの記事一覧
-
×
[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 -
忍者ブログに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でツイッターカードの設定。
他のブログでも設定してみた記録
-
このブログを閉じようかどうしようか悩んでいる。
ひっそり過ぎてPVがない……のは別に構わないが。
ここに書いているような事を別ブログで書こうかと思い始めてる。
理由は……広告。
気にするほどではない事は判ってるけど、どうしても気になってしまう。
Blogger ならば、広告は一切出ない。それが魅力だ。
が、Bloggerはテーマの変更に一苦労な上に上手くいかない。情報も少なくて調べるにも時間がかかる。
一部デザインをどうしても弄れなくて諦めた。
デザインは忍者ブログの方が気に入っている。
が、広告だけがどうしても悩んでしまう。
いや。このブログは長文だし、記事の最後に出るだけなら大丈夫……とも思うのだけれども。
しばらく悩みながら、デザインの変更点を書き連ねようかと思う。