Warning: Constant POST_PLUGIN_LIBRARY already defined in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/similar-posts/similar-posts.php on line 27
カテゴリー別のまとめバナーをサイドバーや記事下にいれてリンク | 思いだし にっき
サイトアイコン 思いだし にっき

カテゴリー別のまとめバナーをサイドバーや記事下にいれてリンク

<p>同じような分類の記事が増えてきたので、まとめを作りました。<br &sol;>&NewLine;バナーでリンクできるようにしてみようと思いさっそくバナー作り。<&sol;p>&NewLine;<p>以前タイトルバーの下に全記事一覧や、特定カテゴリへのリンクを作ったものの応用?になります。<br &sol;>&NewLine;すぐ忘れるのでこれも備忘録的に記事にしてみました(^^;<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>バナーを作る<&sol;h2>&NewLine;<p>1&period;画像を用意する。<&sol;p>&NewLine;<p>じぶんで描いてもいいし、無料素材を利用して写真やイラストを使うというのもある。<br &sol;>&NewLine;今回は無料素材から写真をダウンロードして使用。<br &sol;>&NewLine;その画像にスクリーンショットで撮ったExcelのアイコン画像をプラスしてみた。<br &sol;>&NewLine;ペイントだとどうもうまくいかないので、今回はExcelを利用。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>バナー画像の作り方<&sol;h3>&NewLine;<p><strong>写真&plus;画像&plus;文字<&sol;strong><&sol;p>&NewLine;<p>①最初の写真をExcelに挿入(リボンの「挿入」&Implies;「図」で画像を選択する)<&sol;p>&NewLine;<p>②スクリーンショットの画像は保存したら余白が白いままだったので背景を透過して再保存。<br &sol;>&NewLine;透過するにはこちらを参照 <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1314&period;html">WordPressのタイトルロゴ作成 PCにあるソフトで作るwebで透過も<&sol;a><&sol;p>&NewLine;<p>③これもExcelに挿入。<br &sol;>&NewLine;2枚を重ねて配置してから文字を挿入。<br &sol;>&NewLine;文字はワードアートで(挿入&Implies;ワードアート)<&sol;p>&NewLine;<p>④トリミングなどして全体を整えたら1枚の画像として保存する<&sol;p>&NewLine;<p><span style&equals;"color&colon; &num;3366ff&semi;"><strong>1枚の画像として保存するには?<&sol;strong><&sol;span><br &sol;>&NewLine;&Implies;まず、1つの画像をクリックしたら次に重ねた画像をShiftキーを押しながらクリック。<br &sol;>&NewLine;文字(ワードアート)もSiftキーを押しながらクリック。<&sol;p>&NewLine;<p>すると全部の画像にハンドルがついて、複数選択の状態になるのでこれをコピーする。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-2961 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;bn1&period;png" alt&equals;"複数画像の選択" width&equals;"505" height&equals;"377" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>ペイントを起動して貼りつける。<br &sol;>&NewLine;それをペイントで保存する。<br &sol;>&NewLine;これでバナー用画像のできあがり。<&sol;p>&NewLine;<p>作った画像は、WordPressのダッシュボードで「メディアライブラリ」に新規追加しておく<&sol;p>&NewLine;<p>・この時メディアライブラリに追加した画像をクリックすると添付ファイルの詳細画面になるので、<&sol;p>&NewLine;<p>この<span style&equals;"background-color&colon; &num;ffff99&semi;">画像のURLをメモ<&sol;span>しておく。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-2962 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;bn2&period;png" alt&equals;"バナー保存" width&equals;"505" height&equals;"239" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>バナー(画像)の準備ができたので、サイドバーと記事下に設置してみます。<br &sol;>&NewLine; <&sol;p>&NewLine;&NewLine;<&excl;-- WP QUADS v&period; 2&period;0&period;92 Shortcode Ad -->&NewLine;<div class&equals;"quads-location quads-ad" id&equals;"quads-ad" style&equals;"">&NewLine;<&sol;div>&NewLine;&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>サイドバーにバナーを表示する<&sol;h2>&NewLine;<p>バナーからリンクするための一覧を固定ページに作ります。<&sol;p>&NewLine;<p>方法はShortcodes Ultimateの投稿から一覧を作る方法を参照してください。<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1476&period;html">「Shortcodes Ultimate」プラグインで簡単画像つき一覧ページを作る<&sol;a><&sol;p>&NewLine;<p>・固定ページの一覧&Implies;編集で図のようになればOK。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-2963 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;bn3&period;png" alt&equals;"固定ページ" width&equals;"517" height&equals;"267" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>できたら公開します。<br &sol;>&NewLine;ここで<span style&equals;"background-color&colon; &num;ffff99&semi;">URLをメモ<&sol;span>しておきます。<&sol;p>&NewLine;<p>・ダッシュボードの「外観」&Implies;「ウィジェット」をクリック<&sol;p>&NewLine;<p>・ウィジェットの「テキスト」をサイドバーにドラッグします。<&sol;p>&NewLine;<p>・ドラッグした「テキスト」をクリックすると入力画面が表示されるので「内容」に次のように入力します<&sol;p>&NewLine;<p><span style&equals;"font-size&colon; 12pt&semi;">&lt&semi;a href&equals;”固定ページのURL”&gt&semi;<&sol;span><&sol;p>&NewLine;<p><span style&equals;"font-size&colon; 12pt&semi;">&lt&semi;img src&equals;”メディアライブラリに保存した画像のURL” &sol;&gt&semi;&lt&semi;&sol;a&gt&semi;<&sol;span><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-2965 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;bn4&period;png" alt&equals;"ウィジェット" width&equals;"438" height&equals;"484" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>・保存をクリックします。 サイトを表示してサイドバーに表示されていれば完了です。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;&NewLine;<&excl;-- WP QUADS v&period; 2&period;0&period;92 Shortcode Ad -->&NewLine;<div class&equals;"quads-location quads-ad" id&equals;"quads-ad" style&equals;"">&NewLine;<&sol;div>&NewLine;&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>記事の最初や最後にバナーを貼る<&sol;h2>&NewLine;<p>・投稿記事のバナーを入れたい場所に画像を挿入します。<br &sol;>&NewLine;投稿画面で「メディアの追加」&Implies;ライブラリから画像を選択<&sol;p>&NewLine;<p>・画像を選択してリンクを挿入で固定ページのURLを入力します。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-2966 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;bn5&period;png" alt&equals;"" width&equals;"509" height&equals;"272" &sol;><br &sol;>&NewLine; <&sol;p>&NewLine;<p>複数のページに同様のバナーを貼りたいときは、テキストモードの方でコピーして、他の投稿ページに貼りつけると簡単です。<&sol;p>&NewLine;<p><strong>そのほか、<&sol;strong><&sol;p>&NewLine;<p>固定ページをヘッダーに登録するのはこちらを参照してください<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1529&period;html">サイトマップをグローバルメニューに表示するⅡ設定<&sol;a><&sol;p>&NewLine;<p>簡単に画像の編集をするには(1枚の写真に文字をいれてリサイズするだけなど)PhotoScapeが便利です<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;827&period;html">PhotoScapeで画像を編集<&sol;a><br &sol;>&NewLine; <&sol;p>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-a">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;s&lowbar;j1&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">波空<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble"> 今回の作業は一度やってることばかりだけど復習かな(^^; <&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-b">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;icon&lowbar;n2&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">猫にゃん<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble"> ですな、すぐ忘れるし <&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine; <&sol;p>&NewLine;<p>文字だけのリンクでもいいけど、画像があるとわかりやすいですね、<br &sol;>&NewLine;時間の余裕がある時に、サイドバー用と記事用と別の画像にしたり、いろいろ工夫してみたいと思います。<br &sol;>&NewLine;少しでもお役にたてればと思います&lt&semi;&lpar;&lowbar; &lowbar;&rpar;&gt&semi;<&sol;p>&NewLine;<p> <br &sol;>&NewLine;前の記事 <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;2628&period;html">FTPソフト&vert;初心者にも使いやすいFileZillaのDLと設定<&sol;a><br &sol;>&NewLine;次の記事 <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;3043&period;html">お名前&period;comからXserverにドメイン移管 &vert; 完了まで<&sol;a><&sol;p>&NewLine;<p style&equals;"text-align&colon; right&semi;"><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;page-1472&period;html"><span style&equals;"color&colon; &num;0066cc&semi;">WordPress一覧へ<&sol;span><&sol;a><&sol;p>&NewLine;<p> <br &sol;>&NewLine; <br &sol;>&NewLine;<a href&equals;"http&colon;&sol;&sol;affiliate&period;freebieac&period;com&sol;link&period;php&quest;i&equals;580f01029d0b2&amp&semi;m&equals;584c839908d81"><img src&equals;"http&colon;&sol;&sol;affiliate&period;freebieac&period;com&sol;data&period;php&quest;i&equals;580f01029d0b2&amp&semi;m&equals;584c839908d81" width&equals;"728" height&equals;"90" border&equals;"0" &sol;><&sol;a><&sol;p>&NewLine;<p><a href&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><img src&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;img&sol;diary88&lowbar;31&period;gif" alt&equals;"" width&equals;"88" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a href&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">にほんブログ村<&sol;a><&sol;p>&NewLine;<p><a title&equals;"日々の出来事 ブログランキングへ" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200"><img src&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;img&sol;banner&sol;c&sol;banner&lowbar;1&sol;br&lowbar;c&lowbar;9200&lowbar;1&period;gif" width&equals;"110" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a style&equals;"font-size&colon; 12px&semi;" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200">日々の出来事 ブログランキングへ<&sol;a><&sol;p>&NewLine;&NewLine;

モバイルバージョンを終了