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
WordPressのサイドバーと固定ページにプロフィールを設定する | 思いだし にっき
サイトアイコン 思いだし にっき

WordPressのサイドバーと固定ページにプロフィールを設定する

<p><img class&equals;"aligncenter size-full wp-image-10905" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;1373753&lowbar;s&period;jpg" alt&equals;"" width&equals;"384" height&equals;"256" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p style&equals;"text-align&colon; left&semi;">WordPressのサイドバーにプロフィールを追加してみました。<&sol;p>&NewLine;<p>Seesaaブログではプロフィールの項目に入力したら、自動的にサイドバーに表示されていたので、そのつもりで設定もしていませんでした。<&sol;p>&NewLine;<p>なので、ウィジェットに簡易プロフィールを追加したので、その方法を備忘録的に書いてみました。<&sol;p>&NewLine;<p>あと、詳細なプロフィールも紹介する場合のプロフィール用固定ページの作り方も。<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>プロフィールの画像について<&sol;h2>&NewLine;<p>プロフィールに似顔絵やイラストなどが入っているブログが多くあります。<&sol;p>&NewLine;<p>画像があることでイメージしやすくなるのと、印象に残りやすいという利点があります。<&sol;p>&NewLine;<p>文字だけが並んでいるより、見る方としても楽しいというのもあります。<&sol;p>&NewLine;<p>画像入りのプロフィールを作ってみます<br &sol;>&NewLine; <br &sol;>&NewLine;プロフィール作成の前に、アイコンや似顔絵を用意します。<&sol;p>&NewLine;<p>絵を描くのが好きとか、得意という場合は、ペイントやグラフィックソフトで描くのもいいのですが、苦手という方もいると思います。<&sol;p>&NewLine;<p>そこで似顔絵やアバターを簡単に無料で作れる使いやすそうなところをいくつか挙げてみました。<&sol;p>&NewLine;<p>検索すると、もっといろいろなサイトがあります。<&sol;p>&NewLine;<p>作り方は、ほとんどがパーツ名やパーツアイコンをクリックしてパーツ一覧から選択するだけというやり方で簡単にできます。<&sol;p>&NewLine;<p>いろいろ試してみてください&lpar;&Hat;&Hat;&rpar;<&sol;p>&NewLine;<p>完成した画像は自分のパソコンに保存します。<&sol;p>&NewLine;<p>作った顔アイコンやアバターは、ツイッター、ミクシィ、Facebookなど、いろいろなサイトでも使用することができます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>簡単に作れるサイト<&sol;h3>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;nigaoemaker&period;jp&sol;generator&sol;"><strong>似顔絵メーカー <&sol;strong>NIGAOE MAKER<&sol;a><&sol;p>&NewLine;<p><img class&equals;"alignnone size-medium wp-image-1354" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf5-300x181&period;png" alt&equals;"似顔絵メーカー" width&equals;"300" height&equals;"181" &sol;><&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;moeruavatar&period;com&sol;">萌える&excl;&excl;アバターメーカー<&sol;a><&sol;p>&NewLine;<p><img class&equals;"alignnone size-medium wp-image-1355" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf6-300x279&period;png" alt&equals;"萌える アバターメーカー" width&equals;"300" height&equals;"279" &sol;><&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;illustmaker&period;abi-station&period;com&sol;">似顔絵イラストメーカー<&sol;a><&sol;p>&NewLine;<p><img class&equals;"alignnone size-medium wp-image-1356" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf7-300x276&period;png" alt&equals;"似顔絵イラストメーカー" width&equals;"300" height&equals;"276" &sol;><&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;pocky&period;jp&sol;enjoy&sol;icon&lowbar;generator&sol;"><strong>The Sharehappi <&sol;strong><strong>フェイスアイコンメーカー<&sol;strong><&sol;a><&sol;p>&NewLine;<p><img class&equals;"alignnone size-medium wp-image-1357" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf8-300x216&period;png" alt&equals;"フェイスアイコンメーカー" width&equals;"300" height&equals;"216" &sol;><&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;neutralx0&period;net&sol;tool&sol;bnmk&period;html">化け猫アイコンメーカー<&sol;a><&sol;p>&NewLine;<p><img class&equals;"alignnone size-medium wp-image-1358" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf9-300x248&period;png" alt&equals;"化け猫アイコンメーカー" width&equals;"300" height&equals;"248" &sol;><br &sol;>&NewLine; <&sol;p>&NewLine;<p>いろいろ試してみましたが、なかなか楽しいです。&lpar;&Hat;&Hat;&rpar;<&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>WordPressのダッシュボードを開きます。<&sol;p>&NewLine;<p>左側の一覧から<strong>「外観」&Implies;「ウィジェット」<&sol;strong>をクリックします。<&sol;p>&NewLine;<p><img class&equals;"wp-image-1359 size-medium aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf1-187x300&period;png" alt&equals;"ウィジェット" width&equals;"187" height&equals;"300" &sol;><&sol;p>&NewLine;<p> <br &sol;>&NewLine;「利用できるウィジェット」の一覧が表示されます。<&sol;p>&NewLine;<p>その中の<strong>「テキスト」<&sol;strong>の<strong>ウィジェット<&sol;strong>を「サイドバー」の欄にドラッグ&amp&semi;ドロップします。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-1360 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf2&period;png" alt&equals;"テキストウィジェットをドラッグ" width&equals;"621" height&equals;"399" &sol;><br &sol;>&NewLine; <br &sol;>&NewLine;<strong>サイドバー<&sol;strong>に<strong>テキストの項目が<&sol;strong>追加されます。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-1361 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf3&period;png" alt&equals;"テキストウィジェットの追加" width&equals;"414" height&equals;"556" &sol;><br &sol;>&NewLine; <br &sol;>&NewLine;追加された「テキスト」をクリックすると、<strong>「タイトル」と「内容」<&sol;strong>という<strong>入力欄<&sol;strong>が表示されます。<&sol;p>&NewLine;<p>タイトルの部分に<strong>「プロフィール」<&sol;strong>と入力します。<&sol;p>&NewLine;<p>※タイトルは他のことばでもOKです。<br &sol;>&NewLine; <br &sol;>&NewLine;「内容」のところには 図にあるようなことを入力します。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-1362 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf4&period;png" alt&equals;"テキスト内容" width&equals;"531" height&equals;"677" &sol;><br &sol;>&NewLine; <&sol;p>&NewLine;<p>作製した似顔絵などは「メディア」の「新規追加」でライブラリにアップロードしておきます。<&sol;p>&NewLine;<p>アップロードした画像をクリックすると詳細が表示されるので、そこの<&sol;p>&NewLine;<p>URLをメモしておきましょう<&sol;p>&NewLine;<p>(詳しくは「<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1325&period;html">WordPress-Stinger3のタイトルをロゴ画像に<&sol;a>」を参照してください)<&sol;p>&NewLine;<p>画像のURLの部分に次のように入力します<&sol;p>&NewLine;<p>画像サイズは好みで。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1363" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf14&period;png" alt&equals;"画像URLいれ方" width&equals;"652" height&equals;"139" &sol;><&sol;p>&NewLine;<p>img src&equals;””の「&&num;8221&semi;&&num;8221&semi;」の部分に<strong>アップロードした画像の<&sol;strong><strong>URL<&sol;strong><strong>を入力<&sol;strong>します。<&sol;p>&NewLine;<p>入力したら<strong>「自動的に段落追加する」<&sol;strong>にチェックを入れて保存をクリックします<&sol;p>&NewLine;<p>保存したら、サイトを表示で確認してみます。<&sol;p>&NewLine;<p>サイドバーにプロフィールが表示されます。<&sol;p>&NewLine;<p><img class&equals;"size-medium wp-image-1364 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf13-200x300&period;png" alt&equals;"プロフィール例" width&equals;"200" height&equals;"300" &sol;><&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>WordPressの固定ページを使って、詳細ページを作ってみます。<&sol;p>&NewLine;<p>ダッシュボードの左側のメニューから「固定ページ」&Implies;「新規追加」をクリックします。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-1365 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf10&period;png" alt&equals;"prf10" width&equals;"212" height&equals;"149" &sol;><br &sol;>&NewLine;いつもの記事を書くページになります。<&sol;p>&NewLine;<p>タイトルを入力します。<&sol;p>&NewLine;<p>プロフィールとわかるようなタイトルならなんでもOK。<&sol;p>&NewLine;<p>内容は、いつもの記事を書くように自分の紹介など書きます。<br &sol;>&NewLine; <br &sol;>&NewLine;<img class&equals;"size-full wp-image-1377 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf16&period;png" alt&equals;"prf16" width&equals;"571" height&equals;"409" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>書けたら「公開」をクリックします。<&sol;p>&NewLine;<p>サイドバーのプロフィールにリンクをつけて、クリックで固定ページにいけるようにします。<&sol;p>&NewLine;<p>サイドバーの<strong>テキストウィジェット<&sol;strong>を開き、<strong>固定ページのURLを追加<&sol;strong>します。<&sol;p>&NewLine;<p>ダッシュボードのメニューから固定ページ一覧を開き、今作ったプロフィールの詳細ページを開きます。<&sol;p>&NewLine;<p>画面上部のパーマリンクがURLです。<&sol;p>&NewLine;<p>これをコピーしてウィジェットに貼りつけます<&sol;p>&NewLine;<p> <br &sol;>&NewLine;追加する際に<strong>HTML<&sol;strong>の<strong>リンクタグ<&sol;strong>を使います。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1367" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf15&period;png" alt&equals;"固定ページへリンク" width&equals;"736" height&equals;"98" &sol;><&sol;p>&NewLine;<p> <br &sol;>&NewLine;<img class&equals;"size-full wp-image-1368 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;prf12&period;png" alt&equals;"固定ページへリンク" width&equals;"531" height&equals;"677" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>リンクタグを貼り付けたらプロフィールの下に<strong>固定ページ<&sol;strong>への<strong>リンク<&sol;strong>が表示されるようになります。<&sol;p>&NewLine;<p>これでサイドバーのプロフィールと詳細プロフィールのリンクができました。<br &sol;>&NewLine; <br &sol;>&NewLine;わたしは、まだ、サイドバーのプロフィールしか作っていませんが、いずれ作りたいと思っています。<&sol;p>&NewLine;<p>投稿していくと、興味をもってくれる人もいるかと思います。<&sol;p>&NewLine;<p>そんなとき<br &sol;>&NewLine;「こいつ、だれだ?!」と、<br &sol;>&NewLine;読んでくれた方が思ったときに詳細プロフィールがあるといいですよね<&sol;p>&NewLine;<p>なにをどう書くかまだな考え中なので(^^;・・・いずれということで<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>前の記事 <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1325&period;html">WordPress-Stinger3のタイトルをロゴ画像に<&sol;a> へ<&sol;p>&NewLine;<p>次の記事 <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1457&period;html">特定カテゴリーの画像入り一覧ページを作る<&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;<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;

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