今回はブログにふきだしを入れてみました。
本当にそんなことできるのかにゃ~
おい!出来てるぞ~!すごいにゃ~
石黒さんのブログサポート60を参考にさせていただきました。
いつの間にかそんな技を覚えたのかにゃあ~
まず、(専門家が作成したもの)をコピーして、それを管理画面でデザインCSSに張り付けます。
/* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.fukidashi01::after {background-image:url(画像のURL1);}
.fukidashi02::after {background-image:url(画像のURL2);}
SIROMAさんという人が作りました。
このとき、すでに、ある、記号を消さないように。すこし下にEnterして貼るといいと思います。
右上の利用中のサービスをクリックして、はてなフォトライフをクリックします。
そして写真をアップロードします。このときなるべく顔のアップ写真がいいです。
その写真のリンク(URL)をコピーして
それからデザインCSSを再び開き、一番下の2行の(写真のURL)のところに
貼ります。写真2枚晴れます、1行目と2行目。
そして、記事を書く(または編集)の画面で、右側の+ボタンをクリックして一番下の
定型文貼り付けをクリック→定型文を作成するをクリック、リンクを下の大枠に張り付けて(1行ずつ貼り付けます)定型文を2個作って、
.fukidashi01::after {background-image:url(画像のURL1);}
.fukidashi02::after {background-image:url(画像のURL2);}
タイトルをいれておきます。なんでもいいです。
それで準備完了です。
定型文の貼り付けをクリックしてタイトルをクリックして、編集みたままで言葉を入力します。プレビューで確認すると、写真とふきだしがあらわれます。
ちょっと難しいですが、僕でも出来ました。
詳しくは、ブログサポート60動画付きを見ると割と簡単にできます。
SIROMAさんのブログも紹介しておきます。
最後までお読み下さり、ありがとうございます。
こちらも、紹介しておきます。
すこしずつカスタマイズを覚えていきます。メインブログのほうもよろしくお願いします。
「PR」
☆・・…───────┼
愛猫が喜ぶ美味しさで驚きの食いつき!
カナガンキャットフード チキン
カナガンキャットフード サーモン
☆・・…───────┼
「えっ、うちの子こんなに食べるの!?」
ネコちゃんが大好きなチキンやサーモンをたっぷり配合した
美味しさバツグンのプレミアムキャットフードです。
愛猫の食事、
こんなお悩みございませんか…?
 ̄V ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
◎ドライフードは食いつきがあまりよくない…
◎すぐに食べ飽きてしまう…
◎何匹も飼っているからフード選びが大変…
愛猫の健康と幸せを叶えるためには
毎日美味しく食べてくれる栄養満点なフードを選びたいですよね。
そこで!
「美味しい」と「健康に良い」の両方を叶えたキャットフード
『カナガンキャットフード チキン』と『カナガンキャットフード サーモン』をご紹介します!
─・─・─・─・─・─・─・─・─・─・
◆お肉やお魚をたっぷり60%以上配合!
『カナガン』はお肉・お魚が大好きなネコちゃんに嬉しいチキンやサーモンをたっぷり配合したフードです。
原材料の60%以上がチキンお肉・お魚の高タンパクなレシピを実現し、
袋を開けた瞬間に広がるチキンやサーモンの香りで食いつきが変わります♪
─・─・─・─・─・─・─・─・─・─・
◆安心のグレインフリー(穀物不使用)で体にやさしい
多くのキャットフードにはトウモロコシや小麦などの穀物が含まれています。
しかし本来肉食動物であるネコちゃんは穀物を上手に消化吸収することができないので、過剰に摂取してしまうと体に負担がかかってしまいます。
カナガンはネコちゃんの体にやさしいグレインフリー(穀物不使用)。
穀物の代わりに上質な食物繊維源であるサツマイモやエンドウ豆を配合し
体に優しく美味しいレシピに仕上がっています。
─・─・─・─・─・─・─・─・─・─・
◆ネコちゃんに不要な香料・着色料不使用!
カナガンはネコちゃんに不要な香料・着色料を一切使っていません。
たっぷり使った上質なチキンやサーモンが芳醇な香りを出してくれるので、
香りをよくするための香料を使う必要がないのです。
愛猫の健康に悪影響を及ぼすような添加物を徹底的に排除したクリーンなレシピです。
─・─・─・─・─・─・─・─・─・─・
イギリス産プレミアムキャットフードとして
世界中の愛猫家から絶賛されているカナガンをぜひ一度お試しください!
▼▽▼『カナガンキャットフード チキン』&『カナガンキャットフード サーモン』▼▽▼
↓↓↓詳しい内容・お申込みはこちらから↓↓↓
https://px.a8.net/svt/ejp?a8mat=3TFH76+6DTCAA+3J8+NUES3