Advertisement

<h1 style&equals;"-webkit-transform&colon; rotate&lpar;-3deg&rpar;&semi;-moz-transform&colon; rotate&lpar;-3deg&rpar;&semi;transform&colon; rotate&lpar;-3deg&rpar;&semi;-o-transform&colon; rotate&lpar;-3deg&rpar;&semi;-ms-transform&colon;rotate&lpar;-3deg&rpar;&semi;border-bottom&colon;solid 2px &num;cd8c5c&semi;width&colon;100&percnt;&semi;color&colon;&num;cd8c5c&semi;font-size&colon;18pt&semi;padding-bottom&colon;5px&semi;margin-bottom&colon;30px&semi;">ただの見た目の問題なんですが…<&sol;h1>&NewLine;<p><span style&equals;"color&colon;&num;848484">ブログを始めて、ブログをチョコチョコとイジるようになったけど、まだまだ分からないことだらけ。<&sol;span><&sol;p>&NewLine;<p>ようやく記事が100件に近づいてきた、ブログ初心者の婿どの<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>(<a href&equals;"http&colon;&sol;&sol;twitter&period;com&sol;immukodono"><i class&equals;"fab fa-twitter"><&sol;i>immukodono<&sol;a>)です!<&sol;p>&NewLine;<p>実は、<br &sol;>&NewLine;アプリを紹介するために今まで使っていた【ポチレバ】というサービスが、このブログだと<strong>バランス良く表示されない問題<&sol;strong>に悩まされてきました。<&sol;p>&NewLine;<p>そこで今回は、違うブログパーツを使ってみましたよ、という記事です。<&sol;p>&NewLine;<p><&sol;p>&NewLine;<div style&equals;"background&colon; &num;a3b9e0&semi; padding&colon; 5px 10px&semi; color&colon; &num;f7fcfe&semi; border-radius&colon; 10px 10px 0 0&semi;"><b><span style&equals;"font-size &colon; 12pt"> この記事をザックリ<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>まとめると…<&sol;span><&sol;b><&sol;div>&NewLine;<div style&equals;"background&colon; &num;f7fcfe&semi; padding&colon; 10px&semi; border&colon; 2px solid &num;a3b9e0&semi; border-radius&colon; 0 0 10px 10px&semi;">&NewLine;<ul>&NewLine;<li>LION MEDIA使用の婿どの<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>、デザインが崩れちゃうの巻<&sol;li>&NewLine;<li>ポチレバだとどうしてもうまく表示できなかった<&sol;li>&NewLine;<li>アプリーチだとCSS装飾でいい感じに対応出来そう<&sol;li>&NewLine;<li>アプリ紹介はブログのユーザビリティに効果あるはず<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;div>&NewLine;<p><&sol;p>&NewLine;<p><&excl;--TOC--><br &sol;>&NewLine;&lbrack;adchord&rsqb;<&sol;p>&NewLine;<h2>ポチレバとは<&sol;h2>&NewLine;<p>【ポチレバ】は、アプリを紹介するブログパーツで、<a href&equals;"http&colon;&sol;&sol;www&period;wakatta-blog&period;com&sol;20&period;html">わかったブログのかん吉さん <i class&equals;"fas fa-external-link-alt"><&sol;i> <&sol;a> が開発した、超スーパーなサービスです。<&sol;p>&NewLine;<p>姉妹サービスの【カエレバ】は、<br &sol;>&NewLine;量販品を紹介するブログパーツとして、多くのブロガーにアフィリエイトの恩恵を与え続けています。<&sol;p>&NewLine;<p>婿どの<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>はアフィリエイトに関して全然ダメでけどね!<&sol;p>&NewLine;<p>そんな超アメイジングなサービスなんですが、婿どのブログでは、うまく表示されてくれません。<&sol;p>&NewLine;<p>本来はこう<i class&equals;"far fa-hand-point-down"><&sol;i><&sol;p>&NewLine;<p><img alt&equals;"ポチレバの正しい表示のされ方" src&equals;"https&colon;&sol;&sol;xn--p9jk9143a&period;tokyo&sol;wp-content&sol;uploads&sol;2019&sol;03&sol;20190316034544&period;jpg"&sol;><&sol;p>&NewLine;<p>このように表示されればシンプルでいい感じなのですが、<&sol;p>&NewLine;<p>婿どの<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>のブログの場合こういう感じになってしまいます<i class&equals;"far fa-hand-point-down"><&sol;i><&sol;p>&NewLine;<div class&equals;"pochireba" style&equals;"text-align&colon;left&semi;font-size&colon;small&semi;padding&colon;20px 0&semi;zoom&colon; 1&semi;overflow&colon; hidden&semi;">&NewLine;<div class&equals;"kaerebalink-image"><a href&equals;"https&colon;&sol;&sol;itunes&period;apple&period;com&sol;jp&sol;app&sol;wish-&percnt;E3&percnt;82&percnt;B7&percnt;E3&percnt;83&percnt;A7&percnt;E3&percnt;83&percnt;83&percnt;E3&percnt;83&percnt;94&percnt;E3&percnt;83&percnt;B3&percnt;E3&percnt;82&percnt;B0&percnt;E3&percnt;82&percnt;92&percnt;E3&percnt;82&percnt;82&percnt;E3&percnt;81&percnt;A3&percnt;E3&percnt;81&percnt;A8&percnt;E6&percnt;A5&percnt;BD&percnt;E3&percnt;81&percnt;97&percnt;E3&percnt;81&percnt;8F&sol;id530621395&quest;mt&equals;8&&num;038&semi;uo&equals;4&&num;038&semi;at&equals;1000lmK9" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer"><img src&equals;"https&colon;&sol;&sol;is2-ssl&period;mzstatic&period;com&sol;image&sol;thumb&sol;Purple125&sol;v4&sol;9e&sol;47&sol;58&sol;9e475875-195b-21d2-6b0b-6e16ebd10cd7&sol;source&sol;60x60bb&period;jpg" width&equals;"60" height&equals;"60" style&equals;"float&colon;left&semi;margin&colon;0 15px 0 0&semi;width&colon;60px&semi;height&colon;60px&semi;" class&equals;"pochi&lowbar;img" ><&sol;a><&sol;div>&NewLine;<div class&equals;"pochi&lowbar;info" style&equals;"text-align&colon;left&semi;zoom&colon; 1&semi;overflow&colon; hidden&semi;">&NewLine;<div class&equals;"pochi&lowbar;name"><a href&equals;"https&colon;&sol;&sol;itunes&period;apple&period;com&sol;jp&sol;app&sol;wish-&percnt;E3&percnt;82&percnt;B7&percnt;E3&percnt;83&percnt;A7&percnt;E3&percnt;83&percnt;83&percnt;E3&percnt;83&percnt;94&percnt;E3&percnt;83&percnt;B3&percnt;E3&percnt;82&percnt;B0&percnt;E3&percnt;82&percnt;92&percnt;E3&percnt;82&percnt;82&percnt;E3&percnt;81&percnt;A3&percnt;E3&percnt;81&percnt;A8&percnt;E6&percnt;A5&percnt;BD&percnt;E3&percnt;81&percnt;97&percnt;E3&percnt;81&percnt;8F&sol;id530621395&quest;mt&equals;8&&num;038&semi;uo&equals;4&&num;038&semi;at&equals;1000lmK9" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer">Wish &&num;8211&semi; ショッピングをもっと楽しく<&sol;a><&sol;div>&NewLine;<div class&equals;"pochi&lowbar;price" style&equals;"display&colon;inline&semi;">無料<&sol;div>&NewLine;<div class&equals;"pochi&lowbar;time" style&equals;"font-size&colon;x-small&semi;display&colon;inline&semi;">&lpar;2018&period;10&period;26時点&rpar;<&sol;div>&NewLine;<p>&nbsp&semi;<a href&equals;"https&colon;&sol;&sol;itunes&period;apple&period;com&sol;jp&sol;app&sol;wish-&percnt;E3&percnt;82&percnt;B7&percnt;E3&percnt;83&percnt;A7&percnt;E3&percnt;83&percnt;83&percnt;E3&percnt;83&percnt;94&percnt;E3&percnt;83&percnt;B3&percnt;E3&percnt;82&percnt;B0&percnt;E3&percnt;82&percnt;92&percnt;E3&percnt;82&percnt;82&percnt;E3&percnt;81&percnt;A3&percnt;E3&percnt;81&percnt;A8&percnt;E6&percnt;A5&percnt;BD&percnt;E3&percnt;81&percnt;97&percnt;E3&percnt;81&percnt;8F&sol;id530621395&quest;mt&equals;8&&num;038&semi;uo&equals;4&&num;038&semi;at&equals;1000lmK9" style&equals;"width&colon;60px&semi;color&colon;&num;ffffff&semi;background&colon;&num;000000&semi;font-size&colon;8px&semi;font-weight&colon;bold&semi;text-align&colon;center&semi;display&colon;inline&semi;text-decoration&colon;none&semi;border&colon;0px&semi;padding&colon;2px&semi;border-radius&colon;5px&semi;white-space&colon;nowrap&semi;" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer">App Store<&sol;a><&sol;p>&NewLine;<div class&equals;"pochi&lowbar;seller"><a href&equals;"https&colon;&sol;&sol;itunes&period;apple&period;com&sol;jp&sol;developer&sol;contextlogic-inc&sol;id530621398&quest;uo&equals;4&&num;038&semi;at&equals;1000lmK9" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer">ContextLogic Inc&period;<&sol;a><&sol;div>&NewLine;<div class&equals;"pochi&lowbar;post" style&equals;"font-size&colon;x-small&semi;">posted with <a href&equals;"http&colon;&sol;&sol;pochireba&period;com" rel&equals;"nofollow noopener noreferrer" target&equals;"&lowbar;blank">ポチレバ<&sol;a><&sol;div>&NewLine;<&sol;div>&NewLine;<div class&equals;"pochireba-footer" style&equals;"clear&colon; left"><&sol;div>&NewLine;<&sol;div>&NewLine;<p>微妙にガタガタしてる感じ。<&sol;p>&NewLine;<h2>CSSカスタムもしてみた<&sol;h2>&NewLine;<p>そこで、CSS装飾も試してみました&lpar;๑•̀ㅁ•́๑&rpar;✧<&sol;p>&NewLine;<p>&NewLine;<center><span style&equals;"color&colon;&num;848484"><i class&equals;"fas fa-angle-double-down faa-shake animated"><&sol;i> こちらを参考にしました! <i class&equals;"fas fa-angle-double-down faa-shake animated"><&sol;i><&sol;span><&sol;center><div class&equals;"linkcard"><div class&equals;"lkc-external-wrap"><a class&equals;"lkc-link no&lowbar;icon" href&equals;"http&colon;&sol;&sol;vdeep&period;net&sol;pochireba-css" data-lkc-id&equals;"85" target&equals;"&lowbar;blank" rel&equals;"external noopener"><div class&equals;"lkc-card"><div class&equals;"lkc-info"><div class&equals;"lkc-favicon"><img src&equals;"https&colon;&sol;&sol;www&period;google&period;com&sol;s2&sol;favicons&quest;domain&equals;vdeep&period;net" alt&equals;"" width&equals;"16" height&equals;"16" &sol;><&sol;div><div class&equals;"lkc-domain">vdeep<&sol;div><div class&equals;"lkc-share"> <div class&equals;"lkc-sns-fb">2 Shares<&sol;div> <div class&equals;"lkc-sns-hb">5 Users<&sol;div> <div class&equals;"lkc-sns-po">8 Pockets<&sol;div><&sol;div><&sol;div><div class&equals;"lkc-content"><figure class&equals;"lkc-thumbnail"><img class&equals;"lkc-thumbnail-img" src&equals;"&sol;&sol;xn--p9jk9143a&period;tokyo&sol;wp-content&sol;uploads&sol;pz-linkcard&sol;cache&sol;b19b4414c538d381d123bf908cbd73f7ae5dd7ad6b63b708e2a07793f0e43787&period;jpeg" width&equals;"100px" height&equals;"108px" alt&equals;"" &sol;><&sol;figure><div class&equals;"lkc-title">ポチレバをCSSで装飾してみた<&sol;div><div class&equals;"lkc-url" title&equals;"http&colon;&sol;&sol;vdeep&period;net&sol;pochireba-css">http&colon;&sol;&sol;vdeep&period;net&sol;pochireba-css<&sol;div><&sol;div><div class&equals;"clear"><&sol;div><&sol;div><&sol;a><&sol;div><&sol;div><br &sol;>&NewLine;<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;vdeep&period;net&sol;pochireba-css">vdeep <i class&equals;"fas fa-external-link-alt"><&sol;i> <&sol;a> さんの記事でご紹介されているCSSを追記してみました!<&sol;p>&NewLine;<p>するとこんな感じ。<&sol;p>&NewLine;<p><img alt&equals;"LION MEDIAだとCSS装飾してもポチレバがバランス崩れてしまいうまく表示されないのら" src&equals;"https&colon;&sol;&sol;xn--p9jk9143a&period;tokyo&sol;wp-content&sol;uploads&sol;2019&sol;03&sol;20190318050322&period;jpg"&sol;><&sol;p>&NewLine;<p>サムネがちっちゃくなっちゃう。<&sol;p>&NewLine;<p>しかも左寄せで表示されます。<&sol;p>&NewLine;<p>色々イジってみたりしましたが、何者かが画像の表示を邪魔しているみたいでうまく表示されませんでした。<&sol;p>&NewLine;<p>使っているテーマのせいかもしれません。<&sol;p>&NewLine;<p>婿どの<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>は【<strong>LION MEDIA<&sol;strong>】というテーマを使っています。<&sol;p>&NewLine;<p><strong>同じ事で悩んでる方いませんかねぇ??<&sol;strong><&sol;p>&NewLine;<p>これに何時間も使ってしまったので、諦めて他にアプリを紹介する術は無いのか調べてみたところ、【アプリーチ】というファンタスティックなサービスを発見しました!<&sol;p>&NewLine;<h2>アプリーチとは<&sol;h2>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;mama-hack&period;com&sol;app-reach&sol;">アプリーチ <i class&equals;"fas fa-external-link-alt"><&sol;i> <&sol;a> はアプリを紹介するブログパーツを作成してくれるサービスです!<&sol;p>&NewLine;<p>ポチレバとの違いは『App Store』のみならず『Google Play』へのリンクも作ってくれるところとデザインです&lpar;&Breve;ω&Breve;&rpar;<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;mama-hack&period;com">ままはっく <i class&equals;"fas fa-external-link-alt"><&sol;i> <&sol;a> を運営する<b>まなしば<&sol;b>(<a href&equals;"https&colon;&sol;&sol;twitter&period;com&sol;manami1030"><i class&equals;"fab fa-twitter"><&sol;i>manami1030<&sol;a>)さんの旦那さんが開発したサービスです、たしか。<&sol;p>&NewLine;<h3>アプリーチだとこのように表示される(はず)<&sol;h3>&NewLine;<p><img alt&equals;"アプリーチの正しい表示のされ方" src&equals;"https&colon;&sol;&sol;xn--p9jk9143a&period;tokyo&sol;wp-content&sol;uploads&sol;2019&sol;03&sol;20190319014217&period;jpg"&sol;><&sol;p>&NewLine;<p>スッキリいい感じに表示されますね!<&sol;p>&NewLine;<p>&NewLine;<center><span style&equals;"color&colon;&num;848484"><i class&equals;"fas fa-angle-double-down faa-shake animated"><&sol;i> アプリーーーチ <i class&equals;"fas fa-angle-double-down faa-shake animated"><&sol;i><&sol;span><&sol;center><div class&equals;"linkcard"><div class&equals;"lkc-external-wrap"><a class&equals;"lkc-link no&lowbar;icon" href&equals;"http&colon;&sol;&sol;mama-hack&period;com&sol;app-reach&sol;" data-lkc-id&equals;"86" target&equals;"&lowbar;blank" rel&equals;"external noopener"><div class&equals;"lkc-card"><div class&equals;"lkc-info"><div class&equals;"lkc-favicon"><img src&equals;"https&colon;&sol;&sol;www&period;google&period;com&sol;s2&sol;favicons&quest;domain&equals;mama-hack&period;com" alt&equals;"" width&equals;"16" height&equals;"16" &sol;><&sol;div><div class&equals;"lkc-domain">アプリーチ<&sol;div><div class&equals;"lkc-share"> <div class&equals;"lkc-sns-x">116 Posts<&sol;div> <div class&equals;"lkc-sns-fb">37 Shares<&sol;div> <div class&equals;"lkc-sns-hb">92 Users<&sol;div> <div class&equals;"lkc-sns-po">159 Pockets<&sol;div><&sol;div><&sol;div><div class&equals;"lkc-content"><figure class&equals;"lkc-thumbnail"><img class&equals;"lkc-thumbnail-img" src&equals;"&sol;&sol;xn--p9jk9143a&period;tokyo&sol;wp-content&sol;uploads&sol;pz-linkcard&sol;cache&sol;12bc40154290e28b0a5c244a370471b32b578271f3455fa6fadbba689c5f43b0&period;jpeg" width&equals;"100px" height&equals;"108px" alt&equals;"" &sol;><&sol;figure><div class&equals;"lkc-title">アプリーチ<&sol;div><div class&equals;"lkc-url" title&equals;"http&colon;&sol;&sol;mama-hack&period;com&sol;app-reach&sol;">http&colon;&sol;&sol;mama-hack&period;com&sol;app-reach&sol;<&sol;div><&sol;div><div class&equals;"clear"><&sol;div><&sol;div><&sol;a><&sol;div><&sol;div><br &sol;>&NewLine;<&sol;p>&NewLine;<p>しかし、やはり婿どの<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>のブログの場合、やはり画像が変になってしまいます<i class&equals;"far fa-hand-point-down"><&sol;i><&sol;p>&NewLine;<p><img alt&equals;"LION MEDIAだとアプリーチもバランス崩れてしまいうまく表示されないのらのら" src&equals;"https&colon;&sol;&sol;xn--p9jk9143a&period;tokyo&sol;wp-content&sol;uploads&sol;2019&sol;03&sol;20190319014221&period;jpg"&sol;><&sol;p>&NewLine;<p>そこでCSS装飾の力をお借りして、アプリーチをよく見せようとあがいてました。<&sol;p>&NewLine;<h2>アプリーチをCSS装飾してみた<&sol;h2>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;hituji-affiliate&period;com&sol;">ひつじアフィリエイト <i class&equals;"fas fa-external-link-alt"><&sol;i> <&sol;a> の<b>ひつじ&male;<&sol;b>(<a href&equals;"https&colon;&sol;&sol;twitter&period;com&sol;hituji&lowbar;1234"><i class&equals;"fab fa-twitter"><&sol;i>hituji&lowbar;1234<&sol;a>)さんが、作成し無料配布して下さっているCSSを使いました!!<&sol;p>&NewLine;<p>&NewLine;<center><span style&equals;"color&colon;&num;848484"><i class&equals;"fas fa-angle-double-down faa-shake animated"><&sol;i> アプリーーーチのCSS装飾はこちら <i class&equals;"fas fa-angle-double-down faa-shake animated"><&sol;i><&sol;span><&sol;center><div class&equals;"linkcard"><div class&equals;"lkc-external-wrap"><a class&equals;"lkc-link no&lowbar;icon" href&equals;"http&colon;&sol;&sol;hituji-affiliate&period;com&sol;app-reach&sol;" data-lkc-id&equals;"87" target&equals;"&lowbar;blank" rel&equals;"external noopener"><div class&equals;"lkc-card"><div class&equals;"lkc-info"><div class&equals;"lkc-favicon"><img src&equals;"https&colon;&sol;&sol;www&period;google&period;com&sol;s2&sol;favicons&quest;domain&equals;hituji-affiliate&period;com" alt&equals;"" width&equals;"16" height&equals;"16" &sol;><&sol;div><div class&equals;"lkc-domain">アフィリエイトの始め方|初心者が月5万稼ぐ方法をすべて公開!<&sol;div><div class&equals;"lkc-share"> <div class&equals;"lkc-sns-hb">2 Users<&sol;div> <div class&equals;"lkc-sns-po">30 Pockets<&sol;div><&sol;div><&sol;div><div class&equals;"lkc-content"><figure class&equals;"lkc-thumbnail"><img class&equals;"lkc-thumbnail-img" src&equals;"https&colon;&sol;&sol;s&period;wordpress&period;com&sol;mshots&sol;v1&sol;http&percnt;3A&percnt;2F&percnt;2Fhituji-affiliate&period;com&percnt;2Fapp-reach&percnt;2F&quest;w&equals;100" width&equals;"100px" height&equals;"108px" alt&equals;"" &sol;><&sol;figure><div class&equals;"lkc-title">【コピペで完成】アプリーチのデザインCSS配布!全7種類用意したのでお好みをどう&period;&period;&period;<&sol;div><div class&equals;"lkc-url" title&equals;"http&colon;&sol;&sol;hituji-affiliate&period;com&sol;app-reach&sol;">http&colon;&sol;&sol;hituji-affiliate&period;com&sol;app-reach&sol;<&sol;div><&sol;div><div class&equals;"clear"><&sol;div><&sol;div><&sol;a><&sol;div><&sol;div><br &sol;>&NewLine;<&sol;p>&NewLine;<p>実装したのはこちらの『デザインパターン4』<i class&equals;"far fa-hand-point-down"><&sol;i><&sol;p>&NewLine;<div class&equals;"wp-caption"><img src&equals;"https&colon;&sol;&sol;xn--p9jk9143a&period;tokyo&sol;wp-content&sol;uploads&sol;2019&sol;03&sol;20190319014226&period;jpg"&sol;><&sol;p>&NewLine;<p class&equals;"wp-caption-text">ひつじアフィリエイトさんから画像引用しました<&sol;p>&NewLine;<&sol;div>&NewLine;<p>とってもオシャレでいい感じですね〜<&sol;p>&NewLine;<p>でもやはり、婿どの<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>のブログでは画像の位置がおかしい…<&sol;p>&NewLine;<p>でもデザイン的に画像さえ中央寄せになればいけそうだったので、<&sol;p>&NewLine;<p>画像とアプリ説明の部分が中央にくるよう、CSSを少し書き換えました&lpar; &DiacriticalAcute;&lowbar;ゝ&grave;&rpar;<&sol;p>&NewLine;<p>左寄せ(<span style&equals;"color&colon;&num;ec6d71&semi; font-weight&colon; bolder&semi;">left<&sol;span>)になっている部分を中央寄せ(<span style&equals;"color&colon;&num;ec6d71&semi; font-weight&colon; bolder&semi;">center<&sol;span>)に変更しただけですが!<&sol;p>&NewLine;<pre><code> &NewLine;&sol;&ast;&ast;&ast;あぷりーち&ast;&ast;&ast;&sol; &NewLine;&period;appreach&lbrace; &NewLine;border-top&colon;3px solid &num;043d78&semi;&sol;&ast;上線の色&ast;&sol; &NewLine;border-bottom&colon;3px solid &num;043d78&semi;&sol;&ast;下線の色&ast;&sol; &NewLine;&rcub; &NewLine;&period;appreach &lbrace; &NewLine;text-align&colon; <span style&equals;"color&colon;&num;ec6d71&semi; font-weight&colon; bolder&semi;">center<&sol;span>&semi; &NewLine;padding&colon; 25px&semi; &NewLine;margin&colon;20px&semi; &NewLine;overflow&colon; hidden&semi; &NewLine;&rcub; &NewLine;&period;appreach&colon;after &lbrace; &NewLine;content&colon; ""&semi; &NewLine;display&colon; block&semi; &NewLine;clear&colon; both&semi; &NewLine;&rcub; &NewLine;&period;appreach img&comma; &NewLine;&period;appreach p &lbrace; &NewLine;margin&colon; 0&semi; &NewLine;padding&colon;0&semi; &NewLine;&rcub; &NewLine;&period;appreach a&colon;after &lbrace; &NewLine;display&colon; none&semi; &NewLine;&rcub; &NewLine;&period;appreach&lowbar;&lowbar;icon &lbrace; &NewLine;float&colon; <span style&equals;"color&colon;&num;ec6d71&semi; font-weight&colon; bolder&semi;">center<&sol;span>&semi; &NewLine;border-radius&colon; 10&percnt;&semi; &NewLine;overflow&colon; hidden&semi; &NewLine;margin&colon; 0 3&percnt; 0 0 &excl;important&semi; &NewLine;width&colon; 25&percnt; &excl;important&semi; &NewLine;height&colon; auto &excl;important&semi; &NewLine;max-width&colon; 120px &excl;important&semi; &NewLine;&rcub; &NewLine;&period;appreach&lowbar;&lowbar;detail &lbrace; &NewLine;display&colon; inline-block&semi; &NewLine;font-size&colon; 20px&semi; &NewLine;line-height&colon; 1&period;5&semi; &NewLine;width&colon; 90&percnt;&semi; &NewLine;max-width&colon; 90&percnt;&semi; &NewLine;&rcub; &NewLine;&period;appreach&lowbar;&lowbar;detail&colon;after &lbrace; &NewLine;content&colon; ""&semi; &NewLine;display&colon; block&semi; &NewLine;clear&colon; both&semi; &NewLine;&rcub; &NewLine;p&period;appreach&lowbar;&lowbar;name &lbrace; &NewLine;font-size&colon; 16px&semi; &NewLine;color&colon;&num;555&semi; &NewLine;padding-bottom&colon;10px&semi; &NewLine;font-weight&colon;bold&semi; &NewLine;line-height&colon; 1&period;5em &excl;important&semi; &NewLine;max-height&colon; 3em&semi; &NewLine;overflow&colon; hidden&semi; &NewLine;&rcub; &NewLine;&period;appreach&lowbar;&lowbar;info &lbrace; &NewLine;font-size&colon; 12px &excl;important&semi; &NewLine;color&colon;&num;888&semi; &NewLine;&rcub; &NewLine;&period;appreach&lowbar;&lowbar;info a&lbrace; &NewLine;color&colon;&num;aaa&semi; &NewLine;&rcub; &NewLine;&period;appreach&lowbar;&lowbar;developper&comma; &period;appreach&lowbar;&lowbar;price &lbrace; &NewLine;margin-right&colon; 0&period;5em&semi; &NewLine;&rcub; &NewLine;&period;appreach&lowbar;&lowbar;posted a &lbrace; &NewLine;margin-left&colon; 0&period;5em&semi; &NewLine;&rcub; &NewLine;&period;appreach&lowbar;&lowbar;links &lbrace; &NewLine;float&colon; <span style&equals;"color&colon;&num;ec6d71&semi; font-weight&colon; bolder&semi;">center<&sol;span>&semi; &NewLine;height&colon; 40px&semi; &NewLine;margin-top&colon; 15px&semi; &NewLine;white-space&colon; nowrap&semi; &NewLine;&rcub; &NewLine;&period;appreach&lowbar;&lowbar;aslink img &lbrace; &NewLine;margin-right&colon; 10px&semi; &NewLine;height&colon; 40px&semi; &NewLine;width&colon; 135px&semi; &NewLine;&rcub; &NewLine;&period;appreach&lowbar;&lowbar;gplink img &lbrace; &NewLine;height&colon; 40px&semi; &NewLine;width&colon; 134&period;5px&semi; &NewLine;&rcub; &NewLine;&commat;media only screen and &lpar;max-width&colon; 786px&rpar;&lbrace; &NewLine;&period;appreach&lbrace; &NewLine;margin&colon;20px 0&semi;&rcub; &NewLine;&period;appreach&lowbar;&lowbar;info &lbrace; &NewLine;font-size&colon; 11px &excl;important&semi;&rcub; &NewLine;p&period;appreach&lowbar;&lowbar;name &lbrace; &NewLine;font-size&colon; 15px&semi;&rcub;&rcub; &NewLine;<&sol;code><&sol;pre>&NewLine;<p>するとこのように表示されます<i class&equals;"far fa-hand-point-down"><&sol;i><&sol;p>&NewLine;<div class&equals;"appreach"><img src&equals;"https&colon;&sol;&sol;is5-ssl&period;mzstatic&period;com&sol;image&sol;thumb&sol;Purple118&sol;v4&sol;34&sol;8c&sol;6d&sol;348c6d93-7d1a-8b50-cb96-9a55ff7acf70&sol;source&sol;512x512bb&period;jpg" class&equals;"appreach&lowbar;&lowbar;icon"><&sol;p>&NewLine;<div class&equals;"appreach&lowbar;&lowbar;detail">&NewLine;<p class&equals;"appreach&lowbar;&lowbar;name">Wish &&num;8211&semi; ショッピングをもっと楽しく<&sol;p>&NewLine;<p class&equals;"appreach&lowbar;&lowbar;info"><span class&equals;"appreach&lowbar;&lowbar;developper">ContextLogic Inc&period;<&sol;span><span class&equals;"appreach&lowbar;&lowbar;price">無料<&sol;span><span class&equals;"appreach&lowbar;&lowbar;posted">posted with<a href&equals;"http&colon;&sol;&sol;mama-hack&period;com&sol;app-reach&sol;" title&equals;"アプリーチ" target&equals;"&lowbar;blank" rel&equals;"nofollow noopener noreferrer">アプリーチ<&sol;a><&sol;span><&sol;p>&NewLine;<&sol;div>&NewLine;<div class&equals;"appreach&lowbar;&lowbar;links"><a href&equals;"https&colon;&sol;&sol;itunes&period;apple&period;com&sol;jp&sol;app&sol;wish-&percnt;E3&percnt;82&percnt;B7&percnt;E3&percnt;83&percnt;A7&percnt;E3&percnt;83&percnt;83&percnt;E3&percnt;83&percnt;94&percnt;E3&percnt;83&percnt;B3&percnt;E3&percnt;82&percnt;B0&percnt;E3&percnt;82&percnt;92&percnt;E3&percnt;82&percnt;82&percnt;E3&percnt;81&percnt;A3&percnt;E3&percnt;81&percnt;A8&percnt;E6&percnt;A5&percnt;BD&percnt;E3&percnt;81&percnt;97&percnt;E3&percnt;81&percnt;8F&sol;id530621395&quest;mt&equals;8&amp&semi;uo&equals;4&amp&semi;at&equals;1000lmK9" target&equals;"&lowbar;blank" rel&equals;"nofollow noopener noreferrer" class&equals;"appreach&lowbar;&lowbar;aslink"><img src&equals;"https&colon;&sol;&sol;nabettu&period;github&period;io&sol;appreach&sol;img&sol;itune&lowbar;ja&period;svg"><&sol;a><a href&equals;"https&colon;&sol;&sol;play&period;google&period;com&sol;store&sol;apps&sol;details&quest;id&equals;com&period;contextlogic&period;wish" target&equals;"&lowbar;blank" rel&equals;"nofollow noopener noreferrer" class&equals;"appreach&lowbar;&lowbar;gplink"><img src&equals;"https&colon;&sol;&sol;nabettu&period;github&period;io&sol;appreach&sol;img&sol;gplay&lowbar;ja&period;png"><&sol;a><&sol;div>&NewLine;<&sol;div>&NewLine;<p>&commat;media only screen〜以下で、スマホ対応してるけど、結局PCも同じ表示になってますσ&lpar;&Hat;&lowbar;&Hat;&semi;&rpar;<&sol;p>&NewLine;<p>それでも不自然じゃない表示のされ方だと思うので、もうこれで手を打ちますー<span style&equals;"color&colon;&num;848484">(投げやり)<&sol;span><&sol;p>&NewLine;<p><&excl;-- ムコリンク広告 --><br &sol;>&NewLine;<ins class&equals;"adsbygoogle"&NewLine; style&equals;"display&colon;block"&NewLine; data-ad-client&equals;"ca-pub-7469898030696599"&NewLine; data-ad-slot&equals;"1695541118"&NewLine; data-ad-format&equals;"link"&NewLine; data-full-width-responsive&equals;"true"><&sol;ins><&sol;p>&NewLine;<p><script>&NewLine;&lpar;adsbygoogle &equals; window&period;adsbygoogle &vert;&vert; &lbrack;&rsqb;&rpar;&period;push&lpar;&lbrace;&rcub;&rpar;&semi;&NewLine;<&sol;script><&sol;p>&NewLine;<h2>アプリ紹介ツールの意味<&sol;h2>&NewLine;<p>Appleがアプリのアフィリエイトプログラムを終了し、アプリの紹介する意味を失ったブロガーがたくさん発生したんじゃないかなと思います。<&sol;p>&NewLine;<p>婿どの<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>はアフィリエイトで稼ぐタイプのブログを書いてるわけじゃないので、元々あまり関係ない話ですが、それでも読んでくれる人の為に見やすい形で情報を提供する事は、ユーザビリティーの観点から今でも重要なんじゃないかな〜と思います&lpar; •̀ &period;Ì« •́ &rpar;✧<&sol;p>&NewLine;<p>その意味で、とても見やすくアプリを紹介できる【<a href&equals;"http&colon;&sol;&sol;mama-hack&period;com&sol;app-reach&sol;">アプリーーーチ<&sol;a>】は使う価値アリアリだと思います!<&sol;p>&NewLine;<h2>アプリ紹介アプリーチまとめ<&sol;h2>&NewLine;<p><&sol;p>&NewLine;<div style&equals;"background&colon; &num;a3b9e0&semi; padding&colon; 5px 10px&semi; color&colon; &num;f7fcfe&semi; border-radius&colon; 10px 10px 0 0&semi;"><b><span style&equals;"font-size &colon; 12pt"> もいちどザックリ<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>まとめると…<&sol;span><&sol;b><&sol;div>&NewLine;<div style&equals;"background&colon; &num;f7fcfe&semi; padding&colon; 10px&semi; border&colon; 2px solid &num;a3b9e0&semi; border-radius&colon; 0 0 10px 10px&semi;">&NewLine;<ul>&NewLine;<li>LION MEDIA使用の婿どの<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>、デザインが崩れちゃうの巻<&sol;li>&NewLine;<li>ポチレバだとどうしてもうまく表示できなかった<&sol;li>&NewLine;<li>アプリーチだとCSS装飾でいい感じに対応出来そう<&sol;li>&NewLine;<li>アプリ紹介はブログのユーザビリティに効果あるはず<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;div>&NewLine;<p><&sol;p>&NewLine;<p>今回もまたまた特殊な記事を書いてしまいました。<br &sol;>&NewLine;婿どの<i class&equals;"fas fa-child" aria-hidden&equals;"true"><&sol;i>と同じ症状の人は少ないと思いますが、情報共有出来ればな〜と!<&sol;p>&NewLine;<p>それではまた!<&sol;p>&NewLine;<p><a href&equals;"https&colon;&sol;&sol;blogmura&period;com&sol;ranking&period;html&quest;p&lowbar;cid&equals;1054682"><img alt&equals;"ブログランキング・ブログ村" src&equals;"https&colon;&sol;&sol;xn--p9jk9143a&period;tokyo&sol;wp-content&sol;uploads&sol;2019&sol;01&sol;20190117050807&period;png"&sol;><&sol;a><&sol;p>&NewLine;

Advertisement
婿どの : 100年続く料理屋に婿入りしたのが運のつき。 趣味を掘り下げることでストレス発散しています。 お金をかけずにクリエイトするのが信条。 工作・分解・DIY・家庭菜園・バイク…つまりやりたい事をなんでも記事にするブログ! AB型の天パーがお通りだい! *Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。
\\ 関連記事はこちら //
X

Headline

You can control the ways in which we improve and personalize your experience. Please choose whether you wish to allow the following:

Privacy Settings
Advertisement