ネットぐるぐる目が回る

生活に関するちょっと得する事や、失敗した事、ヤフオクの使い方、ネットで見つけたお得な情報、損な情報。自分で感じた事を書いております。

スポンサーリンク

初心者はてなブログのサイドバーに記事を追加 カスタムに四苦八苦

スポンサーリンク

ブログサイドバーに記事を追加

ブログのサイドバーに記事を追加しました。

スマホで見たら、サイドバーは、あまり関係ないのかも知れないけれど。。。

最新記事を載せてるけど、他も載せたいな~と思い。

例えばですが、グーグルサーチコンソール(Google Search Console)の検索パフォーマンス順に記事を載せたいとか、自分の中で好きな記事とかヒットした記事などをミックスした物、3ヶ月くらいでいろいろと記事も変更できたらなんて。。。

 

自分のチョイスで記事を選ぶ

アクセス数やブックマーク数の多い順の注目記事は出来ても、自分でチョイスした記事を選んで表示するタイプがないので、なんとか出来ないかとグルグル見て勉強しました。

理解するまでに四苦八苦。

出来上がるまでに3時間くらいかかりました。

とりあえず検索してそのまま使えた物がなかったので自己流ですが。。。

 

そんな凝ったりする時間がない!!写真なしで文字だけでもいいって言う方は、

デザイン⇒カスタマイズ⇒サイドバー⇒モジュールを追加⇒リンクを選ぶ。

 

f:id:parotta:20190416162222j:plain

タイトル部分「おすすめの記事など」入れて、その下のリンクのタイトルに「ブログタイトル」を入れて、「そのページのULR」を入力して「変更を保存する」をクリックすれば簡単に出来ます。出来たのが下の写真です。出来ているかクリックして確かめてみてくださいね。

f:id:parotta:20190416162229j:plain

写真を入れる場合は時間がかかります。この下のやり方を読んで下さいね。

サイドバーに記事の追加方法

タイトルはクリック出来ないのですが、写真にクリックが付いてますので記事に行く事が出来ます。

 

①載せたい記事の写真をはてなフォトライフにアップロード。

ブログの右端にある四角のをクリックすると「はてなフォトライフが出ます」

 

f:id:parotta:20190416163127j:plain

 

上の方に出てるアップロード⇒ファイルを選択⇒自分の写真を選んで⇒下に出ているアップロードをクリック。

 

 f:id:parotta:20190416160429j:plain

f:id:parotta:20190416160402j:plain

 

アップロード出来たら写真枠左下に出ている選択にチェックを入れる。

ブログに貼り付けるにチェックを入れるとHTMLタグが出ますので、①コピーする。

 

f:id:parotta:20190416160334j:plain

f:id:parotta:20190416165034j:plain

②ブログに戻って、デザイン⇒カスタマイズ⇒サイドバー⇒モジュールを追加

⇒</>HTMLを選びます。

タイトル部分には、記事のタイトルを入れ

その下の枠に①コピーしたタグを入れます。

この先がちょっと難しい。 言葉が上手く伝わらなかったらごめんなさい。

 

 ③①のコピーしたタグそのままでは、記事がでません。

コピーしてきた最初の<。。。。。。。。>のタグを削除します。

<img src・・・・・・・・・・・・・・・・・・・・"></a>だけにします。

 

<a href="http://f.hatena.ne.jp/rtta/2010240"><img src="https://cdn-ak.f.st-hatena.com/iagestolife/p/rotta/2015/2004150.jpg" alt="20195202440"></a>

f:id:parotta:20190416164535j:plain




記事のULRをコピーしてきて、下記のタグの中に入れます。

<a href="記事のULR">

例<a href="https://www.guruguru.work/entry/2019/02/12/344">

 

 

そして先ほどの部分を付け加えます。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/rotta/20115/2004150.jpg" alt="20190415202440"></a>

 

 

完成がこちら

<a href="https://www.guruguru.work/entry/2019/02/12/344">

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/rotta/20115/2004150.jpg" alt="20190415202440"></a>

 

出来たら「適用」クリック⇒左端上に出ている「変更保存する」をクリックすると保存出来ます。

f:id:parotta:20190416165425j:plain

完成したら

ブログで出来ているかチェックしてみてくださいね。

f:id:parotta:20190416170644j:plain

 

説明が下手なので、出来なかったらごめんなさい。

とりあえず仕方を覚えておくのにブログに書いてみました。 

スポンサーリンク プライバシーポリシー お問い合わせ